1.3 HTML文件_Web前端开发技术：HTML、CSS、JavaScript（第3版）-QQ阅读女生中文幻言网

书名：Web前端开发技术：HTML、CSS、JavaScript（第3版）
作者名：聂常红编著
本章字数：5646字
更新时间：2025-04-02 16:17:51

1.3 HTML文件

使用HTML语言编写的文件称为HTML文件，也叫Web页面或网页，扩展名为“.html”或“.htm”。HTML文件是一种纯文本文件，可以使用记事本、EditPlus等文本编辑工具，或Sublime Text、WebStorm、IntelliJ IDEA、Dreamweaver等可视化编辑工具来编写。HTML文件由浏览器解释执行，具有跨平台性，任何一台主机，只要具有浏览器就可以执行HTML文件。单击鼠标右键后，在弹出的菜单中单击“查看源”或“查看网页源代码”命令，访问者可以查看网页的HTML代码。

HTML文件的组成包含两部分内容：一是HTML标签；二是HTML标签所设置的内容。

1.3.1 HTML标签

HTML标签，也称为元素，用于描述网页结构，同时也可对页面对象样式进行简单的设置。所有标签都是由一对尖括号（“<”和“>”）和标签名所构成的，并分为开始标签和结束标签。开始标签使用<标签名>表示，结束标签使用</标签名>表示。在开始标签中使用attributename="value"这样的格式来设置属性，结束标签不包含任何属性。标签中的标签名用来在网页中描述网页对象，属性则用于表示元素所具有的一些特性，比如事物的形状、颜色、用途等特性。

标签语法格式：

大多数HTML标签都有一个开始标签和结束标签，有部分标签只有开始标签，没有结束标签。对于同时具有开始标签和结束标签的称为双标签，如<body></body>；而只具有开始标签的称为单标签，如<br>。

一个标签中可以包含任意多个属性，不同属性之间使用空格分隔，例如：<a href="https://www.sise.com.cn"title="广州大学华软软件学院首页">。标签属性虽然可以对标签所设置的内容进行一些简单样式的设置，如对文字颜色、字号、字体等样式进行设置。但在实际应用中，一般使用CSS来设置样式，而不建议用标签属性来设置样式，这是因为使用标签属性设置样式，一方面会使表现和结构无法分开，另一方面有可能造成在不同浏览器中得到不同的表现效果。

通常标签都具有默认属性，当一个标签中只包含标签名时，标签将使用默认属性来获得标签的默认样式，例如：段落标签<p>，其存在一个默认的居左对齐方式。需要修改标签的默认样式时，通常使用CSS来重置默认样式。

HTML5相比于HTML的其他版本，标签语法存在某些方面的不同，主要体现以下几方面。

1.标签和属性不区分大小写

在XHTML中因为遵循了XML语法，所以要求标记及属性严格区分大小写，而在HTML5中则没有此限制，例如，<option Value="1">选项一</Option>是完全正确的。

2.可以省略具有布尔类型的属性值

对具有表示true或false意思的属于布尔类型的属性值，在HTML5中可省略不设置。具有布尔类型值的属性有：disabled、readonly、checked、selected、requried、autofocus等。在HTML5中，当希望使用其中的某个属性表示true的意思时，直接在元素开始标记中添加该属性即可（在XHTML中，则要求必须同时给该属性赋值为属性名，如selected="selected"）；如果希望该属性表示false的意思，则不使用该属性就可以了。例如：

3.属性值可以省略引号

在XHTML规范中，必须保证属性值使用单引号或双引号，而在HTML5中，在不引起混淆的情况下，属性值可以省略引号。只有在属性值包含空格、“<”“>”“=”、单引号和双引号的情况下，才需要使用引号。例如：

上述input元素的type属性值省略了引号，而value属性值因为包含了空格，因而不能省略引号，否则认为value的值只是“等”字前面的字符串而出现错误。

HTML开始标签后面或标签对之间的内容就是HTML标签所设置的内容，其中的内容可以是普遍的文本，也可是嵌套的标签。

1.3.2 HTML文件基本结构

一个HTML页面不管多复杂，在W3C标准模式下，其文件基本结构都是一样的，不外乎都包含一个文档声明和表示HTML页面基本结构的几个HTML标签。结构代码如下所示：

按照实现功能的不同，整个HTML文件可分成两层：一层是外层，由<html>和</html>标签对来标识；另外一层是内层，用于实现HTML文件的各项功能。根据实现功能的不同，又可以将内层细分为两个区域，即头部区域和主体区域。头部区域主要用来设置一些与网页相关的信息，由<head>和</head>标签标识；主体区域主要用于在浏览器窗口显示内容，由<body>和</body>标识。

1.3.3 <！doctype>文档类型声明标签

doctype是DocumentType的简写。在HTML文档中，doctype有两个作用：一是指定文档的根元素（跟在doctype后面的标识符）为<html>；二是用来告诉浏览器使用什么样的HTML或XHTML规范来解析网页。解析规范由doctype定义的DTD（文档类型定义）来指定，DTD规定了使用通用标签语言的网页语法。需要注意的是：在HTML文档中，doctype声明标签应该位于页面的第一行。

在HTML5以前，必须指定DTD，例如下例代码是XHTML的过渡类型的文档声明：

在HTML5中，遵循“存在即合理”的原则，对规则的要求比较宽松，没有指定HTML标签必须遵循的DTD，因而简写成以下形式：

DOCTYPE是不区分大小写的，所以也可以写成<！DOCTYPE html>。

注：目前，浏览器对页面的渲染有两种模式：怪异模式（浏览器使用自己的模式解析渲染页面）和标准模式（浏览器使用W3C官方标准解析渲染页面）。不同的渲染模式会影响到浏览器对CSS代码甚至JavaScript脚本的解析。如果使用doctype，浏览器将按标准模式解析渲染页面，否则将按怪异模式解析渲染页面。使用怪异模式对运行在IE低版本浏览器下的页面影响很大。可见doctype对一个页面的正确渲染很重要。

1.3.4 <html>及网页头部区域标签

1.<html></html>包含所有HTML内容

<html>标签是HTML页面中所有标签的顶层标签，即是HTML文档的根元素，页面中的所有标签必须放在<html></html>标签对之间。

2.头部区域标签

网页的头部区域包含的常用标签如表1-1所示。

表1-1 常用头部标签

本章将介绍<head><title>和<meta>三个标签，<style><link>和<script>标签将分别放到后面相关章节中介绍。

（1）<head></head>设置网页文档的头部信息

<head>通常跟在<html>后面。<head>和</head>标签对用于标识HTML页面的头部区域，<head>和</head>之间的内容都属于头部区域中的内容。这个区域主要用来设置一些与网页相关的信息，如网页标题、字符集、网页描述的信息等，设置的信息内容一般不会显示在浏览器窗口中。

（2）<title></title>设置网页文档的标题

<title>标签的作用有两个：一是设置网页的标题，以告诉访客网页的主题是什么，设置的标题将出现在浏览器中的标签栏或选项卡中，如图1-1所示；二是给搜索引擎索引，作为搜索关键字以及搜索结果的标题使用。需要注意的是：搜索引擎会根据<title>标签设置的内容将你的网站或文章合理归类，所以标题对一个网站或文章来说，特别重要。实践证明，对标题同时设置关键字时可以使网站获得更靠前的排名。包含关键字的标题的设置格式为“标题-关键字”，例如“首页-广州大学华软软件学院”。

为了让访客更好地了解网页内容以及使网站获得更好的排名，每个页面都应该有一个简短的、描述性的、最好能带上关键字的标题，而且这个标题在整个网站应该是唯一的。

标题设置语法如下：

有关<title>设置页面标题对标题对搜索影响的示例请分别参见示例1-1和示例1-3。

【示例1-1】页面标题设置。

上述代码在IE11浏览器中的运行结果如图1-1所示，页面标题显示在选项卡中。

图1-1 网页标题设置

（3）<meta>定义文档元数据

表1-2 <meta>标签的属性

http-equiv属性类似于HTTP的头部协议，它回应给浏览器一些有用的信息，以帮助正确地显示网页内容。name属性用于设置关键字、描述网页等内容，以便于搜索引擎机器人查找、分类。目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类，一个设计良好的meta标签可以大大提高网站被搜索到的可能性。

每一个<meta>实现一种功能，可以在HTML文件的头部区域中包含任意数量的<meta>标签，以实现多种功能。

①使用<meta>设置页面字符集。

在HTML页面中，常用的字符编码是“utf-8”。“utf-8”又叫“万国码”，它涵盖了世界上几乎所有地区的文字。我们也可以把它看成是一个世界语言的“翻译官”。有了“utf-8”，你可以在HTML页面上写中文、英语、法语、越南语、韩语等语言的内容。默认情况下，我们的HTML文档的编码也是“utf-8”。这就使文档编码和页面内容的编码保持一致，这样的页面在世界上几乎所有地区都能正常显示。

HTML4/XHTML设置格式：

HTML5对字符集的设置作了简化，格式如下：

语法说明：http-equiv传送HTTP通信协议标题头，Content-Type表示“字符集”设置项目，content用于定义文档的MIME类型以及页面所使用的具体的字符集。当charset取值为“gb2132”时，表示页面使用的字符集是国标汉字码，目前最新的国标汉字码是gb18030，在实际应用中，我们经常使用utf-8编码。

【示例1-2】网页字符集设置。

上述代码在IE11浏览器中的运行结果如图1-2所示。

图1-2 设置字符集后中文显示正常

将示例1-2中的<meta>标签去掉后，再在IE11浏览器中运行，结果如图1-3所示。

图1-3 去掉字符集设置后中文乱码显示

对比图1-2和图1-3，可见页面字符集设置对页面内容正确显示的重要性。

②使用<meta>设置关键字。

关键字是为搜索引擎提供的，在网页中是看不到关键字的，它的作用主要体现在搜索引擎优化上面。为提高网页在搜索引擎中被搜索到的概率，我们可以设定多个与网页主题相关的关键字。

基本语法：

语法说明：keywords表示“关键字”设置项目，content中设置具体的关键字，不同的关键字使用逗号或空格分隔。需注意的是，虽然设定多个关键字可提高被搜索到的概率，但目前大多数的搜索引擎在检索时都会限制关键字的数量，一般10个以内比较合理，关键字多了会分散关键字优化，影响排名。

示例代码如下所示：

③使用<meta>设置网页描述信息。

网页的描述信息主要用于概述性地描述页面的主要内容，用来补充关键词，当描述信息中包含了部分关键字时，会作为搜索结果返回给浏览者。像关键字一样，搜索引擎对描述信息的字数也有限制，一般允许70～100个字，所以内容应尽量简明扼要。需注意的是，不同的搜索引擎，对待描述信息有不同的态度，例如对百度搜索引擎来说，描述信息没什么用处，而对Google搜索引擎来说，描述作息在搜索信息中会起到一点作用。

基本语法：

语法说明：discription表示“描述”设置项目，content中设置具体的描述信息。

示例代码如下所示：

【示例1-3】使用标题、关键字和网页描述信息搜索网页。

上述代码为凡客官网首页的部分源代码，当我们在百度搜索框中输入“凡客”时会搜索到该页面，同时在返回的搜索结果中，会以网页标题“凡客VANCL-互联网快时尚品牌，服装，鞋，配饰，网上购物货到付款网站，7天无条件退货”作为搜索结果的标题，而返回的搜索结果描述信息则是上述代码中设置的网页描述信息，如图1-4所示。

图1-4 使用标题、关键字和描述信息搜索网页

也可以使用关键字来搜索信息，如输入图1-5所示的关键字同样可以搜索到图1-4所示结果，只不过排名可能不一样。另外需要注意的是，输入不同的关键字个数，搜索到的结果可能是不一样的，而且，输入的关键字个数超过一定数量时，得到的结果反而是排名越靠后。

图1-5 使用关键字搜索信息

④设定网页自动刷新。

使用<meta>标签可以实现每隔一定时间刷新页面内容，这一功能常用于需要实时刷新页面的场合，如Internet现场图文直播、聊天室、论坛消息的自动更新等。

基本语法：

语法说明：http-equiv传送HTTP通信协议标题头，refresh表示刷新功能，content用于设定刷新间隔的时间，单位是秒。

【示例1-4】页面的自动刷新设置。

⑤设定网页自动跳转。

使用http-equiv属性值refresh，不仅能够完成页面自身的自动刷新，也可以实现页面之间的跳转。这一功能目前已被越来越多的网页所使用，例如，当网站地址有变化时，希望在当前的页面中等待几秒钟后自动跳转到新的网站地址；或者希望首先在一个页面上显示欢迎信息，然后经过一段时间后，自动跳转到指定的网页上。

基本语法：