html5理解head_动力节点Java学院整理


Posted in HTML / CSS onJuly 13, 2017

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://bjpowernode/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:以秒为单位指定一个时间间隔,在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个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)服务器,从其他网站链接到博客的时候它能自动得到通知;
 ---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(即Web服务器的根目录),那就不必用到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>

 

 

HTML / CSS 相关文章推荐
CSS3 完美实现圆角效果
Jul 13 HTML / CSS
CSS的pointer-events属性详细介绍(作用和注意事项)
Apr 23 HTML / CSS
基于CSS3实现立方体自转效果
Mar 01 HTML / CSS
CSS3 animation实现逐帧动画效果
Jun 02 HTML / CSS
html5定位并在百度地图上显示的示例
Apr 27 HTML / CSS
一个不错的HTML5 Canvas多层点击事件监听实例
Apr 29 HTML / CSS
HTML5 Canvas实现图片缩放、翻转、颜色渐变的代码示例
Feb 28 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
详解HTML5中的picture元素响应式处理图片
Jan 03 HTML / CSS
canvas探照灯效果的示例代码
Nov 30 HTML / CSS
一文彻底解决HTML5页面中长按保存图片功能
Jun 10 HTML / CSS
解析html5 canvas实现背景鼠标连线动态效果代码
Jun 17 HTML / CSS
HTML5拖放功能_动力节点Java学院整理
Jul 13 #HTML / CSS
html5视频播放_动力节点Java学院整理
Jul 13 #HTML / CSS
HTML5之web workers_动力节点Java学院整理
Jul 17 #HTML / CSS
Html5之svg可缩放矢量图形_动力节点Java学院整理
Jul 17 #HTML / CSS
HTML5等待加载动画效果
Jul 27 #HTML / CSS
利用Canvas模仿百度贴吧客户端loading小球的方法示例
Aug 13 #HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 #HTML / CSS
You might like
PHP4 与 MySQL 数据库操作函数详解
2006/10/09 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
在IIS下安装PHP扩展的方法(超简单)
2017/04/10 PHP
PHP基于IMAP收取邮件的方法示例
2017/08/07 PHP
如何修改Laravel中url()函数生成URL的根地址
2017/08/11 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
javascript GUID生成器实现代码
2009/10/31 Javascript
javascript 精粹笔记
2010/05/09 Javascript
jQuery操作Select的Option上下移动及移除添加等等
2013/11/18 Javascript
js每隔5分钟执行一次ajax请求的实现方法
2013/11/27 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
2015/04/16 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
详解Javascript中的原型OOP
2016/10/12 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
ES6 Object属性新的写法实例小结
2019/06/25 Javascript
vue-resource:jsonp请求百度搜索的接口示例
2019/11/09 Javascript
javascript数组的定义及操作实例
2019/11/10 Javascript
用Python编写一个简单的FUSE文件系统的教程
2015/04/02 Python
python基于multiprocessing的多进程创建方法
2015/06/04 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python如何访问字符串中的值
2020/02/09 Python
Java如何基于wsimport调用wcf接口
2020/06/17 Python
一款利用纯css3实现的360度翻转按钮的实例教程
2014/11/05 HTML / CSS
会计实习自我鉴定
2013/12/04 职场文书
上班上网检讨书
2014/01/29 职场文书
2014年客服工作总结范文
2014/11/13 职场文书
党员廉洁自律个人总结
2015/02/13 职场文书
2016元旦文艺汇演主持词
2015/07/06 职场文书
小学班级口号大全
2015/12/25 职场文书
利用For循环遍历Python字典的三种方法实例
2022/03/25 Python