一文搞懂HTML头部文件

04-26 16:47 1268浏览

举报 T字号

大字

中字

小字

我们在书写HTML文件时，必不可少的一个元素就<head>，HTML头部顾名思义，即包含在<head>元素里面的内容。HTML头部文件里面包含的内容可以很多也可以很少，我们想要快速搞懂HTML头部文件里面的弯弯绕绕，还得看我们下面将的核心内容。

HTML头部文件包含了像页面的标题，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头部文件也就手到擒来了。

0人推荐

共同学习，写下你的评论

0条评论

代码小兵498

153篇文章贡献528999字

一文搞懂HTML头部文件

1.<title>元素

2.<meta>元素

3.<link>元素

4.<script>元素

相关课程更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

一文搞懂HTML头部文件

1.<title>元素

2.<meta>元素

3.<link>元素

4.<script>元素

相关课程 更多>

作者相关文章更多>

推荐相关文章更多>

发评论

举报

相关课程更多>