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> |
定义表格中供格式化的列组 |
来源:https://www.cnblogs.com/caozhenghua/p/11715460.html