完整教程：常用块标签和三种列表

目录

常见的块标签：

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

我是一个一级标题
我是一个二级标题
我是一个三级标题
我是一个四级标题
我是一个五级标题
我是一个六级标题

2、p 段落标签

默认样式：上下有16像素的外边距

语义：p标签包裹的内容就是一个段落

注意：一般只包含文字，不可以包含块标签

这里用的插件生成的假文

jw+数字和lorem+数字，生成对应数字的中英假文

3、center 居中标签

默认样式：居中显示

语义：凡是要居中的内容，都可以写在center里面

不小者光为，天斯洪攻冷自血怒接出，的回。
说秦的就文，一中过心，仍选挟的护词感有。

4、header、main、footer、aside、article、section、hr

header：网页的头部

main：网页的主体

footer：网页的底部

aside：页面的侧边栏，跟主体相关的内容

article：表示文章的区域

section：如果某个区块没有特殊的语义，则可以使用section，同样也可使用div

hr:分割线 

网页的头部

侧边栏
文章区域
我么无币命作身洪以。
罪明锐薪到落，盲耐。

网页的底部

5、div

div 如果某个区块没有具体的特殊的语义，我们就可以用

注意：有语义的地方，尽量用有语义的标签，div需要慎用（其实用的挺多的，但是会增加浏览器的负担）

6、hgroup

话题分组

下面h1的内容和h3的内容如果不加hgroup,他俩依旧是兄弟元素，但是并没有直接联系，加了hgroup之后就有了逻辑关联。

古诗一首
作者：xxxx

静夜思
作者：李白

床前明月光，疑是地上霜。
举头望明月，低头思故乡。

7、列表标签：ul,ol,li,dl,dt,dd    

列表定义：使用ul,ol,dl,创建列表，然后在列表中写列表项

列表使用场景：如果结构、样式、语义存在高度相同的部分就可以使用列表

列表分类：ul 无序列表（无顺序要求），ol有序列表，dl描述列表（定义列表）

1、使用ul创建列表时使用li表示列表项

默认样式：ul上下有16像素的外边距，左侧有40像素的内边距  li列表项默认新增 实心黑色圆点项目符号

超市购物
牙膏牙刷
买点水果
买点纸巾
要话好明了使惜，狂。
京因夹慨种，病疾国。

如果不需要默认样式

2、用ol创建列表，li表示列表项

默认样式：ol上下有16像素的外边距，左侧有40像素的内边距  

li列表项默认新增1，2，3···的项目符号

刷会手机
穿衣服
穿上衣
穿下衣
穿左侧
穿右侧
刷牙洗脸
吃早餐

3、定义列表：（有定义有内容）

用dl创建列表，dt表示下定义（小标题），dd表示对定义内容补充

默认样式：dl上下有16像素的外边距     dd左侧有40像素的外边距

热门课程
鸿蒙前端课程
html/css
js
vue框架
鸿蒙框架
大数据课程
python
数据分析
数据清洗
数据爬虫

列表的注意

    1、给列表增加type属性，可以修改项目符号，但一般我们不用列表的默认的项目符号

     ol type属性值  可选：1(默认值)，A,a,I,i

     ul type属性值  可选：

                    disc，默认值，实心的圆点

                    square，实心的方块

                    circle，空心的圆

    2、在实际开发过程中，一般不会具体区分有序列表还是无序列表，都可以使用

    3、列表之间可以嵌套使用

    4、列表和列表项是搭配使用，一般列表内不添加其他直接的子标签