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