本文详细介绍了HTML5中设计列表（无序列表、有序列表、定义列表）的使用方法，以及链接文字的设计，包括超链接、内部链接、外部链接、Email链接，并探讨了target属性在链接中如何控制新窗口打开。通过实例展示了各种列表和链接的浏览器默认表现及自定义方式。
目录
1. 设计列表文字
网页中的列表文字比较常见的有：导航条、菜单栏、新闻列表、列表页、页面框架、引导
页等等。而网页中的列表结构包含三种模式：无序列表（ul）、有序列表（ol）、定义列
表（dl）。
1.1 无序列表
无序列表是一种不分排序先后的列表结构，使用<ul>标签定义，其中包含多个<li>列表项
目标签。
浏览器对无序列表的默认解析也是有规律的。无序列表可以分为一级和多级无序列表，一
级无序列表在浏览器中解析后，会在列表<li>标签前面添加一个小黑点的修饰，而多级无
序列表则会根据级数而改变列表前面的修饰符。
示例：三层嵌套的多级列表结构。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<ul>
<li>一级列表
<ul>
<li>二级列表</li>
<li>二级列表
<ul>
<li>三级列表</li>
<li>三级列表</li>
</ul>
</li>
</ul>
</li>
<li>一级列表</li>
</ul>
</body>
</html>浏览器效果如下：
1.2 有序列表
有序列表是一种讲究排序的列表结构，使用<ol>标签定义，其中包含多个<li>列表项目标
签。一般网页设计中，列表结构可以互用有序或无序列表标签。但是，在强调项目排序的栏目
中，选用有序列表会更科学，如：新闻列表、排行榜等。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>test</title>
</head>
<body>
<ol>
<li>一级列表
<ol>
<li>二级列表</li>
<li>二级列表
<ol>
<li>三级列表</li>
<li>三级列表</li>
</ol>
</li>
</ol>
</li>
<li>一级列表</li>
</ol>
</body>
</html>浏览器显示效果如下：
注意：HTML5不支持使用type属性来设置项目符号的样式，可以使用CSS的list-style-type属性来定义样式。可以使用value属性设置有序列表的开始值，此属性只有搭配<ol>标签时才有用，默认值为1，取值为整数值。
1.3 定义列表
定义列表以<dl>标签形式出现，在<dl>标签中包含<dt>和<dd>标签，一个<dt>标签对应着一个或多个<dd>标签。
定义列表与无序列表和有序列表存在着结构上的差异，相同点就是结构必须是如下形式：
<dl>
<dt>定义列表标题</dt>
<dd>定义列表内容</dd>
</dl>或者如下：
<dl>
<dt>1定义列表标题</dt>
<dd>1.1定义列表内容</dd>
<dd>1.2定义列表内容</dd>
</dl>或者多个组合形式：
<dl>
<dt>1定义列表标题</dt>
<dd>1定义列表内容</dd>
<dt>2定义列表标题</dt>
<dd>2定义列表内容</dd>
</dl>浏览器效果如下图所示：
无论是以哪种形式，都应注意如下几个问题：
① <dl>标签必须与<dt>标签相邻，<dd>标签需要对应一个<dt>标签。
② <dl>、<dt>和<dd>三个标签之间不允许出现第四者。
③ 标签必须成对出现，嵌套要合理。
2. 设计链接文字
2.1 超链接
超链接是指HTML文件的图片或文字中添加链接标签，当浏览者单击该文字或图片时，会立即被引导到另一个位置。引导到的这个位置可以是网页、FTP、BBS，或者是文件，可以让浏览者打开或下载的，还可以链接到Email邮箱，点击链接时自动打开创建邮箱的画面。
2.2 定义超链接
超链接标签：<a href=""></a>，不管是文字、图片都可以加上超链接。
语法：<a href="#"></a>，“#”就是放超链接的。
#可以换成网址、网页、文件路径等。
如：
<a href="index.html"></a>或<a href="http://www.baidu.com"></a>根据路径（URL）不同，网页中的超链接一般可以分为3种类型：内部链接、描点链接、外部链接。
内部链接：所链接目标一般位于同一网站中，对于内部链接来说，可以使用相对路径和绝对路径。
如：
<a href="../index.html"></a>外部链接：所链接的目标一般为外部网站目标，也可以是网站内部目标。外部链接一般要指定链接所使用的协议和网站地址。
如：
<a href="http://www.baidu.com"></a>描点链接：它是在内部链接与外部链接基础上增加描点标签后缀（#标签名）。
如：
<a href="http://www.myweb.cn/web/index.html#home"></a>
就表示跳转到index.html页面中标签为home的描点位置。
2.2.1 target属性
target="_blank"：链接的目标网页会在新的窗口中打开。
target="_parent"：链接的目标网页会在当前的窗口中打开，如果在框架网页中，则会在上一层框架打开目标网页。
target="_self"：链接的目标网页会在当前运行的窗口中打开，这是默认值。
target="_top"：链接的目标网页会在浏览器窗口打开，如果有框架的话，网页中的所有框架也将被删除。
target="窗口名称"：链接的目标网页会在有指定名称的窗口或框架中打开。
2.2.2 浏览器中链接的默认外观
未被访问的链接：带有下划线，蓝色的。
已被访问的链接：带有下划线，紫色的。
活动链接：带有下划线，红色的。
2.3 定义站外链接
在自己的网页中链接到他人的网站。
语法：
<a href="网站网址">...</a>示例：
<h2>搜索引擎网站</h2>
<dl>
<dt><a href="http://www.baidu.com." target="_top">百度</a></dt>
<dd>www.baidu.com</dd>
<dt><a href="http://www.google.com" target="_blank">google</a></dt>
<dd>www.google.com</dd>
</dl>浏览器效果如下图所示：
2.4 定义站内链接
站内链接就是自己网站中网页的链接，语法与站外网页链接相同。唯一区别在于站内链接必须以相对路径来指定链接目标。
语法：
<a href="相对路径"> </a>注意：如果网页与链接目标位于同一个目录中，那么只要填入文件名就行了；如果位于不同目录，必须将相对路径标识清楚，否则链接无效。
如：
<a href="home.html">...</a>示例：实现站内网站的跳转。
index.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index.html</title>
</head>
<body>
<h2>这是index.html</h2>
<a href="home.html">点击跳转到home.html</a>
</body>
</html>home.html页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>home.html</title>
</head>
<body>
<h2>这是home.html</h2>
</body>
</html>浏览器效果如下图所示：
2.5 定义Email链接
链接到Email邮箱的语法：
<a href="mailto:Email 账号">...</a>当点击Email链接时，就会自动启动内置的邮件软件。浏览者只要在新邮件窗口填写好主题和内容，将邮件送出就可以发信给超链接mailto处设置的邮箱了。
如果不止发给一个人，则用分号（;）区分开。
如：
<a href="mailto:one@163.com;two@163.com;">并发邮件</a>邮件抄送：
<a href="mailto:one@163.com?cc=抄送账号">抄送邮件</a>密件抄送：
<a href="mailto:one@163.com?bcc=抄送账号">密件抄送邮件</a>邮件正文：
<a href="mailto:one@163.com?body=邮件内容">发邮件</a>
参考书籍：未来科技，《HTML5 APP开发从入门到精通》
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
