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

<!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <!--移动端的页面这个可以忽略，具体可以查看本文Internet Explorer浏览器部分-->
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!--具体可以查看本文 为移动设备添加 viewport 部分-->
        <!-- 以上 3 个 meta 标签 *必须* 放在 head 的最前面；其他任何的 head 内容必须在这些标签的 *后面* -->
        <title>页面标题</title>
        ...
    </head>

<meta http-equiv="x-ua-compatible" content="ie=edge">
在桌面开发的时候可以让IE浏览器以最新的模式渲染页面，具体可以查看本文Internet Explorer浏览器部分。
如果你的页面确定只在桌面浏览器中运行，那么
html 代码:
    <meta name="viewport" content="width=device-width, initial-scale=1">
也可以省略。

DOCTYPE
DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
使用 HTML5 doctype，不区分大小写。
html 代码:
　　<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 -->

charset
声明文档使用的字符编码，
html 代码:
    <meta charset="utf-8">
html5 之前网页中会这样写：
html 代码:
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
这两个是等效的，具体可移步阅读：<meta charset='utf-8'> vs <meta http-equiv='Content-Type'>，所以建议使用较短的，易于记忆。

lang属性
更加标准的 lang 属性写法 http://zhi.hu/XyIa
简体中文
html 代码:
    <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
繁体中文
html 代码:
    <html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异，例如：
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>
为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢，请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”。

详情见：http://www.css88.com/archives/6410

移动前端不得不了解的HTML5 head 头标签（首篇）的更多相关文章

  1. [转] 移动前端不得不了解的HTML5 head 头标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元 素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容 ...

  2. Html5_移动前端不得不了解的html5 head 头标签

    移动前端不得不了解的html5 head 头标签   本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常 ...

  3. 移动前端不得不了解的HTML5 head 头标签（2016最新版）

    小编推荐:掘金是一个高质量的技术社区,从 ECMAScript 6 到 Vue.js,性能优化到开源类库,让你不错过前端开发的每一个技术干货.各大应用市场搜索「掘金」即可下载APP,技术干货尽在掌握. ...

  4. 移动前端不得不了解的html5 head 头标签

    本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head 头标签. 移动端的工作已经越来越成为前端工作的重要内容,除了平常的项目开发,HTML 头部标签功能,特别是meta标签 ...

  5. 【转】移动前端不得不了解的html5 head 头标签

    来源:http://blog.csdn.net/huang100qi/article/details/42596799 本文主要内容来自一丝的常用的 HTML 头部标签和百度FEX的HTML head ...

  6. 移动前端不得不了解的HTML5 head 头标签 —— HTML基本的头部标签

    HTML的头部内容特别多,有针对SEO的头部信息,也有针对移动设备的头部信息.而且各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,有很多差异性.移动端的工作已经越来越成为前端工作的重要内容, ...

  7. 移动前端不得不了解的HTML5 head 头标签（中上篇）

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  8. 移动前端不得不了解的HTML5 head 头标签 —— Meta 标签

    Meta 标签 meta标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 <title> 标记之间,它提供用户不可见的信息.虽然这部分信 ...

  9. 移动前端不得不了解的HTML5 head 头标签（中下篇）

    SEO 优化部分 页面标题<title>标签(head 头部必须)        <title>your title</title>    页面关键词 keywor ...

随机推荐

  1. 解锁Oracle数据库用户

    Oracle数据库,如何解除数据库用户账户的锁定呢???如何修改口令呢??? 请问各位高手:Oracle数据库,如何解除数据库用户账户的锁定呢???如何修改口令呢???[万分感激各位高手的帮忙] 00 ...

  2. [SOJ] shortest path in unweighted graph

    Description 输入一个无向图,指定一个顶点s开始bfs遍历,求出s到图中每个点的最短距离. 如果不存在s到t的路径,则记s到t的距离为-1.   Input 输入的第一行包含两个整数n和m, ...

  3. iOS跳转系统设置界面

    iOS开发之如何跳到系统设置里的各种设置界面:http://www.superqq.com/blog/2015/12/01/jump-setting-per-page/ iOS:你App的设置做对了吗 ...

  4. android 给layout布局添加点击事件

    <方法一> 1,在代码中加入如下红色代码,不然会被包含在其中的控件把焦点抢占,此时子控件无需设置clickable和focuseable <RelativeLayout        ...

  5. A标签-一个按钮样式

    该文件引用jquery-1.11.3.js库 <!doctype html> <html> <head> <meta charset="UTF-8& ...

  6. 【cocos2d-js 3.0】制作2048

    2048:在一个4X4的方阵中,玩家需要滑动上面的数字,如果俩个数字相邻并且相等,则相加,需要达到2048,方可胜利. 因为在浏览器操作,所以此例的操作方法为:键盘上的w,s,a,d代表上下左右,也可 ...

  7. C++中int转为char 以及int 转为string和string 转int和空格分隔字符串

    1.对于int 转为char 直接上代码: 正确做法: void toChar(int b) { char u; ]; _itoa( b, buffer, ); //正确解法一 u = buffer[ ...

  8. chrom扩展学习

    详细教程-- http://www.ituring.com.cn/minibook/950

  9. 批量安装XP补丁的命令

    方法一: 新建一个bat文件,把这个文件和所有补丁文件放在同一个目录下,双击运行. BAT代码如下 @echo offfor %%i in (*.exe) do %%i /passive /nores ...

  10. Intellij IDEA下导出Java工程的可运行JAR包

    Intellij IDEA下导出Java工程的可运行JAR包 昨天一直向导出一个Java工程的可运行JAR包,然后查阅网上的资料以及自己一遍一遍的尝试,均以失败告终.可以导出JAR包,但是导出的JAR ...