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中的选择符
Oct 17 HTML / CSS
使用css3背景渐变中的透明度来设置不同颜色的背景渐变
Mar 31 HTML / CSS
CSS3的RGBA中关于整数和百分比值的转换
Aug 04 HTML / CSS
CSS3的column-fill属性对齐列内容高度的用法详解
Jul 01 HTML / CSS
HTML5中使用postMessage实现Ajax跨域请求的方法
Apr 19 HTML / CSS
HTML5的结构和语义(5):内嵌媒体
Oct 17 HTML / CSS
5个你不知道的HTML5的接口介绍
Aug 07 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
Apr 24 HTML / CSS
HTML5 Canvas 旋转风车绘制
Aug 18 HTML / CSS
详解HTML5.2版本带来的修改
May 06 HTML / CSS
CSS3实现列表无限滚动/轮播效果
Jun 23 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
php验证session无效的解决方法
2014/11/04 PHP
thinkphp3.2中Lite文件替换框架入口文件或应用入口文件的方法
2015/05/21 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP实现深度优先搜索算法(DFS,Depth First Search)详解
2017/09/16 PHP
php fread函数使用方法总结
2019/05/28 PHP
Aster vs Newbee BO3 第三场2.18
2021/03/10 DOTA
简单的jquery拖拽排序效果实现代码
2011/09/20 Javascript
Jquery EasyUI的添加,修改,删除,查询等基本操作介绍
2013/10/11 Javascript
JS+CSS设置img在DIV中只显示Img垂直居中的部分
2013/10/24 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
javascript获取重复次数最多的字符
2015/07/08 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
2016/02/17 Javascript
JS实现控制图片显示大小的方法【图片等比例缩放功能】
2017/02/18 Javascript
Webpack中publicPath路径问题详解
2018/05/03 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
JS出现404错误原理及解决方案
2020/07/01 Javascript
js实现弹窗效果
2020/08/09 Javascript
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
python 利用浏览器 Cookie 模拟登录的用户访问知乎的方法
2019/07/11 Python
python中多个装饰器的调用顺序详解
2019/07/16 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Python识别验证码的实现示例
2020/09/30 Python
Aerosoles爱柔仕官网:美国舒软女鞋品牌
2017/07/17 全球购物
Furla官网:意大利著名的皮革品牌
2019/08/06 全球购物
高中考试作弊检讨书
2014/01/14 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
有兼职工作经历的简历自我评价
2014/03/07 职场文书
学生请假条
2014/04/11 职场文书
流动人口婚育证明范本
2014/09/26 职场文书
典型事迹材料范文
2014/12/29 职场文书
学校党员干部承诺书
2015/05/04 职场文书
毕业生的自我鉴定表范文
2019/05/16 职场文书
创业计划书之冷饮店
2019/09/27 职场文书
Spring Data JPA的Audit功能审计数据库的变更
2021/06/26 Java/Android
如何在Python中妥善使用进度条详解
2022/04/05 Python