<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"。
265
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
