HTML初学笔记（第四章）

1.无序列表

无序列表是网页中最常用的列表，之所以称为“无序列表”，是因为其各个列表项之间为并列关系，没有顺序级别之分。

基本语法格式：

<ul>    

        <li>列表项1</li>    

        <li>列表项2</li>    

        <li>列表项3</li>

        ......

</ul>

1.不赞成使用无序列表的type属性，一般通过CSS样式属性替代。

2.<li>与</li>之间相当于一个容器，可以容纳所有的元素。但是<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标记中输入文字的做法是不被允许的。

2.有序列表

有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列。

基本语法格式：

<ol>    

        <li>列表项1</li>    

        <li>列表项2</li>    

        <li>列表项3</li>

        ......

</ol>

3.定义列表

定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。

在网页设计中，定义列表常用于实现图文混排效果，其中<dt></dt>标记中插入图片，<dd></dd>标记中放入对图片解释说明的文字。

要想在列表项中定义子列表项就需要将列表进行嵌套。

基本语法格式：

<dl>    

        <dt>名词1</dt>    

        <dd>名词1解释1</dd>    

        <dd>名词1解释2</dd>    

        ...    

        <dt>名词2</dt>    

        <dd>名词2解释1</dd>    

        <dd>名词2解释2</dd>    

         ...

</dl>
4.对项目的属性修饰

4.1list-style-type属性

4.2list-style-image属性

使用list-style-image属性可以为各个列表项设置项目图像，使列表的样式更加美观。

4.3list-style-position属性

在CSS中，list-style-position属性用于控制列表项目符号的位置

4.4list-style属性

定义列表常用于对术语或名词进行解释和描述，与无序和有序列表不同，定义列表的列表项前没有任何项目符号。

基本语法格式：

list-style:列表项目符号 列表项目符号的位置 列表项目图像;

4.5背景图像定义列表项目符号

由于列表样式对列表项目图像的控制能力不强，所以实际工作中常通过为列表标签设置背景图像的方式实现列表项目图像。

background:url(images/2.png) no-repeat left center; /*为li设置背景图像*/

5.超链接

在HTML中创建超链接非常简单，只需用<a></a>标记环绕需要被链接的对象即可。

5.1基本语法格式：

<a href="跳转目标"      target="目标窗口的弹出方式">            

        文本或图像

</a>

5.2锚点链接

浏览网站时，为了提高信息的检索速度，常需要用到HTML语言中一种特殊的链接——锚点链接，通过创建锚点链接，用户能够快速定位到目标内容。

创建锚点链接分为两步

1.使用“<a href="#id名">链接文本</a>”创建链接文本。

2.使用相应的id名标注跳转目标的位置

5.3链接伪类控制超链接

在CSS中，通过链接伪类可以实现不同的链接状态，使得超链接在点击前、点击后和鼠标悬停时的样式不同。

同时使用链接的4种伪类时，通常按照a:link、a:visited、a:hover和a:active的顺序书写，否则定义的样式可能不起作用。

除了文本样式之外，链接伪类还常常用于控制超链接的背景、边框等样式。