HTML5：理解head

快来打我* 2021-12-23 15:53 309阅读 0赞

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][]

HTML文档的head部分，通常包括指定页面标题，为搜索引擎提供关于页面本身的信息，加载样式表，以及加载JavaScript文件（出于性能考虑，多数时候放在页面底部</body>标签结束前加载JavaScript）。除了title，head里的内容对页面访问者来说都是不可见的。

下面是HTML文档head部分的一个例子：

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****head****>**  
2.      **<****meta** charset="utf-8" **/>**  
3.      **<****meta** name="author" content="Adam Freeman"**/>**  
4.      **<****title****>**Your page title**</****title****>**  
5.      **<****base** href="http://titan/listings/" target="\_blank"**/>**  
6.      **<****style** type="text/css"**>**  
7.          a\{  
8.              background-color: grey;  
9.              color: white;  
10.             padding: 0.5em;  
11.         \}  
12.     **</****style****>**  
13. **</****head****>**

# title元素    #

head元素中必须包含一个title元素，该元素内容会出现在浏览器的标签页中或者出现在浏览器窗口的顶部，作为网页标题，和浏览器相关。

# base元素    #

base元素用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。如未指定，则使用当前加载文档的URL。base元素还能设定链接在用户点击时的打开方式，以及提交表单时浏览器如何反应。

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****base** href="http://titan/listings/" target="\_blank"**/>**

1）href即为指定的基准URL。  
2）target属性规定在何处打开页面上的所有链接，包括值：  
1）\_blank：在新窗口中打开被连接文档；  
2）\_self：默认，在相同的框架中打开被链接文档；  
3）\_parent：在父框架打开被链接文档；  
4）\_top：在整个窗口中打开被链接文档；  
5）framename：在指定框架中打开被链接文档。

# meta元素    #

meta元素用来定义文档的各种元数据，meta元素可以有多种用途，但每个meta元素只能用于一种用途，如果需要使用不止一种，就需要在head元素中添加多个meta元素。

## 指定名/值元数据对    ##

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****meta** name="author" content="Adam Freeman"**/>**

name属性用来表示元数据的类型，content属性提供值。name属性包含以下值：  
1）application name：当前页所属Web应用系统的名称；  
2）author：当前页的作者名；  
3）description：当前页的说明；  
4）generator：用来生成HTML的软件名称；  
5）keywords：描述页面的内容。  
除了以上5个预定义的元数据名称，还可以使用元数据扩展，这里（http://wiki.whatwg.org/wiki/MetaExtensions）有这些扩展的一份时常更新的清单。有些扩展用的比较多，例如robots元数据，HTML文档的作者可以用它告诉搜索引擎该如何对待该文档：

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****meta** name="robots" content="noindex"**/>**

该属性有三个大多数搜索引擎都认识的值：  
1）noindex：不要索引本页；  
2）noarchive：不要将本页存档或缓存；  
3）nofollow：不要顺着本页中的链接继续搜索下去。  
大多数搜索引擎都提供了优化网页或整个网站的指南，可以查看相应搜索引擎提供的网页或网站优化指南。

## 声明字符编码    ##

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****meta** charset="utf-8" **/>**

head元素中的meta元素声明文档的字符编码为UTF-8（默认）。

## 模拟HTTP标头字段    ##

meta元素可以用来模拟或替换三种HTTP标头字段的值。

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****meta** http-equiv="refresh" content="5"**/>**

http-equiv属性的用途是指定所要模拟的标头字段名称，字段值在content属性中指定。http-equiv属性的可选值如下：  
1）refresh：以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入，如：

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****meta** http-equiv="refresh" content="5;http://www.apress.com"**/>**

2）default-style：指定页面优先使用的样式表，content属性的值必须是同一文档中某个style元素或link元素的title属性值；  
3）content-type：另一种声明HTML页面所用字符编码的方法，如：

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****meta** http-equiv="content-type" content="text/html charset=UTF-8"**/>**

# style元素    #

定义HTML文档内嵌的CSS样式。

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****style** type="text/css"**>**  
2.      a\{  
3.          background-color: grey;  
4.          color: white;  
5.          padding: 0.5em;  
6.      \}  
7.  **</****style****>**

上面为a元素设计了一个新样式。style元素可以出现在HTML文档中的各个部分，一个文档可以包含多个style元素，该元素可以用于为模板定义的样式（link元素导入）提供补充。  
可以为style元素指定样式适用的媒体：

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****style** media="screen AND (min-width:500px)" type="text/css"**>**  
2.      ......   
3.  **</****style****>**

media属性中的screen是设备类型，可选值的范围包括：  
1）all：将样式用于所有设备（默认值）；  
2）aural：将样式用于语音合成器；  
3）braille：将样式用于忙问设备；  
4）handheld：将样式用于手持设备；  
5）projection：将样式用于投影机；  
6）print：将样式用于打印预览和打印页面时；  
7）screen：将样式用于计算机显示器屏幕；  
8）tty：将样式用于电传打字机之类的等宽设备；  
9）tv：将样式用于电视机。  
media属性中的(min-width:500px)指定特性，包括：  
1）width height：指定浏览器窗口的宽度和高度，单位px，例如：width:200px  
2）device-width device-height：指定整个设备（而不仅仅是浏览器窗口）的宽度和高度，单位px，例如：min-device-height:200px  
3）resolution：指定设备的像素密度，单位dpi（点/英寸）或dpcm（点/厘米），例如：max-resolution:600dpi  
4）orientation：指定设备的较长边朝向，可选值为portrait和landscape  
5）aspect-ratio device-aspect-ratio：指定浏览器窗口或整个设备的像素宽高比，例如：min-aspect-ratio:16/9  
6）color monochrome：指定彩色或黑白设备上每个像素占用的二进制位数，例如：min-monochrome:2  
7）color-index：指定设备所能显示的颜色数目，例如：max-color-index:256  
8）scan：指定电视的扫描模式，包括值progressive和interlace  
9）grid：指定设备的类型，支持的值为0和1（1代表网格型设备，使用固定的网格显示内容）

# link元素    #

用来在HTML文档和外部资源（如CSS样式表）之间建立联系。link元素包含6个局部属性，如下：  
1）href：指定link元素指向的资源的URL；  
2）hreflang：说明所关联资源使用的语言；  
3）media：说明所关联的内容用于哪种设备，同style中的media属性；  
4）rel：说明文档与所关联资源的关系类型，值的范围如下：  
\---alternate：链接到文档的替代版本，比如另一种语言的译本；  
\---author：链接到文档的作者；  
\---help：连接到当前文档的说明文档；  
\---icon：指定图标资源；  
\---license：链接到当前文档的相关许可证；  
\---pingback：指定一个回探（pingback）服务器，从其他网站链接到博客的时候它能自动得到通知；  
\---prefetch：预先获取一个资源；  
\---stylesheet：载入外部样式表。  
5）sizes：指定图标的大小；  
6）type：指定所关联资源的MIME类型，如text/css、image/x-icon。

## 载入外部样式表    ##

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****link** rel="stylesheet" type="text/css" href="styles.css"**/>**

可以使用多个link元素载入多个外部资源。

## 为页面定义网站标志    ##

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****link** rel="shortcut icon" href="favicon.ico" type="image/x-icon" **/>**

浏览器载入HTML页面时，会加载并显示网站标志。  
注：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素，大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。

## 预先获取资源    ##

可以要求浏览器预先获取预计很快就要用到的资源。

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****link** rel="prefetch" href="/page2.html"**/>**

注：目前不是所有浏览器都支持该功能。

# script元素    #

用于在页面中加入脚本，可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下：  
1）type：表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略  
2）src：指定外部脚本文件的URL  
3）defer async（HTML5新增）：设定脚本的执行方式，这两个属性只能与src属性一同使用  
4）charset：说明外部脚本文件所用字符编码，该属性只能与src属性一同使用

## 定义文档内嵌脚本    ##

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****script****>**  
2.      document.write("This is from the script");  
3.  **</****script****>**

默认情况下，浏览器在页面中一遇到脚本就会执行。

## 载入外部脚本库    ##

可以将脚本放到单独的文件中，然后用script元素载入HTML文档。

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****script** src="simple.js"**>****</****script****>**

## 推迟脚本的执行    ##

使用async和defer属性可以对脚本的执行方式加以控制，defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本：

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****script** defer src="simple2.js"**>****</****script****>**

由于html遇到脚本就会执行，如果你的脚本需要使用到html脚本中的内容，通常你需要将脚本放到相应的html脚本后，但在html5中，使用defer属性就能达到同样的目的。  
浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面，各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本，如果运用得当，可以大大提高整体加载性能。

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****script** async src="simple2.js"**>****</****script****>**

# noscript元素    #

noscript元素用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****noscript****>**  
2.      **<****h1****>**JavaScript is required!**</****h1****>**  
3.      **<****p****>**You cannot use this page without JavaScript**</****p****>**  
4.  **</****noscript****>**

还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。

**\[html\]**  [view plain][] [copy][view plain]

1.  **<****noscript****>**  
2.      **<****meta** http-equiv="refresh" content="0;http://www.apress.com"**/>**  
3.  **</****noscript****>**  
4.

转载于:https://my.oschina.net/zhanghaiyang/blog/592475

[80_]: https://my.oschina.net/u/2663968/blog/3051541
[hot3.png]: /images/20211223/a9a1bf2ea66848b69a7fabfde1c54eaa.png
[view plain]: http://blog.csdn.net/tomato__/article/details/50432950#

发表评论取消回复

表情：

评论列表（有 0 条评论，309人围观）

还没有评论，来说两句吧...

相关阅读

相关 html_head_body

HTML文档标准结构： <html> <head> </head> <body>

傷城~/ 2023年10月03日 22:53/ 0 赞/ 39 阅读

相关 HTML5：理解head

[2019独角兽企业重金招聘Python工程师标准>>> ][2019_Python_] ![hot3.png][] HTML文档的head部分，通常包括指定页面标题，为搜索

骑猪看日落/ 2022年10月02日 09:45/ 0 赞/ 189 阅读

相关移动前端头部标签(HTML5 head meta)--转

<!DOCTYPE html>  <html lang="zh-cmn-Hans"> <!--

向右看齐/ 2022年09月29日 05:19/ 0 赞/ 247 阅读

相关移动前端头部标签(HTML5 head meta)

`<!` `DOCTYPE` `html> ` `` `<` `html` `lang` `=` `"zh

川长思鸟来/ 2022年08月19日 01:49/ 0 赞/ 232 阅读

相关 HTML meta标签总结,HTML5 head meta属性整理

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。链接:[http://caibaojian.com/mobile-meta.html\comme

水深无声/ 2022年06月09日 08:44/ 0 赞/ 307 阅读

相关 HTML-head头部浅析

HTML结构在sublime或HBuildr新建HTML文件，输入html:5,按下tab键后，自动生成的代码大致如下： <!DOCTYPE html>

绝地灬酷狼/ 2022年05月24日 09:57/ 0 赞/ 316 阅读

相关 HTML5：理解head

[为什么80%的码农都做不了架构师？>>> ][80_] ![hot3.png][] HTML文档的head部分，通常包括指定页面标题，为搜索引擎提供关于页面本身的信息，加载

快来打我*/ 2021年12月23日 15:53/ 0 赞/ 310 阅读

相关 xhtml、html5常用头部head写法

xhtml <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.

青旅半醒/ 2021年11月05日 02:12/ 0 赞/ 314 阅读

相关 git实战-5、理解HEAD头指针

git实战-5、理解HEAD头指针文章目录 git实战-5、理解HEAD头指针前言那分离头指针在使用中, 到底有哪些具体的适用

灰太狼/ 2021年09月28日 06:36/ 0 赞/ 889 阅读

相关 HTML head标签

head标签内容包括：网页标题标签：<title></title> 编码格式标签：<meta charset="utf-8"/> <me

不念不忘少年蓝@/ 2021年07月24日 17:04/ 0 赞/ 377 阅读