HTML文档的head部分，通常包括指定页面标题，为搜索引擎提供关于页面本身的信息，加载样式表，以及加载JavaScript文件（出于性能考虑，多数时候放在页面底部</body>标签结束前加载JavaScript）。除了title，head里的内容对页面访问者来说都是不可见的。

下面是HTML文档head部分的一个例子：

[html] view
plaincopy

  1. <head>
  2. <meta charset="utf-8" />
  3. <meta name="author" content="Adam Freeman"/>
  4. <title>Your page title</title>
  5. <base href="http://titan/listings/" target="_blank"/>
  6. <style type="text/css">
  7. a{
  8. background-color: grey;
  9. color: white;
  10. padding: 0.5em;
  11. }
  12. </style>
  13. </head>

title元素

head元素中必须包含一个title元素，该元素内容会出现在浏览器的标签页中或者出现在浏览器窗口的顶部，作为网页标题，和浏览器相关。

base元素

base元素用来设置一个基准URL，让HTML文档中的相对链接在此基础上进行解析。如未指定，则使用当前加载文档的URL。base元素还能设定链接在用户点击时的打开方式，以及提交表单时浏览器如何反应。
[html] view
plaincopy

  1. <base href="http://titan/listings/" target="_blank"/>

1）href即为指定的基准URL。

2）target属性规定在何处打开页面上的所有链接，包括值：

1）_blank：在新窗口中打开被连接文档；

2）_self：默认，在相同的框架中打开被链接文档；

3）_parent：在父框架打开被链接文档；

4）_top：在整个窗口中打开被链接文档；

5）framename：在指定框架中打开被链接文档。

meta元素

meta元素用来定义文档的各种元数据，meta元素可以有多种用途，但每个meta元素只能用于一种用途，如果需要使用不止一种，就需要在head元素中添加多个meta元素。

指定名/值元数据对

[html] view
plaincopy

  1. <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文档的作者可以用它告诉搜索引擎该如何对待该文档：

[html] view
plaincopy

  1. <meta name="robots" content="noindex"/>

该属性有三个大多数搜索引擎都认识的值：

1）noindex：不要索引本页；

2）noarchive：不要将本页存档或缓存；

3）nofollow：不要顺着本页中的链接继续搜索下去。

大多数搜索引擎都提供了优化网页或整个网站的指南，可以查看相应搜索引擎提供的网页或网站优化指南。

声明字符编码

[html] view
plaincopy

  1. <meta charset="utf-8" />

head元素中的meta元素声明文档的字符编码为UTF-8（默认）。

模拟HTTP标头字段

meta元素可以用来模拟或替换三种HTTP标头字段的值。
[html] view
plaincopy

  1. <meta http-equiv="refresh" content="5"/>

http-equiv属性的用途是指定所要模拟的标头字段名称，字段值在content属性中指定。http-equiv属性的可选值如下：

1）refresh：以秒为单位指定一个时间间隔，在此时间过去之后将从服务器重新载入当前页面。也可以另行指定一个URL让浏览器载入，如：

[html] view
plaincopy

  1. <meta http-equiv="refresh" content="5;http://www.apress.com"/>

2）default-style：指定页面优先使用的样式表，content属性的值必须是同一文档中某个style元素或link元素的title属性值；

3）content-type：另一种声明HTML页面所用字符编码的方法，如：

[html] view
plaincopy

  1. <meta http-equiv="content-type" content="text/html charset=UTF-8"/>

style元素

定义HTML文档内嵌的CSS样式。
[html] view
plaincopy

  1. <style type="text/css">
  2. a{
  3. background-color: grey;
  4. color: white;
  5. padding: 0.5em;
  6. }
  7. </style>

上面为a元素设计了一个新样式。style元素可以出现在HTML文档中的各个部分，一个文档可以包含多个style元素，该元素可以用于为模板定义的样式（link元素导入）提供补充。

可以为style元素指定样式适用的媒体：

[html] view
plaincopy

  1. <style media="screen AND (min-width:500px)" type="text/css">
  2. ......
  3. </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。

载入外部样式表

[html] view
plaincopy

  1. <link rel="stylesheet" type="text/css" href="styles.css"/>

可以使用多个link元素载入多个外部资源。

为页面定义网站标志

[html] view
plaincopy

  1. <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />

浏览器载入HTML页面时，会加载并显示网站标志。

注：如果网站标志文件位于/favicon.ico（即Web服务器的根目录），那就不必用到link元素，大多数浏览器在载入页面时都会自动请求这个文件，就算没有link元素也是如此。

预先获取资源

可以要求浏览器预先获取预计很快就要用到的资源。
[html] view
plaincopy

  1. <link rel="prefetch" href="/page2.html"/>

注：目前不是所有浏览器都支持该功能。

script元素

用于在页面中加入脚本，可以直接在文档中定义脚本和引用外部文件中的脚本。该元素支持的局部属性如下：

1）type：表示所引用或定义的脚本的类型，对于JavaScript脚本这个属性可以省略

2）src：指定外部脚本文件的URL

3）defer async（HTML5新增）：设定脚本的执行方式，这两个属性只能与src属性一同使用

4）charset：说明外部脚本文件所用字符编码，该属性只能与src属性一同使用

定义文档内嵌脚本

[html] view
plaincopy

  1. <script>
  2. document.write("This is from the script");
  3. </script>

默认情况下，浏览器在页面中一遇到脚本就会执行。

载入外部脚本库

可以将脚本放到单独的文件中，然后用script元素载入HTML文档。
[html] view
plaincopy

  1. <script src="simple.js"></script>

推迟脚本的执行

使用async和defer属性可以对脚本的执行方式加以控制，defer属性告诉浏览器要等页面载入和解析完成后才能执行脚本：
[html] view
plaincopy

  1. <script defer src="simple2.js"></script>

由于html遇到脚本就会执行，如果你的脚本需要使用到html脚本中的内容，通常你需要将脚本放到相应的html脚本后，但在html5中，使用defer属性就能达到同样的目的。

浏览器遇到script元素时的默认行为是在加载和执行脚本的同时暂停处理页面，各个script元素依次同步执行。async属性可以在浏览器解析HTML文档时异步加载和执行脚本，如果运用得当，可以大大提高整体加载性能。

[html] view
plaincopy

  1. <script async src="simple2.js"></script>

noscript元素

noscript元素用来向禁用了JavaScript或浏览器不支持JavaScript的用户显示一些内容。
[html] view
plaincopy

  1. <noscript>
  2. <h1>JavaScript is required!</h1>
  3. <p>You cannot use this page without JavaScript</p>
  4. </noscript>

还有一种选择是在浏览器不支持JavaScript时将其引至另一个URL。

[html] view
plaincopy

  1. <noscript>
  2. <meta http-equiv="refresh" content="0;http://www.apress.com"/>
  3. </noscript>

Html学习总结（1）——理解Html的head的更多相关文章

  1. 学习《深入理解C#》—— 泛型 (第三章3.1---3.2)

    泛型是什么? 泛型(generic)是C# 2.0和通用语言运行时(CLR)的一个新特性.泛型为.NET框架引入了类型参数(type parameters)的概念.类型参数使得设计类和方法时,不必确定 ...

  2. 学习《深入理解C#》—— 委托的构成、合并与删除和总结 (第二章1.1---1.4)

    目录 简单委托的构成 合并和删除委托 委托总结 简单委托的构成 委托四部曲: 声明委托类型. 必须有一个方法包含了要执行的方法. 必须创建一个委托实例. 必须调用委托(invoke)实例 ① 声明委托 ...

  3. 学习《深入理解C#》—— 可空类型、可选参数和默认值 (第一章1.3)

    目录 C#可空类型 C# 可选参数和默认值 C# 可空类型 在日常生活中,相信大家都离不开手机,低头族啊!哈哈... 假如手机厂商生产了一款新手机,暂时还未定价,在C#1中我们该怎么做呢? 常见的解决 ...

  4. 学习《深入理解C#》—— 数据类型、排序和过滤 (第一章1.1---1.2)

    引言 在开始看这本书之前看过一些技术博客,填补自己对于一些知识点的不足.无意中发现了<深入理解C#>这本书,本书主要探讨C# 2.C# 3和C# 4的细节与特性,所以做了一下阅读笔记,欢迎 ...

  5. 微信小程序开发：学习笔记[7]——理解小程序的宿主环境

    微信小程序开发:学习笔记[7]——理解小程序的宿主环境 渲染层与逻辑层 小程序的运行环境分成渲染层和逻辑层. 程序构造器

  6. 转载-【深度学习】深入理解Batch Normalization批标准化

      全文转载于郭耀华-[深度学习]深入理解Batch Normalization批标准化:   文章链接Batch Normalization: Accelerating Deep Network T ...

  7. Vue学习之--------深入理解Vuex之多组件共享数据（2022/9/4）

    在上篇文章的基础上:Vue学习之--------深入理解Vuex之getters.mapState.mapGetters 1.在state中新增用户数组 2.新增Person.vue组件 提示:这里使 ...

  8. ARM学习篇 SDRAM理解

    1.SDRAM单管存储单元 SDRAM单管电路图 C记忆单元 T控制门管 Z字线 W位线 注:图示为N沟道耗尽型MOS管 写入:Z加高电平,MOS导通,W状态决定了电容C的状态 读出:Z加高电平,MO ...

  9. C#学习之初步理解委托、事件、匿名方法和Lambda

    最经在学习LinqtoSql,然后扯到Lambda表达式,然后扯到匿名方法,然后扯到委托,最后扯到事件处理...后来发现对委托这个概念和事件处理这个过程理解得不是很清晰,遂得一下学习笔记.那里说得不对 ...

  10. 轻松学习Linux之理解Shell的硬链接与软连接

     大家在学习linux的过程中常常遇到一些模糊且容易混淆的概念比如什么是硬链接和软链接,他们有什么区别?  软连接有点象windows中的快捷方式,连接和目标文件具有相同的节点,而硬连接就好象重新复制 ...

随机推荐

  1. POJ 2442 Sequence(堆的使用练习）

    题目地址:id=2442">POJ 2442 真心没想到这题的思路. .原来是从第一行逐步向下加,每次都仅仅保存前n小的数.顺便练习了下堆.. 只是感觉堆的这样的使用方法用的不太多啊. ...

  2. eclipse软件快捷键的使用

    [Ct rl+T] 搜索当前接口的实现类 1. [ALT +/]    此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ ...

  3. Web开发、原生开发、混合开发的区别优势：

    一.Web 应用 Web应用本质上是为移动浏览器设计的基于Web的应用,它们是用普通Web开发语言开发的,可以在各种智能手机浏览器上运行. 优点: 支持设备广泛: 较低的开发成本: 可即时上线: 无内 ...

  4. 3065: 带插入区间K小值_树套树_替罪羊树_权值线段树

    经过周六一天,周一3个小时的晚自习,周二2个小时的疯狂debug,终于凭借自己切掉了这道树套树题. Code: #include <cstdio> #include <algorit ...

  5. jQuery实现tab标签切换效果

    技巧一.jQuery :eq() 选择器 定义和用法 :eq() 选择器选取带有指定 index 值的元素. index 值从 0 开始,所有第一个元素的 index 值是 0(不是 1). 经常与其 ...

  6. MongoDB 的replicattion 复制集练习

              replicattion 相当于 mysql 的主从复制的读写分离,共同维护相同的数据,提高服务器的可用性[假如主(PRIMARY)不能用时,mongo会迅速自动切到从(SECON ...

  7. 洛谷1414 又是毕业季II

    问题描述 彩排了一次,老师不太满意.当然啦,取每位同学的号数来找最大公约数显然不太合理.于是老师给每位同学评了一个能力值.于是现在问题变为,从n个学生中挑出k个人使得他们的默契程度(即能力值的最大公约 ...

  8. 紫书 例题 10-27 UVa 10214（欧拉函数）

    只看一个象限简化问题,最后答案乘4+4 象限里面枚举x, 在当前这条固定的平行于y轴的直线中 分成长度为x的一段段.符合题目要求的点gcd(x,y) = 1 那么第一段1<= y <= x ...

  9. Android后台进程与前台线程间的区别使用

    博客出自:http://blog.csdn.net/liuxian13183,转载注明出处! All Rights Reserved ! 很早就翻译过Android API的一篇文章Android高级 ...

  10. Chrome开启无界面浏览模式Python+Windows环境

    环境:Python 3.5.x + Selenium 3.4.3 + Chromedriver 2.30 + Chrome 60 beta版 + WIN7/WIN10 chrome_options = ...