一. HTML高级元素

1. 列表元素

1.1 认识列表元素

在开发一个网页的过程中，很多数据都是以列表的形式存在的

1.2 列表的实现方式

事实上现在很多的列表功能采用了不同的方案来实现:
- 方案一: 使用div元素来实现(比如汽车之家, 知乎上的很多列表)
- 方案二: 使用列表元素, 使用元素语义化的方式实现
事实上现在很多的网站对于列表元素没有很强烈的偏好, 更加不拘一格, 按照自己的风格来布局:
- 原因是列表元素默认的CSS样式, 让它用起来不是非常方便
- 比如列表元素往往有很多的限制, ul/ol中只能存放li, li再存放其他元素, 默认样式等
- 虽然我们可以通过重置样式来解决, 但是我们更喜欢自由的div
HTML提供了3组常用的用来展示列表的元素
- 有序列表：ol、li
- 无序列表：ul、li
- 定义列表：dl、dt、dd

1.3 有序列表 ol - li

ol（ordered list）
- 有序列表，直接子元素只能是li
li （list item）
- 列表中的每一项

1.4 无序列表 ul - li

ul （unordered list）
- 无序列表，直接子元素只能是li
li（list item）
- 列表中的每一项

1.5 定义列表 dl - dt - dd

dl （definition list）
- 定义列表，直接子元素只能是dt、dd
dt (definition term)
- term是项的意思，列表中每一项的项目名
dd（definition description）
- 列表中每一项的具体描述，是对dt的描述、解释、补充
- 一个dt后面一般紧跟1个或者多个dd

1.6 所有案例的思路

先完成HTML元素结构
重置CSS样式（如body、a、ul等）
先整体，再局部
- 顺序：按照从外往里，从上到下
去除重复的代码（css)
- 讲重复的样式放到一个单独的class中（.icon）
- 不同的样式抽到不同的class（.new、.hot）

2. 表格元素

2.1 认识表格

在网页中, 对于某些内容的展示使用表格元素更为合适和方便

2.2 表格常见的元素

table
- 表格
tr （table row）
- 表格中的行
td （table data)
- 行中的单元格
另外表格有很多相关的属性可以设置表格的样式, 但是已经不推荐使用了

2.3 表格中合并边单元格的边框

border-collapse
- 用来决定表格的边框是分开的还是合并的
  - separate（默认值）
    - 每个单元格拥有独立的边框
  - collapse
    - 相邻的单元格共用同一条边框
合并单元格的边框
- table { border-collapse: collapse}

2.4 表格的其他语义化元素

thead表格的表头
tbody表格的主体
tfoot表格的页脚
caption表格的标题

th表格的表头单元格

html

<table>
  <caption>热门股票</caption>
  <thead>
    <tr>
      <th>排名</th>
      <th>股票名称</th>
      <th>股票代码</th>
      <th>股票价格</th>
      <th>股票的涨跌</th>
    </tr>
  </thead>
  <tbody>...</tbody>
  <tfoot>...</tfoot>
</table>

2.5 单元格合并

在某些特殊的情况下, 每个单元格占据的大小可能并不是固定的
- 一个单元格可能会跨多行或者多列来使用
比如下面的表格
这个时候我们就要使用单元格合并来完成
单元格合并分成两种情况:
- 跨列合并：使用colspan
  - 在需要跨列的单元格写上colspan属性, 并且省略掉合并的td
- 跨行合并：使用rowspan
  - 在需要跨行的单元格写上rowspan属性, 并且省略掉后面tr中的td

3. 表单元素

3.1 认识表单

3.2 常见的表单元素

表单元素	含义
`form`	表单，一般情况下，其他表单相关元素都是它的后代元素
`input`	单行文本输入框、单选框、复选框、按钮等元素
`textarea`	多行文本框
`select`、`option`	下拉选择框
`button`	按钮
`label`	表单元素的标题

3.3 input元素的使用

表单元素使用最多的是input元素（行内替换元素）

input有如下常见的属性：

属性	含义
`type`	`input`的类型
`readonly`	只读
`disabled`	禁用
`checked`	默认被选中，只有当`type`为`radio`或`checkbox`时可用
`name`	名字，在提交数据给服务器时，用于区分数据类型
`value`	取值

type属性的值

`input`的类型	含义
`text`（默认）	文本输入框（明文输入）
`password`	文本输入框（密文输入）
`radio`	单选框
`checkbox`	复选框
`button`	按钮
`reset`	重置
`submit`	提交表单数据给服务器
`file`	文件上传
`checkbox`	当页面加载时，自动聚焦

type类型的其他取值和input的其他属性, 查看文档:
- https://developer.mozilla.org/zhCN/docs/Web/HTML/Element/Input

3.4 布尔属性

常见的布尔属性有disabled、checked、readonly、multiple、autofocus、selected

布尔属性可以没有属性值，写上属性名就代表使用这个属性

如果要给布尔属性设值，值就是属性名本身

html

<input type="text" readonly="readonly" disabled="disabled" autofocus="autofocus">
<!-- 等价于上面的写法 -->
<input type="text" readonly disabled autofocus>

3.5 表单按钮

表单可以实现按钮效果：
- 普通按钮（type=button）：使用value属性设置按钮文字
- 重置按钮（type=reset）：重置它所属form的所有表单元素（包括input、textarea、select）
- 提交按钮（type=submit）：提交它所属form的表单数据给服务器（包括input、textarea、select）
- 也可以通过按钮来实现：

3.6 input和label的关系

label元素一般跟input配合使用，用来表示input的标题
label可以跟某个input绑定，点击label就可以激活对应的input变成选中

3.7 radio的使用

type类型设置为radio，变成单选框：

name值相同的radio才具备单选（互斥）功能

默认选中：checked

html

<label for="male">
  <input id="male" type="radio" name="sex" value="male">男
</label>
<label for="female">
  <input id="female" type="radio" name="sex" value="female">女
</label>

3.8 checkbox的使用

type类型设置为checkbox，变成多选框：

属于同一种类型的checkbox，name值要保持一致

默认选中：checked

html

<div>
  您的爱好:
  <label for="basketball">
    <input id="basketball" type="checkbox" name="hobby" checked value="basketball">篮球
  </label>
  <label for="football">
    <input id="football" type="checkbox" name="hobby" value="football">足球
  </label>
</div>

3.9 textarea的使用

textarea的常用属性
- cols：列数
- rows：行数
缩放的CSS设置
- resize
  - 禁止缩放：none
  - 水平缩放：horizontal
  - 垂直缩放：vertical
  - 水平垂直缩放：both

3.10 select和option的使用

option是select的子元素，一个option代表一个选项
option常用属性
- multiple：可以多选
- size：显示多少项
option常用属性
- selected：默认选中

3.11 form常见的属性

form通常作为表单元素的父元素：
- form可以将整个表单作为一个整体来进行操作
- 比如对整个表单进行重置
- 比如对整个表单的数据进行提交
form常见的属性如下:
- action
  - 用于提交表单数据的请求URL
- method
  - 请求方式(get和post)，默认get
- target
  - 在什么地方打开URL（参考a元素的target）
请求方式的对比

二. Emmet语法

1. 认识Emmet

Emmet (前身为Zen Coding) 是一个能大幅度提高前端开发效率的一个工具
- 在前端开发的过程中，一大部分的工作是写HTML、CSS代码, 如果手动来编写效果会非常低
- VsCode内置了Emmet语法,在后缀为.html/.css中输入缩写后按Tab/Enter键即会自动生成相应代码

! 和 html:5可以快速生成完整结构的html5代码

html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

2. > (子代) 和 + (兄弟)

html

<!-- div>ul>li -->
<div>
  <ul>
    <li></li>
  </ul>
</div>

<!-- div+div>p>span+i -->
<div></div>
<div>
  <p><span></span><i></i></p>
</div>

<!-- div+p+ul>li -->
<div></div>
<p></p>
<ul>
  <li></li>
</ul>

3. *（多个）和 ^（上一级）

html

<!-- ul>li*5 -->
<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

<!-- div+div>p>span^h1 -->
<div></div>
<div>
  <p><span></span></p>
  <h1></h1>
</div>

<!-- div+div>p>span^^h1 -->
<div></div>
<div>
  <p><span></span></p>
</div>
<h1></h1>

4.（）分组

html

<!-- div>header>ul>li*2^^footer>p -->
<div>
  <header>
    <ul>
      <li></li>
      <li></li>
    </ul>
  </header>
  <footer>
    <p></p>
  </footer>
</div>

5. 属性(id属性、class属性、普通属性) {}（内容）

html

<!-- #header+#main>.container>a[href]+h2.title -->
<div id="header"></div>
<div id="main">
  <div class="container">
    <a href=""></a>
    <h2 class="title"></h2>
  </div>
</div>

!-- a[href="abc"]{abc} -->
<a href="abc">abc</a>

6. $（数字）

html

<!-- ul>li.item$*5{$} -->
<ul>
  <li class="item1">1</li>
  <li class="item2">2</li>
  <li class="item3">3</li>
  <li class="item4">4</li>
  <li class="item5">5</li>
</ul>

7. 隐式标签

html

<!-- .box+.container -->
<div class="box"></div>
<div class="container"></div>

<!-- ul>.item*3 -->
<ul>
  <li class="item"></li>
  <li class="item"></li>
  <li class="item"></li>
</ul>

8. CSS Emmet

css

/* w100 */
width: 100px;

/* dib */
display: inline-block;

/* w20+h30+m40+p50 */
width: 20px;
height: 30px;
margin: 40px;
padding: 50px;

/* m20-30-40-50 */
margin: 20px 30px 40px 50px;

/* bd1#cs */
border: 1px #ccc solid;

三. 结构伪类

1. :nth-child

:nth-child(1)
- 是父元素中的第1个子元素
- span:nth-child(1)
  - 表示父元素中第一个子元素且名字为span的标签被选中
:nth-child(2n)
- n代表任意正整数和0
- 是父元素中的第偶数个子元素（第2、4、6、8......个）
- 跟:nth-child(even)同义
:nth-child(2n + 1)
- n代表任意正整数和0
- 是父元素中的第奇数个子元素（第1、3、5、7......个）
- 跟:nth-child(odd)同义
nth-child(-n + 2)
- 代表前2个子元素

2. :nth-last-child

:nth-last-child()的语法跟:nth-child()类似，不同点是:nth-last-child()是从最后一个子元素开始往前计算
- :nth-last-child(1)，代表倒数第1个子元素
- :nth-last-child(-n + 2)，代表最后2个子元素

3. :nth-of-type

:nth-of-type()用法跟:nth-child()类似
- 不同点是**:nth-of-type()计数时只计算同类型的元素**
:nth-last-of-type用法跟:nth-of-type()类似
- 不同点是:nth-last-of-type()是从最后一个这种类型的子元素开始往前计数

4. 其他结构伪类

其他常见的伪类(了解):
- :first-child，等同于:nth-child(1)
- :last-child，等同于:nth-last-child(1)
- :first-of-type，等同于:nth-of-type(1)
- :last-of-type，等同于:nth-last-of-type(1)
- :only-child，是父元素中唯一的子元素
- :only-of-type，是父元素中唯一的这种类型的子元素
下面的伪类偶尔回使用：
- :root，根元素，就是HTML元素
- :empty，代表里面完全空白的元素

5. 否定伪类

:not()的格式是:not(x)
- x是一个简单选择器
- 元素选择器、通用选择器、属性选择器、类选择器、id选择器、伪类（除否定伪类）
:not(x)表示除x以外的元素

一. HTML高级元素 ​

1. 列表元素 ​

1.1 认识列表元素 ​

1.2 列表的实现方式 ​

1.3 有序列表 ol - li ​

1.4 无序列表 ul - li ​

1.5 定义列表 dl - dt - dd ​

1.6 所有案例的思路 ​

2. 表格元素 ​

2.1 认识表格 ​

2.2 表格常见的元素 ​

2.3 表格中合并边单元格的边框 ​

2.4 表格的其他语义化元素 ​

2.5 单元格合并 ​

3. 表单元素 ​

3.1 认识表单 ​

3.2 常见的表单元素 ​

3.3 input元素的使用 ​

3.4 布尔属性 ​

3.5 表单按钮 ​

3.6 input和label的关系 ​

3.7 radio的使用 ​

3.8 checkbox的使用 ​

3.9 textarea的使用 ​

3.10 select和option的使用 ​

3.11 form常见的属性 ​

二. Emmet语法 ​

1. 认识Emmet ​

2. > (子代) 和 + (兄弟) ​

3. *（多个）和 ^（上一级） ​

4.（）分组 ​

5. 属性(id属性、class属性、普通属性) {}（内容） ​

6. $（数字） ​

7. 隐式标签 ​

8. CSS Emmet ​

三. 结构伪类 ​

1. :nth-child ​

2. :nth-last-child ​

3. :nth-of-type ​

4. 其他结构伪类 ​

5. 否定伪类 ​

一. HTML高级元素

1. 列表元素

1.1 认识列表元素

1.2 列表的实现方式

1.3 有序列表 ol - li

1.4 无序列表 ul - li

1.5 定义列表 dl - dt - dd

1.6 所有案例的思路

2. 表格元素

2.1 认识表格

2.2 表格常见的元素

2.3 表格中合并边单元格的边框

2.4 表格的其他语义化元素

2.5 单元格合并

3. 表单元素

3.1 认识表单

3.2 常见的表单元素

3.3 input元素的使用

3.4 布尔属性

3.5 表单按钮

3.6 input和label的关系

3.7 radio的使用

3.8 checkbox的使用

3.9 textarea的使用

3.10 select和option的使用

3.11 form常见的属性

二. Emmet语法

1. 认识Emmet

2. > (子代) 和 + (兄弟)

3. *（多个）和 ^（上一级）

4.（）分组

5. 属性(id属性、class属性、普通属性) {}（内容）

6. $（数字）

7. 隐式标签

8. CSS Emmet

三. 结构伪类

1. :nth-child

2. :nth-last-child

3. :nth-of-type

4. 其他结构伪类

5. 否定伪类