html规范和兼容测试

html规范

解决日常命名难题

常用class和id命名范例

html兼容测试

兼容产生原因

1. 各浏览器使用不同的内核，处理同一件事时的思路不同
2. 用户客户端的环境不同（如分辨率不同）

常见的浏览器及其排版引擎（又称渲染引擎）及脚本引擎：

兼容性测试工具

1. IE浏览器自带仿真
2. Multibrowser

判断ie浏览器版本方法

方法	代码
条件判断固定格式	<!--[if 条件 版本]>需要显示的内容<![endif]-->
排除条件	[if !IE 6]
等于条件	[if IE 8]
或者条件	[if (IE 8)
高于版本(不含当前)	[if gt IE 8]
低于版本(不含当前)	[if lt IE 8]
高于版本(含当前)	[if gte IE 8]
低于版本(含当前)	[if lte IE 8]
介于两版本之间	[if (gt IE 7)&(lt IE 10]

head部分包含的标签

1.title：网页的标题内容，格式：<title>标题内容</title>

2.meta标签：用于定义文件头信息，告诉浏览器需要干一些什么事情,meta标签内部的格式: 键=值
（1）网页字符集：设置浏览器解释页面的字符内容
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
（2）自动跳转：设置网页过多久跳转到指定页面，下面是5s
<meta http-equiv="refresh" content="5;url=http://www.baidu.com">
（3）keyword：设置搜索关键字内容
<meta name="keywords" content="关键字内容"/>
（4）description：设置描述关键内容
<meta name="description" content="进行一些表述" />
（5）author：设置网页作者
<meta name="author" content="作者信息"/>

属性	内容	常用
http-equiv	提供content属性的信息/值的 HTTP 头，可用于模拟一个 HTTP响应头	Content-Type，refresh
name	描述网页，与之对应的属性值为content	keywords,description,author
content	根据name项或http-equiv项的定义来决定此项填写什么样的字符串

3.link：引入css文件：
<link rel="stylesheet" type="text/css" href="路径">

4.script：引入js文件：
<script type="text/javascript" src="路径"></script>
收藏夹图标：当网页被收藏后，显示的图标
<link rel="Shortcut Icon" href="图片路径">

跳转

跳转方法	内容	备注	所属
链接	<a href=""></a>	href里声明跳转路径	css
open	window.open(pageURL,name,parameters)	pageURL:子窗口路径; name:子窗口句柄; parameters:子窗口参数（eg:宽高）	js
location	window.location.href=’hello.html’;	href:当前页面的完整url信息	js