前端入门知识分享：HTML 页面中 head 标签之间的代码详解

前端入门知识分享：HTML 页面中 head 标签之间的代码详解

在HTML代码中HEAD之间的代码就是网页头元素，里面的内容不会显现在网页中，因此很容易被别人遗忘，但它对网页的渲染和功能性至关重要。如果能够掌握它的概念和使用方法，则是非常有用的。head 区域是HTML文档中的一个重要部分，它包含了所有的元（meta）数据，比如文档的标题、字符集定义、对外部文件的引用（如CSS样式表、JavaScript文件）、以及文档的一些其他设置。

下面是对 head 区域中常见元素的详细解析：

title 标记

用途：定义文档的标题，这个标题会显示在浏览器的标题栏或页面的标签上。

<title>我的网页</title>

link标记

用途：定义文档与外部资源的关系。它的主要作用有：使用CSS的外部样式表，自定义网页收藏图标。使用方法如下：

引用CSS样式表：

<link rel="stylesheet" href="XXX.css"　type=text/css>

把XXX换成你的CSS文件路径和文件名。　　　　　　　

个性图标：IE地址栏前换成自己的图标

<link rel="Shortcut Icon" href="favicon.ico">

说明：关于favicon.ico文件的制作。你可以先做一个图片，属于你自己站点的一个小图标，16x16 的图标文件，颜色不要超过 16 色。然后在ACD see将文件属性改为*.ico，然后将你做的*.ICO文件传到你的服务器目录中，然后就可以使用以上代码来实现，当别人登陆你的站点时，地址栏里使用的就是你自定义的图标了

meta标记

meta标记是head区中使用最多的一种标记，也是最重要的一种标记。它可以记录当前页面的信息，例如字符编码、作者、版权和关键字等。还可以用来向服务器提供信息，例如截止日期和页面刷新间隔等。meta标记有两个值（不知道可不可以这样说...-_-!!）：name和http-equiv。下面我们一个一个的来说：

name属性：

name 主要用于描述网页，形式是这样的：

<meta name="xxx" content="......"> 

其中xxx是要描述的项目名称，content后是具体的描述内容。

设置视口以适应移动设备

<meta name="viewport" content="width=device-width, initial-scale=1.0">

说明编辑本网页使用的工具

<meta name="generator" content="说明编辑本网页使用的工具">

网页关键词

<meta name="keywords" content="本网页的关键词，以备被搜索引擎收录,不同的关键词之间用逗号隔开">

网页描述

<meta name="description" content="网页的简单描述">

作者介绍

<meta name="author" content="网页作者的资料">

网页版本

<meta name="revised" content="该网页的版本">

其他信息

<meta name="others" content="可设置其它有关该网页的信息">

搜索引擎检索行为

<meta name="ROBOTS" content="">

这一条是为机器人自动搜索引擎准备的，其中content=""引号中的值：

• 设定为"all" 时文件将被检索，且页上链接可被查询;
• 设定为"none" 则表示文件不被检索，而且不查询页上的链接;
• 设定为"index" 时文件将被检索;
• 设定为"follow" 则可查询页上的链接;
• 设定为"noindex" 时文件不检索，但可被查询链接;
• 设定为"nofollow" 则表示文件不被检索，但可查询页上的链接.

http-equiv属性

http-equiv 顾名思义相当于 http 文件头的作用，可以直接影响网页的传输。其使用的形式和name一样：

<meta http-equiv="xxx" content="......">

xxx是要设置的项目名称，content后是具体的内容。http-equiv的应用主要有以下方面：

设置字符集

HTML 4.01：
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta http-equiv="content-language" content="zh-CN" />HTML5：
<meta charset="UTF-8">

META标签定义了HTML页面所使用的字符集。（utf-8，就是国标汉字码）。

utf-8 或 gb2312，你该怎么选？

选择UTF-8编码是更优选项，‌尤其是在处理多种语言内容时。‌UTF-8编码能够表示世界上几乎所有的字符，‌包括英文、‌中文、‌阿拉伯文、‌日文等，‌具有很好的兼容性，‌与ASCII编码完全兼容，‌使得不同语言之间的交流变得方便。‌此外，‌UTF-8编码的文字可以在各国支持UTF-8字符集的浏览器上显示，‌显示出其强大的国际通用性。‌尽管UTF-8编码相对于GB2312等编码可能会占用更多的数据库空间，‌但在处理多语言内容时，‌UTF-8的通用性和便利性使其成为首选。‌

然而，‌如果项目主要针对国内用户，‌并且内容以简体中文为主，‌GB2312编码也是一个可行的选择。‌GB2312是中国国家标准的一种编码方式，‌主要用于表示简体中文。‌它的优点在于能够支持中文字符的表示，‌且相对于UTF-8编码来说，‌编码效率更高一些。‌但需要注意的是，‌GB2312的字符范围较有限，‌对于一些生僻字或者少数民族字符可能无法表示。‌

综上所述，‌选择UTF-8还是GB2312应根据项目的具体需求和目标受众来决定。‌如果项目需要支持多种语言，‌尤其是非中文语言，‌推荐使用UTF-8编码。‌如果项目主要针对国内用户，‌且内容以简体中文为主，‌可以考虑使用GB2312编码。‌

如果将其中的“charset=utf-8”替换成“BIG5”，则该页面所用的字符集就是繁体中文Big5码。

• Content-Type的Content还可以是：text/xml等文档类型；Charset选项：ISO-8859-1(英文)、BIG5、UTF-8、SHIFT-Jis、Euc等字符集；
• Content-Language的Content还可以是：EN、FR等语言代码。

Refresh (自动刷新页面)

<meta http-equiv="refresh" content="5; URL=index.htm">

说明：让网页多长时间（秒）刷新自己，或在多长时间后让网页自动链接到其它网页。content后跟的是时间，单位是秒。URL是跳转到的网址。

禁止浏览器从本地机的缓存中调阅页面内容

<meta http-equiv="Pragma" content="no-cache">

浏览器为了节约时间，在本地硬盘上保存一个网上文件的临时版本。在你要重新调用时，直接显示硬盘上的文件，而不是网上的。如果你想让读者每次都看到最新的版本，就加上这句话。注意：网页不保存在缓存中，每次访问都刷新页面。这样设定，访问者将无法脱机浏览。

Window-target (显示窗口的设定)，防止网页被别人作为一个Frame调用.

<meta http-equiv="window-target" content="_top">

强制页面在当前窗口以独立页面显示。注意：这个属性是用来防止别人在框架里调用你的页面。Content选项：_blank、_top、_self、_parent。

Expires (期限) 设定网页的到期时间

<meta http-equiv="expires" content="Wed, 26 Feb 2024 08:21:57 GMT">

一旦网页过期，必须到服务器上重新调阅。注意：必须使用GMT的时间格式，或直接设为0(数字表示多少时间后过期)。

Set-Cookie (cookie设定)

<meta http-equiv="Set-Cookie" content="cookievalue=xxx; expires=Wednesday,21-Oct-98 16:14:21 GMT; path=/" />

说明：浏览器访问某个页面时会将它存在缓存中，下次再次访问时就可从缓存中读取，以提高速度。当你希望访问者每次都刷新你广告的图标，或每次都 刷新你的计数器，就要禁用缓存了。通常HTML文件没有必要禁用缓存，对于ASP等页面，就可以使用禁用缓存，因为每次看到的页面都是在服务器动态生成 的，缓存就失去意义。如果网页过期，那么存盘的cookie将被删除。

Content-Script-Type (脚本相关)

<meta http-equiv="content-script-type" content="text/javascript" />

说明：这是近来W3C的规范，指明页面中脚本的类型。比如：

网页间转换时加入过渡效果。

http-equiv 的可选值包括下面几种： 

Page-Enter : 进入页面

Page-Exit : 离开页面

Site-Enter : 进入网站

Site-Exit : 离开网站

用法：

1.<meta http-equiv="Page-Enter" content="blendTrans(Duration=0.5)" /> 
2.<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.5)" /> 
3.<meta http-equiv="Site-Enter" content="blendTrans(Duration=0.5)" /> 
4.<meta http-equiv="Site-Exit" content="blendTrans(Duration=0.5)" />

注意：blendTrans是动态滤镜的一种，产生渐隐效果。它的作用是网页间转换时加入效果。

另一种动态滤镜RevealTrans也可以用于页面进入与退出效果。

<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transition=y)" />

Duration的值为网页动态过渡的时间，单位为秒。Transition是过渡方式，它的值为0到23，分别对应24种过渡方式。如下表：

• 0， 盒状收缩
• 1 ，盒状放射
• 2 ，圆形收缩
• 3， 圆形放射
• 4， 由下往上
• 5 ，由上往下
• 6 ，从左至右
• 7 ，从右至左
• 8， 垂直百叶窗
• 9 ，水平百叶窗
• 10 ，水平格状百叶窗
• 11，垂直格状百叶窗
• 12， 随意溶解
• 13，从左右两端向中间展开
• 14，从中间向左右两端展开
• 15，从上下两端向中间展开
• 16，从中间向上下两端展开
• 17， 从右上角向左下角展开
• 18 ，从右下角向左上角展开
• 19 ，从左上角向右下角展开
• 20 ，从左下角向右上角展开
• 21， 水平线状展开
• 22 ，垂直线状展开
• 23 ，随机产生一种过渡方式

base

用途：为页面上的所有相对URL定义一个基础URL。相对URL将根据这个基础URL来解析。

<base href="https://www.example.com/page.html">

script

用途：定义客户端脚本，如JavaScript代码。虽然 script 标签也可以放在 body 中，但将其放在head中可以确保脚本在文档完全加载和解析之前执行（如果未设置defer或async属性）。

<script src="script.js"></script>

style

用途：定义内部或嵌入的样式信息。虽然 style 标签可以放在head或body中，但放在head中更常见，因为它可以确保在文档的内容渲染之前加载样式。

<style> 
body{ background-color: lightblue; } 
</style>

注意事项

• head元素内的内容不会直接显示在网页上，但会影响网页的渲染和功能。
• 为了提高页面加载速度，通常建议将CSS样式表放在
• 使用meta标签可以优化搜索引擎对网页的索引和理解。