1.2 创建网页
本节介绍HTML的基本语法和网页中最基本的几个标记符，并相继介绍创建网页时需要考虑的一些基本问题，包括添加文本、图像等内容、添加注释、添加特殊字符等。
1.2.1 标记符基础
HTML是影响网页内容显示格式的标记符集合，浏览器根据标记符决定网页的实际显示效果。
1. 基本的HTML语法
HTML的语法比较简单，即使没有任何计算机编程语言（如C、Java等）的基础也很容易学。在HTML中，所有的标记符都用尖括号（<、>）括起来。例如，<html>表示HTML标记符。绝大多数标记符都是成对出现的，包括开始标记符和结束标记符，开始标记符和相应的结束标记符定义了标记符所影响的范围。结束标记符与开始标记符的区别是结束标记符在小于号之后有一条斜线。例如：
<h1>这里是标题</h1>
将以“标题1”格式显示文字“这里是标题”，而不影响开始标记符和结束标记符以外的其他文字。
某些标记符，例如换行标记符<br>，只要求单一标记符，不需要结束标记符。
说明
HTML标记符是不区分大小写的，也就是说，<BR>、<Br>和<br>都是一样的。但在HTML5中通常约定使用小写标记符，这有利于HTML文件的维护。
2. 标记符的属性
许多标记符还包括一些属性，以便对标记符作用的内容进行更详细的控制。实际上，有关HTML语法的讲解主要就是对各种标记符和相应的属性进行讲解。
说明
属性是用来描述对象特征的特性。例如，一个人的身高、体重、性别就是人这个对象的属性；一个学生的学号、年级、专业等则是学生这个对象的属性。
在HTML中，所有的属性都放置在开始标记符的尖括号里，属性与标记符之间用空格分隔；属性的值放在相应属性之后，用等号分隔，并且一般用双引号包括（双引号必须成对出现）；而不同的属性之间用空格分隔。例如，在<a>标记符中使用href属性可以指定超链接的目标文件，使用title属性可以指定鼠标指针悬停到超链接上时的工具提示，HTML代码如下：
<a href="target.htm" title="点击有惊喜">超链接</a>
注意
HTML标记符和属性中的<、>、" "等字符都是英文字符，而不是中文字符。
3. HTML元素及其分类
HTML元素是指HTML标记符和其包含的内容，如图1-7所示。
图1-7 HTML元素
HTML元素一般可以分为以下四大类。
• 顶级元素：html、head与body。
• 首部元素：放在head中的元素，包括title（标题）、style（样式）、link（相关文档）、meta（关于文档的数据）、base（文档URL）和script（客户端脚本）等。
• 块元素：相当于段落的元素，包括h1～h6（标题）、p（段落）、pre（预先设定格式的文本）、div（指定块）、ul、ol、dl（列表）、table（表格）与form（表单）等。HTML5中新增的article（文章）、section（分块）和nav（导航）等也是块元素。显示时，块元素总是另起一行，块元素后面的元素也另起一行。
• 行内元素：相当于块中的短语、单词和字符，包括a（锚点或超链接）、br（换行）、img（图像）、em（强调）、strong（重点强调）、sub（下标）、sup（上标）、code（计算机代码）、var（变量名）和span（指定一个范围）等。
4. HTML全局属性
所有HTML元素都允许使用下列全局属性。
• id——用于唯一标识页面中的元素。文档中的所有的id都不能重复。
• class——指定元素的类。
• style——指定元素的样式。
• title——指定元素标题，可以用于在浏览器中显示工具提示（tooltip）。
• lang——指定元素内容的语言。
1.2.2 网页的基本结构
一个网页通常对应于一个HTML文件，通常以.htm或.html为扩展名。任何HTML文件都包含的基本标记符包括：HTML标记符（<html>和</html>）、首部标记符（<head>和</head>），以及正文标记符（<body>和</body>）。
1. HTML标记符
<html>和</html>分别是网页的第一个和最后一个标记符，网页的其他所有内容都位于这两个标记符之间。这两个标记符告诉浏览器或其他阅读该网页的程序，此文件是一个网页文件。
虽然HTML标记符的开始标记符和结束标记符都可以省略（因为.htm或.html扩展名已经告诉浏览器该文件为HTML文件），但为了保持完整的网页结构，建议包含该标记符。另外，HTML标记符一般不包含属性，但有时会用lang属性指出网页内容所使用的语言。例如<html lang="zh-cn">表明网页所使用的语言是中文。
2. 首部标记符
首部标记符<head>和</head>位于网页的开头，其中不包括网页的任何实际内容，而是提供一些与网页有关的特定信息。例如，可以在首部标记符中设置网页的标题、定义层叠样式表（CSS）、插入脚本等。
首部标记符中的内容也用相应的标记符括起来。例如，CSS定义位于<style>和</style>之间；脚本定义位于<script>和</script>之间。
（1）标题标记符
在首部标记符中，最基本、最常用的标记符是标题标记符<title>和</title>，用于定义网页的标题，它告诉浏览者当前访问的网页是关于什么内容的。网页标题可被浏览器用作书签和收藏清单。当网页在浏览器中显示时，网页标题将在浏览器窗口的标签中显示。由于网页标题一般是浏览者最先看到的部分，因此它要一目了然地告诉浏览者有关当前网页的信息。设置网页标题时必须采用有意义的内容，例如“新浪首页”，而不是用一个泛泛的内容如“首页”作标题。
例如，以下HTML代码在浏览器中的显示效果如图1-8所示。
<html>
<head>
<title>这里是网页标题</title>
</head>
<body> 请看浏览器的标签部分。 </body>
</html>
图1-8 标题标记符的效果
注意
本书的HTML代码中，使用黑体的内容是需要引起读者注意的部分。实际上，HTML文件相当于文本文件，不包含任何字符格式设置。
（2）<meta>标记符
首部标记符中另一个比较常用的标记符是<meta>，它用于说明与网页有关的信息（meta这个单词是“元”的意思，表示关于信息的信息）。例如，可以说明文件创作工具、文件作者等信息。
<meta>标记符的常用属性包括name、http-equiv，以及content。其中，name属性给出特性名；content属性给出特性值；http-equiv属性指定HTTP响应名称，通常用于替换name属性，HTTP服务器使用该属性值为HTTP响应消息头收集信息。
说明
HTTP是HyperText Transfer Protocol（超文本传输协议）的缩写，它是Internet上最常用的协议之一。
例如：
• <meta name="generator" content="microsoft frontpage 4.0">说明用于编辑当前网页的工具是FrontPage。
• <meta name="keywords" content="网页制作，HTML，CSS">说明当前网页中的关键词有“网页制作”“HTML”和“CSS”。
• <meta name="description" content="网页爱好制作者的家，各种网页制作工具的介绍">对当前网页进行了描述。
• <meta http-equiv="Content-Script-Type" content="text/javascript">设置客户端行内程序的语言为JavaScript。
• <meta http-equiv="Content-Style-Type" content="text/css">设置行内样式的样式语言为CSS。
• <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">设置网页内容采用的字符集为UTF-8（即支持中文，可用于解决中文网页出现乱码问题）。本语句也可以直接使用HTML5支持的charset属性，写为<meta charset="UTF-8">。
说明
由于搜索引擎会自动查找网页的meta值来给网页分类，因此要提高网页被搜索引擎检索上的概率，可以给每个关键网页都设置description（站点在搜索引擎上的描述）和keywords（搜索引擎借以分类的关键词）。
3. 正文标记符
正文标记符<body>和</body>中包含了网页的具体内容，包括文字、图像、超链接以及其他各种HTML对象。
如果没有其他标记符修饰，正文标记符中的文字将以无格式的形式显示（如果浏览器窗口显示不下，则自动换行）。
例如，以下HTML代码在浏览器中的显示效果如图1-9所示。
<html>
<head> <title>正文标记符中的内容没有格式</title></head>
<body>
正文，正文，正文，正文，
正文，正文，正文，
正文，正文
</body>
</html>
图1-9 <body>标记符中的正文
注意
在HTML较早的版本中，正文标记符包括一些属性，可用于设置网页背景颜色和图案，以及设置文档中文字和超链接的颜色等。例如，bgcolor属性可以指定网页的背景颜色，background属性可以指定网页的背景图案。但这种用法在HTML5中已经完全被废弃，任何与视觉效果有关的设置都应该使用CSS技术（详见本书的第3章与第6章）。
4. 标记符的嵌套结构
从上面的介绍可以看出，<html>标记符包含了<head>标记符和<body>标记符，而<head>标记符又包含了<title>标记符，形成了一种嵌套关系。实际上，在HTML中，正是这种嵌套关系表明了网页内容之间的逻辑关系和结构层次。
如果一个标记符包含于另一个标记符之中，那么被包含的标记符称为“子标签”，包含的标记符称为“父标签”，如图1-10所示。该图中表示的元素嵌套关系说明网页最外层是<body>标记符（父标签）。接着是<h1>标记符，它相对于<body>是子标签，相对于<span>元素是父标签。最内层是<span>标记符（子标签），而位于标签之间的是文字内容。浏览器按照这个关系顺序解释HTML代码，最后将文字显示在浏览器的屏幕上。
图1-10 标记符的嵌套关系
嵌套结构规定每一个标记符必须闭合，表示一个有语义的网页内容标识。相互嵌套标记符必须能清楚地说明标记符之间的关系，开始标记符和结束标记符必须书写正确。例如，图1-10所示的代码，不能书写为：
<body><h1><span style=color:red>HEADING1</h1></span></body>
注意
像这样有问题的代码，在大多数浏览器中却都能够正确地显示，可见浏览器在解释代码时并不十分严格，而是能智能地解析不正确的代码（即忽略某些“错误”代码）。但是，作为网页设计者，必须培养科学、严谨的工作作风，以编写出符合规范的网页代码。
实际上，所有的HTML标记符根据其嵌套关系，可以形成图1-11所示的一种树状结构：最顶级元素是<html>，之下是<head>和<body>元素，<head>元素中包括<title>和<meta>等子元素，<body>元素中包括<h1>和<p>等块元素，块元素中可以包含<img>和<a>等行内元素。编写网页的过程，就是构造这种树状结构，并且向其中填写内容的过程。
图1-11 HTML标记符的结构树
1.2.3 在网页中添加内容
1. 添加文本、图像等网页内容
网页的结构由HTML代码形成，其内容则是常规的文本和图像等。如果要制作网页，那么必须准备这些基本的素材。可以在网上搜集文本、图像（如果下载请注意版权问题）等资源，然后将收集到的文本资源和图像资源放置在计算机特定的文件夹中保存，并且根据需要不断地进行增删。
对于文本素材，如果需要保留其逻辑结构，那么应使用Word文档或WPS文档的格式，否则就直接用纯文本的txt格式。不管采用哪种格式，最终在网页编辑时都应放到“记事本”之类的纯文本编辑器中，去除所有格式信息，仅保留文本信息。对于多数文本，应放到<p>标记符中作为普通的段落。如果需要增加结构，则应使用<h1>等文档结构元素，具体请参见本书第2章。
对于图像素材，应使用合理的文件名进行保存（从网上下载的多数图像资源使用的都是类似“index.jpg”或“F001461SHgpJ001JiSHG.jpg”这种文件名，应将其更改为更有意义的文件名）。必要时，应使用图形图像处理软件进行加工，如消除水印等，具体请参见本书的第4章。
有了素材之后，就可以编辑HTML文件，将相应的内容通过各种标记符和属性放到网页中，如1.3节中的实例所示。
2. 添加注释
不论是编写程序还是制作网页，为代码添加注释都是一种良好的工作习惯。实际上，添加注释是任何程序开发工作必须遵循的规范之一。由于网站经常需要更新，因此创建的网页必须易于维护，而添加注释是增强代码可读性的重要手段。
HTML代码的注释由开始标记符<！--和结束标记符-->构成，可以放在代码中的任何位置。这两个标记符之间的任何内容都将被浏览器解释为注释，而不在浏览器中显示。
例如，以下HTML代码在浏览器中的显示效果如图1-12所示。
<html> <head> <title>注释不在浏览器中显示</title> </head> <body> 正文，正文，正文 </body> <!-- 本行内容并不在浏览器中显示！ --> </html>
图1-12 注释不在网页中显示
3. 添加特殊字符
如果需要在网页中显示某些特殊字符，如<、>等与HTML语法冲突的符号（浏览器会自动将<后的内容解释为HTML标记符），或×、∑、±等无法直接用键盘输入的符号，则需使用参考字符来表示，而不能直接输入。
参考字符以“&”号开始，以“；”结束，既可以使用数字代码，也可以使用代码名称。最常见的参考字符为<表示为<，>表示为>，&表示为&，空格表示为 。有关参考字符完整的编码，请参见w3school中文网站上的相应页面，或者以“HTML字符实体”“HTML参考字符”等关键词在百度等网站上搜索。
注意
与HTML标记符不同，字符代码名称区分大小写。
例如，要在网页中显示内容“<Tom & Jerry>is a popular show.”，则需使用参考字符，相应的段落应写为：
<p> <Tom & Jerry> is a popular show. </p>