1.3 HTML网页的组成_HTML5+ CSS3+JavaScript 网页设计实战（视频教学版）-QQ阅读男生历史网

书名：HTML5+ CSS3+JavaScript 网页设计实战（视频教学版）
作者名：常新峰
本章字数：3464字
更新时间：2021-03-24 12:49:11

1.3　HTML网页的组成

HTML网页，就是我们常说的超文本标签语言网页。所谓“超文本”，就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。

1.3.1　HTML网页结构

通常，HTML网页由一个<html>标签来开始，再由一个</html>标签来结束。在HTML网页内部由“头”（Head）和“主体”（Body）两部分所组成。其中，“头”部由一个<head>标签来开始，再由一个</head>标签来结束，用于提供关于网页的信息。“主体”部分由一个<body>标签来开始，再由一个</body>标签来结束，用于提供网页的具体内容。

下面是一个HTML网页的标准结构（源代码ch01/ch01-html-structure.html文件）。

【代码1-1】

【代码解析】

第01行代码中的<!DOCTYPE>表示文档类型，一个文档类型标记是一种标准通用标记语言的文档类型声明，其目的是要告诉标准通用标记语言解析器，应该使用什么样的文档类型定义（DTD）来解析文档。

第02行代码使用<html>标签来开始一个HTML，相对应的在第09行代码使用</html>标签来结束该HTML网页。

第03～05行代码为网页头部，使用<head>标签来开始，</head>标签来结束。

第06～08行代码为网页主体，使用<body>标签来开始，</body>标签来结束。

网页中没有定义任何文本或其他内容，仅仅是一个网页的框架结构，但也能在浏览器中运行，只不过会显示一个空白页面，如图1.2所示。

图1.2　HTML网页结构

1.3.2　HTML网页头部

HTML网页头部由<head></head>这2个标签来表示开始和结尾。一般来讲，网页头部中包含的标签是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。

在HTML网页头部中最常用的标签是标题标签和meta标签，其中标题标签用于定义网页的标题，其内容显示在网页窗口的标题栏中。而meta标签可以被浏览器用作书签和收藏的清单。

另外，还可以在HTML网页头部设置文档标题和其他在网页中不显示的信息，例如：方向（direction）、语言代码（Language Code）、指定字典中的元信息，等等。

下面是HTML网页的头部定义（详见源代码ch01/ch01-html-head.html文件）。

【代码1-2】

【代码解析】

第04～11行代码为网页头部，使用<head>标签来开始，</head>标签来结束。

第05行代码中，使用<meta>标签定义了网页字符集（charset="UTF-8"）。

第06行代码中，使用<meta>标签定义了网页生成工具（content="WebStorm"）。

第07行代码中，使用<meta>标签定义了网页作者（content="KING"）。

第08行代码中，使用<meta>标签定义了网页关键字。

第09行代码中，使用<meta>标签定义了网页描述信息。

第10行代码中，使用<title></title>定义了网页窗口标题栏的标题。

网页运行后的效果如图1.3所示。

图1.3　HTML网页头部

1.3.3　HTML网页主体

HTML网页主体由<body></body>这2个标签来表示开始和结尾。一般来讲，网页主体部分用于显示网站的具体内容，其包含的HTML标签也很多。

下面是HTML网页主体部分的定义（详见源代码ch01/ch01-html-body.html文件）。

【代码1-3】

【代码解析】

第12～15行代码为网页主体，使用<body>标签来开始，</body>标签来结束。

第13～14行代码定义了网页主体中的内容，这些内容将会显示在浏览器页面中。

网页运行后的效果如图1.4所示。

图1.4　HTML网页主体

1.3.4　HTML网页要求

这里简单介绍在编辑HTML网页和使用有关标签时，需要遵循的一些约定或默认要求。

HTML网页的文件扩展名默认使用.htm或.html（英文缩写扩展名），这样操作系统或程序才可以有效识别。另外，如果使用文本编辑器创建或修改HTML网页时，注意将默认的.txt扩展名修改为.htm或.html扩展名，这一点经常会被初学者忽略，而导致不必要的错误。
HTML网页本质上也是文本文件，其列宽不受限制，多个标签也可写成一行，甚至整个源代码也可写成一行。习惯上，源代码要按照层次关系写成多行，此时浏览器会忽略文件中的回车符（但指定回车标签除外）。此外，对源代码中的空格通常也不按源程序中的效果进行显示，完整的空格可使用特殊符号（实体符）“ （注意此字母必须小写，方可空格）”表示非换行空格。表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。
标签中的标签元素必须用尖括号括起来，带斜杠的元素表示该标签说明结束。大多数的标签必须成对使用，以表示作用的起始和结束。标签元素忽略大小写，即其作用相同。许多标签元素具有属性说明，可用参数对元素做进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可。另外，一个标签元素的内容可以写成多行。
标签符号，包括尖括号、标签元素、属性项等必须使用半角的西文字符，而不能使用全角字符。
HTML网页中常用的图像文件的扩展名为gif、jpg和png。
HTML网页中注释由符号""表示结束，例如：。注释内容可插入在文本中任何位置。任何标签若在其最前插入惊叹号，即被标识为注释，浏览器中将不予显示。

1.3.5　HTML网页标签

HTML网页中定义了非常多的标签用于表示类型元素和类型属性，这些元素和属性可以呈现出非常丰富的网页内容。

1．类型描述

为了说明文档使用的超文本标签语言标准，所有超文本标签语言文档应该以“文件类型声明”（外语全称加缩写<!DOCTYPE>）开头，引用一个文件类型描述或者必要情况下自定义一个文件类型描述。举例来说：

这个声明说明文档服从超文本标签语言4.01版本，且是必须要严格遵循的文件类型描述，这个标准是严格结构化的，使用层叠样式表（外语缩写：CSS）来做格式化。有时是否存在一个合适的文件类型描述会影响一个浏览器显示网页的方式。

除了超文本标签语言4.01版本的严格文件类型描述之外，超文本标签语言4.01版本也提供“过渡”和“框架集”文件类型描述。

过渡文件类型描述是向严格的文件类型描述过渡的缓冲。
框架集文件类型描述则针对包含框架元素的网页。

2．标签元素

下面罗列一些常见的HTML标签元素：

<html></html>表示创建一个超文本标签语言文档。
<head></head>（头）用来设置文档标题和其他在网页中不显示的信息。
<base>表示文档中不能被该站点辨识的其他所有链接源的URL（统一资源定位器）。
<meta>表示可以被浏览器用作书签和收藏的清单。
<link>定义一个链接和源文件之间的相互关系，比如：引用一个层叠样式表（英文缩写：css）。
<script></script>是用于定义脚本语句的标签，比如：引用一个JavaScript脚本文件。
<title></title>用于设置网页文档的标题。
<body></body>表示网页文档主体，即网页文档的可见部分。
<h1></h1>表示最大的标题（一号标题），以此类推，还包括二、三、四、五、六号标题。
<pre></pre>表示预先格式化文本（英文全称：preformatted）。
<u></u>表示下划线（英文全称：underline）。
<b></b>表示加黑体字（英文全称：bold）。
<i></i>表示斜体字（英文全称：italics）。
<tt></tt>表示打字机风格的字体。
<cite></cite>表示引用，通常是斜体。
<em></em>表示强调文本（通常是斜体加黑体、英文全称：emphasize）。
<strong></strong>表示加重文本（通常是斜体加黑体）。
<font size="" color=""></font>设置字体大小从1到7，颜色使用名字或RGB格式的十六进制值。
<font style ='font-size:100px'></font>表示字体样式大小等于100像素。
<BASEFONT></BASEFONT>表示基准字体。
<big></big>表示字体加大。
<small></small>表示字体缩小。
<del></del>表示字体加删除线。
<CODE></CODE>表示程式码。
<KBD></KBD>表示键盘字（英文全称：KeyBoard）。
<samp></samp>表示范例（英文全称：sample）。
<var></var>表示变量（英文全称：variable）。
<BLOCKQUOTE></BLOCKQUOTE>表示向右缩排（向右缩进、块引用）。
<dfn></dfn>述语定义（英文全称：define）。
<address></address>表示地址标签。
<sup></sup>表示上标字（英文全称：superscript）。
<sub></sub>表示下标字（英文全称：subscript）。
<xmp></xmp>表示固定宽度字体（在文件中空白、换行、定位功能中有效）。
<plaintext></plaintext>同样表示固定宽度字体，但不执行标签符号。
<listing></listing>表示固定宽度小字体。
<p></p>表示创建一个段落（英文全称：paragraphs）。
<p align="">表示将段落按左（left）、中（center）、右（right）对齐。
<br/>表示定义新行。
<dl></dl>定义列表（英文全称：DefinitionList）。
<dt>表示放在每个定义术语词前（定义术语、英文全称：DefinitionTerm）。
<dd>表示放在每个定义之前（定义说明、英文全称：DefinitionDescription）。
<ol></ol>表示创建一个标有序的列表，默认前面有数字，从数字“1”开始计数，依次叠加，也可以设置为字母或从任何自然数开始计数的列表项（英文全称：OrderedList）。
<ul></ul>表示创建一个无序的列表，默认前面标有圆点，也可以自己设置为none或者其他形状，如空心圆、方块等（英文全称：UnorderedLists）。
<li></li>表示放在每个列表项之前，若在<ol></ol>之间则每个列表项加上一个数字，若在<ul></ul>之间则每个列表项加上一个圆点。
<div></div>表示用来排版大块的HTML段落，也可以成为“层”。div标签非常重要，很多前端框架都是以该标签为基础而设计的。
<MENU>表示选项清单。
<DIR>表示目录清单。
<nobr></nobr>表示强行不换行（英文全称：nobreaking）。
<hr size='9' width='80%' color='ff0000'>表示水平线（英文全称：horizontal rule），可以设定大小、宽度和颜色。
<center></center>表示水平居中。
<table></table>表示表格标签。
<a></a>表示超链接标签。