Html中常用的块标签!!!12.16日 - 教程

一.布局的规则

用标签去就是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、列表和列表项是搭配使用，一般列表内不添加其他直接的子标签