零基础的人学html5,零基础前端学习历程记录（3）需要掌握的第一门基础知识Html5概念普及2...

# HTML常用标签的分类

### 块级标签

- 块级标签有

- div 区分大模块

- h1-h6 标题

- p 段落

- ul>li 无序列表

- ol>li 有序列表

- dd>dt dd 自定义列表

- table>tr>td 表格>行>列

- 块级标签的特点

- 独占一行，从上到下排布

- 可以设置CSS盒子模型的所有属性(width/height/border/margin/padding)

- 当不设置宽高时，宽度继承父元素的宽度 ，高度是由内容决定的

- 可以嵌套其他元素

- P标签不能嵌套P标签，也不能嵌套其他块级标签

- dt,dd,h1-h6，一般不会嵌套块级元素，一般嵌套行内标签(a/img)

### 行内标签

#### 行内标签

- 行内标签有

- span 区分行内小模块

- em/i 斜体

- strong/b 加粗

- a 超链接、锚点

- label 描述表单功能

- sup 上标

- sub 下标

行内标签的特点

- 在一行显示，从左向有排布

- 不可以设置宽高(width/height)

- 不可以嵌套块级标签，可以嵌套行内标签

- 在编辑代码时，行内元素与行内元素之间出现空格或回车时，会有间隙问题

- 解决办法：给父元素或者body设置font-size:0;会出现css继承问题，子元素会继承font-size:0;需要给子元素重新设置font-size值即可

- 基线对齐问题

- 给所有的行内元素设置 vertical-align

#### 行内块级标签

- 行内块级标签有

- img 图片

- input 添加表单功能

- textarea 文本域

- select 下拉框

- 行内块级标签的特点

- 在同一行显示，从左向右排布

- 可以设置宽高 (width/height)

-  在编辑代码时，行内元素与行内元素之间出现空格或回车时，会有间隙问题

- 解决办法：给父元素或者body设置font-size:0;会出现css继承问题，子元素会继承font-size:0;需要给子元素重新设置font-size值即可

-  基线对齐问题

-  给所有的行内元素设置 vertical-align

### 块级标签与行内标签的相互转化

**#### display  **

#### inline 行内

#### inline-block 行内块

#### block 块级，显示

#### none 隐藏、消失

#### vertical-align 改变行内元素的对齐方式

- top所有同级或平级元素之间，去找高度最高的顶部进行对齐

- middle所有同级或平级元素之间，去找高度最高的中部进行对齐

- bottom所有同级或平级元素之间，去找高度最高的底部进行对齐

- 百分比%/像素px也是可以的

### html5新增标签

作用：让结构一目了然

|标签|描述|

|--|--|

|header|头部区域|

|footer|尾部区域|

|nav|导航区域|

|aside|侧边栏|

|section|区分大模块等同div|

|video|视频|

|audio|音频|

|articel|文章|

|figure|配图|

|figcaption|配图说明|

|main|主体区域|

src="" 标签属性，视频、音频路径/地址

controls 让控件显示

autoplay 自动播放

loop 循环播放

**HTML5新增标签的分类**

块级标签有哪些？

header / footer / nav / aside / section / main / figure / figcaption / article

行内块级标签有哪些？

audio / video