HTML5+CSS3+JavaScript 从入门到项目实践（超值版）
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

2.4 HTML 5文档头部标签

<head>标签是文档的头部标签，它是所有头部元素的容器。<head>中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在Web中的位置及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。<title>定义文档的标题，它是<head>标签中唯一必需的元素。

应该把<head>标签放在文档的开始处，紧跟在<html>后面，并处于<body>标签之前，如下面基本的HTML结构代码如下：

      <!DOCTYPE html>
      <html>
      <!--头部标签-->
      <head>
         <meta charset="UTF-8">
         <title>Title</title>
      </head>
      <body>
      </body>
      </html>

2.4.1 设置页面标题标签

<title>标签定义文档的标题，在所有HTML文档中是必需的，只能出现在<head>中。

<title>元素的作用：

● 定义浏览器工具栏中的标题。

● 提供页面被添加到收藏夹时的标题。

● 显示在搜索引擎结果中的页面标题。

【例2-2】（实例文件：ch02\Chap2.2.html）页面标题标签。

      <!DOCTYPE html>
      <html>
      <head>
         <meta charset="UTF-8">
         <title>第一个页面</title>
      </head>
      <body>
      </body>
      </html>

相关的代码实例请参考Chap2.2.html文件，在IE浏览器中运行的结果如图2-5所示。

图2-5 页面标题标签

2.4.2 引用外部文件标签

<link>标签是引用外部文件标签，通常放置在一个网页的头部标签中，用于链接外部CSS文件。

【例2-3】（实例文件：ch02\Chap2.3.html）引用外部文件标签。

      <!DOCTYPE html>
      <html>
      <head>
         <meta charset="UTF-8">
         <title></title>
      </head>
      <body>
      <p>引入外部文件标签</p>
      </body>
      </html>

相关的代码实例请参考Chap2.3.html文件，在IE浏览器中运行的结果如图2-6所示。

图2-6 页面加载效果

在上面的案例中引入style样式文件，style样式文件代码如下：

      p{
          background: red;
          color: white;
      }

在<head>标签中使用<link>把style样式引入HTML，代码如下：

      <head>
            <meta charset="UTF-8">
            <title></title>
      <!--引入外部css文件-->
            <link rel="stylesheet" href="style.css">
      </head>

在IE浏览器中运行的结果如图2-7所示。

图2-7 引用外部文件标签

2.4.3 内嵌样式标签

<style>标签是内嵌样式标签，用于为HTML文档定义样式信息，它位于<head>头部中。在<style>标签中，可以规定在浏览器中如何呈现HTML文档。

【例2-4】（实例文件：ch02\Chap2.1.html）内嵌样式标签。

相关的代码实例请参考Chap2.4.html文件，在IE浏览器中运行的结果如图2-8所示。

图2-8 内嵌样式标签

上一章目录下一章