head的子标签 · 前端

## **title 标签** ``` <title>site title</title> ``` ## **link 标签** ```html  <link rel="shortcut icon" type="image/ico" href="/favicon.ico" />  <link href="" rel="stylesheet"> ``` ## **script标签** ```html  <script src="" type="text/javascript"></script>  <script type="text/javascript"> //... </script> ``` ## **style标签** ``` <style type="text/css"></style> ``` ## **base标签** 指定用于一个文档中包含的所有相对 URL 的根 URL。每个html文档中只能有一个base元素，重复多个只有一个生效(含有href和target属性) js获取根url： ``` //默认值为 document.location.href。 document.baseURI ``` 用法示例 ```html <base href="https://example.com" target="_self">  <a href="#anchor">Anker</a>  <a href="static/image/1.jpg">Anker</a> ``` ## **meta 标签** Meta标签的作用通常是用作网页关键词、网页描述、作者、网页编码、robots、自动跳转等说明性标签。这样写法随处可见，任何一个网页中都有meta标签的使用,用于不能用style、title等上面的文档元数据表示的信息 **1、Meta属性之http-equiv** http-equiv相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。如果设置了 http-equiv属性，meta元素则是编译指令，提供的信息与类似命名的HTTP头部相同。 >[info]http-equiv的值： content-type: HTML4.01规范时使用的。如果使用这个属性，其值必须类似`"text/html; charset=utf-8"`。注意：该属性只能用于[MIME type](https://wiki.developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types)为 `text/html` 的文档，不能用于MIME类型为XML的文档 ```html  <meta http-equiv="Content-Type" content="text/html:charset=UTF-8">  <meta charset="UTF-8"> ``` X-UA-Compatible：针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高，综合考虑，启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要用户代理则必须忽略这个编译指示各种兼容模式代码示例 ```html  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />   <meta http-equiv="X-UA-Compatible" content="IE=5" />  <meta http-equiv="X-UA-Compatible" content="IE=7" />  <meta http-equiv="X-UA-Compatible" content="IE=8" />  <meta http-equiv="X-UA-Compatible" content="edge" />  <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /> ``` refresh：如果`content`属性只包含一个正整数,则是重新载入页面的时间间隔(秒); 如果 content 包含一个正整数并且跟着一个字符串 ';url=' 和一个合法的 URL，则是重定向到指定链接的时间间隔(秒) ```html  <meta http-equiv="refresh" content="1" />  <meta http-equiv="refresh" content="0; url=www.baidu.com">  <meta http-equiv="refresh" content="5; url=www.baidu.com"> ``` default-style： ``` <meta http-equiv="default-style" content="5; url=www.baidu.com"> ``` content-security-policy：它允许页面作者定义当前页的 [内容策略](https://developer.mozilla.org/en-US/docs/Web/Security/CSP/CSP_policy_directives)。内容策略主要指定允许的服务器源和脚本端点，这有助于防止跨站点脚本攻击 (浏览器兼容性不太好，很少有人使用) ~~~html //禁用不安全的内联/eval，仅允许通过https加载资源（图像，字体，脚本等） <meta http-equiv="Content-Security-Policy" content="default-src https:"> ~~~ expires：设定网页的过期时间（必须使用GMT的时间格式） ~~~ <meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> ~~~ set-cookie：如果网页过期，那么自动删除本地cookie（必须使用GMT的时间格式） ~~~ <meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/"> ~~~ windows-target：强制页面在当前窗口中以独立页面显示，可以防止自己的网页被别人当作一个frame页调用 ~~~ <meta http-equiv="Window-target" content="_top"> ~~~ cache-control：浏览器缓存机制，可能的值： Public：指示响应可被任何缓存区缓存。 Private：指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效。 no-cache：指示请求或响应消息不能缓存。 no-store：用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。 max-age：指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应。 min-fresh：指示客户机可以接收响应时间小于当前时间加上指定时间的响应。 max-stale：指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息。 ~~~ <meta http-equiv="cache-control" content="no-cache"> ~~~ **2、Meta属性之name** 如果设置了 `name`属性，meta元素提供的是文档级别（document-level）的元数据，应用于整个页面，主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的 author：标注网页的作者 ~~~ <meta name="author" content="dashen" /> ~~~ keywords：页面关键词，用于被搜索引擎收录 ~~~ <meta name="keywords" content="新闻,新闻中心, 新闻频道"> ~~~ description：页面描述，用于搜索引擎收录 ~~~ <meta name="description" content="新闻中心,包含有时政新闻、国内新闻、国际新闻、社会新闻、时事评论、新闻图片、新闻专题、新闻论坛、军事、历史、的专业时事报道门户网站"> ~~~ viewport 视口标签：用于控制页面缩放 ~~~html  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> ~~~ | Value | 可能值 | 描述 | | --- | --- | --- | | `width` | 一个正整数或者字符串 `device-width` | 以pixels（像素）为单位，定义viewport（视口）的宽度。 | | `height` | 一个正整数或者字符串`device-height` | 以pixels（像素）为单位，定义viewport（视口）的高度。 | | `initial-scale` | `一个0.0` 到`10.0之间的正数` | 定义设备宽度（纵向模式下的设备宽度或横向模式下的设备高度）与视口大小之间的缩放比率。 | | `maximum-scale` | `一个0.0` 到`10.0之间的正数` | 定义缩放的最大值；它必须大于或等于`minimum-scale`的值，不然会导致不确定的行为发生。 | | `minimum-scale` | 一个`0.0` 到`10.0`之间的正数 | 定义缩放的最小值；它必须小于或等于`maximum-scale`的值，不然会导致不确定的行为发生。 | | `user-scalable` | 一个布尔值（`yes`或者`no`） | 如果设置为` no`，用户将不能放大或缩小网页。默认值为` yes`。 | renderer：指定双核浏览器默认以何种方式渲染页面。 ~~~ <meta name="renderer" content="webkit">//默认webkit内核 <meta name="renderer" content="ie-comp">//默认IE兼容模式 <meta name="renderer" content="ie-stand">//默认IE标准模式 ~~~ generator：说明网站的采用的什么软件制作 ~~~ <meta name="generator" content="Microsoft"/> ~~~ revised：网页文档的修改时间 ~~~ <meta name="revised" content="设计网, 6/24/2015"/> ~~~ robots：用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。 all：文件将被检索，且页面上的链接可以被查询； none：文件将不被检索，且页面上的链接不可以被查询； index：文件将被检索； follow：页面上的链接可以被查询； noindex：文件将不被检索，但页面上的链接可以被查询； nofollow：文件将不被检索，页面上的链接可以被查询。 ~~~ <meta name="robots" content="none"/> ~~~ copyright：网站版权信息 ~~~ <meta name="copyright" content="本页版权XXX所有。All Rights Reserved" /> ~~~ —： **3、Meta属性之charset** 如果设置了 `charset`属性，`meta` 元素是一个字符集声明，告诉文档使用哪种字符编码。 **4、Meta属性之itemprop** 如果设置了 `itemprop`属性，`meta` 元素提供用户定义的元数据。 >[danger]name, http-equiv 或者 charset 三者中任何一个属性存在时，itemprop 属性不能被使用