1.4　HTML5基本结构

1.4.1　新建HTML5文档

完整的HTML5文档结构一般包括两部分：头部消息（<head>）和主体信息（<body>）。

在<head>和</head>标签之间的内容表示网页文档的头部消息。在头部代码中，有一部分是浏览者可见的，如<title>和</title>之间的文本，也称为网页标题，会显示在浏览器标签页中；但是大部分内容是不可见的，是专门为浏览器解析网页服务的，如网页字符编码、各种元信息等。

在<body>和</body>标签之间的内容表示网页文档的主体信息。它包括三部分。

　文本内容。在页面上让访问者了解页面信息的纯文字，如关于产品、资讯的内容，以及其他任何内容。

　外部引用。用来加载图像、音视频文件，以及CSS样式表文件、JavaScript脚本文件等，还可以指向其他HTML页面或资源。

　标签。对文本内容进行分类标记，以确保浏览器能够正确显示。

【示例1】使用记事本或者其他类型的文本编辑器新建文本文件，保存为index.html。注意，扩展名为.html，而不是.txt。

输入下面的代码，由于网页没有包含任何信息，在浏览器中显示为空，如图1.2所示。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>网页标题</title>
    </head>
    <body>
    </body>
    </html>

由于网页内容都由文本构成，因此网页可以保存为纯文本格式，可以在任何平台使用任何编辑器查看源代码，这个特性也确保了用户能够很容易地创建HTML页面。

提示：如果使用专业网页编辑器，如Dreamweaver等，在新建网页文件时，会自动构建基本的网页结构。

本书所称HTML泛指HTML语言本身。如果需要强调某个版本的特殊性，则使用它们各自的名称。例如，HTML5引入了一些新的元素，并重新定义或删除了HTML 4和XHTML 1.0中的某些元素。

【示例2】在示例1基础上，为页面添加内容，代码如下。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8" />
    <title>HTML5示例</title>
    </head>
    <body>
    <article>
        <h1>第一个HTML5网页</h1>
        <img src="images/html5.jpg" width="200" alt="html5图标" />
        <p>我是<em>小白</em>, 现在准备学习<a href="https://www.w3.org/TR/html5/" rel="external" title="HTML5参考手册" >
HTML5</a></p>
    </article>
    </body>
    </html>

在浏览器中预览，显示效果如图1.3所示。

图1.2　空白页面

图1.3　添加主体内容

示例2演示了6种最常用的标签：a、article、em、h1、img和p。每个标签都表示不同的语义，例如，h1定义标题，a定义链接，img定义图像。

注意：在代码中行与行之间通过回车符分开，不过它不会影响页面的呈现效果。对HTML进行代码缩进显示，与在浏览器中的显示效果没有任何关系，但是pre元素是一个例外。习惯上，我们会对嵌套结构的代码进行缩进排版，这样更容易看出元素之间的层级关系。

上一章目录下一章