html5理解head_动力节点Java学院整理
副标题[/!--empirenews.page--]
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://www.jb51.net/html5/"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://www.jb51.net/html5/"http:/bjpowernode/listings/" target="_blank"/> 1)href即为指定的基准URL。 2)target属性规定在何处打开页面上的所有链接,包括值: 1)_blank:在新窗口中打开被连接文档; meta元素 meta元素用来定义文档的各种元数据,meta元素可以有多种用途,但每个meta元素只能用于一种用途,如果需要使用不止一种,就需要在head元素中添加多个meta元素。 指定名/值元数据对 <meta name="author" content="Adam Freeman"/> name属性用来表示元数据的类型,content属性提供值。name属性包含以下值: 1)application name:当前页所属Web应用系统的名称; 除了以上5个预定义的元数据名称,还可以使用元数据扩展,这里()有这些扩展的一份时常更新的清单。有些扩展用的比较多,例如robots元数据,HTML文档的作者可以用它告诉搜索引擎该如何对待该文档: <meta name="robots" content="noindex"/> 该属性有三个大多数搜索引擎都认识的值: 1)noindex:不要索引本页; 大多数搜索引擎都提供了优化网页或整个网站的指南,可以查看相应搜索引擎提供的网页或网站优化指南。 声明字符编码 <meta charset="utf-8" /> head元素中的meta元素声明文档的字符编码为UTF-8(默认)。 模拟HTTP标头字段 meta元素可以用来模拟或替换三种HTTP标头字段的值。 <meta http-equiv="refresh" content="5"/> http-equiv属性的用途是指定所要模拟的标头字段名称,字段值在content属性中指定。http-equiv属性的可选值如下: 1)refresh:以秒为单位指定一个时间间隔,在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入,如: <meta http-equiv="refresh" content="5;"/> 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:将样式用于所有设备(默认值); media属性中的(min-width:500px)指定特性,包括: 1)width height:指定浏览器窗口的宽度和高度,单位px,例如:width:200px link元素 用来在HTML文档和外部资源(如CSS样式表)之间建立联系。link元素包含6个局部属性,如下: (编辑:站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |