块元素、行内元素、HTML5新增标签(本文为个人学习笔记，内容整理自哔哩哔哩UP主【非学者勿扰】的公开课程。 ＞ 所有知识点归属原作者，仅作非商业用途分享)
块元素、行内元素、HTML5新增标签
块元素与行内元素(内联元素)
HTML5出现之前，经常把元素按照块级元素的内联元素来区分，在HTML5中，元素不再按照这种方式来区分，而是按照内容模型来区分：
1.元数据型(metadata content)
2.区块型(sectioning content)
3.标题型(heading content)
4.文档流型(flow content)
5.语句型(phrasing content)
6.内嵌型(embedded content)
7.交互型(interactive content)
元素不属于任何一个类别，被称为穿透的，元素可能属于不止一个类别，称为混合的。
详细参考地址
虽然HTML5的版本，元素分类更细致了，但是这对初学者并不友好，所以我们仍然按照块元素和内联元素做区分，这对我们的布局起到了至关重要的作用。
内联元素和块元素的区别
| 块级元素 | 内联元素 |
|---|---|
| 块元素会在页面中独占一行(自上向下垂直排列) | 行内元素不会独占页面中的一行，只占自身的大小 |
| 可以设置width、height属性 | 行内元素设置width、height属性无效 |
| 一般块级元素可以包含行内元素和其他块级元素 | 一般内联元素包含内联元素不包含块级元素 |
常见块级元素与内联元素
| 常见的块级元素 | 常见的内联元素 | 行内块级元素(特点：不换行、能够识别宽高) |
|---|---|---|
| div | a | button |
| form | b | img |
| h1~h6 | em | input |
| hr | i | / |
| p | span | / |
| table | strong | / |
| ul | del | / |
| 等 | 等 | 等 |
行内元素(内联元素)、块级元素总结
1. 内联元素（Inline Elements）：
• 内联元素不会独占一行，它们只占据其内容所需的空间。
• 内联元素通常用于文本内容
• 内联元素可以与其他内联元素或文本在同一行显示。
• 内联元素的width和height属性通常无效，因为它们的大小由内容决定。
2.块级元素（Block Elements）：
• 块级元素会独占一行，即使内容很少也会从新的一行开始。
• 块级元素通常用于定义页面的结构
• 块级元素可以包含内联元素和其他块级元素。
• 块级元素的width和height属性有效，可以设置具体的宽度和高度。
HTML5新增标签
- HTML5是HTML最新的修订版本，2014年10月由万维网联盟(W3C)完成标准制定
在HTML5出现之前，我们一般采用DIV+CSS布局我们的页面，但是这样的布局方式不仅使我们的文档结构
不够清晰，而且**不利于搜索引擎爬虫对我们页面的爬取**。为了解决上述缺点，HTML5新增了很多新的语义化标签
div标签
原版布局
-
<div>容器元素，也是页面中见到的最多的元素
-
<div>标签：
- 用途:<div>是一个通用的容器元素，没有特定的语义含义。它主要用于布局和样式目的。
- 布局：<div>常用于创建布局结构，如导航栏、内容区域、侧边栏等。它可以包含任何类型的元素，包括其他<div>。
- 样式：<div>可以应用 CSS 样式，用于控制元素的布局、大小、位置等。
- JavaScript：<div>也可以用于 JavaScript 操作，如动画、隐藏/显示等。
div实现:
-
-
以上这些都是原版的，需要在div首标签，声明header、nav、article、section、silder、footer
HTML5新布局
-
新布局就是单独将header、nav、article、section、silder------(aside)、footer功能不变，增加为独立的标签
SEO优先采用新版本的HTML5布局
section
-
与div标签功能相似的标签还有section
- <section>标签：
- 用途：<section>用于表示文档中的一个独立区域或章节，具有明确的语义含义。
- 语义：<section>通常包含一个标题（如<h1>到<h6>），尽管这不是强制性的。它用于组织内容，使其更有意义，比如文章、章节、页脚等。
- 结构：<section>用于定义页面的结构，使其更易于理解和导航。
- 可访问性：使用<section>可以提高页面的可访问性，因为它为内容提供了清晰的结构，使得屏幕阅读器和其他辅助技术能够更容易地识别和传达页面的不同部分。
HTML5新增标签总结
| 标签 | 用途 |
|---|---|
| header | 头部(一般一个网页只能有一个头部) |
| nav | 导航 |
| section | 定义文档中的节，比如章节、页眉、页脚 |
| aside | 侧边栏 |
| footer | 脚部 |
| article | 代表一个独立的、完整的相关内容块，例如一篇完整的论坛帖子，一篇博客文章、一个用户评论等 |
- div：用于布局和样式目的，是一个通用的容器元素。
- section： 用于表示文档中的一个独立区域或章节，具有明确的语义含义。
- 新版本的布局在chrome等新浏览器有效，若是IE浏览器老版本会无法识别
- SEO优先采用新版本的HTML5布局