一、列表标签(ul-li/ol-li/dl-dt-dd)
? ? ? 1.无序列表:ul-li
? ? ? (1)、该标签的作用:无序列表的作用是使得每一个项没有顺序之分进行排列，而在每个项目文字之前，使用符号作为对应的分项标记。
? ? ? (2)、标签语法以及相关的属性
标签语法以及相关的属性
<ul type="符号显示设置">
<li>列内容1</li>
<li>列内容2</li>
...
</ul>
相关的属性:
type:该属性用于指定列表项的开始的符号，取值为disc(默认值,实心圆点)、circle(空心圆)、square(实心正方形)?(3)、ul/li标签的代码使用以及效果
学生姓名:
<ul>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>王麻子</li>
</ul>
喜欢吃的水果:
<ul type="circle">
<li>苹果</li>
<li>石榴</li>
<li>葡萄</li>
<li>火龙果</li>
</ul>
最喜欢的图书:
<ul type="square">
<li>百年孤独</li>
<li>了不起的盖茨比</li>
<li>呼啸山庄</li>
<li>傲慢与偏见</li>
</ul>
2.有序列表:ol-li
(1)、该标签的作用:有序列表使用编号编排项目，而不是项目符号。列表的项目采用数字或者是英文字母开头，按照大小对列表项进行排版。?
(2)、标签语法以及相关的属性
标签语法
<ol type="符号显示设置" start="设置开始项值">
<li>列内容1</li>
<li>列内容2</li>
...
</ol>
常用属性
type:用于设置序列类型，一般取值有1(数字1)、a(小写字母a)、A(大写字母A)、i(小写罗马数字)和I(大写的罗马数字)。
start:用于设置序列的开始值，这一个参数只对数字有效。(3)、ol/li标签的代码使用以及效果
学生成绩排名
<ol>
<li>张三</li>
<li>李四</li>
<li>王五</li>
<li>王麻子</li>
</ol>
想吃的水果顺序:
<ol type="A">
<li>苹果</li>
<li>石榴</li>
<li>葡萄</li>
<li>火龙果</li>
</ol>
想欢的图书:
<ol type="1" start="10">
<li>百年孤独</li>
<li>了不起的盖茨比</li>
<li>呼啸山庄</li>
<li>傲慢与偏见</li>
</ol>
?3.自定义列表:dl-dt-dd
? (1)、该标签的作用:自定义列表不仅仅是一列项目，而是项目及其注释的组合。该标签可以实现图文的混排效果。
? (2)、标签语法以及相关的属性
定义列表相关语法:
<dl>
<dt>内容1</dt>
<dd>内容1</dt>
...
</dl>
定义列表相关注意事项
1.一般可以使用dd-dt-dd标签实现图文混排的效果
2.dt放置图片信息
3.dd放置文字信息，如果说文字信息有多个，那么这一个时候可以写多个dd? (3)、dl-dt-dd标签的代码使用以及效果
使用dl-dt-dd实现文字的注释
<dl>
<dt>HTML</dt>
<dd>
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
</dd>
</dl>
<br>
使用dl-dt-dd实现图文混排
<dl>
<dt><img src="images/1.jpg" ></dt>
<dd>香辣大闸蟹</dd>
<dd>售价:￥99.00</dd>
</dl>
二、容器标签(div/span)
? ? ? ?容器标签没有实际的意义以及效果，主要的用途是进行页面的区域划分。?
? ? ? ?1、div层标签
? ? ? ?(1)、?该标签的作用:作为容器标签，div标签会把页面区域按照行的形式划分。
? ? ? ?(2)、标签语法以及相关的属性
div标签的语法:
<div>
需要包含的内容标签
</div>? ? ?(3)、div标签的代码使用以及效果
<div id="one">
这是第一个div层
</div>
<div id="two">
这是第二个div层
</div>
<div id="three">
这是第三个div层
</div>
?2、span列标签
(1)、该标签的作用:作为容器的标签，span标签会把页面区域按照列的形式划分。
(2)、标签语法
<span>
其他标签
</spam> ?(3)、span标签的代码使用以及效果
<div id="one">
<span><strong>新闻</strong></span> |
<span><strong>咨询</strong></span> |
<span><strong>政治</strong></span> |
<span><strong>财经</strong></span> |
<span><strong>科技</strong></span>
</div>