05 HTML5中的分组元素

听51CTO上的课程笔记

一、分组元素解析

1)<p></p>段落分组

实际作用就是将内部包含的文本形成一个段落，而段落与段落之间保持一定量的空间

2）<div> </div>通用分组

<div>在早起的版本中非常常用，通过<div>这种一般性分组元素进行布局，而在Html5中，由于语义 缘故，被其他各种文档元素代替，和<p>的区别是两段温恩的上下空隙没了，而且对于包含的文档样式可以自定义，空隙和换行符<br>一致

3）<blockquote>引用大段他出内容

实际作用和<p>一致，还包含首尾缩进功能 并且下一行由<blockquote>包裹的文字必定比上一行文字缩进两个空格

4）<pre> 根据编辑器的内容格式显示相似的内容格式

5）<hr>添加分割线

6)<ul> 表示无序列表

<li></li> 表示列表项

</ul>

添加无序列表

7）<ol> 表示有序列表 目前支持三种属性

<li></li> 表示列表项

</ol>

添加有序列表

ol元素属性

属性名称	说明
start	从第几个序号开始统计 ,<ol start="8">
type	表示列表的编号类型：分别是1，a,A,I,i
reversed	是否倒序排列：<ol  reversed> 一半的主流浏览器不支持

li元素属性

属性名称	说明
value	强行设置某个项目的编号

8)<dl><>dt><dd>生成说明列表 三个元素是一个整体 但是<dt><dd>没必要都出现

<dl>

<dt>这是一份文件</dt>

<dd>这是文件的详细内容</dd>

<dd>这是文件的详细内容</dd>

</dl>

生成格式文本：

这是一份文件

这是文件的详细内容

这是文件的详

9)<figure><figcaption>使用插图 这两个元素一般用于图片的布局

<figure>

<figcaption>这是一张插图</figcaption>

<img src="img.png">

</figure>

细内容