Copyright © 2000-2016 www.knowsky.com All rights reserved | 沪ICP备05001343号

王朝学院·作者佚名  2016-05-23
窄屏简体版  字體: |||超大  

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

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

<!DOCTYPE html>

html简体中文

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

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

<meta charset="utf-8" />

X-UA-CompatibleIE 支持通过特定的 <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">

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

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

<!-- 响应式布局网站 --><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以外的版本

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航