本文已参与「新人创作礼」活动，一起开启掘金创作之路。
html规范
解决日常命名难题
常用class和id命名范例
html兼容测试
兼容产生原因
- 各浏览器使用不同的内核，处理同一件事时的思路不同
- 用户客户端的环境不同（如分辨率不同）
常见的浏览器及其排版引擎（又称渲染引擎）及脚本引擎：
兼容性测试工具
- IE浏览器自带仿真
- Multibrowser
判断ie浏览器版本方法
| 方法 | 代码 | |
|---|---|---|
| 条件判断固定格式 | <!--[if 条件 版本]>需要显示的内容<![endif]--> | |
| 排除条件 | [if !IE 6] | |
| 等于条件 | [if IE 8] | |
| 或者条件 | [if (IE 8) | (IE 10)] |
| 高于版本(不含当前) | [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 |
