本文详细介绍了HTML文档头部的重要元素，包括base、title、script、style和link的使用，特别是link的rel和media属性，以及meta标签的charset声明、name属性和http-equiv属性的应用。强调了title的概括性和charset声明的必要性，同时提供了相关标签的使用示例和注意事项。
HTML文档头部与元数据
在之前的文章中，我对 html 文档的内容做了简单的分割，这篇文章对其中的文档标题—— head 部分进行一个简单的总结～
如果没有耐心看长篇大论，可以直接到本文末尾，将会有一个包含了本文大部分内容的 demo～
文档头部的作用
head 标签本身并不携带任何信息，它主要是作为盛放其它语义类标签的容器。
head 大部分内容是不可见的，除了 title 和 图标之外。head 中可以包含的标签有 base，title，script，style，link，meta
下面从简到繁开始总结
base
base 标签的作用是给页面上的所有的相对路径提供一个基础URL
<base href="http://www.raaabbit.ink" target="_blank">
注意：
- 一份 html 文档最多只有一个 base 标签，多出的 base 都不会生效
- 这个标签存在一定的危险性，容易造成和 javascript 的配合问题
title
title 标签的作用是给页面赋予一个标题，并呈现在浏览器 tab 上，可以参考我的另一篇文章 -> html文档标题
注意：
这个标签要能够尽量概括页面的内容，因为它可能还会作为收藏夹中的标题，作为搜索引擎的搜索结果，作为社交平台分享的标题等等，应当能够起到概括内容的作用
script
script 是一段可执行脚本，一般来说都是 js 代码
<script type="text/javascript" src="./javascript.js">
一般来说，为了保证效率，script 会被放在 body 的末尾，具体原因请参考我的另外一篇文章 -> body末尾引入JS与JS异步加载
其他关于 script 标签的细节将会在 js 基础相关的 blog 里面写到
style
style 是直接写入在页面内部的样式
<style>
body{
background:#fff;
}
</style>
相比这种方式，使用 link 引入外部的 CSS 样式表更容易维护
link
link 标签相对于前面的几个标签来说要稍稍复杂一些
link 的作用是制定外部资源和当前文档的关系，具有属性href、ref、media、hreflan、type和sizes。其中 href、ref和media 更加常用。
使用 link 标签的例子：
<!-- 引入外部 CSS 样式表 -->
<link rel="stylesheet" href="./style.css">
<!-- 引入页面小图标 -->
<link rel="shortcut icon" href="ico.ico"/>
其中 rel 说明引入的资源文件是样式表，href 表示引用的文件位置是当前目录下的 style.css
link的rel属性
| 属性值 | 作用 |
|---|---|
| alternate | 指示链接到该文档的另一个版本 |
| author | 指示链接到当前文档的作者主页 |
| help | 指向一个跟网站或页面相关的帮助文档 |
| icon | 引入代表当前文档的图标，新的sized属性与这个属性结合使用，指定链接图片的宽高 |
| license | 链接到当前的文档的版权声明 |
| next | 指示链接到文档是一组文档中的下一份 |
| pingback | 处理当前文档被引用情况的服务器地址 |
| prefetch | 指明需要缓存的目标资源 |
| prev | 标明了上一个文档 |
| search | 链接到可以用于搜索当前页面和相关页面的资源 |
| sidebar | 链接到可以作为附属上下文的文档 |
| stylesheet | 引入样式表 |
| tag | 创建应用于当前文档的标签 |
link的media属性
这个属性的主要作用是进行媒体查询，按照媒体类型来决定是否引入这个资源文件：
| 属性值 | 作用 |
|---|---|
| screen | 计算机屏幕 |
| tty | 终端 |
| tv | 电视 |
| projection | 投影仪 |
| handheld | 手持设备 |
| 打印的页面 | |
| braille | 盲文设备 |
| aural | 语音合成器 |
| all | 所有 |
当然按照媒体查询的规则，也是可以直接按照尺寸进行查询的，CSS中的媒体查询请参考文章 -> CSS基本语法/几个特别的规则语法
<link rel="stylesheet" media="(max-width: 800px)" href="example.css" />
meta
meta是本文的重头戏，因为这一部分在 head 中占据的比重尤其之大，并且它也最为复杂，那我们就按照类别进行简单的梳理：
charset 声明字符集（必要！！）
声明页面的字符集是必要的，并且要写在最前面，否则有很大可能会导致乱码
<meta charset="utf-8">
通常我们会声明字符编码为 utf-8，这种编码方式也被称作“万国码”可以兼容很多语言。
具有name属性的meta(基本)
具有 name 和 content 属性的 meta 标签是最基本的
name用来执行元数据的名，content用来执行元数据的值：
<meta name="keywords" content="Raaabbit 的 博客">
这个就表示页面的 关键字 是 Raaabbit 的 博客 这样做会对 SEO 更加有利
注意： name 是一种相对更加自由的约定，http 标准规定了一些 name 作为大家使用的共识，同时也鼓励开发者发明自己的 name 使用。
下面是一些常见的name和content组合的总结：
| name | content | 作用 |
|---|---|---|
| keywords | 字符串 | 设置网页的关键词有利于SEO |
| description | 字符串 | 用一段文字描述网页，有利于SEO |
| generator | 字符串 | 说明使用的编辑器 |
| author | 字符串 | 说明作者信息 |
| robots | All/Index/Nofollow/Noindex/None | 页面可被搜索引擎搜索的情况 |
| copyright | 字符串 | 版权信息 |
| application-name | 字符串 | 应用名称 |
| viewport | width，height，inital-scale，minimum-scale，maximum-scale，user-scalable | 决定页面的大小和缩放 |
| referrer | never/always/origin/default | 跳转策略，有助于安全性 |
注意： viewport 并不是 HTML 的标准定义，但是收到浏览器的支持并成为事实标准
具有http-equiv属性的meta
设置了http-equiv属性的meta是一个编译指令，即由服务器提供的来指示页面应如何加载
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
比如上面的这段代码就能够让 IE 浏览器以最高级的 Edge 模式进行渲染
下面也对常见的一些 http-equiv 进行一个总结
| http-equiv | content | 作用 |
|---|---|---|
| content-type | text/html;Charset=UTF-8 | 指定http编码方式 |
| content-language | zh-cn | 指定内容的语言 |
| set-cookies | 模拟 http 请求头set-cookie，设置cookie | |
| default-style | 指定默认样式表 | |
| refresh | 5;url=https://raaabbit.github.io/ | 指定时间(5s)后刷新或者跳转（如果没有url就是刷新） |
| X-UA-Compatible | 声明 UA 兼容性 | |
| cache-control | no-cache | 清除缓存 |
| Expires | GMT 时间格式 | 设置网页缓存到期时间 |
| Pragma | no-cache | 设置浏览器禁止从本地缓存中调用 |
| window-Target | _top | 强制页面在当前窗口中以独立页面显示，防止页面被当作 frame |
| content-security-policy | 声明内容安全策略 |
扫一扫
1000
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
