本文为b站视频《尚硅谷前端基础教程（含css3+html5）》课堂笔记整理，笔记以代码形式呈现，包含网页渲染后截图并整理成文字版本便于观看。
一、语义化标签——（1） 块元素与行内元素举例
1.标签：
（1）在网页中HTML专门用来负责网页的结构
所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式
（2）标题标签：
h1~h2 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下，标题标签只会用到h1~h3，h4~h6很少用
2.块元素：
在页面中独占一行的元素称为块元素(block element)
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
（1）hgroup标签：
hgroup标签用来为标题分组可以将一组相关的标题同事放入到ghroup
<hgroup>
<h1>回鄉偶書二首</h1>
<h2>其一</h2>
</hgroup>
（2）p标签：
p标签表示页面中的一个段落，p也是一个块元素
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
3.行内元素
在页面中不会独占一行的元素称为行内元素（inline element）
（1）em标签
em标签用于表示语音语调的一个加重
<p>今天天气<em>真</em>不错！</p>
（2）strong标签：
strong表示强调，重要内容！
<p>你今天必需要<strong>完成作业！</strong></p>
（3）blockquote标签：
blockquote 表示一个长引用，会换行
鲁迅说：
<blockquote>
这句话我是从来没有说过的！
</blockquote>
（4）q标签：
q 表示一个短引用，不会换行
子曰<q>学而时习之，不亦说乎。</q>
（5）br标签：
br 表示一个换行
子曰<q>学而时习之，不亦说乎。</q>
<!-- br 表示一个换行 -->
<br>
<br>
今天天气真不错
| 快捷键：br*2 ——><br><br> |
（5）乱码问题
记事本默认使用GB2312,用VS code打开会乱码，此时更改字符集为UTF-8即可
笔记源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
在网页中HTML专门用来负责网页的结构
所以在使用HTML标签时，应该关注的是标签的语义，而不是它的样式
标题标签：
h1~h2 一共有六级标题
从h1~h6重要性递减，h1最重要，h6最不重要
h1在网页中的重要性仅次于title标签，一般情况下一个页面中只会有一个h1
一般情况下，标题标签只会用到h1~h3，h4~h6很少用
在页面中独占一行的元素称为块元素(block element)
-->
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!--
hgroup标签用来为标题分组可以将一组相关的标题同事放入到ghroup
-->
<hgroup>
<h1>回鄉偶書二首</h1>
<h2>其一</h2>
</hgroup>
<!--
p标签表示页面中的一个段落
p也是一个块元素
-->
<p>在p标签中的内容就表示一个段落</p>
<p>在p标签中的内容就表示一个段落</p>
<!--
em标签用于表示语音语调的一个加重
在页面中不会独占一行的元素称为行内元素（inline element）
-->
<p>今天天气<em>真</em>不错！</p>
<!--
strong表示强调，重要内容！
-->
<p>你今天必需要<strong>完成作业！</strong></p>
鲁迅说：
<!-- blockquote 表示一个长引用，会换行 -->
<blockquote>
这句话我是从来没有说过的！
</blockquote>
<!-- q 表示一个短引用，不会换行 -->
子曰<q>学而时习之，不亦说乎。</q>
<!-- br 表示一个换行 -->
<br>
<br>
今天天气真不错
记事本默认使用GB2312,用VS code打开会乱码，此时更改字符集为UTF-8即可
</body>
</html>笔记网页截图：
二、语义化标签——（2 ）块元素与行内元素详解
1.块元素（block element）
- 在网页中一般通过块元素进行布局
2.行内元素（inline element）
- 行内元素主要用来包裹文字
3.块元素与行内元素的嵌套关系
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
4.浏览器修正
浏览器解析网页时，会自动对网页中不符合规定的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body之外的子元素
</head>
<body>
</body>
</html>
<h1>我就要写在Html外面</h1>
笔记源代码：
<!DOCTYPE html>
<html lang="en">
<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>语义化标签2</title>
</head>
<body>
<!--
块元素（block element）
- 在网页中一般通过块元素进行布局
行内元素（inline element）
- 行内元素主要用来包裹文字
- 一般情况下会在块元素中放行内元素，而不会在行内元素中放块元素
- 块元素中基本上什么都能放
- p元素中不能放任何的块元素
浏览器解析网页时，会自动对网页中不符合规定的内容进行修正
比如：
标签写在了根元素的外部
p元素中嵌套了块元素
根元素中出现了除head和body之外的子元素
-->
</body>
</html>
<h1>我就要写在Html外面</h1>笔记网页截图：
三、语义化标签——（3 ）布局标签
1. 布局标签（结构化语义标签）
（1）一些举例
header 表示网页的头部
main 表示网页的主题部分(一个网页中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时用section
<header> 11 </header>
<main> 22 </main>
<footer> 33 </footer>
<nav>44</nav>
<aside> 55 </aside>
<article>66</article>
<section></section>
（2）目前主要使用的布局标签
div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何语义，一般用于在网页中选中文字
<div></div>
<span></span>笔记源代码 ：
<!DOCTYPE html>
<html lang="en">
<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>语义化标签3</title>
</head>
<body>
<!--
布局标签（结构化语义标签）
-->
<!--
header 表示网页的头部
main 表示网页的主题部分(一个网页中只会有一个main)
footer 表示网页的底部
nav 表示网页中的导航
aside 和主体相关的的其他内容（侧边栏）
article 表示一个独立的文章
section 表示一个独立的区块，上边的标签都不能表示时用section
div 没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span 行内元素，没有任何语义，一般用于在网页中选中文字
-->
<header> 11 </header>
<main> 22 </main>
<footer> 33 </footer>
<nav>44</nav>
<aside> 55 </aside>
<article>66</article>
<section></section>
<div></div>
<span></span>
</body>
</html>笔记网页截图：
