<head>标签简介
head标签用于描述文档的头部,它是所有文档头部元素的容器。
在head部分可以使用<base>, <link>, <meta>, <script>, <style>以及<title>标签。
在head标签上支持profile属性和html的全局属性,profile属性的值是一个由空格分隔的url列表,这些url包含着有关页面的元数据信息,profile属性主要是为将来的开发保留的占位符。
可以用在head中的标签
-
base;该标签为页面上的所有链接规定默认地址或默认目标,其上的属性如下:
- href,该属性为base上必需的属性,规定页面中所有相对链接的基准URL。
- target,规定在何处打开页面中所有的链接,其值有_blank, _parent, _self, _top, framename。
-
link;该标签定义文档与外部资源的关系,最常见的用途是链接样式表。其上的属性如下:
- href,被链接文件的位置。
- hreflang,规定被链接文档中文本的语言。
-
media,规定被链接文档将显示在什么设备上,该属性用于为不同的媒介类型规定不同的样式。
其属性值有screen、tty、tv、projection、handheld、print、braille、aural、all。
-
rel,规定当前文档与被链接文档间的关系,它的属性值很多,但只有stylesheet得到了所有浏览器支持。
其上的属性值有alternate、stylesheet、start、next、prev、contents、index、glossary、copyright、chapter、section、subsection、appendix、help、bookmark。
其中有一个比较重要的属性值是prefetch。Link prefetching 是利用浏览器最佳的时间去下载或者预加载一些用户可能将会在不久将来浏览的文档的一种浏览器机制。
-
sizes,规定被链接资源的尺寸,只有当rel="icon"时,才能使用该属性。
其实属性值有heightxwidth(如16x16)或any,该属性可以接受多个值,值之间用空格分隔。
- type,规定被链接文档的 MIME 类型。
- meta;可提供有关页面的元信息。
-
script;用于定义客户端脚本,如JavaScript。
script 元素既可以包含脚本语句,也可以通过 src 属性指向外部脚本文件。其上的属性如下:
-
type,指示脚本的 MIME 类型。该属性是必需的。
其中一些值为text/javascript、text/ecmascript、application/ecmascript、application/javascript、text/vbscript等。
- async,规定异步执行脚本(仅适用于外部脚本)。
- charset,规定在外部脚本文件中使用的字符编码。
- defer,规定是否对脚本执行进行延迟,直到页面加载为止。
- src,外部脚本文件的位置。
- xml:space,规定是否保留代码中的空白,其值是preserve。
-
style;用于为 HTML 文档定义样式信息。其上的属性如下:
- type,规定样式表的 MIME 类型,目前唯一可能的值是text/css。
- media,为样式表规定不同的媒介类型。
-
title;该元素定义文档的标题。
浏览器会以特殊的方式来使用标题,并且通常把它放置在浏览器窗口的标题栏或状态栏上。同样,当把文档加入用户的链接列表或者收藏夹或书签列表时,标题将成为该文档链接的默认名称。
该标签是head中唯一被要求包含的东西。其上的属性如下:
- dir,规定元素中内容的文本方向。
- lang,规定元素中内容的语言代码。
- xml:lang,规定 XHTML 文档中元素内容的语言代码。
示例:
-
head标签
<head>
<meta charset="UTF-8">
<title>The head Element</title>
</head>
-
base标签
- <base href="http://www.w3school.com.cn/i/" />
- <base target="_blank" />
-
link标签
<link rel="stylesheet" type="text/css" href="theme.css" />
-
link预加载
<link rel="prefetch" href="http://www.meituan.com" />
<link rel="prefetch" href="image.png" />
-
meta标签
<meta charset="UTF-8">
-
script标签
-
外部脚本文件
<script src="code.js"><script />
-
包含脚本语句
<script>
console.log('Hello world!');
<script />
-
style标签
<style type="text/css">
body { margin: 0; }
<style />
-
title标签
<title>我是标题<title />