附录 A
HTML 语法教学
A.1 认识 HTML 语法
A.2 HTML 文件的整体架构
A.3 数据编辑与格式化
A.4 超链接
A.5 图像
A.6 表格
A.7 全局属性与事件属性
PHP 7 & MySQL 跨设备网站开发
454
A.1 认识HTML 语法
HTML 5 文件通常包含下列几个部分（按照由先到后的顺序）：
BOM
（选择性字符，建议不要在文件头部插入
BOM
）。
任何数目的注释与空格符。
DOCTYPE
。
任何数目的注释与空格符。
根元素。
任何数目的注释与空格符。
DOCTYPE
HTML 5 文件的第一行必须是如下的文件类型定义（Document Type Definition），前 面 不
能有空行，也不能省略不写，否则浏览器可能不会启用标准模式，而是改用其他渲染模式
（rendering mode），导致 HTML 5 的新功能无法正常工作。
<!doctype html>
根元素
HTML 5 文件可以包含一个或多个元素，呈树状结构，有些元素属于兄弟节点，有些元
素属于父子节点，至于根元素则为 <html> 元素。
MIME 类型
HTML 5 文件的 MIME 类型和前几版的 HTML 文件一样都是 text/html，存盘后的扩展名
也都是 .html 或 .htm。
不会区分英文字母的大小写
HTML 5 的标签与属性和前几版的 HTML 一样不会区分英文字母的大小写（case-
insensitive），但考虑到和 XHTML 的兼容性，本书将采用小写英文字母。
相关名词
以下是一些与 HTML 相关的名词与注意事项。
• 元素（element）：HTML 文件可以包含一个或多个元素，而 HTML 元素又是由“标
签”与“属性”所组成的。HTML 元素可以分成两种类型，其一是用来标记网页上
的组件或描述组件的样式，例如 <head>（标头）、<body>（主体）、<p>（段落）、
<ol>（编号清单）等；其二是用来指向其他资源，例如 <img>（嵌入图像）、<video>
（嵌入视频）、<audio>（嵌入音频）、<a>（标记超链接或网页上的位置）等。
附录 A HTML 语法教学
455
• 标签（tag）：一直以来“标签”和“元素”两个名词经常被混用，但严格来说，两
者的意义并不完全相同，“元素”一词包含了“起始标签”“结束标签”以及这两者
之间的内容，例如下面的语句是将“圣诞快乐”标记为段落，其中 <p> 是起始标
签，而 </p> 是结束标签，换句话说，起始标签的前后要以 <、> 两个符号括起来，
而结束标签又比起始标签多了一个斜线（/）：
<p>圣诞快乐</p>
不过，也不是所有元素都会包含结束标签，诸如 <br>（换行）、<hr>（水平线）、
<img>（嵌入图像）等元素就没有结束标签。举例来说，假设要在“圣诞快乐”几
个字的后面做换行，那么可以先输入这几个字，然后加上 <br> 元素，如下所示：
圣诞快乐<br>
• 属性（attribute）：除 了 HTML 元素本身所能描述的特性，大部分元素还会包含属性，
以提供更多信息，而且一个元素里面可以加上几个属性，只要注意标签与属性以及
属性与属性之间以空格符隔开即可。
举例来说，假设要将“圣诞快乐”几个字标记为标题 1，而且文字为红色、居中对
齐，那么除了要在这几个字的前后分别加上起始标签 <h1> 和结束标签 </h1>外，
还要加上红色及居中对齐属性，如下所示：
<h1 color="#ff0000" align="center">圣诞快乐</h1>
• 值（value）：属性通常会有一个值，而且这个值必须从预定义好的范围内选取，不
能自行定义，例如 <hr>（水平线）元素的 align（对齐方式）属性的值有 left、right、
center 三种，用户不能自行指定其他值。
• 考虑到和 XHTML 的兼容性，我们习惯在值的前后加上双引号（"）。事实上，若值
是由英文字母、阿拉伯数字（0 ~ 9）、减号（-）或小数点（.）所组成的，那么值的
前后可以不必加上双引号（"）。
• 嵌套标签（nesting tag）：有时我们需要使用一个以上的元素来标记数据，举例来说，
假设要将一串标题 1 文字（例如 Happy Birthday）中的某个字（例如 Birthday）标记
为斜体，那么就要使用 <h1> 和 <i> 两个元素：
<h1>Happy<i>Birthday</i></h1>
起始标签
结束标签
内容
起始标签
空格符
属性
值
内容
结束标签
空格符
属性
值
顺序正确
PHP 7 & MySQL 跨设备网站开发
456
<h1>Happy<i>Birthday</h1></i>
请注意嵌套标签的顺序，原则上，第一个结束标签必须对应最后一个起始标签，第
二个结束标签必须对应倒数第二个起始标签，以此类推。
• 空格符：浏览器会忽略 HTML 元素之间多余的空格符或 Enter 键，因此我们可以利
用这个特点在 HTML 源代码中加上空格符和 Enter 键，将 HTML 源代码排列整齐，
方便阅读，如图 A-1 所示。
图 A-1
不过，也正因为浏览器会忽略元素之间多余的空格符或 Enter 键，所以你不能使用
空格符或 Enter 键将网页的内容格式化。举例来说，假设要在一段文字的后面做换
行，就必须在这段文字的后面加上 <br> 元素，只是在 HTML 源代码中按 Enter 键
是无效的。
• 特殊字符：HTML 文件中有一些特殊字符，例如小于（<）、大于（>）、双引号（"）、
&、空格符等，若要在网页上显示这些字符，就不能直接使用键盘输入，而是要输
入 <、>、"、&、 。附录 C 中有特殊字符表，以供你参考。
A.2 HTML 文件的整体架构
HTML 文件包含 DOCTYPE、标题（header）与主体（body）三个部分。下面给出一个例
子，运行效果如图 A-2 所示。
<!doctype html>
<html>
顺序不正确
使用空格符和
Enter
键将
HTML
源代码排列整齐
DOCTYPE
附录 A HTML 语法教学
457
<head>
<meta charset="utf-8">
<title>我的 HTML 文件</title>
</head>
<body>
<h1>Hello! HTML!</h1>
</body>
</html>
图 A-2
• <!doctype>：用来声明文件类型定义（Document Type Definition，DTD），此例为 HTML
5，目前主要的 PC 版浏览器和移动版浏览器均对 HTML 5 相当支持。
• <html>...</html>：用来标记 HTML 文件。
• <head>...</head>：用来标记 HTML 文件的标头，里面可能进一步使用 <title>、
<meta>、<link>、<base>、<script>、<style> 等元素来指定文件标题、文件相关信
息、文件之间的关联、相对 URI 的路径、JavaScript 程序代码、CSS（Cascading Style
Sheets）样式表单等信息。
• <title>...</title>：用来指定 HTML 文件的标题（title）。
• <body>...</body>：用来标记 HTML 文件的主体，里面可能包括文字、图像、视频、
音频、超链接等内容。
除了 HTML 元素本身所能描述的特性外，大部分元素还会包含属性，以提供更多信息。
在此，我们仅示范性地列出 <body> 元素的重要属性（见表 A-1）以及常用的颜色值（见表
A-2），以供参考。
表 A-1 <body> 元素的重要属性
<body> 元素的重要属性 说明
background = "uri"
指定网页背景图像的相对或绝对地址
bgcolor = "color|#rrggbb"
指定网页的背景颜色
text = "color|#rrggbb"
指定网页的文字颜色
link = "color|#rrggbb"
指定尚未浏览的超链接文字颜色
alink = "color|#rrggbb"
指定被选取的超链接文字颜色
vlink = "color|#rrggbb"
指定已经浏览的超链接文字颜色
title = "..." 指定 <body> 元素的标题，浏览器可能用它作为提示文字
网页标题
网页主体
