目录
[1、h1-h6 标题标签](#1、h1-h6 标题标签)
[2、p 段落标签](#2、p 段落标签)
[3、center 居中标签](#3、center 居中标签)
4、header、main、footer、aside、article、section
块标签：主要用来搭建网页结构框架
特点：1、独占一行 2、可以设置宽高 3、如果宽度未设置则是其父元素100% ；如果高度没设置，则高度由内容撑开
常见的块标签：
h1-h6,p,center,header,main,footer,aside,article,section,hgroup,div,ul,li,ol,dl,dt,dd
1、h1-h6 标题标签
默认样式：字体加粗，大小有变化，从h1-h6字体会不断变小，标签上下有20px左右的外边距
语义：对浏览器来说被标题标签包裹的内容就是标题，语义从h1-h6逐步降低，其中h1语义最重一般一个页面只用一次h1，比如logo
html
<h1>我是一个一级标题</h1>
<h2>我是一个二级标题</h2>
<h3>我是一个三级标题</h3>
<h4>我是一个四级标题</h4>
<h5>我是一个五级标题</h5>
<h6>我是一个六级标题</h6>
2、p 段落标签
默认样式：上下有16像素的外边距
语义：p标签包裹的内容就是一个段落
注意：一般只包含文字，不可以包含块标签
这里用的插件生成的假文
jw+数字和lorem+数字，生成对应数字的中英假文
3、center 居中标签
默认样式：居中显示
语义：凡是要居中的内容，都可以写在center里面
html
<center>
<p>不小者光为，天斯洪攻冷自血怒接出，的回。</p>
<p>说秦的就文，一中过心，仍选挟的护词感有。</p>
</center>
4、header、main、footer、aside、article、section
header：网页的头部
main：网页的主体
footer：网页的底部
aside：页面的侧边栏，跟主体相关的内容
article：表示文章的区域
section：如果某个区块没有特殊的语义，则可以使用section，同样也可使用div
html
<header style="height:200px;background-color:#FAEBD7;">
网页的头部
</header>
<main style="height:400px;background-color:#7FFFD4;">
<aside style="height:50px;background-color:#A52A2A;">
侧边栏
</aside>
<article style="height:200px;background-color:#6495ED;">
文章区域
<p>我么无币命作身洪以。</p>
<p>罪明锐薪到落，盲耐。</p>
</article>
</main>
<footer style="height:200px;background-color:#7FFF00;">
网页的底部
</footer>
5、div
div 如果某个区块没有具体的特殊的语义，我们就可以用
注意：有语义的地方，尽量用有语义的标签，div需要慎用（其实用的挺多的，但是会增加浏览器的负担）
6、hgroup
话题分组
下面h1的内容和h3的内容如果不加hgroup,他俩依旧是兄弟元素，但是并没有直接联系，加了hgroup之后就有了逻辑关联。
html
<hgroup>
<h1>古诗一首</h1>
<h3>作者：xxxx</h3>
</hgroup>
html
<hgroup>
<h1>静夜思</h1>
<h3>作者：李白</h3>
</hgroup>
<article>
<p>床前明月光，疑是地上霜。</p>
<p>举头望明月，低头思故乡。</p>
</article>
7、列表标签：ul,ol,li,dl,dt,dd
列表定义：使用ul,ol,dl,创建列表，然后在列表中写列表项
列表使用场景：如果结构、样式、语义存在高度相同的部分就可以使用列表
列表分类：ul 无序列表（无顺序要求），ol有序列表，dl描述列表（定义列表）
1、使用ul创建列表时使用li表示列表项
默认样式：ul上下有16像素的外边距，左侧有40像素的内边距 li列表项默认新增 实心黑色圆点项目符号
html
<h3>超市购物</h3>
<ul>
<li>牙膏牙刷</li>
<li>买点水果</li>
<li>买点纸巾</li>
<li>
<p>要话好明了使惜，狂。</p>
</li>
<li>
<div>京因夹慨种，病疾国。</div>
</li>
</ul>
如果不需要默认样式
html
<ul style="list-style: none">
2、用ol创建列表，li表示列表项
默认样式：ol上下有16像素的外边距，左侧有40像素的内边距
li列表项默认新增1，2，3···的项目符号
html
<ol>
<li>刷会手机</li>
<li>
穿衣服
<ol>
<li>穿上衣</li>
<li>穿下衣</li>
<li>
<ul>
<li>穿左侧</li>
<li>穿右侧</li>
</ul>
</li>
</ol>
</li>
<li>刷牙洗脸</li>
<li>吃早餐</li>
</ol>
3、定义列表：（有定义有内容）
用dl创建列表，dt表示下定义（小标题），dd表示对定义内容补充
默认样式：dl上下有16像素的外边距 dd左侧有40像素的外边距
html
<h3>热门课程</h3>
<dl>
<!-- 小标题 -->
<dt>鸿蒙前端课程</dt>
<dd>html/css</dd>
<dd>js</dd>
<dd>vue框架</dd>
<dd>鸿蒙框架</dd>
<dt>大数据课程</dt>
<dd>python</dd>
<dd>数据分析</dd>
<dd>数据清洗</dd>
<dd>数据爬虫</dd>
</dl>
列表的注意
1、给列表增加type属性，可以修改项目符号，但一般我们不用列表的默认的项目符号
ol type属性值 可选：1(默认值)，A,a,I,i
ul type属性值 可选：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
2、在实际开发过程中，一般不会具体区分有序列表还是无序列表，都可以使用
3、列表之间可以嵌套使用
4、列表和列表项是搭配使用，一般列表内不添加其他直接的子标签