原文

  简书原文:https://www.jianshu.com/p/4270b1d1037d

大纲

  1、头部标签列表
  2、头部标签详解

1、头部标签列表

<!DOCTYPE html>
<!-- 使用 HTML5 doctype,不区分大小写 -->
<html lang="zh-cmn-Hans">
<!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
<head>
<meta charset='utf-8'>
<!-- 声明文档使用的字符编码 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 优先使用 IE 最新版本和 Chrome -->
<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` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
http://bigc.at/ios-webapp-viewport-meta.orz --> <!-- iOS 设备 begin -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 添加到主屏后的标题(iOS 6 新增) -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 是否启用 WebApp 全屏模式 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
<!-- 设置状态栏的背景颜色,只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
<meta name="format-detection" content="telephone=no" />
<!-- 禁止数字识自动别为电话号码 -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 添加智能 App 广告条 Smart App Banner(iOS 6+ Safari) --> <!-- 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 iPhone 和 Retina iTouch,114x114 像素,可以没有,但推荐有 -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" />
<!-- Retina iPad,144x144 像素,可以没有,但推荐有 -->
<!-- iOS 图标 end --> <!-- iOS 启动画面 begin -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" />
<!-- iPad 竖屏 768 x 1004(标准分辨率) -->
<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" />
<!-- iPad 横屏 1024x748(标准分辨率) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" />
<!-- iPad 横屏 2048x1496(Retina) --> <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" />
<!-- iPhone/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 --> <!-- iOS 设备 end -->
<meta name="msapplication-TileColor" content="#000"/>
<!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/>
<!-- Windows 8 磁贴图标 --> <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 --> <title>标题</title>
</head>

2、头部标签详解

2.1、声明文档规范:<!DOCTYPE>

  DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
  HTML有多个不同的版本,只有完全明白页面中使用的确切的HTML版本,浏览器才能完全正确的显示出HTML页面。
  DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始,不区分大小写,前面没有任何内容,如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。

在 HTML中 doctype 有两个主要作用

  1、对文档进行有效性验证:它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的,每次页面加载时,浏览器并不会下载 DTD 并检查合法性,只有当手动校验页面时才启用。
  2、决定浏览器的呈现模式:对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。(1) 非怪异(标准)模式(2) 怪异模式(3) 部分怪异(近乎标准)模式(关于IE浏览器的文档模式,浏览器模式,严格模式,怪异模式)

<!--HTML5-->
<!DOCTYPE html>
<!--HTML4.01-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<!--XHTML 1.0-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">

2.2、声明文档使用的字符编码

<!-- 声明文档使用的字符编码 -->
<meta charset='utf-8'>
<!-- 在 html5 之前网页中会这样写 -->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

2.3、 lang 属性

<head lang="en"></head>
<!--简体中文-->
<html lang="zh-cmn-Hans"></html>
<!--繁体中文-->
<html lang="zh-cmn-Hant"></html>
<!--很少情况才需要加地区代码,通常是为了强调不同地区汉语使用差异-->
<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>

2.4、设置浏览器渲染模式

<!-- 优先使用 IE 最新版本和 Chrome -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!--
这样写可以达到的效果是如果安装了 Google Chrome Frame,则使用 GCF 来渲染页面,如
果没有安装 GCF,则使用最高版本的 IE 内核进行渲染。
-->
<!--
设置 360 浏览器渲染模式,webkit 为极速内核,ie-comp 为 IE 兼容内核,
ie-stand 为 IE 标准内核。360 浏览器就会在读取到这个标签后,立即切换到对应的内核
-->
<meta name="renderer" content="webkit|ie-comp|ie-stand">

2.5、SEO(搜索引擎)优化

  name是描述网页的,对应于Content(网页内容),以便于搜索引擎机器人查找、分类(目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类)。(即:通过设置这些来优化搜索引擎对当前网页的分类,检索)

2.5.1、页面描述

<!--
每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签
-->
<meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->

2.5.2、页面关键词

<meta name="keywords" content=""/> <!-- 页面关键词 -->
<!--一个网页的关键字最好是3-4个。 seo(搜索引擎优化) --!>

2.5.3、定义页面标题

<title>标题</title>
<!--
title标签是一个封闭标签,在head中是成对出现的,在打开一个网页时,网页上方的文字就是title部分。
title是对整个页面的核心思想的总结,也是seo非常重要的设置部分。
-->

2.5.4、Copyright (版权)

<meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved">
<!--
说明:标注版权
用法:<Meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved">
-->

2.5.5、Author (作者)

<meta name="Author" Content="张三,abc@sina.com">
<!--
说明:标注网页的作者或制作组
用法:<Meta name="Author" Content="张三,abc@sina.com">
注意:Content可以是:你或你的制作组的名字,或Email
-->

2.6、 添加 RSS 订阅

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

2.7、添加 favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

2.8、viewport

<!--为移动设备添加 viewport-->
<meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
<!--
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 中已经删除),可以在页面加载时最小化上下状态栏。
这是一个布尔值,可以直接这样写:<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
-->

参考网址

http://www.runoob.com/w3cnote/html-meta-intro.html
https://www.cnblogs.com/avilang/p/6741811.html
http://blog.csdn.net/xiongchao2011/article/details/7038627
https://www.cnblogs.com/menyiin/p/6527339.html

  

细说HTML头部标签的更多相关文章

  1. 移动前端头部标签(HTML5 head meta)

    移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些常用的meta标签. <!DOCTYPE html&g ...

  2. 移动前端头部标签(HTML5 meta)

    在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码 <!DOCTYPE html>  使用 HTML5 doctype,不区分大小写 <he ...

  3. dedecms头部标签(标题,关键词,描述标签)(借用)

    先说说dedecms头部标题,关键词,描述标签的作用我相信网络上也有很多这样的信息,那为什么我还要写这个?因为这个对我们初学者来说还是比较重要的,因为做SEO就要用到这些标签.首先我写下首页头部标签我 ...

  4. webkit,HTML5头部标签

    大家都知道在移动前端开发中添加一些webkit专属的HTML5头部标签,帮助浏览器更好解析html代码,更好地将移动web前端页面表现出来.本文整理一些HTML5头部<meta>标签常用的 ...

  5. HTML5头部标签中<meta>常用信息

    整理一些平时常用的,方便查阅 <!-- 字体编码 --> <meta charset="utf-8" /> <!-- 关键字 --> <m ...

  6. HTML之头部标签

    <header> head 元素元素包含了所有的头部标签元素 可以添加在头部区域的元素标签为: title,style,meta,link,script,noscript,base < ...

  7. 移动端web页面开发常用的头部标签设置

    在移动端web页面开发中,我们常需要设置各种头部标签以帮助浏览器更好的解析页面,将页面完美呈现,这里列出了工作中常用的各种头部标签,以备查询. viewport <meta name=" ...

  8. 【03】HTML head 头部分的标签说明 和 手机头部标签说明

    HTML head 头部分的标签.元素有很多,涉及到浏览器对网页的渲染,SEO 等等,而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性.移动互联网时代,head 头部结 ...

  9. 移动前端头部标签(HTML5 head meta)转载

    移动web页面头部书写 字数2516 阅读1128 评论0 喜欢30 HTTP 标题信息(http-equiv) 和页面描述信息(name) http-equiv:该枚举的属性定义,可以改变服务器和用 ...

随机推荐

  1. 【Hello 2018 D】Too Easy Problems

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 可以考虑把所有的题目按照ai排序. 然后顺序考虑最后做出来的题目个数和第i道题目的ai一样. 则1..i-1这些题目就没有用了. 值 ...

  2. Android开发之经常使用开源库直接拿来用

    1.from  代码家 整理比較好的源代码连接 **************************************************************************** ...

  3. Xcode 6 打包ipa文件

    随着Xcode6.1的普遍应用.随之而来的非常多问题就会出现.这里来说一下怎样在Xcode6.1上生成Ad-hoc ipa.首先是要在你的开发人员账号上生成一个.ipa的主要应用就是在你公布到AppS ...

  4. code -结合实例总结代码下拉流程

    1.查看手机需要的版本 1)如果手机本来就可以正常工作,可以使用指令 zhangshuli@zhangshuli-MS-:~/Desktop/day_note/plan$ adb shell getr ...

  5. PHP和JSON

    PHP和JSON 一.总结 1.php中json的使用方法:php中json的使用超级简单啦,主要是两个函数json_encode(编码)和json_decode(解码),像md5加密 2.json的 ...

  6. Shelled-out Commands In Golang

    http://nathanleclaire.com/blog/2014/12/29/shelled-out-commands-in-golang/ Shelled-out Commands In Go ...

  7. vue中watch函数的用法

    vue中watch函数: 不仅可以判断路由变化(上篇博客有介绍),还可以判断数据的变化 (1):首先写watch函数 (2):在data里定义值 (3):在methods里写方法 (4):使用值

  8. 【2017"百度之星"程序设计大赛 - 初赛(A)】数据分割

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6109 [题意] 在这里写题意 [题解] 要处理的关系越多,肯定就越容易错. ->单调性. 根据这个 ...

  9. 洛谷 P1109 学生分组

    P1109 学生分组 题目描述 有N组学生,给出初始时每组中的学生个数,再给出每组学生人数的上界R和下界L(L<=R),每次你可以在某组中选出一个学生把他安排到另外一组中,问最少要多少次才可以使 ...

  10. Ubuntu配置sublime text 3的c编译环境

    新建编译系统 c语言 选择tool –> Build System –> New Build System 然后输入下面代码 { "shell_cmd": " ...