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

以下是HTML文档head部分的一个样例：

<head>

	<meta charset="utf-8" />

	<meta name="author" content="Adam Freeman"/>

	<title>Your page title</title>

	<base href="http://titan/listings/" target="_blank"/>

	<style type="text/css">

		a{

			background-color: grey;

			color: white;

			padding: 0.5em;

		}

	</style>

</head>

title元素

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

base元素

base元素用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。如未指定，则使用当前加载文档的URL。

base元素还能设定链接在用户点击时的打开方式，以及提交表单时浏览器怎样反应。

<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元素。

指定名/值元数据对

<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文档的作者能够用它告诉搜索引擎该怎样对待该文档：

<meta name="robots" content="noindex"/>

该属性有三个大多数搜索引擎都认识的值：
1）noindex：不要索引本页；
2）noarchive：不要将本页存档或缓存；
3）nofollow：不要顺着本页中的链接继续搜索下去。

大多数搜索引擎都提供了优化网页或整个站点的指南，能够查看对应搜索引擎提供的网页或站点优化指南。

声明字符编码

<meta charset="utf-8" />

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

模拟HTTP标头字段

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

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

http-equiv属性的用途是指定所要模拟的标头字段名称，字段值在content属性中指定。

http-equiv属性的可选值例如以下：
1）refresh：以秒为单位指定一个时间间隔，在此时间过去之后将从server又一次加载当前页面。也能够另行指定一个URL让浏览器加载，如：

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

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

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

style元素

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

	<style type="text/css">

		a{

			background-color: grey;

			color: white;

			padding: 0.5em;

		}

	</style>

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

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

		......

	</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）server，从其它站点链接到博客的时候它能自己主动得到通知；
---prefetch：预先获取一个资源；
---stylesheet：加载外部样式表。
5）sizes：指定图标的大小。
6）type：指定所关联资源的MIME类型，如text/css、image/x-icon。

加载外部样式表

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

能够使用多个link元素加载多个外部资源。

为页面定义站点标志

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

浏览器加载HTML页面时，会加载并显示站点标志。

注：假设站点标志文件位于/favicon.ico（即Webserver的根文件夹）。那就不必用到link元素，大多数浏览器在加载页面时都会自己主动请求这个文件，就算没有link元素也是如此。

预先获取资源

能够要求浏览器预先获取估计非常快就要用到的资源。

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

注：眼下不是全部浏览器都支持该功能。

script元素

用于在页面中加入脚本，能够直接在文档中定义脚本和引用外部文件里的脚本。

该元素支持的局部属性例如以下：
1）type：表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性能够省略
2）src：指定外部脚本文件的URL
3）defer async（HTML5新增）：设定脚本的运行方式，这两个属性仅仅能与src属性一同使用
4）charset：说明外部脚本文件所用字符编码，该属性仅仅能与src属性一同使用

定义文档内嵌脚本

<script>

	document.write("This is from the script");

</script>

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

加载外部脚本库

能够将脚本放到单独的文件里，然后用script元素加载HTML文档。

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

推迟脚本的运行

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

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

因为html遇到脚本就会运行，假设你的脚本须要使用到html脚本中的内容，通常你须要将脚本放到对应的html脚本后。但在html5中，使用defer属性就能达到相同的目的。

浏览器遇到script元素时的默认行为是在加载和运行脚本的同一时候暂停处理页面。各个script元素依次同步运行。async属性能够在浏览器解析HTML文档时异步加载和运行脚本。假设运用得当，能够大大提高总体加载性能。

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

noscript元素

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

<noscript>

	<h1>JavaScript is required!</h1>

	<p>You cannot use this page without JavaScript</p>

</noscript>

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

<noscript>

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

</noscript>

HTML5：理解head的更多相关文章

微信内置浏览器对于html5的支持
微信内置浏览器对于html5的支持来源: 作者: 热度:102 日期:14-06-10, 09:10 AM 我在做针对微信的HTML5应用, 目前遇到的几个问题是一. 安卓版微信直接调用系统浏览器 ...
深入理解HTML5：语义、标准与样式（勇猛精进早登大师殿堂创最优品质交互）
深入理解HTML5:语义.标准与样式(勇猛精进早登大师殿堂创最优品质交互) [美]布拉德福(Bradford,A.) [美]海涅(Haine,P.)著高京译 ISBN 978-7-121-20552 ...
深入理解html5系列-文本标签
转:http://blog.csdn.net/lihui130135/article/details/45150501 文章简介: 关于html5相信大家早已经耳熟能详,但是他真正的意义在 ...
深入理解HTML5：语义、标准与样式
<深入理解HTML5:语义.标准与样式> 基本信息作者: (美)布拉德福(Bradford,A.) 海涅(Haine,P.) 译者: 高京出版社:电子工业出版社 ISBN:978712 ...
轻松实现HTML5时钟（分享下自己对canvas的理解，原来没你想像的那么难哦）
Hey,guys! 让我们一起用HTML5实现一下简易时钟吧! 接触canvas时, 我突然有一种非常熟悉的感觉------canvas的部分的功能其实和Photoshop中的钢笔工具是一样的.所 ...
session与cookie的区别以及HTML5中WebStorage理解
一.session与cookie的区别二.HTML5中WebStorage理解 WebStorage的目的是克服由cookie所带来的一些限制,当数据需要被严格控制在客户端时,不需要持续的将数据发回 ...
理解HTML5中Range对象
1.理解Range对象重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~ 什么是Range对象? 在H ...
深入理解javascript选择器API系列第三篇——HTML5新增的3种selector方法
前面的话尽管DOM作为API已经非常完善了,但是为了实现更多的功能,DOM仍然进行了扩展,其中一个重要的扩展就是对选择器API的扩展.人们对jQuery的称赞,很多是由于jQuery方便的元素选择器 ...
HTML5游戏中动画帧的概念理解
最近在弄一个HTML5游戏,在学习过程中,总结出这个帧结构. HTML5游戏最重要也就是对帧的理解. 容器:Canvas 一个画布 sprite:一个canvas上有多个动画,每个动画对象就是一个An ...
通过实例深入理解HTML5/CSS3/SVG/WebGL的技术本质
常常听到人们对于HTML5的讨论,看了页面头部这个那个就是Html5,误认为HTML5只是新增些标签“而已”,学完了W3School似乎就理解了.实际上很多从业人员并没有深入理解业界为什么要推出HTM ...

随机推荐

js添加千位分隔符
function thousandBitSeparator(num){ var re=/\d{1,3}(?=(\d{3})+$)/g; var n1=num.toString().replace(/^ ...
jQuery 点击星星评分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
tomcat添加访问的ip限制
在如下位置添加如下代码: 代码: <Valve className="org.apache.catalina.valves.RemoteAddrValve" allow=&q ...
vue工程化之公有CSS、JS文件
1.关于公共的css 在src下面新建public.css,然后在main.js中引入进来 import '@/public.css',这样所有页面中都会使用这个样式了,如果只是部分页面需要,那还是不 ...
iOS Development Sites
iOS Development Sites 学习iOS开发有一段时间了,虽然还处于迷茫期,但相比以前的小白痴状态,现在还是蛮有改观的.期间接触了一些很好的网站和博客,现在摘录下来,就当建个索引,没 ...
POJ 1664 放苹果（递推关系）
链接:传送门思路:苹果m个,盘子n个.假设 f ( m , n ) 代表 m 个苹果,n个盘子有 f ( m , n ) 种放法. 根据 n 和 m 的关系可以进一步分析: 特殊的 n = 1 || ...
Java核心技术卷1 第三章
1. Java区分大小写,下一段源代码中,关键字public称为访问修饰符,用于控制程序的其他部分对于这段代码的访问级别,关键字class表明Java程序中的全部内容都包含在类里面. 标准的类名命名规 ...
thinkphp 5.0整合阿里大于验证码短信发送接口，含完整模型验证实例DEMO
为大家分享一个阿里大于短信发送接口: 首先创建一个发送模型(Send.php): <?php namespace app\index\model; use think\Validate; cla ...
ThinkPHP5.X PHP5.6.27-nts + Apache 通过 URL 重写来隐藏入口文件 index.php
我们先来看看官方手册给出关于「URL 重写」的参考: 可以通过 URL 重写隐藏应用的入口文件 index.php ,Apache 的配置参考: 1.http.conf 配置文件加载 mod_rewr ...
CSS——可视化格式模型
CSS的可视化格式模型 CSS中规定每一个元素都有自己的盒子模型(相当一规定了这个元素如何显示): 然后可视化格式模型则是把这些盒子模型按照规则摆放到页面上,也就是如何布局: 换句话说,盒子模型规定了 ...

HTML5：理解head