专注Java教育14年
全国咨询/投诉热线：444-1124-454
更新时间：2021-03-23 17:30:38 来源：极悦 浏览877次
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>元素，它是一个空元素。
<meta> 元素用来表示任何不能由其它 HTML 元相关元素，即：
不能用<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属性不能被使用。
<meta charset="utf-8">
3、<link>元素
<link>元素规定了当前文档与外部资源的关系。
该元素最常用于链接样式表，此外也可以被用来创建站点图标(比如 PC 端的“favicon”图标和移动设备上用以显示在主屏幕的图标) 。
<link> 元素经常位于文档的头部。
<link> 元素有 2 个属性，rel="stylesheet"表明这是文档的样式表，而 href 包含了样式表文件的路径：
要链接一个外部的样式表，你需要在你的<head>中包含一个<link>元素,
举个例子：
<link href="main.css" rel="stylesheet">
增加自定义图标
举个例子：
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
4、<script>元素
<script> 部分没必要非要放在文档头部；
实际上，把它放在文档的尾部（在 </body>标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了 HTML 内容（如果脚本加载某个不存在的元素，浏览器会报错)。
<script src="my-js-file.js"></script>
注意：<script>元素看起来像一个空元素，但它并不是，因此需要一个结束标记。你还可以选择将脚本放入<script>元素中，而不是指向外部脚本文件。
综上所述，HTML头部实际上也就涉及到了4个内容，即<title>元素、<meta>元素，<link>元素和<script>元素。相对来说，内容也很通俗易懂，稍加分析就不难理解。在本站的HTML教程中还有更多的HTML知识等你来学，我们对HTML技术的学习才刚刚开始。
Java实验班
0基础 0学费 15天面授
Java就业班
有基础 直达就业
Java夜校直播班
业余时间 高薪转行
Java在职加薪班
工作1~3年，加薪神器
Java架构师班
工作3~5年，晋升架构
提交申请后，顾问老师会电话与您沟通安排学习
