拨开云雾见天日守得云开见月明

文章目录

1 一、前言
- 1.1 深入了解网站开发
- 1.2 web前端的三大核心技术
2 二、HTML
3 css

一、前言

深入了解网站开发

UI设计师 : 设计稿
web前端开发工程师(H5开发)
- 设计稿 -> 代码
- 数据库里的数据 -> 显示到页面
- HTML + CSS
  - HTML : 结构
  - CSS : 样式
web后端开发工程师

web前端的三大核心技术

HTML: 结构
CSS: 样式
JavaScript: 行为

二、HTML

HTML基础结构与属性

超文本标记语言(HyperText Markup Language)，标准通用标记语言下的一个应用。是网页制作必备的编程语言。

HTML ：超文本标记语言
* 超文本 : 文本内容 + 非文本内容 ( 图片、视频、音频等 )
* 标记 : <单词>
* 语言 : 编程语言

标记也叫做标签：
* \<header>
* \<footer>

写法分成两种：
* 单标签 \<header>
* 双标签 \<header>\</header>

创建标签的快捷键：单词 + tab键 -> <单词>
标签是可以上下排列，也可以组合嵌套。

HTML常见标签：http://www.html5star.com/manual/html5label-meaning/

标签的属性：来修饰标签的，设置当前标签的一些功能。
\<标签属性=”值” 属性2=”值2″>

HTML初始代码

每一个html文件都需要添加初始代码，初始代码就是无论你写什么样的网页，这些代码都是要有的，这就是初始代码。

<!DOCTYPE html>           <-- 文档声明 : 告诉浏览器这是一个html文件 -->
<html lang="en">          <--  html文件的最外层标签：包裹着所有html标签代码 lang="en"表示是一个英文网站 lang="zh-CN"表示一个中文网站 -->
    <head>
        <meta charset="UTF-8">    <-- 元信息：是编写网页中的一些辅助信息 charset="UTF-8"国际编码，让网页不出现乱码的情况 -->
        <title>Document</title>   <--  设置网页的标题 -->
    </head>
    <body>
        显示网页内容的区域
    </body>
</html>

HTML语义化

所谓HTML语义化指的是，根据网页中内容的结构，选择适合的HTML标签进行编写。

好处:
1. 在没有CSS的情况下，页面也能呈现出很好的内容结构。
2. 有利于SEO，让搜索引擎爬虫更好的理解网页。
3. 方便其他设备解析（如屏幕阅读器、盲人阅读器等）。
4. 便于团队开发与维护。

标题与段落

标题 -> 双标签 : \<h1\>\</h1\>   ...  \<h6\>\</h6\>

在一个网页中，h1标题最重要，并且一个.html文件中只能出现一次h1标签。

h5、h6标签在网页中不经常使用。

段落 -> 双标签 : \<p\>\</p\>

文本修饰标签

强调 -> 双标签 : \<strong>\</strong>、\<em>\</em>
区别：
1. 写法和展示效果是有区别的，一个加粗、一个斜体
2. strong的强调性更强，em的强调性稍弱。

下标 : \<sub>\</sub>
上标 : \<sup>\</sup>

删除文本 : \<del>\</del>
插入文本 : \<ins>\</ins>
注：一般情况下，删除文本都是和插入文本配合使用的。

图片标签与图片属性

img -> 单标签
- src : 引入图片的地址。
- alt : 当图片出现问题的时候，可以显示一段友好的提示文字。
- title : 提示信息
- width、height : 图片的大

跳转链接

a -> 双标签 \<a>\</a>
- href属性 : 链接的地址
- target属性 : 可以改变链接打开的方式，默认情况下：在当前页面打开 _self 新窗口打开 _blan
\<base> -> 单标签：作用就是改变链接的默认行为的。

跳转锚点

两种做法
    1. \#号 + id属性
    2. \#号 + name属性（注意name属性加给的是a标签

特殊符号

编写一些文本时，经常会遇到输入法无法输入的字符，如®（注册商标）、©（版权符）等，还有往一段文字中加入多个空格时，页面并不会解析出多个空格。这些无法输入和空格字符都是特殊字符，在HTML中，为这些特殊字符准备了专门的代码。

无序列表

\<ul>、\<li> ：列表的最外层容器、列表项
注：ul和li必须是组合出现的，他们之间是不能有其他标签的

    type属性 : 改变前面标记的样式( 一般都是用CSS去控制 )
    （http://www.w3school.com.cn/tags/att_ul_type.asp）

有序列表

\<ol>、\<li> ：列表的最外层容器、列表项

注：有序列表用的非常少，经常用的是无序列表，无序列表可以去代替有序列表。

type属性 : 改变前面标记的样式( 一般都是用CSS去控制 ) （http://www.w3school.com.cn/tags/att_ol_type.asp）

定义列表

\<dl>：定义列表
\<dt>：定义专业术语或名词
\<dd>：对名词进行解释和描述

嵌套列表

列表之间可以互相嵌套形成多层级列表。

表格标签

\<table>：表格的最外层容器
\<tr> ：定义表格行
\<th>：定义表头
\<td>：定义表格单元
\<caption>：定义表格标题

语义化标签：\<tHead>、\<tBody>、\<tFood>

注：在一个table中，tBody是可以出现多次的，但是tHead、tFood只能出现一次。

表格属性

border ：表格边框
cellpadding ：单元格内的空间
cellspacing ：单元格之间的空间
rowspan ：合并行
colspan ：合并列
align ：左右对齐方式 left、center、right
valign ：上下对齐方式 top、middle、bottom

表单标签

\<form> ：表单的最外层容器
\<input>：标签用于搜集用户信息，根据不同的type属性值，展示不同的控件，如输入框、密码框、复选框等。

还有一些常见的属性：
checked、disabled、name、for …

\<textarea> ：多行文本框
\<select>、\<option>：下拉菜单
\<label>：辅助表单

表格表单组合

表格表单之间可以互相组合形成数据展示效果。

\<div>与\<span>

div （块）：
div全称为division，“分割、分区”的意思，\<div>标签用来划分一个区域，相当于一块区域容器，可以容纳段落、标题、表格、图像等各种网页元素。即HTML中大多数的标签都可以嵌套在\<div>标签中，\<div>中还可以嵌套多层\<div>，用来将网页分割成独立的、不同的部分，来实现网页的规划和布局。
span（内联）
用来修饰文字的，div与span都是没有任何默认样式的，需要配合CSS才行。

css

CSS 基础语法

格式：

选择器{ 属性1 : 值1 ; 属性2 : 值2 }

单位：

px -> 像素( pixel ) 、
% -> 百分比
外容器1 -> 600px 当前容器 50% -> 300px
外容器2 -> 400px 当前容器 50% -> 200px

基本样式：
width : 宽
height : 高
background-color : 背景
CSS注释：

/ * CSS注释的内容 */

内联样式与内部样式

内联（行内、行间）样式

在html标签上添加style属性来实现的

内部样式

在\<style>标签内添加的样式

外部样式

\<link>标签
* rel
* href

@import
注：这种方式有很多问题，不建议使用。

CSS中的颜色表示法

单词表示法 : red blue green yellow …
十六进制表示法 : #000000 #ffffff
RGB三原色表示法 : rgb(255,255,255);
获取颜色的工具：
- 提取颜色的下载地址：https://www.baidufe.com/fehelper
- photoshop工具

CSS背景样式

background-color：背景颜色
background-image：背景图片
- url(背景地址)
- 默认：会水平垂直都铺满背景图
background-repeat：背景图片的平铺方式
- repeat-x x轴平铺
- repeat-y y轴平铺
- repeat ( x , y 都进行平铺，默认值 )
- no-repeat 都不平
background-position：背景位置
- x y : number(px、%) | 单词
- x : left、center、right
- y : top、center、bottom
background-attachment：背景图随滚动条的移动方式
- scroll : 默认值 ( 背景位置是按照当前元素进行偏移的 )
- fixed ( 背景位置是按照浏览器进行偏移的

CSS边框样式

border-style：边框的样式
- solid : 实线
- dashed : 虚线
- dotted : 点
border-width：边框的大小
- px ..
border-color：边框的颜色
- red #f00 …

注：边框也可以针对某一天边进行单独设置 : border-left-style : 中间是方向 left、right、top、bottom

颜色：透明颜色 transparent

CSS文字样式

font-family：字体类型
英文字体：Arial , ‘Times New Roman’
中文字体：微软雅黑 , 宋体
中文字体的英文名称
微软雅黑 : ‘Microsoft YaHei’
宋体 : SimSun
衬线体与非衬线体

注意点：
1.多个字体类型的设置目的
2.引号的添加的目

默认 : 16px
写法 : number(px) | 单词 ( small large … 不推荐使用)

注：字体大小一般为偶数。

font-weight：字体粗细

模式：正常( normal ) 加粗 ( bold )
写法：单词(normal、bold) | number ( 100 200 ….. 900 , 100到500都是正常的，600都900都是加粗的 )

font-style：字体样式

模式：正常 ( normal ) 斜体 ( italic )
写法：单词 ( normal 、 italic )
注：oblique也是表示斜体，用的比较少，一般了解即可。
区别：1.italic 带有倾斜属性的字体的才可以设置倾斜操作。
2.oblique 没有倾斜属性的字体也可以设置倾斜操作。

color：字体颜色

CSS段落样式

text-decoration：文本装饰
下划线 : underline
删除线 :line-through
上划线 : overline
不添加任何装饰 : none
注：添加多个文本修饰：line-through underline overline
text-transform：文本大小写（针对英文段落）
- 小写：lowercase
- 大写：uppercase
- 只针对首字母大写：capitalize
text-indent：文本缩进
- 首行缩进
- em单位：相对单位，1em永远都是跟字体大小相同
text-align：文本对齐方式
- 对齐方式 : left 、right、center、justify（两端点对齐）
line-height：定义行高
- 定义 : 包括字体大小，上边距，下边距
- 默认行高：不是固定值，而是变化的。根据当前字体的大小再不断的变化。
- 取值: 1. number( px ) | scale ( 比例值 , 跟文字大小成比例的 )
letter-spacing：定义字间距
word-spacing : 定义词间距 ( 针对英文 )
强制折行 : (针对英文)
1. word-break : break-all; (非常强烈的折行)
2. word-wrap : break-word;(不是那么强烈的折行，会产生一些空白区域)

CSS复合样式

一个CSS属性只控制一种样式，叫做单一样式。
一个CSS属性控制多种样式，叫做复合样式。

复合样式
- background
- border
- font

复合的写法，是通过空格的方式实现的。复合写法有的是不需要关心顺序，例如background、border；有的是需要关心顺序，例如font。

background : red url() repeat 0 0;
border : 1px red solid;
1. font :
  注：最少要有两个值 size family
  weight style size family √
  style weight size family √
  weight style size/line-height family √

注：尽量不要混写，如果非要混写，那么一定要先写复合样式再写单一样式。

CSS选择器

ID选择器

css : #elem{}
html : id=“elem”

注：

ID是唯一值，在一个页面中只能出现一次，出现多次是不符合规范的。
命名规范，字母 _ – 数字（命名的第一位不能是数字）。
命名方式
- 驼峰写法 : searchButton (小驼峰) SearchButton (大驼峰) searchSmallButton
- 短线写法：search-small-button
- 下划线写法：search_small_button

CLASS选择器

css : .elem{}
html : class =“elem”

注：

class选择器是可以复用的。
可以添加多个class样式。
多个样式的时候，样式的优先级根据CSS决定，而不是class属性中的顺序。
标签+类的写法

标签选择器(TAG选择器)

css : div{}
html : \<div>\</div>

使用的场景：
1. 去掉某些标签的默认样式时
2. 复杂的选择器中，如层次选择器

群组选择器

可以通过逗号的方式，给多个不同的选择器添加统一的CSS样式，来达到代码的复用。
css : div , p , span{}

通配选择器

*{ } -> div,ul,li,p,h1,h2….{}

注：尽量避免使用通配选择器，因为会给所有的标签添加样式，慎用。

使用的场景：
1. 去掉所有标签的默认样式时

层次选择器

后代 : M N
父子 : M > N
兄弟 : M ~ N : 当前M下面的所有兄弟N标签
相邻 : M + N : 当前M下面相邻的N标签

属性选择器

M[attr] {}
= : 完全匹配
*= : 部分匹配
^= : 起始匹配
$= : 结束匹配

伪类选择器

CSS伪类用于向某些元素添加特殊的效果。一般用于初始样式添加不上的时候，用伪类来添加。

M:伪类{}
:link 访问前的样式 ( 只能添加给a标签 )
:visited 访问后的样式 ( 只能添加给a标签 )
:hover 鼠标移入时的样式 (可以添加给所有的标签)
:active 鼠标按下时的样式 (可以添加给所有的标签)

注：
一般的网站都只设置
a{} ( link visited active ) a:hover{}

:after、:before 通过伪类的方式给元素添加一段文本内容，使用content属性
:checked、:disabled 、:focus 都是针对表单元素的

结构性伪类选择器
nth-of-type() nth-child()
角标是从1开始的，1表示第一项，2表示第二项 | n值表示从0到无穷大
first-of-type
last-of-type
only-of-type

        nth-of-type()和nth-child()之间的区别
            type : 类型
            child : 孩

CSS样式继承

文字相关的样式可以被继承
布局相关的样式不能被继承 ( 默认是不能继承的，但是可以设置继承属性 inherit 值 )

CSS优先级

相同样式优先级

当设置相同样式时，后面的优先级较高，但不建议出现重复设置样式的情况。

内部样式与外部样式

内部样式与外部样式优先级相同，如果都设置了相同样式，那么后写的引入方式优先级高。

单一样式优先级

style行间 > id > class > tag > * > 继承

   注：style行间 权重 1000
        id       权重 100
        class    权重 10
        tag      权重

!important

提升样式优先级，非规范方式，不建议使用。

群组优先级

群组选择器与单一选择器的优先级相同，靠后写的优先级高。

层次优先级
- 权重比较
  - ul li .box p input{} 1 + 1 + 10 + 1 + 1
  - .hello span #elem{} 10 + 1 + 100
- 约分比较
  - ul li .box p input{} li p input{}
  - .hello span #elem{} #elem{}

CSS盒子模型

组成 :

content -> padding -> border -> margin
 物品        填充物     包装盒      盒子与盒子之间的间距

content : 内容区域 width和height组成的
padding : 内边距(内填充)
只写一个值： 30px (上下左右)
写两个值 : 30px 40px ( 上下、左右 )
写四个值 : 30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
padding-left
padding-right
padding-top
padding-bottom
margin : 外边距(外填充)
只写一个值： 30px (上下左右)
写两个值 : 30px 40px ( 上下、左右 )
写四个值 : 30px 40px 50px 60px（上、右、下、左）
单一样式只能写一个值：
margin-left
margin-right
margin-top
margin-bottom
注：
1. 背景色填充到margin以内的区域（不包括margin区域）
2. 文字在content区域添加。
3. padding不能为负数，而margin可以为负数。
box-sizing:
盒尺寸，可以改变盒子模型的展示形态。
默认值： content-box : width、height -> content
border-box : width、height -> content padding border
```
使用的场景：    
    1. 不用再去计算一些值
    2. 解决一些100%的问题
```
盒子模型的一些问题：
1. margin叠加问题，出现在上下margin同时存在的时候。会取上下中值较大的作为叠加的值。
2. margin传递问题，出现在嵌套的结构中，只是针对margin-top的问题。
扩展：
1. margin左右自适应是可以的，但是上下自适应是不行的。( 如果想实现上下自适应的话，需要在第二大部分来进行学习 )
2. width、height不设置的时候，对盒子模型的影响，会自动去计算容器的大小，节省代码。

注：

背景颜色会填充到margin以内的区域。
文字会在content区域。
padding不能出现负值，margin是可以出现负值。

margin叠加

当给两个盒子同时添加上下外边距的时候，就会出现叠加的问题。这个问题，只在上下有，左右是没有这个叠加问题的。

解决方案：
1. BFC规范
2. 想办法只给一个元素添加间距。

margin传递

margin传递的问题只会出现在嵌套的结构中，且只有margin-top会有传递的问题，其它三个方向是没有传递问题的。

解决方案：

BFC规范
给父容器加边框。
margin换成padding。

标签分类

按类型

block : 块 div、p、ul、li、h1 …
- 独占一行
- 支持所有样式
- 不写宽的时候，跟父元素的宽相同
- 所占区域是一个矩
inline : 内联 span 、a、em、strong、img …
- 挨在一起的
- 有些样式不支持，例如：width、height、margin、padding
- 不写宽的时候，宽度由内容决定
- 所占的区域不一定是矩形
- 内联标签之间会有空隙，原因：换行产生的
inline-block : 内联块
- 挨在一起，但是支持宽高

注：布局一般用块标签，修饰文本一般用内联标签

按内容

Flow：流内容
Metadata：元数据
Sectioning：分区
Heading：标题
Phrasing：措辞
Embedded：嵌入的
Interactive：互动的

按显示

替换元素 :浏览器根据元素的标签和属性，来决定元素的具体显示内容。
- img、input …
非替换元素 : 将内容直接告诉浏览器，将其显示出来。
- div、h1、p …

显示框类型

display

block
inline
inline-block
none
区别:
display:none 不占空间的隐藏
visibility:hidden 占空间的隐藏

标签嵌套规范

块标签可以嵌套内联标签
块标签不一定能嵌套块标签
内联标签不能嵌套块标签
a标签是一个例外

        ul、li
        dl、dt、dd
        table、tr、td

        块能够嵌套内联
            <div>
                <span></span>
                <a href="#"></a>
            </div> 
        块嵌套块
            <div>
                <div></div>
            </div>
            特殊：
                错误的写法：
                <p>
                    <div></div>
                </p>

        内联是不能嵌套块
            错误的写法：
            <span>
                <div></div>
            </span>

            特殊：
            正确的写法：
            <a href="#">
                <div></div>
            </a>

溢出隐藏

overflow
- visible : 默认
- hidden
- scroll
- auto
- x轴、y轴
  - overflow-x、overflow-y针对两个轴分别设置

透明度与手势

opacity
- 0(透明) ~ 1(不透明)
- 0.5(半透明)
- 注：占空间、所有的子内容也会透明
rgba
- 0 ~ 1
- 注：可以让指定的样式透明，而不影响其他样式
cursor
- default: 默认箭头
- 自定义鼠标样式
  - 准备图片： .cur 、 .ico
  - cursor : url(./img/cursor.ico),auto;

最大、最小宽高

min-width、max-width
min-height、max-height

%单位：换算 -> 已父容器的大小进行换算的

一个容器怎么适应屏幕的高 : 容器加height:100%; body:100%; html:100%;

html,body{ height:100%;}
.contrainer{ height:100%;}

注：强化对百分比单位的理解

CSS默认样式

有些标签有默认样式，有些标签没有默认样式。

没有默认样式：
div、span、…

有默认样式：

body ->  marign : 8px
h1 ->  margin : 上下 21.440px
        font-weight : bold
p  ->  margin : 上下 16px
ul ->  margin : 上下 16px  padding : 左 40px
        默认点：list-style : disc
a ->   text-decoration: underline;

CSS reset

简单的CSS reset：

*{ margin:0; padding:0; }
- 优点：不用考虑哪些标签有默认的margin和padding
- 缺点：稍微的影响性能
- body,p,h1,ul{ margin:0; padding:0;}

ul{ list-style:none; } 
a{ text-decoration:none; color:#666; }

img{ display:block; }
- 问题的现象：图片跟容器底部有一些空隙。
  - 内联元素的对齐方式是按照文字基线对齐的，而不是文字底线对齐的。
  - vertical-align: baseline; 基线对齐方式，默认值
  - img{ vertical-align:bottom;} 解决方式是推荐的

float浮动

文档流

文档流是文档中可显示对象在排列时所占用的位置。

float特性

加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值
- left
- right
- none( 默认 )
float注意点
- 只会影响后面的元素。
- 内容默认提升半层。
- 默认宽根据内容决定。
- 换行排列。
- 主要给块元素添加，但也可以给内联元素添加。、
利用clear属性清除float浮动
- 上下排列：clear属性，表示清除浮动的，left、right、both
- 嵌套排列：
  - 固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
  - 父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
  - overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
  - display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
  - 设置空标签 : 不推荐 , 会多添加一个标签。
  - after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。

position定位

position特性
css position属性用于指定一个元素在文档中的定位方式。top、right、 bottom、left 属性则决定了该元素的最终位置。
position取值
- static（默认）
- relative
- absolute
- fixed
- sticky
relative相对定位
- 如果没有定位偏移量，对元素本身没有任何影响
- 不使元素脱离文档流
- 不影响其他元素布局
- left、top、right、bottom是相对于当前元素自身进行偏移的
absolute绝对定位
- 使元素完全脱离文档流
- 使内联元素支持宽高（让内联具备块特性）
- 使块元素默认宽根据内容决定（让块具备内联的特性）
- 如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）
fixed固定定位
- 使元素完全脱离文档流
- 使内联元素支持宽高（让内联具备块特性）
- 使块元素默认宽根据内容决定（让块具备内联的特性）
- 相对于整个浏览器窗口进行偏移，不受浏览器滚动条的影响
sticky黏性定位
- 在指定的位置，进行黏性操作。
z-index定位层级
- 默认层级为0
- 嵌套时候的层级问题

CSS添加省略号

width : 必须有一个固定的宽
white-space : nowrap 不让内容折行
overflow : hidden 隐藏溢出的内容
text-overflow : ellipsis 添加省略号

CSS Sprite

特性
CSS雪碧也叫做CSS精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去加载。
好处
- 可以减少图片的质量，网页的图片加载速度快
- 减少图片的请求的次数，加快网页的打开

CSS圆角

border-radius: 给标签添加圆角。

一	二	三	四	五	六	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29

一、 前言