下面是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"/>
meta元素
meta元素用来定义文档的各种元数据,meta元素可以有多种用途,但每个meta元素只能用于一种用途,如果需要使用不止一种,就需要在head元素中添加多个meta元素。
指定名/值元数据对
- <meta name="author" content="Adam Freeman"/>
- <meta name="robots" content="noindex"/>
声明字符编码
- <meta charset="utf-8" />
模拟HTTP标头字段
meta元素可以用来模拟或替换三种HTTP标头字段的值。
- <meta http-equiv="refresh" content="5"/>
- <meta http-equiv="refresh" content="5;http://www.apress.com"/>
- <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>
- <style media="screen AND (min-width:500px)" type="text/css">
- ......
- </style>
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。
载入外部样式表
- <link rel="stylesheet" type="text/css" href="styles.css"/>
为页面定义网站标志
- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
预先获取资源
可以要求浏览器预先获取预计很快就要用到的资源。
- <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>
- <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>
- <noscript>
- <meta http-equiv="refresh" content="0;http://www.apress.com"/>
- </noscript>