一.布局的规则
html是用标签去搭建页面结构的
标签按特点可分为三类: 块标签、行内标签、行内块标签
1、块标签可以包裹任意标签，即可以包裹块、行内、行内块
2、行内标签一般只包裹文字，不可以包含块标签
3、特殊的块标签p，一般也是包裹文本，不可以包裹块标签
4、特殊的行内标签a，可以包裹任意标签,除了它自己
html语言是一个弱类型语言,如果语法有错误,浏览器会有一个纠错的功能
但是这种情况要尽可能的避免
1.浏览器的纠错会影响你的代码编译
2.浏览器纠错的结果可能不是你想要的
二.常用的块标签
如何学习一个标签:1.默认样式 2.语义
块标签:主要用来搭建网页结构框架
1.独占一行
2.可以设置宽高(大小)
3.如果宽度未设置,他的宽度为父元素的100%,如果高度没有设置,高度是被内容撑开的
常用的块标签: h1~h6, p, center, header, main, footer, aside, section, div, hgroup, ul, ol, li, dl, dt, dd
chinese lorem(该插件需要安装)
jw+数字 ==》对应数字的假文 (jw直接+数字+enter)
lorem+数字 ==》对应数字的英文 (同上)
1.标题标签 h1~h6
默认样式:字体加粗,字体大小有变化,从h1~h6,字体逐步变小,标签上下会有20像素左右的外边距
语义:用标题标签包裹的就是标题,语义是从h1到h6逐步降低的，也就是h1的语义最重，所以一个页面只用一次h1
使用场景:除了页面中是标题的部分,还有我们的logo,logo部分作为页面中最重要的部分，一般会用h1去写，h1对浏览器搜索优化比较友好
结果演示:
2、p 段落标签
默认样式：上下有16像素的外边距
语义：用段落标签包裹的内容就是一个段落
注意点：p不能包裹块标签
3、center标签
默认样式：居中显示
语义：凡是需要居中内容，都可以写在center内
结果展示:
4、h5新增的页面结构标签
header,main,footer:一个页面只用一次
aside:页面的侧边栏，跟主体相关的内容
article:表示文章的区域
section:如果某个区块没有具体的特殊的语义，我们就可以用section，它是用来代替div
结果实现(局部):
5、div标签(很常用)!!!(等同于section,但是通常使用div)
如果某个区块没有具体的特殊的语义，我们就可以用
注意：有语义的地方，尽量用有语义的标签，div需要慎用
6、hgroup标签
语义：标题分组
三.列表标签(也属于常用的块标签,比较重要,特此单列出来学习)
列表标签：ol,ul,li,dl,dt,dd
定义列表：创建一个列表，在列表中，书写一个个列表项
列表的场景：凡是结构、样式、语义雷同的部分，都可以使用列表
列表的分类：
1.有序列表：（有一定的顺序）
用ol创建列表，li表示列表项
默认样式：ol上下有16像素的外边距，左侧有40像素的内边距
li列表项默认新增1，2，3···的项目符号
代码实现:
2.无序列表：（没有顺序要求）
用ul创建列表，li表示列表项
默认样式：ul上下有16像素的外边距，左侧有40像素的内边距
li列表项默认新增 实心黑色圆点项目符号
代码实现:
3.定义列表：（有定义有内容）
用dl创建列表，dt表示下定义（小标题），dd表示对定义内容补充
默认样式：dl上下有16像素的外边距
dd左侧有40像素的外边距
代码实现:
列表的注意:
1、给列表增加type属性，可以修改项目符号（了解一下），
但一般我们不用列表的默认的项目符号
如需隐藏列表默认的项目符号
代码实现:
ol type属性值 可选：1(默认值)，A,a,I,i
下图所示为有序列表中默认项目符号改为A
代码实现:
ul type属性值 可选：
disc，默认值，实心的圆点
square，实心的方块
circle，空心的圆
下图所示为无序列表中默认项目符号改为空心的圆
2、在实际开发过程中，一般不会具体区分有序列表还是无序 列表，都可以使用
3、列表之间可以嵌套使用
4、列表和列表项是搭配使用，一般列表内不添加其他直接的子标签