HTML <head>标签

上一节我们介绍了 HTML 的基本结构，在 HTML 的基本结构中，使用 <head> 标签来定义头部的内容。接下来我们一起看一下 <head> 标签内部又可以放哪些内容（或标签）呢？

请读者先看一段代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="expires" content="31 Dec 2090">
    <title>文档的标题</title>
    <link rel="stylesheet" href="url">
    <style></style>
    <script src="url"></script>
</head>
<body>
</body>
</html>

从这段代码中我们可以看出，<meta>、<title>、<link>、<style> 以及 <script> 标签是可以放在 <head> 标签内部的，我们来分别解释一下各个标签的含义。

1. <title>标签

<title> 标签用来表示文档的标题，我们通过一段简单的代码来加以说明：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>文档的标题</title>
</head>
<body>
</body>
</html>

运行效果如下图所示：

图1：<title> 文档的标题

2. <link>标签

在 HTML 中，允许使用 <link> 标签配合 href 属性来引用外部 CSS（Casecading Style Sheets）文件，其中 href 属性值为外部 CSS 文件的路径。在 CSS 章节中会详细进行讲解，这里不做过多解释。

3. <style>标签

我们建议在 <head> 标签中使用 <link> 或 <style> 标签，而不是在其他标签中使用。当浏览器加载页面时，会自上而下执行代码。如果这两个标签写的靠近下方，在加载页面样式时，可能会有短暂的延迟，影响用户使用效果。

4. <script>标签

5. href与src的区别

src 是 source 的简写，表示来源地址，用来引入地址中的内容。引入的内容会嵌入到当前标签所在的位置，所以浏览器在解析引入文件时，会停止对后续文档的处理，直到 src 的内容加载完毕。
href 是 Hypertext Reference 的简写，表示超文本引用。在使用 href 时，浏览器不会停止解析当前文件。因为 href 属性中的内容只是与当前页面有关联，然后当前页面对它进行一次引用。

提示：以上讲到的标签不是必须写在 <head></head> 里面，只是 <head> 里面可以写入这些标签。例如， <script> 标签我们就不建议写在 <head></head> 内部，因为浏览器在解析 src 的路径时会停下对后续文档的处理，造成页面的短暂阻塞。

原创文章，作者：奋斗，如若转载，请注明出处：https://blog.ytso.com/293.html