DOCTYPE

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

推荐使用HTML5 推出的更加简洁的书写方式，它向前向后兼容。

<!DOCTYPE html>

html

简体中文

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

meta

chartset

声明文档使用的字符编码。

<meta charset="utf-8" />

X-UA-Compatible

IE 支持通过特定的 <meta> 标签来确定绘制当前页面所应该采用的 IE 版本。

除非有强烈的特殊需求，否则最好是设置为 edge mode，从而通知 IE 采用其所支持的最新的模式。

此外，添加”chrome=1“将允许站点在安装了Google Chrome Frame的时候使用GCF来渲染页面，如果没有安装GCF，也没有影响。

结合考虑建议使用以下方案：

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

renderer

我们可以使用标签来指定适合自己网站的渲染内核名称，当双核浏览器访问本网页时，就会根据我们的指示，选择我们指定的渲染内核来处理网页。
若页面需默认用极速核，增加标签：

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

若页面需默认用ie兼容内核，增加标签：

<meta name="renderer" content="ie-comp">

若页面需默认用ie标准内核，增加标签：

<meta name="renderer" content="ie-stand">

我们只需在网站的head标签中添加上面的代码，即可以相对应的模式来渲染网站。
同时我们也可以同时指定多个内核名称，之间以符号”|”进行分隔，如下代码：

<meta name="renderer" content="webkit|ie-comp|ie-stand">

此时浏览器将会按照从左到右的先后顺序选择其具备的渲染内核来处理当前网页。

viewport

viewport可以让布局在移动浏览器上显示得更好。

<!-- 响应式布局网站 -->

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

<!-- 非响应式布局网站 -->

<meta name="viewport" content="width=device-width,user-scalable=yes">

SEO优化部分

页面标题<title>标签(head头部必须)

<title>your title</title>

页面关键词keywords

<meta name="keywords" content="keyword,keyword">

页面描述内容description

<meta name="description" content="your description">

定义网页作者author

<meta name="author" content="author,email address">

网站小图标

<link rel="shortcut icon" href="http://static.zhihu.com/static/favicon.ico" type="image/x-icon" />

CSS

根据 HTML5 规范，在引入 CSS 和 JavaScript 文件时一般不需要指定 type 属性，因为 text/css 和 text/javascript 分别是它们的默认值。

<!-- External CSS -->

<link rel="stylesheet" href="css.css">

<!-- In-document CSS -->

<style>

  /* ... */

</style>

JavaScript

同上可省略type属性。

<script src="script.js"></script>

<script>

  alert("javascript");

</script>

IE浏览器兼容性示例代码

<!--[if IE 6]>

<![endif]-->

只有IE6版本可见

<!--[if lte IE 6]>

<![endif]-->

IE6及其以下版本可见

<!--[if gte IE 6]>

<![endif]-->

IE6及其以上版本可见

<!--[if IE 7]>

<![endif]-->

只有IE7版本可见

<!--[if lte IE 7]>

<![endif]-->

IE7及其以下版本可见

<!--[if gte IE 7]>

<![endif]-->

IE7及其以上的版本可见

<!--[if IE 8]>

<![endif]-->

只有IE8版本可见

<!--[if lte IE 8]>

<![endif]-->

IE8及其以下的版本可见

<!--[if gte IE 8]>

<![endif]-->

IE8及其以上的版本可见

<![if !IE]>

<![endif]>

除了IE以外的版本

参考文档

  1. HTML中head头结构
  2. 用条件注释判断浏览器版本解决页面兼容问题
  3. 使用X-UA-Compatible来设置IE浏览器兼容模式
  4. X-UA-Compatible属性的解释
  5. 前端开发规范之html编码规范
  6. 怎样正确设置网站title、keywords、description比较标准
  7. 关于meta知多少
  8. IE环境下判断IE版本的语句

HTML5头部标签备忘的更多相关文章

  1. webkit,HTML5头部标签

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

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

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

  3. HTML5 头部标签定义

    <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 --> <html lang="zh-cmn-Hans"&g ...

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

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

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

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

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

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

  7. HTML5终极备忘大全

    二.文字备忘之标签 HTML5中新增的标签 <article> 定义文章 <aside> 定义页面内容旁边的内容 <audio> 定义声音内容 <canvas ...

  8. [转] HTML5终极备忘大全（图片版+文字版）---张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1544 一.前言兼图片 ...

  9. HTML5属性备忘单

    在网上闲逛的时候看到了文章,感觉总结的这个html5文章,决定转载过来,在排版的时候也帮助自己重新梳理复习一遍.毕竟学习基础最重要. by zhangxinxu from http://www.zha ...

随机推荐

  1. KendoUI之kendoGrid服务端分页

    parameterMap:设定传递给服务器的当前页数与每页大小,django下用get方法有效,post方法无法取得这2个参数shema.total:设定总行数serverPaging: true / ...

  2. Pythonj~module

    常数,变量 特殊变量:__xxx__  可以被直接引用 private函数:_xxx __xxx__ 外部不需要引用的函数全部定义成private,只有外部需要引用的函数才定义为public. 导入 ...

  3. Python: 安装BeautifulSoup4

    python3.4.3 安装BeautifulSoup4: 使用pip install 安装: 在命令行cmd之后输入,pip install BeautifulSoup4 BeautifulSoup ...

  4. 【matlab】随意记录

    v = -0.5:0.05:0.5; [x, y] = meshgrid(v); z = sqrt(1.0 - x.^2 - y.^2); mesh(x,y,z); 画一个球的一部分: 2. 求cel ...

  5. HDU 4811 Ball -2013 ICPC南京区域现场赛

    题目链接 题意:三种颜色的球,现给定三种球的数目,每次取其中一个放到桌子上,排成一条线,每次放的位置任意,问得到的最大得分. 把一个球放在末尾得到的分数是它以前球的颜色种数 把一个球放在中间得到的分数 ...

  6. bootstrap日期控件在火狐下的模态框中选择时间下拉菜单无效的解决办法

    今天收到程序组提交的一个兼容BUG,在火狐中使用模态框加载日期控件时选择时间下拉菜单没有效果(不能点击),而在谷歌中却是好的, 排错思路:1,在当前页面主层放置一个时间控件,测试通过 2,在ajax加 ...

  7. Union函数

    . 共用体声明和共用体变量定义 共用体(参考“共用体”百科词条)是一种特殊形式的变量,使用关键字union来定义 共用体(有些人也叫"联合")声明和共用体变量定义与结构体十分相似. ...

  8. NYOJ题目816它合法吗？

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAtIAAAJ0CAIAAACwTVMOAAAgAElEQVR4nO3du1LjzNo24O8kyDkQYh

  9. cascade 介绍与用法 （ oracle）

    级联删除,比如你删除某个表的时候后面加这个关键字,会在删除这个表的同时删除和该表有关系的其他对象 1.级联删除表中的信息,当表A中的字段引用了表B中的字段时,一旦删除B中该字段的信息,表A的信息也自动 ...

  10. Clr Via C#读书笔记----基元线程同步构造

    线程文章:http://www.cnblogs.com/edisonchou/p/4848131.html 重点在于多个线程同时访问,保持线程的同步. 线程同步的问题: 1,线程同步比较繁琐,而且容易 ...