目录
常见的块标签：
1、h1-h6 标题标签
2、p 段落标签
3、center 居中标签
4、header、main、footer、aside、article、section
5、div
6、hgroup
7、列表标签：ul,ol,li,dl,dt,dd
列表的注意
块标签：主要用来搭建网页结构框架
特点：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
<h1>我是一个一级标题</h1> <h2>我是一个二级标题</h2> <h3>我是一个三级标题</h3> <h4>我是一个四级标题</h4> <h5>我是一个五级标题</h5> <h6>我是一个六级标题</h6>2、p 段落标签
默认样式：上下有16像素的外边距
语义：p标签包裹的内容就是一个段落
注意：一般只包含文字，不可以包含块标签
这里用的插件生成的假文
jw+数字和lorem+数字，生成对应数字的中英假文
3、center 居中标签
默认样式：居中显示
语义：凡是要居中的内容，都可以写在center里面
<center> <p>不小者光为，天斯洪攻冷自血怒接出，的回。</p> <p>说秦的就文，一中过心，仍选挟的护词感有。</p> </center>4、header、main、footer、aside、article、section
header：网页的头部
main：网页的主体
footer：网页的底部
aside：页面的侧边栏，跟主体相关的内容
article：表示文章的区域
section：如果某个区块没有特殊的语义，则可以使用section，同样也可使用div
<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之后就有了逻辑关联。
<hgroup> <h1>古诗一首</h1> <h3>作者：xxxx</h3> </hgroup><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列表项默认新增 实心黑色圆点项目符号
<h3>超市购物</h3> <ul> <li>牙膏牙刷</li> <li>买点水果</li> <li>买点纸巾</li> <li> <p>要话好明了使惜，狂。</p> </li> <li> <div>京因夹慨种，病疾国。</div> </li> </ul>如果不需要默认样式
<ul style="list-style: none">2、用ol创建列表，li表示列表项
默认样式：ol上下有16像素的外边距，左侧有40像素的内边距
li列表项默认新增1，2，3···的项目符号
<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像素的外边距
<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、列表和列表项是搭配使用，一般列表内不添加其他直接的子标签
