HTML头部详解

更新时间：2021-03-23 17:30:38 来源：赢咖4 浏览809次

HTML头部顾名思义，即包含在<head>元素里面的内容。它包含了像页面的标题,CSS，指向自定义图标的链接,元数据(描述 HTML 的数据，比如，作者，和描述文档的重要关键词), 脚本等。即以下几类标签:

<title>元素

<meta>元素

<link>元素

<script>元素

我们结合下面的HTML头部标签的结构来详细聊一聊HTML头部中的各个内容。

<!DOCTYPE html>

<html>

  <head>

    <meta charset="utf-8">

    <title>My test page</title>

  </head>

  <body>

    <p>This is my page</p>

  </body>

</html>

<head>

下面分别介绍。

1、<title>元素

我们之前已经了解过<title>，它可以用来给 html 文档添加一个标题。

你可能会将它和给 body 添加标题的 <h1>元素混淆，有些时候<h1>也会被称作网页标题。但是它们是不同的。

当被加载到浏览器中的时候，元素 <h1> 会出现在页面中 —— 通常它应该在一个页面中只被使用一次，它被用来标记你的页面内容的标题（故事的标题，新闻标题或者任何适当的方式）。

元素 <title> 是用来表示整个 HTML 文档标题的元数据（不是文档的内容）。

被作为建议的书签名。

被用在搜索的结果中。

2、<meta>元素

元数据就是描述数据的数据，而 HTML有一个“官方的”方式来为一个文档添加元数据—— <meta>元素，它是一个空元素。

不能用<base>, <link>, <script>, <style> , <title>等表示的元数据信息。

有很多不同种类的<meta>元素可以被包含进<head>元素中。

1）如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。

2）如果设置了 http-equiv 属性，meta 元素则是编译指令，提供的信息与类似命名的 HTTP 头部相同。

3）如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。

4）如果设置了 itemprop 属性，meta 元素提供用户定义的元数据。

注意: 全局属性 name 在<meta>元素中具有特殊的语义；另外，在同一个<meta>标签中，name, http-equiv 或者 charset 三者中任何一个属性存在时，itemprop属性不能被使用。

3、<link>元素

该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。

要链接一个外部的样式表，你需要在你的<head>中包含一个<link>元素,

举个例子：

增加自定义图标

举个例子：

4、<script>元素

实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了 HTML 内容（如果脚本加载某个不存在的元素，浏览器会报错)。

注意：<script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。你还可以选择将脚本放入<script>元素中，而不是指向外部脚本文件。

综上所述，HTML头部实际上也就涉及到了4个内容，即<title>元素、<meta>元素，<link>元素和<script>元素。相对来说，内容也很通俗易懂，稍加分析就不难理解。在本站的HTML教程中还有更多的HTML知识等你来学，我们对HTML技术的学习才刚刚开始。

HTML教程

上一篇5类常见HTML状态码下一篇浅谈HTML5元素分类

HTML头部详解

JVM

多线程下载器项目实战

Java日志框架全集（选学）

高并发解决方案（选学）

零基础能学Java吗？

零基础能学Java吗？

零基础能学Java吗？