html 头部 head meta

叶金筑

最给力利来国际老网站

HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息。而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性。移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta,link等标签的功能属性显得非常重要。这里整理了一份  部分的清单,让大家了解每个标签及相应属性的意义,写出满足自己需求的  头部标签,可以很有效的增强页面的可用性。

最给力利来国际老网站

最给力利来国际老网站

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="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="tele=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">

为移动设备添加 viewport

最给力利来国际老网站

viewport 可以让布局在移动浏览器上显示的更好。 通常会写

最给力利来国际老网站

最给力利来国际老网站

width=device-width 会导致 i 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边(http://bigc.at/ios-webapp-viewport-meta.orz)

最给力利来国际老网站

content 参数:

最给力利来国际老网站

width viewport 宽度(数值/device-width)

最给力利来国际老网站

height viewport 高度(数值/device-height)

最给力利来国际老网站

initial-scale 初始缩放比例

最给力利来国际老网站

maximum-scale 最大缩放比例

最给力利来国际老网站

minimum-scale 最小缩放比例

最给力利来国际老网站

user-scalable 是否允许用户缩放(yes/no)

最给力利来国际老网站

minimal-ui iOS 7.1 beta 2 中新增属性(注意:iOS8 中已经删除),可以在页面加载时最小化上下状态栏。这是一个布尔值,可以直接这样写:

最给力利来国际老网站

而如果你的网站不是响应式的,请不要使用 initial-scale 或者禁用缩放。

最给力利来国际老网站

最给力利来国际老网站

相关链接:非响应式设计的viewport

最给力利来国际老网站

适配 i 6 和 i 6plus 则需要写:

最给力利来国际老网站

最给力利来国际老网站

大部分 4.7~5 寸的安卓设备的 viewport 宽设为 360px,i 6 上却是 375px,大部分 5.5 寸安卓机器(比如说三星 Note)的 viewport 宽为 400,i 6 plus 上是 414px。

最给力利来国际老网站


最给力利来国际老网站

最给力利来国际老网站

最给力利来国际老网站

阅读:853

首页

最给力利来国际老网站

课程

最给力利来国际老网站

在线报名

最给力利来国际老网站

学习

最给力利来国际老网站

电话

最给力利来国际老网站