html5 head 头标签

来源：互联网发布：视频付费观看程序源码编辑：程序博客网时间：2024/06/05 14:52

HTML基本的头部标签

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。

 <!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

charset

声明文档使用的字符编码

<meta charset="utf-8">

lang属性

更加标准的 lang 属性写法 http://zhi.hu/XyIa

1. 简体中文页面：html lang=zh-cmn-Hans2. 繁体中文页面：html lang=zh-cmn-Hant3. 英语页面：html lang=en

需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：

<p lang="zh-cmn-Hans"><strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。</p>

Meta 标签

meta标签是HTML中head头部的一个辅助性标签，它位于HTML文档头部的和标记之间，它提供用户不可见的信息。虽然这部分信息用户不可见，但是其作用非常强大，特别是当今的前端开发工作中，设置合适的meta标签可以大大提升网站页面的可用性。

桌面端开发中，meta标签通常用来为搜索引擎优化（SEO）及 robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面格式，标注内容提要和关键字；还可以设置页面使其可以根据你定义的时间间隔刷新自己，以及设置RASC内容等级，等等。

移动端开发中，meta标签除了桌面端中的功能设置外，还包括，比如viewport设置，添加到主屏幕图标，标签页颜色等等实用设置。具体可以看后面详细的介绍。

meta标签分类

meta标签根据属性的不同，可分为两大部分：http-equiv 和 name 属性。
http-equiv：相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助浏览器正确地显示网页内容。
name属性：主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于浏览器，搜索引擎等机器人识别，等等。

常用meta标签

<!-- 设置文档的字符编码 --><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->

页面缓存

<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />

常见的取值有private、no-cache、max-age、must-revalidate等，默认为private,其作用根据不同的重新浏览方式分为以下几种情况：
1）打开新窗口值为private、no-cache、must-revalidate，那么打开新窗口访问时都会重新访问服务器。而如果指定了max-age值，那么在此值内的时间里就不会重新访问服务器，例如： Cache-control: max-age=5(表示当访问此网页后的5秒内再次访问不会去服务器)
2）在地址栏回车值为private或must-revalidate则只有第一次访问时会访问服务器，以后就不再访问。值为no-cache，那么每次都会访问。值为max-age，则在过期之前不会重复访问。
3）按后退按扭值为private、must-revalidate、max-age，则不会重访问，值为no-cache，则每次都重复访问
4）按刷新按扭无论为何值，都会重复访问 Cache-control值为“no-cache”时，访问此页面不会在Internet临时文件夹留下页面备份。

<meta http-equiv="Pragma" content="no-cache" />

pragma与no-cache用于定义页面缓存,不缓存页面(为了提高速度一些浏览器会缓存浏览者浏览过的页面,通过上面的定义,浏览器一般不会缓存页面,而且浏览器无法脱机浏览.)

<meta http-equiv="Expires" content="0" />

指定Expires值为一个早已过去的时间，那么访问此网时若重复在地址栏按回车，那么每次都会重复访问： Expires: Fri, 31 Dec 1999 16:00:00 GMT 比如：禁止页面在IE中缓存 http响应消息头部设置： CacheControl = no-cache Pragma=no-cache Expires = -1 Expires是个好东东，如果服务器上的网页经常变化，就把它设置为0，表示立即过期。

Cache-Control头域
Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下:

Public指示响应可被任何缓存区缓存
Private指示对于单个用户的整个或部分响应消息，不能被共享缓存处理。这允许服务器仅仅描述当用户的部分响应消息，此响应消息对于其他用户的请求无效
no-cache指示请求或响应消息不能缓存
no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存。
max-age指示客户机可以接收生存期不大于指定时间（以秒为单位）的响应
min-fresh指示客户机可以接收响应时间小于当前时间加上指定时间的响应
max-stale指示客户机可以接收超出超时期间的响应消息。如果指定max-stale消息的值，那么客户机可以接收超出超时期指定值之内的响应消息

移动端专用

移动端页面设置视口宽度等于设备宽度，并禁止缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。

<meta name="viewport" content="width=640,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

禁止将页面中的数字识别为电话号码。

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后，safari上已看不到效果 -->

将网站添加到主屏幕快速启动方式，仅针对ios的safari顶端状态条的样式

<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent -->

禁止将页面中的数字识别为电话号码。

<meta name="format-detection" content="telephone=no" />

忽略Android平台中对邮箱地址的识别

<meta name="format-detection" content="email=no" />

当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari

<meta name="apple-mobile-web-app-capable" content="yes" /><!-- ios7.0版本以后，safari上已看不到效果 -->

移动端viewport模板

<!DOCTYPE html><html><head><meta charset="utf-8"><meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport"><meta content="yes" name="apple-mobile-web-app-capable"><meta content="black" name="apple-mobile-web-app-status-bar-style"><meta content="telephone=no" name="format-detection"><meta content="email=no" name="format-detection"><title>title</title><link rel="stylesheet" href="index.css"></head><body></body></html>

其他mata标签

<!-- 允许控制资源的过度加载 --><meta http-equiv="Content-Security-Policy" content="default-src 'self'"><!-- 尽早地放置在文档中 --><!-- 仅应用于该标签下的内容 --><!-- Web 应用的名称（仅当网站被用作为一个应用时才使用）--><meta name="application-name" content="应用名称"><!-- 针对页面的简短描述（限制 150 字符）--><!-- 在*某些*情况下，该描述是被用作搜索结果展示片段的一部分 --><meta name="description" content="一个页面描述"><!-- 控制搜索引擎的抓取和索引行为 --><meta name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 --><meta name="googlebot" content="index,follow"><!-- 仅对 Google 有效 --><!-- 告诉 Google 不显示网站链接的搜索框 --><meta name="google" content="nositelinkssearchbox"><!-- 告诉 Google 不提供此页面的翻译 --><meta name="google" content="notranslate"><!-- 验证 Google 搜索控制台的所有权 --><meta name="google-site-verification" content="verification_token"><!-- 用来命名软件或用于构建网页（如 - WordPress、Dreamweaver）--><meta name="generator" content="program"><!-- 关于你的网站主题的简短描述 --><meta name="subject" content="你的网站主题"><!-- 非常简短（少于 10 个字）的描述。主要用于学术论文。--><meta name="abstract" content=""><!-- 完整的域名或网址 --><meta name="url" content="https://example.com/"><meta name="directory" content="submission"><!-- 基于网站内容给出一般的年龄分级 --><meta name="rating" content="General"><!-- 允许控制 referrer 信息如何传递 --><meta name="referrer" content="never"><!-- 禁用自动检测和格式化可能的电话号码 --><meta name="format-detection" content="telephone=no"><!-- 通过设置为 “off” 完全退出 DNS 预取 --><meta http-equiv="x-dns-prefetch-control" content="off"><!-- 在客户端存储 cookie，web 浏览器的客户端识别 --><meta http-equiv="set-cookie" content="name=value; expires=date; path=url"><!-- 指定要显示在一个特定框架中的页面 --><meta http-equiv="Window-Target" content="_value"><!-- 地理标签 --><meta name="ICBM" content="latitude, longitude"><meta name="geo.position" content="latitude;longitude"><!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" --><meta name="geo.region" content="country[-state]"><!-- 如 content="New York City" --><meta name="geo.placename" content="city/town">

阅读全文

0 0