前端入门知识分享: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标签可以优化搜索引擎对网页的索引和理解。