背景：
我们在开发的时候，经常被问到，你们用到了哪些H5的特性？有的时候这个问题真的很不好回答，除了那几样非常有特点的H5技术，比如LocalStorage、Canvas、Offline Application、图形绘制或者CSS的圆角等，剩下的H5属性、CSS3很多都细节都我们自己都不知道是否用到了H5技术，所以今天特地整理了下H5的元素和属性。经过整理和发现，原来我们不经意中已经用了很多H5和CSS3属性了，不过这些属性和元素现代浏览器都支持的很好了。
1.HTML和XHTML属性基础
还是那句话：HTML5不是什么新技术，它是HTML和XHTML的进化版本，用好H5就应该熟练掌握HTML和XHTML，明白HTML和XHTML的由来，XHTML的设计目的最好。
1.1基本属性：
HTML中每个元素（标签）都有下面三个基本属性：
| 符号 | 名称 | 作用 |
| class | 类 | 定义元素的类名称 |
| id | id | 定义元素的id，文档内唯一 |
| style | 样式 | 定义元素的样式，覆盖外部css，优先应用这些样式。 |
但是下面这几个元素没有这些属性
| 符号 | 作用 | 备注 |
| html/head | 文档和头部基本结构 |
|
| title | 网页表头 |
|
| base | 网页信息 | 比如<base url = “” > |
| meta | 网页元数据信息标记 | 定义网页的一些信息，比如编码 |
| param | 元素参数信息 | 基本上没见过 |
| style/script | 网页样式和脚本 |
|
|
|
1.2.语言属性：
基本上每个元素都有下面的语言属性：
| 符号 | 名称 | 作用 |
| lang | 语言编码 | 定义元素的语言编码，用的少。 |
| dir | 文字方向 | 取值：ltr rtl (left to right 和 right to left) |
下面这几个元素没有这些属性：
| 符号 | 作用 | 备注 |
| frameset/frame/iframe | 定于框架的标记 |
|
| br | 换行标记。 |
|
| hr | 水平线 | 比如<base url = “” > |
| base | 网页基本信息 | 定义网页的一些信息，比如编码 |
| param | 元素参数信息 | 基本上没见过 |
| script | 网元脚本标签 |
|
|
|
|
|
1.3.键盘属性：
| 符号 | 名称 | 作用 |
| accesskye |
| 指定用Alt + 快捷键的访问，IE、firefox支持不好 |
| tabindex |
| tab的访问顺序 |
这两个属性用的很少！而且browser支持不是很好！
1.4.内容属性：
| 符号 | 名称 | 作用 |
| alt | 替换属性 | 元素的替换文本 |
| title |
| 元素的提示文本 |
| longdesc |
| 元素包含的大段描述信息 |
| cite |
| 包含内容的引用信息 |
| datetime |
| 包含内容的日期和时间 |
|
|
|
|
alt和title不等价，并不应该混用。但是它们在IE上被混用了，alt是在元素无法显示的时候替换问题，而title才是鼠标移动上去的提示信息。
剩下的三个很少用，最要也别用，支持性不是很好。
下面的标签不具有这些属性
| 符号 | 作用 | 备注 |
| html/head | 定义页面 |
|
| title | 标题 |
|
| meta | 网页元信息 |
|
| base、basefont | 网页基本信息 |
|
| param | 元素参数信息 | 基本上没见过 |
| script | 网元脚本标签 |
|
|
|
|
|
2.H5中标签的三种写法
标签写法在H5中比HTML 4规范，但是没有XHTML要求那么严格，XHTML需要指定DOCTYPE来告诉browser使用什么DTD解析和验证文档，要求的标签书写方式很严格，甚至区分大小写。但是H5是以实用为标准的，所有要求都没有那么严格。
（1）H5的元素不区分大小写，但是推荐全部小写。
（2）下面几个标签可以省略不写，这在HTML 4中是可以的，但是XHTML中不可以：
html、head、body和colgroup、tbody。
（3）下面的标签不允许采用标签对结束的，必须用<元素 />形式：
area / base / br / col / command / embed / hr / img / input / keygen / link / meta / param / source / track / wbr
（4）剩下的全部随意，可以标签对结束，可以自封闭，看喜好，看规范，看方便程度。
（5）H5的DOCTYP使用html，不用指定DTD，一般格式：
<!DOCTYPE html>或者<!DOCTYPE HTML SYSTEM “about:legacy-compat”>
H5的DOCTYPE写法要求在文档开头，而且不能有空行，和XML的<xml charset=”utf-8”>的开头要求一样。这个开头会触发浏览器采用标准模式解析文档，包括使用标准Box Model。
PS：标准模式和怪异（quirks）对应，quirks模式就是IE的模式。
3.H5中的元素
3.1新增结构元素：
下面几个是H5新增的用来定义文档内容结构的，是针对内容的！！
| 符号 | 作用 |
| header | 区别head，是标记内容头部的 |
| footer | 标记内容脚部区域。 |
| section | 页面中独立的一块儿 |
| article | 独立的文章内容 |
| aside | 相关内容或者引文 |
| nav | 导航类的辅助内容。 |
|
|
|
H5的思想还是延续的表现和内容分离，所以H5新增的标签针对的是内容，不是网页结构，据说这些标签是Google使用了大量的网络爬虫统计分析主流Web页面，得出结果发现很多都有类似
<div class=”header”></div>或者<div id=”footer”></div>
这样的标签写法，所以为了方便，H5增加了这几个针对内容的标签，目的是让内容的语音更明确。上面这些标签和html、head、body不一样，他们可以出现多次，从内容的角度去理解适用他们，让他们替代<div id=”nav”></div>这样的标签。
3.2.H5新增标签
下面是H5新增的标签，可以关注下video、audio、canvas这几个，剩下的有需要可以试试，反正Browser不支持就会ignore：
| 符号 | 作用 |
| hgroup | 对内容块儿的标题进行组合。 |
| figure | 一段独立的流内容，子标签figcaption规定标题 |
| video | 视频，替代object标签 |
| embed | 每天，可以是多种格式 |
| mark | 强调，高亮，类似<span> |
| canvas | 画布，结合JS API绘制图形等动画 |
| output | 输出 |
| source | 定义媒体资源，类似param |
| menu | 菜单列表 |
| ruby | ruby注释 |
| rt | 字符的解释或发音 |
| rp | 在ruby注释中使用，定义不之处ruby元素的浏览器的显示 |
| wbr | 软换行，表示当宽度不够时才换行 |
| command | 命了按钮 |
| details | 表示一些详细信息。用一个小三角隐藏内容 |
| summary | 配合details，规定标题 |
| datalist | 可选数据列表，与input元素配合使用，里面放options。 |
| datagrid | 树行结构的列表，不知道怎么用。 |
| keygen | 生成秘钥 |
| progress | 运行中的进程，可以使用它来显示JS中耗时函数的进程。 |
| meter |
|
上面这些标签都都是为了替代某一项功能而产生的，比如：
<figure>
<figcaption>标题</figcaption>
<p>内容</p>
</figure>
是为了替代：
<dl>
<h1>标题</h1>
<p>内容</p>
</dl>
这种写法，让我们的整改页面更具有语义化，其实Web语义化是一个真正的前端应该明白的东西，我是个Java程序员，这里就不做整理了，
。
最后，因为本人太懒，而且H5和CSS3技术网上资料也很多，关于CSS3新增和废弃的属性这里不就做整理了，但是有一点，其实很多时候我们已经在使用CSS3技术了，比如background-repeat这个是CSS3的标准技术，但是我们已经很常见了。
关于CSS3的内容细节比较多，其实我们开发的原则按照实用为主就好了，少用那些兼容性有争议的，如果不明白兼容性，百度下多测试几遍就好了。比较像UC这样的谁知道能支持什么属性呢。
148
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
