完整教程：常用块标签和三种列表
目录
块标签：主要用来搭建网页结构框架
特点：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、列表和列表项是搭配使用，一般列表内不添加其他直接的子标签
浙公网安备 33010602011771号