2019独角兽企业重金招聘Python工程师标准>>>
下面是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"/>
2)target属性规定在何处打开页面上的所有链接,包括值:
1)_blank:在新窗口中打开被连接文档;
2)_self:默认,在相同的框架中打开被链接文档;
3)_parent:在父框架打开被链接文档;
4)_top:在整个窗口中打开被链接文档;
5)framename:在指定框架中打开被链接文档。
meta元素
meta元素用来定义文档的各种元数据,meta元素可以有多种用途,但每个meta元素只能用于一种用途,如果需要使用不止一种,就需要在head元素中添加多个meta元素。
指定名/值元数据对
- <meta name="author" content="Adam Freeman"/>
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" />
模拟HTTP标头字段
meta元素可以用来模拟或替换三种HTTP标头字段的值。
- <meta http-equiv="refresh" content="5"/>
1)refresh:以秒为单位指定一个时间间隔,在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入,如:
- <meta http-equiv="refresh" content="5;http://www.apress.com"/>
3)content-type:另一种声明HTML页面所用字符编码的方法,如:
定义HTML文档内嵌的CSS样式。
- <style type="text/css">
- a{
- background-color: grey;
- color: white;
- padding: 0.5em;
- }
- </style>
可以为style元素指定样式适用的媒体:
- <style media="screen AND (min-width:500px)" type="text/css">
- ......
- </style>
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。
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" />
注:如果网站标志文件位于/favicon.ico(即Web服务器的根目录),那就不必用到link元素,大多数浏览器在载入页面时都会自动请求这个文件,就算没有link元素也是如此。
预先获取资源
可以要求浏览器预先获取预计很快就要用到的资源。
- <link rel="prefetch" href="/page2.html"/>
script元素
用于在页面中加入脚本,可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下:
1)type:表示所引用或定义的脚本的类型,对于JavaScript脚本这个属性可以省略
2)src:指定外部脚本文件的URL
3)defer async(HTML5新增):设定脚本的执行方式,这两个属性只能与src属性一同使用
4)charset:说明外部脚本文件所用字符编码,该属性只能与src属性一同使用
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文档。
使用async和defer属性可以对脚本的执行方式加以控制,defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本:
- <script defer src="simple2.js"></script>
浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面,各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本,如果运用得当,可以大大提高整体加载性能。
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>