HTML Head

初发布于 28 Feb 2015 | in HTML

HTML `<head>` Element

该元素用于封装 meta 数据。HTML meta 数据不会显示在页面里，通常用来定义文件的标题、样式、链接、脚本和其他meta信息。

缺省 `<html>`, `<head>`, `<body>`

在 HTML5 标准里，这三个标签都可以缺省，但不建议缺省 <html> 和 <body> 标签。前者是被推荐用来放置设置网页语言的地方，声明语言对于屏幕阅读器和搜索引擎很重要。此外缺省二者之一，可能引起 DOM 和XML软件崩溃，后者缺省会在旧浏览器（IE9）中产生错误。

如果缺省 <head> 标签，默认地，浏览器会把所有写在 <body> 前的元素添加到一个默认的 <head> 元素里。

HTML `<title>`

<title> 元素定义了文档点标题，在所有HTML／XHTML文档里都是 required 的。该元素

defines a title in the browser toolbar 定义在浏览器工具条里显示的文档标题
provides a title for the page when it is added to favorites 当添加到收藏夹时为该页面提供一个标题
displays a title for the page in search-engine results 在搜索引擎结果里的该页面要显示的标题

HTML `<style>`

该元素用来定义一个HTML文档的样式信息，在该元素内所写的CSS代码即internal CSS。

HTML `<link>`

定义页面和某个外部资源的关系，最常用来链接外部样式表文件。

<link rel="stylesheet" href="mystyle.css">

注意：该元素是一个空元素，只包含一些attributes，只出现在 <head>区域，但可以出现多次。

preload

当rel的值为 preload，配合属性 as（资源类型），指定你的页面在 loading 后马上（你想要在页面加载生命周期的早期、浏览器主渲染流程开始时预加载）需要的资源。

观察到：同一个资源文件指定预加载与 head 部分书写正常的 link 引入不冲突。

目前浏览器支持率 97.05%。IE不支持

prefetch

当rel的值为 prefetch，用于（当前页加载完，在浏览器的空闲时间）预拉取下一个导航/页面所需的资源。对当前页没什么用。浏览器给 prefetch 的资源优先级低于 preload。

目前浏览器支持率 80.05%。Safari不支持

HTML `<meta>`

该标签提供关于HTML文件的元数据，虽不显示在网页中，但是机器可解析的。

The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services. 元数据可被浏览器用来决定如何显示内容或者重新加载页面，提供关键词给搜索引擎

Examples;

Specify page description, keywords, author of the document and charset.

 <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
 <meta name="description" content="Free Web tutorials on HTML and CSS">
 <meta name="author" content="Hege Refsnes">
 <meta charset="UTF-8">

每隔30秒刷新页面

 <meta http-equiv="refresh" content="30">

认证网站的 ownership，用于获取该网站在 Google Search 的敏感数据权限。实际上认证方法有多种，HTML tag最方便。
```
 <meta name="google-site-verification" content="...verification token" />
```

HTML `<script>`

该元素用来定义客户端的JavaScript，在该元素内所写的JS代码在页面加载时会被parser，当然 <script>也可以写在 <body> 里任何地方。

HTML `<base>`

The <base> tag 该标签指定了一个HTML文档中所有相对URL的基地址和target目标地址(具体取值参考links章节)。比如 <img> 标签引用images文件夹里的图片，其属性 _src_的值可以直接写文件名。

<head>
  <base href="http://blog.csdn.net/images/" target="_blank">
</head>
<body>
  <img src="stickman.gif" width="24" height="24" alt="stickman">
</body>

注意:

一个文件里最多有一个 <base> 元素，且必须写在 <head> 元素里。
<base> 元素要写在 <head> 里第一个元素的位置上。So that other elements in the head section uses the information from the <base> element.
如果有<base> 元素出现，则它必须含有一个 href 特性或者 target 特性，或者两者都有。

HTML <head> Element

缺省 <html>, <head>, <body>

HTML <title>

HTML <style>

HTML <link>