交互式Web前端开发实践
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

第2章 HTML标记语言

2.1 HTML基础

2.1.1 HTML编写规范

HTML（HyperText Markup Language，超文本标记语言）是用来制作网页的一种规范和标准。HTML文件对于很多平台具有很好的兼容性，可以通过网页浏览器在任何平台上运行并显示。

HTML文件只是一个纯文本文件。所谓的“超文本”，是针对用HTML制作的网页页面来说的。通过HTML制作的网页页面内容可以包含图片、链接、音频、视频等非文本元素。HTML文档其实是一种静态的网页文件，里面包含了HTML的指令代码，通过浏览器的编译和解释将页面中的内容按一定的排版位置显示出来。类似于传统的报纸杂志，然而这些纸质的媒体展示不出声音和视频，但网页可以。HTML并不是一种程序设计语言，它只是一种排版网页中资料显示位置的标记结构语言，因此我们称它为超文本标记语言。

HTML的指令代码是由标签组成的。标签是由“＜”和“＞”符号以及标签名和属性表示，其表示方式为“＜标签名 属性＞”。HTML的标签只有两种类型，即单标签和双标签。

1．单标签

单标签只有一对“＜”“＞”符号，表示形式为“＜标签名 属性＝参数＞”。最常见的单标签有强制换行＜BR＞、水平线＜HR＞、表单中的文本框＜INPUT＞等。在HTML中，单标签可以表示为＜标签名＞，但在XHTML中，表示为＜标签名/＞，必须使用“/”符号正确地关闭标签。

2．双标签

顾名思义，双标签则由两对“＜”“＞”符号组成，后一对的“＜”符号换成了“＜/”符号，表示形式为“＜标签名 属性＝参数＞...＜/标签名＞”，其中省略号部分为在网页页面中显示的内容，网页内容不能写在任何标签的“＜”“＞”符号内部。双标签中“＜/标签名＞”被称为结尾标签。结尾标签只能为“＜/标签名＞”的形式，里面不能包含任何属性。值得注意的是：在HTML文档中大多数采用的是双标签的形式。

需要说明的是，HTML的标签名不区分大小写，即＜HTML＞和＜html＞表示效果是一样的。

2.1.2 HTML基本结构

HTML文档的基本结构由标签组成。

        <html>
        <head>
            <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
            <title>无标题文档</title>
        </head>

        <body>
        </body>
        </html>

HTML文档的基本结构包括以下几种标签。

1.HTML文件标签

＜HTML＞和＜/HTML＞标签表示该文档为HTML网页文档。＜HTML＞标签放在文档的开头，＜/HTML＞放在文档的末尾。网页的内容和其他标签都嵌套在这对标签之内。

2.HEAD文件头标签

＜HEAD＞和＜/HEAD＞标签表示文档的头部标签，用来描述文档的有关信息，如文档的标题、作者、采用的编码、关键词等。文档头部标签中的内容不会显示在浏览器的显示区域，主要提供给搜索引擎收录时使用。

（1）title标签

title标签是一种双标签。＜TITLE＞和＜/TITLE＞标签之间的内容表示该文档的标题，显示在浏览器的标题栏中。title标签只能用于HTML文档的头部＜HEAD＞标签中，且一个文档中只能有一个标题。

（2）meta标签

＜meta＞标签是一种单标签。它提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。＜meta＞标签位于文档的头部标签中。由于是单标签，不包含任何内容，＜meta＞标签的属性是定义与文档相关联的名称/值对。

＜meta＞标签常用的属性有content、http-equiv、name、scheme、charset，属性的值与描述请参考表2-1。

表2-1 ＜meta＞标签的属性

3.BODY文件主体标签

＜body＞和＜/body＞标签为HTML文档的主体标签。网页中需要显示的所有内容都必须包含在这对标签之间。

2.1.3 查看HTML文件

HTML文件可以直接通过浏览器解释展示出网页的内容。查看HTML文件的代码有多种方式，常用的有使用编辑工具查看和直接通过在浏览器的显示区域右击并选择“查看页面源代码”命令来进行查看。在网页的调试过程中，我们还常通过浏览器的开发调试（快捷键为F12）查看源代码。

上一章目录下一章