标签：a (双标签)
href ：指定要跳转到的具体目标。
target ：控制跳转时如何打开页面，常用值：self ：在本窗口打开，blank ：在新窗口打开。
id ：元素的唯一标识，可用于设置锚点。
name ：元素的名字，写在 a 标签中，也能设置锚点
作用
1. 跳转到页面
  Alt text
2. 跳转到文件
  Alt text
3. 跳转到锚点
4. 唤起指定应用
  Alt text

7. 列表

有序列表

<ol>
  <li>xxx</li>
  <li>xxx</li>
  <li>xxx</li>
</ol>

无序列表

<ul>
  <li>成都</li>
  <li>上海</li>
  <li>西安</li>
  <li>武汉</li>
</ul>

列表嵌套

<ul>
  <li>成都</li>
  <li>
    上海
    <ul>
      <li>外滩</li>
      <li>
        东方明珠
      </li>
      <li>迪士尼乐园</li>
    </ul>
  </li>
  <li>西安</li>
  <li>武汉</li>
</ul>

8. 表格

结构
Alt text
标签
table ：表格
caption ：表格标题
thead ：表格头部
tbody ：表格主体
tfoot ：表格注脚
tr ：每一行
th 、 td ：每一个单元格
备注：表格头部中用 th ，表格主体、表格脚注中用： td

代码

<table border="1">
  <!-- 表格标题 -->
  <caption>
    学生信息
  </caption>
  <!-- 表格头部 -->
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>年龄</th>
      <th>民族</th>
      <th>政治面貌</th>
    </tr>
  </thead>

  <!-- 表格主体 -->
  <tbody>
    <tr>
      <td>张三</td>
      <td>男</td>
      <td>18</td>
      <td>汉族</td>
      <td>团员</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>女</td>
      <td>20</td>
      <td>满族</td>
      <td>群众</td>
    </tr>
  </tbody>
  <!-- 表格脚注 -->
  <tfoot>
    <tr>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>共计：4人</td>
    </tr>
  </tfoot>
</table>

属性
属性
补充
rowspan ：指定要跨的行数。
colspan ：指定要跨的列数。

9. 表单

10. HTML 实体

二、HTML5

1. 新增语义化标签

a. 新增布局标签

header：整个页面，或部分区域的头部
footer：整个页面，或部分区域的底部
nav：导航
article：文章、帖子、杂志、新闻、博客、评论等
section：页面中的某段文字，或文章中的某段文字（里面文字通常里面会包含标题）
aside：侧边栏
main：文档的主要内容 ( WHATWG 没有语义， IE 不支持)，几乎不用

artical 里面可以有多个 section
section 强调的是分段或分块，article 比 section 更强调独立性

b. 新增状态标签

meter 标签
属性：high，low，max，min，optimum，value
progress 标签
属性：max，value

c. 新增列表标签

datalist：用于搜索框的关键字提示
details：用于展示问题和答案，或对专有名词进行解释
summary：写在 details 的里面，用于指定问题或专有名词

d. 新增文本标签

ruby：包裹需要注音的文字
rt：写注音
mark：标记

2. 新增表单功能

a. 表单控件新增属性

placeholder：提示文字，适用于文字输入类的表单控件。
required：表示该输入项必填，适用于除按钮外其他表单控件。
autofocus：自动获取焦点，适用于所有表单控件。
autocomplete：自动完成，可以设置为 on 或 off ，适用于文字输入类的表单控件。
注意：密码输入框、多行输入框不可用。
pattern：填写正则表达式，适用于文本输入类表单控件。
注意：多行输入不可用，且空的输入框不会验证，往往与 required 配合。

b. input 新增属性值

email：邮箱类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
url： url 类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
number：数字类型的输入框，表单提交时会验证格式，输入为空则不验证格式。
search：搜索类型的输入框，表单提交时不会验证格式。
tel：电话类型的输入框，表单提交时不会验证格式，在移动端使用时，会唤起数字键盘。
range：范围选择框，默认值为 50 ，表单提交时不会验证格式。
color：颜色选择框，默认值为黑色，表单提交时不会验证格式。
date：日期选择框，默认值为空，表单提交时不会验证格式。
month：月份选择框，默认值为空，表单提交时不会验证格式。
week：周选择框，默认值为空，表单提交时不会验证格式。
time：时间选择框，默认值为空，表单提交时不会验证格式。
datetime-local：日期+时间选择框，默认值为空，表单提交时不会验证格式。

c. form 标签新增属性

novalidate：如果给 form 标签设置了该属性，表单提交的时候不再进行验证。

3. 新增多媒体标签

a. 视频 < video>

b. 音频 < audio>

一、CSS2

1. CSS 基本选择器

1.1 通配选择器

作用：可以选中所有的 HTML 元素。

* {
  color: orange;
  font-size: 40px;
}

1.2 元素选择器

作用：为页面中某种元素统一设置样式。

h1 {
  color: orange;
  font-size: 40px;
}

1.3 类选择器

作用：根据元素的 class 值，来选中某些元素。

/* 选中所有class值为speak的元素 */
.speak {
  color: red;
}

/* 选中所有class值为answer的元素 */
.answe {
  color: blue;
}

1.4 ID 选择器

作用：根据元素的 id 属性值，来精准的选中某个元素。

/* 选中id值为earthy的那个元素 */
#earthy {
  color: red;
  font-size: 60px;
}

2. CSS 复合选择器

2.1 交集选择器

作用：选中同时符合多个条件的元素。

/* 选中：类名为beauty的p元素，有标签名，标签名必须写在前面 */
p.beauty {
  color: blue;
}

/* 选中：类名包含rich和beauty的元素 */
.rich.beaut {
  color: green;
}

2.2 并集选择器

作用：选中多个选择器对应的元素，又称：分组选择器。

/* 选中id为peiqi，或类名为rich，或类名为beauty的元素 */
#peiqi,
.rich,
.beauty {
  font-size: 40px;
  background-color: skyblue;
  width: 200px;
}

2.3 后代选择器

作用：选中指定元素中，符合要求的后代元素。

/* 选中ul中的所有li */
ul li {
  color: red;
}

/* 选中ul中所有li中的a */
ul li a {
  color: orange;
}
/* 选中类名为subject元素中的所有li */
.subject li {
  color: blue;
}
/* 选中类名为subject元素中的所有类名为front-end的li */
.subject li.front-en {
  color: blue;
}

2.4 子代选择器

作用：选中指定元素中，符合要求的子元素（儿子元素）。（先写父，再写子）

/* div中的子代a元素 */
div > a {
  color: red;
}

/* 类名为persons的元素中的子代a元素 */
.persons > a {
  color: red;
}

2.5 兄弟选择器

相邻兄弟选择器：选中指定元素后，符合条件的相邻兄弟元素。

/* 选中div后相邻的兄弟p元素 */
div + p {
  color: red;
}

通用兄弟选择器：选中指定元素后，符合条件的所有兄弟元素。

/* 选中div后的所有的兄弟p元素 */
div ~ p {
  color: red;
}

2.6 属性选择器

作用：选中属性值符合一定要求的元素。
语法：
1. [属性名] 选中具有某个属性的元素。
2. [属性名="值"] 选中包含某个属性，且属性值等于指定值的元素。
3. [属性名^="值"] 选中包含某个属性，且属性值以指定的值开头的元素。
4. [属性名$="值"] 选中包含某个属性，且属性值以指定的值结尾的元素。
5. [属性名*=“值”] 选择包含某个属性，属性值包含指定值的元素。

选择器的优先级：行内样式 > ID 选择器 > 类选择器 > 元素选择器 > 通配选择器。
!important 的权重，大于行内样式，大于所有选择器，权重最高

3. CSS 三大特性

层叠性：如果发生了样式冲突，那就会根据一定的规则（选择器优先级），进行样式的层叠（覆
盖）。
继承性：元素会自动拥有其父元素、或其祖先元素上所设置的某些样式。
优先继承离得近的。
优先级： !important > 行内样式 > ID 选择器 > 类选择器 > 元素选择器 > * > 继承的样
式。

4. CSS 常用属性

4.1 像素

我们的电脑屏幕是，是由一个一个“小点”组成的，每个“小点”，就是一个像素（px）。

像素点越小，呈现的内容就越清晰、越细腻。

4.2 颜色

表示方式一：英文单词，red、 blue。
表示方式二：rgb 或 rgba，使用红、黄、蓝这三种光的三原色进行组合。
表示方式三：HEX 或 HEXA，依然是通过红、绿、蓝色进行组合，只不过要用 6 位（分成 3 组）来表达。
表示方式四：HSL 或 HSLA，通过色相、饱和度、亮度，来表示一个颜色，格式为：hsl(色相,饱和度,亮度)。

4.3 字体

font-size：字体大小
font-family：字体类型
font-style：是否为斜体
font-weight：字体粗细

4.4 文本

color：颜色
letter-spacing：字母间距
word-spacing：单词间距
text-decoration：修饰线
text-indent：首字母缩进
text-align：水平对齐方式
line-height：行高
vertical-align：垂直对齐方式

4.5 列表

4.6 表格

4.7 背景

4.8 鼠标

5. CSS 盒子模型

5.1 元素的显示模式

块元素（block）
1. 主体结构标签：< html> 、 < body>
2. 排版标签：< h1> ~ < h6> 、 < hr> 、 < p> 、 < pre> 、 < div>
3. 列表标签：< ul> 、 < ol> 、 < li> 、 < dl> 、 < dt> 、 < dd>
4. 表格相关标签：< table> 、 < tbody> 、 < thead> 、 < tfoot> 、 < tr> 、 < caption>
5. < form> 与 < option>
行内元素（inline）
1. 文本标签：< br> 、 < em> 、 < strong> 、 < sup> 、 < sub> 、 < del> 、 < ins>
2. < a> 与 < label>
行内块元素（inline-block）
1. 图片：< img>
2. 单元格：< td> 、 < th>
3. 表单控件：< input> 、 < textarea> 、 < select> 、 < button>
4. 框架标签：< iframe>

通过 CSS 中的 display 属性可以修改元素的默认显示模式

5.2 盒子模型

padding：内边距
Alt text
margin：外边距
Alt text

二、CSS3

1. CSS3 新增盒模型属性

1.1 box-sizing 怪异盒模型

content-box：width 和 height 设置的是盒子内容区的大小。（默认值）
border-box：width 和 height 设置的是盒子总大小。（怪异盒模型）

4.2. resize 调整盒子大小

none：不允许用户调整元素大小。 (默认)
both：用户可以调节元素的宽度和高度。
horizontal：用户可以调节元素的宽度。
vertical：用户可以调节元素的高度。

4.3. box-shadow 盒子阴影

box-shadow: h-shadow v-shadow blur spread color inset;

4.4. opacity 不透明度

opacity 属性能为整个元素添加透明效果，值是 0 到 1 之间的小数， 0 是完全透明， 1 表示完全不透明。

2. CSS3 新增背景属性

background-origin：设置背景图的原点
background-clip：设置背景图的向外裁剪的区域
background-size：设置背景图的尺寸
backgorund：复合属性

3. CSS3 新增边框属性

border-radius：边框圆角

4. CSS3 新增文本属性

text-shadow：给文本添加阴影
white-space：设置文本换行方式
text-overflow：设置文本内容溢出时的呈现模式