《智能前端技术与实践》——第 2 章 前端开发基础 ——2.2 HTML基础——2.2.1 HTML 文档基本结构（中）

3．head> 标签

一个 HTML5 元素主要由文档元素和元数据元素两部分组成。其中，文档元素包括!DOCTYPE> 、html> 、head> 、body> ；而元数据元素包括title> 、style> 、link> 、meta> 、

script> 、noscript> 。因为head> 标签是所有头部元素的容器，所以它们都可以包含在head> 标签的内部。注意，title> 标签必须包含在head> 标签中。

这些元数据元素本身并非网页文档的内容，但它们提供了 HTML 文档的信息，如代码清

单2-4 所示。

代码清单 2-4

!DOCTYPE html>
    
html>
    
head>
    
meta charset="utf-8">
    
title>
    我是文档标题/title>
    
/head>
    
body>
    
大家好，我是石璞东。这里是文档内容部分
/body>
    
/html>
    

head> 标签具有结束标签。图 2-5 所示即为head> 标签在网页中的实际应用。

4．实际应用中出现的几个标签（title> 、style> 、link> 、meta> ）

1）title> 标签

title> 标签定义了文档的标题或名称，在所有 HTML 文档中是必需的，浏览器会将该元素的内容显示在图 2-6、图 2-7 和图 2-8 所示场景中。

2）style> 标签

style> 标签可以定义 HTML 文档的样式信息，它有 3个属性，详情请参考表 2-1。

代码清单 2-5 展示了一段示例代码。

代码清单 2-5

!DOCTYPE html>
    
html>
    
head>
    
meta charset="utf-8">
    
title>
    hahaCoder/title>
    
style type="text/css">

h1 {
    
color:red;

}

p {
    
color:blue;

}

li{
    
font-weight:bold;

}
    
/style>
    
/head>
    
body>
    
h1>
    大家好，我是石璞东。/h1>
    
p>
    欢迎访问我的开源作品/p>
    
ol>
    
li>
    个人网站（https://www.shipudong.com）/li>
    
li>
    个人微信公众号（hahaCoder）/li>
    
li>
    个人微信小程序（hahaAI）/li>
    
li>
    Github（https://github.com/hahaDong?tab=repositories）/li>
    
/ol>
    
/body>
    
/html>
    

运行结果如图 2-9 所示。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！