HTML-详解前端开发中经常用到的块级标签 h1~h6、p、div、ul、ol、li、dl、dt、dd、pre

• 块级元素默认独自占一行，可嵌套；

• 可设置 width（宽）、height（高）、内外边距等；宽度没有设置时，默认为100%（通栏）；

• 一般块级元素中可以包含块级元素和行内元素

标签常用标准属性：

• id 定义元素的唯一 id 相当于身份证号

• class 定义元素的一个或多个类名通常与样式表结合使用，用于设置标签的样式

• style 用于在行内设置样式

• title 设置元素的额外信息，鼠标放在定义了该属性的标签上时会显示对应的额外信息

<hn></hn> （heading）该标签用于设置一个标题，n 的取值范围：1~6，1 的级别最高 6 的级别最低；该标签是双标签，使用时开始标签的级别与结束标签的级别要保持一致，开始标记与结束标记之间用于填写标题内容

注： 使用标题标签时，其内部最好不要嵌套标题标签或其他标签；理论上里面可以放置p、ul、li 等标签，在语义上，不建议这么写；只写文本内容，做一个纯洁的标题即可

示例：

<h1>标题内容1</h1>
<h6>标题内容6</h6>

<p></p> （paragraph）用于定义段落的标签；标签里面只能放文字、图片、表单元素，其他的一律不能放；标签内的内容独立成段

标签属性：aligin 用于设置文本的对齐方式，其值有 left（左对齐）、right（右对齐）、center（居中对齐）、justify（两端对齐）

示例：

<p>这是一段文本内容，独立成段</p>
<p>这也是一段文本内容，独立成段</p>

<div></div> （division）通用块级元素，多用于布局，规划页面结构，该标签是一个容器级标签，里面什么都能放（可嵌套）

示例：

<div id="parent" class="left test"><div>嵌套的子元素</div><p>这是一个段落</p>
</div>

<ul></ul> （unordered list）用于定义无序列表；ul 的一级子标签（儿子标签），只能是 li

<li><li> （list item）用于定义列表中的每一项；li 是一个容器级标签，li 里面什么都能放（可以嵌套列表）

• 通常 ul 与 li 结合使用，官方推荐通过 CSS 样式来控制其显示的样式，下面设置样式的方式了解即可（实际开发中，多数情况是祛除样式）

• 无序列表 ul 可以通过样式属性 type 设置列表项的样式，其值有三种：square（正方形）、disc（圆形）、circle（圆环）

• 无序列表中 li 也可以通过 type 属性单独设置某个列表项的样式

示例：

<ul type="disc"><li>第一项</li><li>第二项</li><li type="square">第三项</li><li>第四项</li>
</ul>

<ol></ol> （ordered list）用于定义有序列表

<li><li> 用于定义列表中的每一项

• 有序列表 ol 的相关属性

  • type 用于设置有序列表的标记类型（样式）其值有：1（数字样式）、A（大写字母样式）、a（小写字母样式）、I（大写罗马数字样式）、i（小写罗马数字）

  • start 值为 number （数值）类型，用于规定有序列表的起始值

  • reversed 用于设置列表顺序为降序

• li 相关属性

  • value 值为数值类型，用于设置当前项的项目数值，设置了该属性后从该项开始会重新进行排序

有序列表中 li 也可以通过 type 属性设置某一个列表项的样式

示例：

 <ol start="5" type="A"><li>第一项</li><li>第二项</li><li value = "3">第三项</li><li>第四项</li></ol>

<dl></dl> （definition list）用于定义自定义列表

<dt></dt> （definition title）用于定义列表中的项，一个 dl 可以有多个 dt

<dd></dd> （definition description）对列表项的描述，一个 dt 可以配多个 dd

dl 的一级子标签只能是 dt 和 dd，dt、dd 都是容器级标签，想放什么都可以

示例：

 <dl><dt>北京</dt><dd>国家首都</dd><dd>政治文化中心</dd><dt>上海</dt><dd>魔都</dd><dd>有外滩、东方明珠塔、黄浦江</dd><dt>广州</dt><dd>中国南大门，有珠江、小蛮腰</dd></dl>

pre （preformatted text）用于定义预格式化的文本；被包围在 <pre> 标签 元素中的文本会保留空格和换行符,而文本呈现为等宽字体

该标签一般用于格式化 JavaScript 代码（将代码原格式显示）

<pre>// 定义变量var num = 100var sum = null// 循环累加求和for (var i = 0; i <= num; i++) {sum += i}// 控制台输出最终结果console.log(sum)
</pre>