<head> 标签
作用:定义文档的头部,头部元素的容器。<head> 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等等。文档的头部描述了文档的各种属性和信息----文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者
下面这些标签可用在 head 部分:<base>, <link>, <meta>, <script>, <style>, 以及 <title>。
<title> 定义文档的标题,它是 head 部分中唯一必需的元素。
<meta> 标签
作用:head的辅助性标签,提供关于 HTML 文档的元数据。它并不会显示在页面上,但对于机器是可读的。可用于搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等等。
可选属性:
1、http-equiv属性
添加http头部内容,自定义或者额外添加发送到浏览器中的http头部内容。
1 |
|
a、expires
说明:设置网页的过期时间,一旦过期则必须到服务器上重新获取。需要注意的是必须使用GMT时间格式。用法:<meta http-equiv="expires" content="31 Dec 2018">
b、refresh
说明:用于设定网页在特定时间内自动刷新并转到新页面。用法:<meta http-equiv="refresh"
c、set-cookie
说明:用于设定一个自定义cookie,如果网页过期,那么存盘的cookie将被删除,注意必须使用GMT的时间格式。用法:<meta http-equiv="Set-Cookie" content="name=deanhan; expires=Friday,12-Jan-2018 18:18:18 GMT; path=/">
d、content-Type
说明:用于设定页面使用的字符集。用法:<meta http-equiv="content-Type" content="text/html; charset=utf-8">
2、name属性
name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
1 |
|
a、keywords
说明:keywords用来告诉搜索引擎你网页的关键字是什么。用法:<meta name="keywords" content="逐梦博客,个人博客,个人网站">
b、description
说明:description用来告诉搜索引擎你的网站主要内容。用法:<meta name="description" content="逐梦博客,是一个记录博主学习和成长的个人纪实博客,主要关注web前端及周边技术的学习和研究。">
c、robots
说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow。默认是all。
用法:<meta name="robots" content="none">
其中content具体参数如下:
1) all:文件将被检索,且页面上的链接可以被查询
2) none:文件将不被检索,且页面上的链接不可以被查询
3) index:文件将被检索
4) follow:页面上的链接可以被查询
5) noindex:文件将不被检索,但页面上的链接可以被查询
6) nofollow:文件将被检索,但页面上的链接不可以被查询
d、author
说明:author标注网页的作者。用法:<meta name="author" content="826554003@qq.com">
e、generator
说明:generator用于说明网站的采用的什么软件制作。用法:<meta name="generator" content="Sublime"/>
f、copyright
说明:generator用于说明网站版权信息。用法:<meta name="copyright" content="xxx">
g、viewport
说明:viewport用于说明移动端网站的宽高缩放比例等信息。用法:<meta name="viewport" content="width=device-width, initial-scale=1.0">
其中content的距离参数如下:
1) width 宽度(数值/device-width)
2) height 高度(数值/device-height)
3) initial-scale 初始缩放比例
4) maximum-scale 最大缩放比例
5) minimum-scale 最小缩放比例
6) user-scalable 是否允许用户缩放(yes/no)
f、renderer
说明:用于告诉浏览器使用什么内核进行解析。用法:<meta name="renderer" content="webkit">
3、scheme
说明:用于指定要用来翻译属性值的方案。此方案应该在由 标签的 profile 属性指定的概况文件中进行了定义。用法:<meta scheme="ISBN" name="identifier" content="0-14-XXXXXX-1" >
此外:og是一种新的HTTP头部标记,即Open Graph Protocol,这种协议可以让网页成为一个“富媒体对象"。用了property=og标签,就是你同意了网页内容可以被其他社会化网站引用等,目前这种协议被SNS网站如Fackbook、renren采用。
4、property="og"
SNS已经成为网络上的一大热门应用,优质的内容通过分享在好友间迅速传播。为了提高站外内容的传播效率,2010年F8会议上Facebook公布 了一套开放内容协议(Open Graph Protocol),任何网页只要遵守该协议,SNS就能从页面上提取最有效的信息并呈现给用户。
用法:
1 2 3 4 5 |
|
最后列出一些比较常见的用法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
|
<script> 标签
作用:定义客户端脚本,比如 JavaScript。既可包含脚本语句,也可以通过 "src" 属性指向外部脚本文件。通常用于图像操作、表单验证以及动态内容更改。
a. async
作用:一旦外部脚本可用,则会异步执行。
注释:有多种执行外部脚本的方法:
如果 async="async":脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本
b.defer
作用:脚本在执行的时候不会改变页面的结构,也就是说脚本会被延迟到整个页面都解析运行完毕后再运行。因此,在script标签设置defer属性,相当于告诉浏览器立即下载,但延迟执行。
<script type="text/javascript" src="/w3school.com.cn/abc.js"></script>-----支持 <script> 的浏览器从服务器上下载名为 abc.js 的 JavaScript 程序。
<link> 标签
作用:链接一个外部样式表。
href | URL | 规定被链接文档的位置。 |
hreflang | language_code | 规定被链接文档中文本的语言。 |
media | media_query | 规定被链接文档将被显示在什么设备上。 |
rel |
| 规定当前文档与被链接文档之间的关系。 |
rev | reversed relationship | HTML5 中不支持。 |
sizes |
| 规定被链接资源的尺寸。仅适用于 rel="icon"。 |
target |
| HTML5 中不支持。 |
type | MIME_type | 规定被链接文档的 MIME 类型。 |
<style> 标签
用于为 HTML 文档定义样式信息。在 style 中,您可以规定在浏览器中如何呈现 HTML 文档。
type 属性是必需的,定义 style 元素的内容。唯一可能的值是 "text/css"。