前端之HTML
HTML是HyperText Markup Language的缩写，中文翻译为超文本标识语言。使用HTML元素编写的文档称为HTML文档，目前最新版本是5.0。
HTML5的开发是由三个重要组织负责的，具体如下：
WHATWG:由Apple,Mozilla,Google,Opera等浏览器厂商组成，成立于2004年。WHATWG开发HTML和Web应用的API，同时为各浏览器厂商以及其他有意向的组织提供开放式合作。
W3C:W3C管辖的HTML工作组，目前负责发布HTML5规范。
IETF(因特网工程任务组):该任务组下辖HTTP等负责Internet协议的团队。HTML5定义的一种新API(WebSocket API)依赖于新的WebSocket协议，IETF工作组负责开发该协议。
HTMl的优势：
(1)跨浏览器的兼容性
(2)增强交互功能
(3)更好的存储技术;HTML5中提供了本地存储功能。其中将比较老的技术cookie和客户端数据库融合。但是它比cookie更好用，因为支持多个存储，HTML5存储技术拥有更好的安全和性能，即使浏览器关闭也可以保存并且所有主流浏览器都支持。
(4)用户优先;
(5)更简单的代码;
- 以浏览器原生能力替代复杂的JavaScript代码;
- 新的简化的DOCTYPE;
- 新的简化的字符集声明;
- 简单而强大的HTML5API;
(6)通用访问
语义化标记
| 元素名 | 描述 |
|---|---|
| header | 标记头部区域的内容(用于整个页面或者页面中的一块区域) |
| footer | 标记脚部区域的内容(用于整个页面或者页面中的一块区域) |
| section | Web页面中的一块区域 |
| article | 独立的文章内容 |
| aside | 相关内容或引文 |
| nav | 导航类辅助内容 |
| hgroup | 对整个页面或页面中一个区域内容区块的标题进行组合 |
| figure | 表示一段独立的流内容，一般表示文档主题内容中的一个独立单元 |
灵活的选择符
| 函数 | 描述 | 示例 | 结果 |
|---|---|---|---|
| querySelector() | 根据指定的选择规则，返回在页面中找到的第一个匹配元素 | querySelector("input.error") | 返回第一个CSS类名为"error"的文本输入框 |
| querySelectorAll() | 根据指定规则返回页面中所有相匹配的元素 | querySelectorAll("#results td") | 返回id值为results的元素下所有的单元格 |
新增的其他元素
| 元素名 | 描述 | 代码示例 |
|---|---|---|
| video | 定义视频，比如电影片段或者其他视频流 |
<video src='movie.ogg' controls='controls'>Video 元素</video> |
| audio | 定义音频，比如音乐或者其他音频流 |
<audio src="audio.wav">Audio 元素</audio> |
| embed | 用来插入各种多媒体，格式可以是Midi,Wav,AIFF,AU,MP3等 |
<embed src="horse.wav" type=""> |
| mark | 主要用来在视觉上向用户呈现需要突出显示或高亮显示的文字 |
<mark></mark> |
| progress | 表示进度条 |
<progress></progress> |
| time | 表示日期或者时间 |
<time></time> |
| ruby | 表示注释(中文注音或字符) |
<ruby>中国 <rt><rp>zhongguo</rp></rt></ruby> |
| wbr | 表示软换行 |
<p>It is very interesting<wbr>to learn HTML5!</p> |
| canvas | 表示图形，本身没有行为，仅提供一块画布 |
<canvas id="myCanvas" width="200" height="200"></canvas> |
| command | 表示命令按钮，比如单选按钮，复选框或按钮 |
<command onclick=cut() label="cut"></command> |
| details | 表示用户要求得到并且可以得到的细节信息，summary元素提供标题或图例 |
<details><summary>HTML5</summary>It is very interesting to Learn HTNL5!</details> |
| datagrid | 表示可选数据的列表，与input元素配合使用，可以制作出输入值的下拉列表 |
<datagrid></datagrid> |
| keygen | 表示生成密钥 |
<keygen> |
HTML5中的格式元素
| 元素名称 | 描述 |
|---|---|
| <acronym> | 定义只取首字母的缩写 |
| <abbr> | 定义缩写 |
| <address> | 定义文档作者或拥有者的联系信息 |
| <b> | 定义粗体文本 |
| <bdi> | 定义文本的文本方向，使其脱离周围文本的方向设置 |
| <bdo> | 定义文字方向 |
| <big> | 定义大号文本 |
| <blockquote> | 表示长的引用 |
| <center> | 定义居中文本 |
| <cite> | 定义引用(citation) |
| <code> | 定义计算机代码文本 |
| <del> | 定义删除文本 |
| <dfn> | 定义项目 |
| <em> | 定义强调文本 |
| <font> | 定义文本的字体，尺寸和颜色 |
| <i> | 定义斜体字 |
| <ins> | 定义被插入文本 |
| <kbd> | 定义键盘文本 |
| <mark> | 定义有记号的文本 |
| <meter> | 定义预定义范围内的度量 |
| <pre> | 定义预格式文本 |
| <progress> | 定义任何类型的任务的进度 |
| <q> | 定义短的引用 |
| <rp> | 定义若浏览器不支持ruby元素显示的内容 |
| <rt> | 定义ruby注释的解释 |
| <ruby> | 定义ruby注释 |
| <samp> | 定义计算机代码样本 |
| <small> | 定义小号文本 |
| <strong> | 定义强调文本 |
| <sup> | 定义上标文本 |
| <sub> | 定义下标文本 |
HTML5中的表单元素
| 元素名称 | 描述 |
|---|---|
| <form> | 定义供用户输入的HTML表单 |
| <input> | 定义输入控件 |
| <textarea> | 定义多行的文本输入控件 |
| <button> | 定义按钮 |
| <select> | 定义选择列表（下拉列表） |
| <optgroup> | 定义选择列表中相关选项的组合 |
| <option> | 定义选择列表中的选项 |
| <label> | 表示input元素的标注 |
| <fieldset> | 定义围绕表单中元素的边框 |
| <legend> | 定义fieldset元素的标题 |
| <isindex> | 定义与文档相关的可搜索索引 |
| <datalist> | 定义下拉列表 |
| <keygen> | 定义生成密钥 |
| <output> | 定义输出的一些类型 |
HTML5中的框架元素
| 元素名称 | 描述 |
|---|---|
| <frame> | 定义框架集的窗口或框架 |
| <frameset> | 定义框架集 |
| <noframes> | 定义针对不支持框架的用户的替代内容 |
| <iframe> | 定义内联框架 |
HTML5中的图像元素
| 元素名称 | 描述 |
|---|---|
| <img> | 定义图像 |
| <map> | 定义图像映射 |
| <area> | 定义图像地图内部的区域 |
| <canvas> | 定义图形 |
| <figcaption> | 定义figure元素的标题 |
| <figure> | 定义媒体内容的分组，以及它们的标题 |
HTML5中的列表元素
| 元素名称 | 描述 |
|---|---|
| <ul> | 定义无序列表 |
| <ol> | 定义有序列表 |
| <li> | 定义列表的项目 |
| <dir> | 定义目录列表 |
| <dl> | 定义定义列表 |
| <dt> | 定义定义列表中的项目 |
| <dd> | 定义定义列表中的项目的描述 |
| <meau> | 定义命令的菜单/列表 |
| <meauitem> | 定义用户可以从弹出菜单调用的命令/菜单项目 |
| <command> | 定义命令按钮 |
HTML5中的表格元素
| 元素名称 | 描述 |
|---|---|
| <table> | 定义表格 |
| <caption> | 定义表格标题 |
| <th> | 定义表格中的表头单元格 |
| <tr> | 定义表格中的行 |
| <td> | 定义表格中的单元格 |
| <thead> | 定义表格中的表头内容 |
| <tbody> | 定义表格中的主体内容 |
| <tfoot> | 定义表格中的表注内容 |
| <col> | 定义表格中一个或多个列的属性值 |
| <colgroup> | 定义表格中供格式化的列组 |
HTML5中的Audio/Video事件
| 事件 | 描述 |
|---|---|
| abort | 当音频/视频的加载已放弃时 |
| canplay | 当浏览器可以播放音频/视频时 |
| canplaythrough | 当浏览器可以不因缓冲而停顿的情况下进行播放时 |
| durationchange | 当音频/视频的时长已更改时 |
| emptied | 当目前的播放列表为空时 |
| ended | 当目前的播放列表已结束时 |
| error | 当在音频/视频加载期间发生错误时 |
| loadeddata | 当浏览器已加载视频/音频的当前帧时 |
| loadedmetadata | 当浏览器已加载视频/音频的元数据时 |
| loadstart | 当浏览器开始查找音频/视频时 |
| pause | 当音频/视频已暂停时 |
| play | 当音频/视频已开始或不再暂停时 |
| playing | 当音频/视频在因缓冲而暂停或停止后已就绪时 |
| progress | 当浏览器正在下载音频/视频时 |
| ratechange | 当音频/视频的播放速度已更改时 |
| seeked | 当用户已移动/跳跃到音频/视频中的新位置时 |
| seeking | 当用户开始移动/跳跃到音频/视频的新位置时 |
| stalled | 当浏览器尝试获取媒体数据，但数据不可用时 |
| suspend | 当浏览器刻意不获取媒体数据时 |
| timeupdate | 当目前的播放位置已更改时 |
| volumechange | 当音量已更改时 |
