>

并禁止用户缩放页面,HTML sbf282.com:head 头部分的

- 编辑:澳门博发娱乐官网 -

并禁止用户缩放页面,HTML sbf282.com:head 头部分的

HTML head 头标签

2016/02/24 · HTML5 · 1 评论 · 头标签

初藳出处: paddingme   

HTML head 底部分的价签、成分有多数,涉及到浏览器对网页的渲染,SEO 等等,而相继浏览器内核以致各种国内浏览器商家都不怎么自身的价签成分,那就产生了不菲差距性。移动网络时期,head 底部结构,移动端的 meta 成分,显得更为首要。掌握各种标签的意思,写出知足自身必要的 head 头标签,是本文的指标。本篇以一丝的篇章为根底,实行扩张总括介绍常用的 head 中逐大器晚成标签、成分的意义以至接纳景况。

来源:

页面窗口自动调节到设备宽度,并取缔顾客缩放页面
<meta name="viewport" content="width=device-width,initial-scale=1.0,min"/>
<!-- 注解文书档案使用的字符编码 -->
<meta charset='utf-8'>
<!-- 优先利用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!-- 搜索引擎抓取 -->
<meta name="robots" content="index,follow"/>
<!-- 为移动道具加多 viewport -->
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!-- `width=device-width` 会招致 酷派 5 加多到主屏后以 WebApp 全屏方式打开页面时现身黑边 -->

DOCTYPE

DOCTYPE(Document Type),该注明位于文书档案中最前方的职责,处于 html 标签早先,此标签告知浏览器文书档案使用哪个种类HTML 或然 XHTML 规范。

DTD(Document Type Definition) 声明以 <!DOCTYPE> 开头,不区分轻重缓急写,前边未有别的内容,借使有别的内容(空格除此而外)会使浏览器在 IE 下展开奇异情势(quirks mode)渲染网页。公共 DTD,名称格式为注册//组织//类型 标签//语言,注册指组织是不是由国标化组织(ISO)注册,+表示是,-代表不是。组织即协会名称,如:W3C。类型一般是 DTD。标签是钦定公开文本描述,即对所援引的驾驭文本的并世无双描述性名称,后边可附带版本号。最后语言是 DTD 语言的 ISO 639 语言标志符,如:EN 表示斯洛伐克共和国(The Slovak Republic卡塔尔语,ZH 代表普通话。XHTML 1.0 可证明三种 DTD 类型。分别表示严刻版本,过渡版本,以致基于框架的 HTML 文书档案。

  • HTML 4.01 strict
XHTML

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b690825595726-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b690825595726-1" class="crayon-line">
 &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01//EN&quot; &quot;http://www.w3.org/TR/html4/strict.dtd&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • HTML 4.01 Transitional
XHTML

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b699456112895-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b699456112895-1" class="crayon-line">
 &lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot; &quot;http://www.w3.org/TR/html4/loose.dtd&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • HTML 4.01 Frameset
JavaScript

&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b69d342863431-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b69d342863431-1" class="crayon-line">
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Frameset//EN&quot; &quot;http://www.w3.org/TR/html4/frameset.dtd&quot;&gt;
</div>
</div></td>
</tr>
</tbody>
</table>
  • 新型 HTML5 推出更为简洁明了的书写,它迈进向后特别,推荐使用。
JavaScript

&lt;!doctype html&gt;

<table>
<colgroup>
<col style="width: 50%" />
<col style="width: 50%" />
</colgroup>
<tbody>
<tr class="odd">
<td><div class="crayon-nums-content" style="font-size: 13px !important; line-height: 15px !important;">
<div class="crayon-num" data-line="crayon-5b8f4a3d4b6a1157483452-1">
1
</div>
</div></td>
<td><div class="crayon-pre" style="font-size: 13px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;">
<div id="crayon-5b8f4a3d4b6a1157483452-1" class="crayon-line">
&lt;!doctype html&gt;
</div>
</div></td>
</tr>
</tbody>
</table>

在 HTML中 doctype 有三个举足轻重目标。

  • 对文书档案进行有效验证。

    它报告客户代理和校验器这么些文书档案是遵守什么 DTD 写的。那么些动作是毫无作为的,每一遍页面加载时,浏览器并不会下载 DTD 并检讨合法性,独有当手动校验页面时才启用。

  • 垄断(monopoly卡塔 尔(阿拉伯语:قطر‎浏览器的显示格局

    对此实际操作,布告浏览器读取文书档案时用哪类分析算法。如果未有写,则浏览器则基于本人的平整对代码举行分析,大概会严重影响 html 制版布局。浏览器有两种情势深入分析 HTML 文书档案。 * 非怪异(标准)模式 * 奇异情势 * 部剥奇怪(近乎规范卡塔尔格局关于IE浏览器的文书档案方式,浏览器形式,严俊格局,怪异形式,DOCTYPE 标签,可详细阅读模式?标准!的内容。

正文首要内容出自一丝的常用的 HTML 尾部标签和百度FEX的HTML head 头标签。

<!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 增多到主屏后的标题(iOS 6 新扩展卡塔尔 -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是或不是启用 WebApp 全屏方式,删除苹果暗许的工具栏和菜单栏 -->

charset

宣称文档使用的字符编码,

XHTML

<meta charset="utf-8">

1
<meta charset="utf-8">

html5 在此之前网页中会那样写:

XHTML

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

1
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

那八个是风度翩翩律的,具体可活动阅读:<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>,所以建议接受不够长的,易于记念。

移步端的工作余大学器晚成度越来越成为前端工作的主要内容,除了平日的花色支出,HTML 尾部标签效应,特别是meta标签展现卓越重大。

<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 增添智能 App 广告条 斯玛特 App Banner(iOS 6+ Safari卡塔尔 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 设置苹果工具栏颜色 -->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- 忽视页面中的数字识别为电话,忽视email识别 -->
<!-- 启用360浏览器的极速情势(webkit) -->
<meta name="renderer" content="webkit">
<!-- 制止IE使用非常情势 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化,首倘使本着一些老的不识别viewport的浏览器,举例HTC-->
<meta name="HandheldFriendly" content="true">
<!-- 微软的不适当时候宜浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用形式 -->
<meta name="browsermode" content="application">
<!-- QQ应用格局 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无雪盲 -->
<meta name="msapplication-tap-highlight" content="no">
<!-- iOS 图标 begin -->
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png"/>
<!-- iPhone 和 iTouch,默认 57x57 像素,必须有 -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png"/>
<!-- Retina 索爱 和 Retina iTouch,114x114 像素,可以未有,但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png"/>
<!-- Retina 三星GALAXY Tab,144x144 像素,能够未有,但推荐有 -->
<!-- iOS 图标 end -->

lang属性

简体中文

XHTML

<html lang="zh-cmn-Hans">

1
<html lang="zh-cmn-Hans">

繁体中文

XHTML

<html lang="zh-cmn-Hant">

1
<html lang="zh-cmn-Hant">

为什么 lang="zh-cmn-Hans" 并不是我们不以为意写的 lang="zh-CN" 呢,请移步阅读: 页底部的宣示应该是用 lang=”zh” 依旧 lang=”zh-cn”。

 

<!-- iOS 运行漫面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png"/>
<!-- GALAXY Tab 竖屏 768 x 1004(规范分辨率卡塔 尔(英语:State of Qatar) -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png"/>
<!-- iPad 竖屏 1536x2008(Retina) -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png"/>
<!-- 平板电脑 横屏 1024x748(标准分辨率卡塔尔国 -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png"/>
<!-- iPad 横屏 2048x1496(Retina) -->

开始的一段时期选择 IE 最新版本和 Chrome

XHTML

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

1
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

 

<link rel="apple-touch-startup-image" href="/splash-screen-320x480.png"/>
<!-- HTC/iPod Touch 竖屏 320x480 (标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png"/>
<!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
<link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png"/>
<!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
<!-- iOS 运维画面 end -->

360 使用Google Chrome Frame

XHTML

<meta name="renderer" content="webkit">

1
<meta name="renderer" content="webkit">

360 浏览器就能够在读取到这些标签后,立时切换对应的极速核。 别的为了保障起见再参与

XHTML

<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

1
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">

这么写能够完结的功效是假如设置了 谷歌 Chrome Frame,则选取 GCF 来渲染页面,若无设置 GCF,则运用最高版本的 IE 内核实行渲染。

有关链接:浏览器内核调控 Meta 标签表明文档

DOCTYPE

DOCTYPE(Document Type),该注解位于文书档案中最前方的职分,处于 html 标签在此之前,此标签告知浏览器文档使用哪种HTML 可能 XHTML 规范。

应用 HTML5 doctype,不区分朗朗上口写。

  1. <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分朗朗上口写 -->

<!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴Logo -->

百度禁绝转码

由此百度手提式有线电话机张开网页时,百度只怕会对您的网页实行转码,脱下您的衣性格很顽强在荆棘满途或巨大压力面前不屈,往你的随身贴狗皮膏药的广告,为此可在 head 内增添

XHTML

<meta http-equiv="Cache-Control" content="no-siteapp" />

1
<meta http-equiv="Cache-Control" content="no-siteapp" />

连带链接:SiteApp 转码注明

charset

宣示文书档案使用的字符编码,

  1. <meta charset="utf-8">

html5 在此以前网页中会那样写:

  1. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

那三个是平等的,具体可活动阅读:<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>,所以建议采取非常的短的,易于回想。

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<!-- 添加 RSS 订阅 -->
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<!-- 添加 favicon icon -->

本文由胜博发-前端发布,转载请注明来源:并禁止用户缩放页面,HTML sbf282.com:head 头部分的