前端之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)通用访问

语义化标记

HTML5中新的结构元素

元素名	描述
header	标记头部区域的内容(用于整个页面或者页面中的一块区域)
footer	标记脚部区域的内容(用于整个页面或者页面中的一块区域)
section	Web页面中的一块区域
article	独立的文章内容
aside	相关内容或引文
nav	导航类辅助内容
hgroup	对整个页面或页面中一个区域内容区块的标题进行组合
figure	表示一段独立的流内容，一般表示文档主题内容中的一个独立单元

灵活的选择符

新的QuerySelector方法

函数	描述	示例	结果
querySelector()	根据指定的选择规则，返回在页面中找到的第一个匹配元素	querySelector("input.error")	返回第一个CSS类名为"error"的文本输入框
querySelectorAll()	根据指定规则返回页面中所有相匹配的元素	querySelectorAll("#results td")	返回id值为results的元素下所有的单元格

新增的其他元素

HTML5中新增元素

元素名	描述	代码示例
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中的格式元素

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中的表单元素

HTML5中表单元素

元素名称	描述
<form>	定义供用户输入的HTML表单
<input>	定义输入控件
<textarea>	定义多行的文本输入控件
<button>	定义按钮
<select>	定义选择列表（下拉列表）
<optgroup>	定义选择列表中相关选项的组合
<option>	定义选择列表中的选项
<label>	表示input元素的标注
<fieldset>	定义围绕表单中元素的边框
<legend>	定义fieldset元素的标题
<isindex>	定义与文档相关的可搜索索引
<datalist>	定义下拉列表
<keygen>	定义生成密钥
<output>	定义输出的一些类型

HTML5中的框架元素

HTML5中框架元素

元素名称	描述
<frame>	定义框架集的窗口或框架
<frameset>	定义框架集
<noframes>	定义针对不支持框架的用户的替代内容
<iframe>	定义内联框架

HTML5中的图像元素

HTML5中图像元素

元素名称	描述
<img>	定义图像
<map>	定义图像映射
<area>	定义图像地图内部的区域
<canvas>	定义图形
<figcaption>	定义figure元素的标题
<figure>	定义媒体内容的分组，以及它们的标题

HTML5中的列表元素

HTML5中列表元素

元素名称	描述
<ul>	定义无序列表
<ol>	定义有序列表
<li>	定义列表的项目
<dir>	定义目录列表
<dl>	定义定义列表
<dt>	定义定义列表中的项目
<dd>	定义定义列表中的项目的描述
<meau>	定义命令的菜单/列表
<meauitem>	定义用户可以从弹出菜单调用的命令/菜单项目
<command>	定义命令按钮

HTML5中的表格元素

HTML5中表格元素

元素名称	描述
<table>	定义表格
<caption>	定义表格标题
<th>	定义表格中的表头单元格
<tr>	定义表格中的行
<td>	定义表格中的单元格
<thead>	定义表格中的表头内容
<tbody>	定义表格中的主体内容
<tfoot>	定义表格中的表注内容
<col>	定义表格中一个或多个列的属性值
<colgroup>	定义表格中供格式化的列组

HTML5中的Audio/Video事件

HTML5中的Audio/Video事件

事件	描述
abort	当音频/视频的加载已放弃时
canplay	当浏览器可以播放音频/视频时
canplaythrough	当浏览器可以不因缓冲而停顿的情况下进行播放时
durationchange	当音频/视频的时长已更改时
emptied	当目前的播放列表为空时
ended	当目前的播放列表已结束时
error	当在音频/视频加载期间发生错误时
loadeddata	当浏览器已加载视频/音频的当前帧时
loadedmetadata	当浏览器已加载视频/音频的元数据时
loadstart	当浏览器开始查找音频/视频时
pause	当音频/视频已暂停时
play	当音频/视频已开始或不再暂停时
playing	当音频/视频在因缓冲而暂停或停止后已就绪时
progress	当浏览器正在下载音频/视频时
ratechange	当音频/视频的播放速度已更改时
seeked	当用户已移动/跳跃到音频/视频中的新位置时
seeking	当用户开始移动/跳跃到音频/视频的新位置时
stalled	当浏览器尝试获取媒体数据，但数据不可用时
suspend	当浏览器刻意不获取媒体数据时
timeupdate	当目前的播放位置已更改时
volumechange	当音量已更改时