下载掌阅APP，畅读海量书库
立即打开
学习网页制作，用户应该首先了解HTML。根据W3C网页规范化设计要求，网页应该遵循结构（Structure）、表现（Presentation）和行为（Behavior）的分离。
☑ 结构：使用HTML设计网页标签，即网页结构和内容。
☑ 表现：使用CSS设计网页样式，即网页显示效果。
☑ 行为：使用JavaScript和DOM规范设计网页脚本，即网页特效、动画或者行为。
因此，读者应该先掌握HTML语言基本语法和用法，能够熟练使用HTML标签。
1.4.1 认识HTML
HTML表示超文本标识语言，使用HTML标签编写的文档称为HTML文档，目前最新版本是HTML 5.0，使用最广泛的是HTML 4.1版本。
早期的HTML版本不适合构建标准化网页，因为它把结构和表现混淆在一起，例如，HTML把不同类型的元素，如描述性元素color、i等和结构性元素div、table等，以及元素属性放在一起，为以后的维护和管理埋下隐患。
XHTML是HTML语言的升级版本，与HTML在语法和标签使用方面差别不大。熟悉HTML语言，再熟悉标准结构和规范，也就熟悉了XHTML语言。
HTML作为一种网页内容标识语言，易学易懂，熟悉使用该语言可以制作功能强大、美观大方的网页。HTML语言的主要作用说明如下。
☑ 使用HTMl语言标识文本。例如，定义标题文本、段落文本、列表文本、预定义文本等。
☑ 使用HTML语言建立链接，通过链接可以访问互联网上的所有信息，当使用鼠标单击超链接时，会自动跳转到链接页面。
☑ 使用HTML语言创建列表，把信息有序组织在一起，以方便浏览。
☑ 使用HTMl语言在网页中显示图像、声音、视频、动画等多媒体信息，把网页设计得更富冲击力。
☑ 使用HTML语言可以制作表格，以方便显示大量数据。
☑ 使用HTML语言制作表单，允许在网页内输入文本信息，执行其他用户操作，方便信息互动。
1.4.2 HTML文档基本结构
HTML文档一般都应包含两部分：头部区域和主体区域。
HTML文档基本结构由3个标签负责组织：<html>、<head>和<body>。其中<html>标签标识HTML文档，<head>标签标识头部区域，而<body>标签标识主体区域。一个完整的HTML文档基本结构如下：
可以看到，每个标签都是成对组成，第一个标签（如<html>）表示标识的开始位置，而第二个标签（如</html>）表示标识的结束位置。<html>标签包含<head>和<body>标签，而<head>和<body>标签是并列排列。
如果把上面字符代码放置在文本文件中，然后另存为“test.html”，就可以在浏览器中浏览了。当然，由于这个简单的HTML文档还没有包含任何信息，所以在浏览器中是看不到任何显示内容的。
1.4.3 HTML基本语法
编写HTML文档时，必须遵循HTML语法规范。HTML文档实际上就是一个文本文件，它由标签和信息混合组成，当然这些标签和信息必须遵循一定的组合规则，否则浏览器是无法解析的。
HTML语言的规范条文不多，相信读者也很容易理解。从逻辑上分析，这些标签包含的内容就表示一类对象，也可以称为网页元素。从形式上分析，这些网页元素通过标签进行分隔，然后表达一定的语义。很多时候，我们把网页标签和网页元素混为一团，而实际上，网页文档就是由元素和标签组成的容器。
☑ 所有标签都包含在“<”和“>”起止标识符中，构成一个标签。例如，<style>、<head>、<body>和<div>等。
☑ 在HTML文档中，绝大多数元素都有起始标签和结束标签，在起始标签和结束标签之间包含的是元素主体。例如，<body>和</body>中间包含的就是网页内容主体。
☑ 起始标签包含元素的名称，以及可选属性，也就是说元素的名称和属性都必须在起始标签中。结束标签以反斜杠开始，然后附加上元素名称。例如：
<tag>元素主体</tag>
<tag a1="v1" a2="v2" a3="v3" …… an="vn">元素主体</tag>
<tag a1 a2 a3 …… an>元素主体</tag>
虽然大部分标签都是成对出现，但是也有少数标签不是成对的，这些孤立的标签，被称为空标签。空标签仅包含起始标签，没有结束标签。例如：
<tag>
同样，空标签也可以包含很多属性，用来标识特殊效果或者功能，例如：
<tag a1="v1" a1="v1" a2="v2" …… an="vn">
【示例】 对于HTML文档来说，除了必须符合基本语法规范外，我们还必须保证文档结构信息的完整性。完整文档结构如下所示：
HTML文档应主要包括如下内容：
☑ 必须在首行定义文档的类型，过渡型文档可省略。
☑ <html>标签应该设置文档名字空间，过渡型文档可省略。
☑ 必须定义文档的字符编码，一般使用<meta>标签在头部定义，常用字符编码包括中文简体（gb2312）、中文繁体（big5）和通用字符编码（utf-8）。
☑ 应该设置文档的标题，可以使用<title>标签在头部定义。
HTML文档扩展名为.htm或.html，保存时必须正确使用扩展名，否则浏览器无法正确地解析。如果要在HTML文档中增加注释性文本，则可以在“<!--”和“-->”标识符之间增加，例如：
<!--单行注释-->
或
<!-----------------
多行注释
----------------->
1.4.4 HTML标签
HTML定义的标签很多，下面对常用标签进行说明，随着读者学习不断深入，相信会逐步掌握HTML所有标签的用法和使用技巧。
文档基本标签主要用来标识文档的基本结构，也是一个网页文档应该使用的基本标签。
☑ <!DOCTYPE>：定义文档类型。
☑ <html>：定义HTML文档。
☑ <head>：定义关于文档的信息。
☑ <meta>：定义关于HTML文档的元信息。
☑ <title>：定义文档的标题。
☑ <body>：定义文档的主体。
☑ <h1>… <h6>：定义HTML标题。
☑ <p>：定义段落。
☑ <br>：定义简单的折行。
☑ <hr>：定义水平线。
☑ <!--...-->：定义注释。
格式标签主要用来标识文本区块，并附带一定的显示格式。
☑ <acronym>：定义首字母缩写。
☑ <abbr>：定义缩写。
☑ <address>：定义文档作者或拥有者的联系信息。
☑ <b>：定义粗体文本。
☑ <bdi>：定义文本的文本方向，使其脱离其周围文本的方向设置。
☑ <bdo>：定义文字方向。
☑ <big>：定义大号文本。
☑ <blockquote>：定义块引用。
☑ <cite>：定义引用（citation）的源URL。
☑ <code>：定义计算机代码文本。
☑ <del>：定义被删除文本。
☑ <dfn>：定义定义项目。
☑ <em>：定义强调文本。
☑ <i>：定义斜体文本。
☑ <ins>：定义被插入文本。
☑ <kbd>：定义键盘文本。
☑ <mark>：定义有记号的文本。
☑ <meter>：定义预定义范围内的度量。
☑ <pre>：定义预格式文本。
☑ <progress>：定义任何类型的任务的进度。
☑ <q>：定义短的引用。
☑ <rp>：定义若浏览器不支持ruby元素显示的内容。
☑ <rt>：定义ruby注释的解释。
☑ <ruby>：定义ruby注释。
☑ <samp>：定义计算机代码样本。
☑ <small>：定义小号文本。
☑ <strong>：定义语气更为强烈的强调文本。
☑ <sup>：定义上标文本。
☑ <sub>：定义下标文本。
☑ <time>：定义日期／时间。
☑ <tt>：定义打字机文本。
☑ <var>：定义文本的变量部分。
☑ <wbr>：定义视频。
【示例1】 启动Dreamweaver，新建文档，保存为test.html。在代码视图下输入下面代码，分别使用<h1>和<p>标签标识网页标题和段落文本。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<h1>文本格式标签</h1>
<p>& lt;p& gt;标签标识段落文本</p>
</body>
</html>
【示例2】 使用Dreamweaver新建文档，保存为test1.html。输入下面代码，分别使用各种字符格式标签显示一个数学方程式的解法。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<p>例如，针对下面这个一元二次方程：</p>
<p><i>x</i><sup>2</sup>-<b>5</b><i>x</i>+<b>4</b>=0</p>
<p>我们使用<big><b>分解因式法</b></big>来演示解题思路如下：</p>
<p><small>由：</small>(<i>x</i>-1)(<i>x</i>-4)=0</p>
<p><small>得：</small><br /><i>x</i><sub>1</sub>=1<br />
<i>x</i><sub>2</sub>=4</p>
</body>
</html>
按F12键，在浏览器中预览，则显示效果如图1.4所示。
在HTML文档中，列表结构可以分为两种类型：有序列表和无序列表。无序列表使用项目符号来标识列表，而有序列表则使用编号来标识列表的项目顺序。具体使用标签说明如下。
☑ <ul>：定义无序列表。
☑ <ol>：定义有序列表。
☑ <li>：定义列表的项目。
☑ <dl>：定义定义列表。
☑ <dt>：定义定义列表中的项目。
☑ <dd>：定义定义列表中项目的描述。
☑ <menu>：定义命令的菜单／列表。
☑ <menuitem>：定义用户可以从弹出菜单调用的命令／菜单项目。
☑ <command>：定义命令按钮。
【示例3】 使用Dreamweaver新建文档，保存为test2.html。输入下面代码，使用无序列表分别显示了一元二次方程求解有4种方法。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<h1>解一元二次方程</h1>
<p>一元二次方程求解有4种方法：</p>
<ul>
<li>直接开平方法 </li>
<li>配方法 </li>
<li>公式法 </li>
<li>分解因式法</li>
</ul>
</body>
</html>
按F12键，在浏览器中预览，则显示效果如图1.5所示。
图1.4 使用格式标签定义数学解方程文本
图1.5 使用无序列表分别显示一元二次方程求解方法
【示例4】 新建文档，保存为test3.html。输入下面代码，使用定义列表显示两个成语的解释。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<h1>成语词条列表</h1>
<dl>
<dt>知无不言，言无不尽</dt>
<dd>知道的就说，要说就毫无保留。</dd>
<dt>智者千虑，必有一失</dt>
<dd>不管多聪明的人，在很多次的考虑中，也一定会出现个别错误。</dd>
</dl>
</body>
</html>
按F12键，在浏览器中预览，则显示效果如图1.6所示。
图1.6 使用定义列表定义成语解释
链接标签可以实现把多个网页联系在一起。
☑ <a>：定义锚。
☑ <link>：定义文档与外部资源的关系。
☑ <nav>：定义导航链接。
【示例5】 新建文档，保存为test4.html。输入下面代码，使用<a>标签定义一个超链接，单击该超链接可以跳转到百度首页。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<a href="http://www.baidu.com/">去百度搜索</a>
</body>
</html>
【示例6】 新建文档，保存为test5.html。输入下面代码，使用<a>标签可以定义锚点。锚点是一类特殊的超链接，它可以定位到网页中某个具体的位置。例如，在下面示例中单击超链接文本，就可以跳转到网页的底部。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>示例代码</title>
</head>
<body>
<a href="../Text/chapter1.xhtml#btm">跳转到底部</a>
<div id="box" style="height:2000px; border:solid 1px red;">撑开浏览器滚动条</div>
<span id="btm">底部锚点位置</span>
</body>
</html>
图像多媒体标签主要用于引入外部多媒体文件，并进行显示。主要包括下面几个标签。
☑ <img>：定义图像。
☑ <map>：定义图像映射。
☑ <area>：定义图像地图内部的区域。
☑ <canvas>：定义图形。
☑ <figcaption>：定义figure元素的标题。
☑ <figure>：定义媒介内容的分组，以及它们的标题。
☑ <audio>：定义声音内容。
☑ <source>：定义媒介源。
☑ <track>：定义用在媒体播放器中的文本轨道。
☑ <video>：定义视频。
表格标签用来组织和管理数据，主要包括下面几个标签。
☑ <table>：定义表格。
☑ <caption>：定义表格标题。
☑ <th>：定义表格中的表头单元格。
☑ <tr>：定义表格中的行。
☑ <td>：定义表格中的单元。
☑ <thead>：定义表格中的表头内容。
☑ <tbody>：定义表格中的主体内容。
☑ <tfoot>：定义表格中的表注内容（脚注）。
☑ <col>：定义表格中一个或多个列的属性值。
☑ <colgroup>：定义表格中供格式化的列组。
【示例7】 新建文档，保存为test6.html。输入下面代码，使用表格结构显示5行3列的数据集。
按F12键，在浏览器中预览，则显示效果如图1.7所示。
图1.7 显示表格数据
表单标签主要用来制作交互式表单，主要包括下面几个标签。
☑ <form>：定义供用户输入的HTML表单。
☑ <input>：定义输入控件。
☑ <textarea>：定义多行的文本输入控件。
☑ <button>：定义按钮。
☑ <select>：定义选择列表（下拉列表）。
☑ <optgroup>：定义选择列表中相关选项的组合。
☑ <option>：定义选择列表中的选项。
☑ <label>：定义input元素的标注。
☑ <fieldset>：定义围绕表单中元素的边框。
☑ <legend>：定义fieldset元素的标题。
☑ <datalist>：定义下拉列表。
☑ <keygen>：定义生成密钥。
☑ <output>：定义输出的一些类型。
【示例8】 新建文档，保存为test7.html。输入下面代码，分别定义单行文本框、多行文本框、复选框、单选按钮、下拉菜单和提交按钮的表单。
按F12键，在浏览器中预览，则显示效果如图1.8所示。
图1.8 设计表单界面
文档结构块标签主要用于定义符合标准化设计需求的文档结构块，主要包括下面几个标签。
☑ <div>：定义文档中的分区或节（division/section），节表示内容结构块。
☑ <span>：用来组合文档中的行内元素。
☑ <header>：定义section或page的页眉。
☑ <footer>：定义section或page的页脚。
☑ <section>：定义section。
☑ <article>：定义文章。
☑ <aside>：定义页面内容之外的内容。
☑ <details>：定义元素的细节。
☑ <dialog>：定义对话框或窗口。
☑ <summary>：为<details>元素定义可见的标题。
编程标签用于设计复杂的参数配置、程序设计或者样式代码，主要包括下面几个标签。
☑ <style>：定义文档的样式信息。
☑ <script>：定义客户端脚本。
☑ <noscript>：定义针对不支持客户端脚本的用户的替代内容。
☑ <embed>：为外部应用程序（非HTML）定义容器。
☑ <object>：定义嵌入的对象。
☑ <param>：定义对象的参数。
1.4.5 HTML属性
每个HTML标签还包含很多属性，但是大部分属性都是公共的。公共属性大致可分为基本属性、语言属性、键盘属性、内容属性和延伸属性等类型。
基本属性主要包括下面3个，这3个基本属性为大部分元素所拥有。
☑ class：定义类规则或样式规则。
☑ id：定义元素的唯一标识。
☑ style：定义元素的样式声明。
语言属性主要用来定义元素的语言类型，包括两个属性。
☑ lang：定义元素的语言代码或编码。
☑ dir：定义文本的方向，包括ltr和rtl取值，分别表示从左向右和从右向左。
【示例1】 分别为网页代码定义了中文简体的语言，字符对齐方式为从左到右的方式。第二行代码为body定义了美式英语。
<html xmlns="http://www.w1.org/1999/xhtml" dir="ltr" xml:lang="zh-CN">
<body id="myid" lang="en-us">
键盘属性定义元素的键盘访问方法，包括两个属性。
☑ accesskey：定义访问某元素的键盘快捷键。
☑ tabindex：定义元素的Tab键索引编号。
accesskey属性可以使用快捷键（Alt+字母）访问指定URL，但是浏览器不能很好地支持，在IE中仅激活超链接，需要配合Enter键确定，而在Firefox中没有反应。
【示例2】 在导航菜单中经常设置快捷键。
<a href="http://www.mysite.cn/" accesskey="a">按住Alt键，按A键可以链接到mysite首页</a>
tabindex属性用来定义元素的Tab键访问顺序，可以使用Tab键遍历页面中的所有链接和表单元素。遍历时会按照tabindex的大小决定顺序，当遍历到某个链接时，按Enter键即可打开链接页面。例如：
<a href="../Text/chapter1.xhtml#" tabindex="1">Tab 1</a>
<a href="../Text/chapter1.xhtml#" tabindex="3">Tab 3</a>
<a href="../Text/chapter1.xhtml#" tabindex="2">Tab 2</a>
内容属性定义元素包含内容的附加信息，这些信息对于元素来说具有重要的补充作用，避免元素本身包含信息不全而被误解。内容语义包括5个属性。
☑ alt：定义元素的替换文本。
☑ title：定义元素的提示文本。
☑ longdesc：定义元素包含内容的大段描述信息。
☑ cite：定义元素包含内容的引用信息。
☑ datetime：定义元素包含内容的日期和时间。
alt和title是两个常用的属性，分别定义元素的替换文本和提示文本。
<a href="URL" title="提示文本">超链接</a>
<img src="URL" alt="替换文本" title="提示文本" />
替换文本（Alternate Text）并不是用来做提示的（Tool Tip），或者更加确切地说，它并不是为图像提供额外说明信息的。相反，title属性才负责为元素提供额外说明信息。
当图像无法显示时，必须准备替换的文本来替换无法显示的图像，这对于图像和图像热点是必需的，因此alt属性只能用在img、area和input元素中（包括applet元素）。
【示例3】 下面示例使用<input>标签定义一个图像按钮，但没有设置src属性值，则会显示“替换文本”的文字按钮效果。
<input type="image" src="URL" alt="替换文本" />.
title属性为元素提供提示性的参考信息，这些信息是一些额外的说明，具有非本质性，因此该属性也不是一个必须设置的属性。当鼠标指针移到元素上面时，即可看到这些提示信息。
如果要为元素定义更长的描述信息，则应该使用longdesc属性。longdesc属性可以用来提供链接到一个包含图片描述信息的单独页面或者长段描述信息。其用法如下。
或者
<img src="UTL" alt="替换文本" longdesc="详细描述图像的网页.xhtml" />
cite一般用来定义引用信息的URL。例如，下面一段文字引自http://www.mysite.cn/csslayout/ index.htm，所以可以这样来设置。
<blockquote cite="http://www.mysite.cn/csslayout/index.htm">
<p>CSS的精髓是布局，而不是样式，布局需要缜密的结构分析和设计</p>
</blockquote>
datetime属性定义包含文本的时间，这个时间表示信息的发布时间，也可能是更新时间，例如：
<ins datetime="2015-5-1 8:0:0">2015年上海</ins>