一、关于html5
html5出现意图:
web浏览器之间的兼容性很低,文档结构不够明确,web应用程序的功能收到了限制
1、html5新特性
用于绘画的canvas标签;
用于媒介回放的video和audio元素;
对本地离线储存的更好支持;
新的特殊内容元素;如:article、footer、header、nav、section
新的表单控件;如:calendar、date、time、email、url、search
html5与html4的区别:
1、语法的改变:
(1)DOCTYPE声明:原版本需要明确声明版本,现在只需要<!DOCTYPE html>。
(2)字符编码:html4需要声明很多,<meta http-equiv="Content-Type" content="text/html; charset=utf-8">,html5则很简略,<meta charset="UTF-8">
(3)可以省略标记的元素
(4)具有boolean值得属性
(5)省略引号
2、新增的元素和废除的元素
3、新增的全局元素
contenteditable:规定元素是否可编辑;
contextmenu:规定元素的上下文菜单。上下文菜单在用户点击元素时显示(目前只有firefox支持);
draggable:规定元素是否可拖动;
dropzone:规定元素拖动时是否进行复制、移动或链接;
spellcheck:规定是否对元素进行拼写或语法检查;
translate:规定是否应该翻译元素内容;
4、新增的主体结构元素
article:代表文档,页面或应用程序中独立的、完整的、可以独自被外部引用的内容
section:对于网站或应用程序中页面上的内容进行分块(不要将section元素作为设置样式的页面容器,那是div工作,没有标题内容不要使用section元素)
nav:可以作为页面导航连接组,其中的导航元素链接到其他页面或当前页面的其他部分
aside:表示当前或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条
5、新增的非主体结构元素
header、footer、hgroup、address
6、html5表单
(1)输入类型:
email:如:<input
type="email"
name="user_email" />自动验证email域的值 url:
number:<input
type="number"
name="points" min="1" max="10" /> range:包含一定范围内 数字值的输入域,显示为滑动条
日期选择器:
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间(小时和分钟)
- datetime - 选取时间、日、月、年(UTC 时间)
- datetime-local - 选取时间、日、月、年(本地时间)
(2)表单元素:
datalist:datalist 元素规定输入域的选项列表。列表是通过 datalist 内的 option 元素创建的。如需把 datalist 绑定到输入域,请用输入域的 list 属性引用 datalist 的 id
如:
(3)表单属性:
新的 form 属性:
- autocomplete
- novalidate:规定在提交表单时不应该验证 form 或 input 域。
新的 input 属性:
- autocomplete:规定 form 或 input 域应该拥有自动完成功能。
- autofocus:规定在页面加载时,域自动地获得焦点。
- form:规定输入域所属的一个或多个表单。
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
-
表单重写属性有:
- formaction - 重写表单的 action 属性
- formenctype - 重写表单的 enctype 属性
- formmethod - 重写表单的 method 属性
- formnovalidate - 重写表单的 novalidate 属性
- formtarget - 重写表单的 target 属性
- height 和 width:规定用于 image 类型的 input 标签的图像高度和宽度。
- list:规定输入域的 datalist。datalist 是输入域的选项列表。
- min, max 和 step:用于为包含数字或日期的 input 类型规定限定(约束)。
- multiple:规定输入域中可选择多个值。
- pattern (regexp):规定用于验证 input 域的模式(pattern)。是正则表达式
- placeholder:提供一种提示(hint),描述输入域所期待的值。
- required:规定必须在提交之前填写输入域(不能为空)。
7、新增加的其他标签:
audio:定义声音
canvas:定义图形,比如图表和其他图像。只是图形容器,必须使用脚本来绘制图形。
通过 getContext("2d")获得Context对象,该对象提供了用于在画布上绘图的方法和属性。
figure:标签规定独立的流内容(图像、图表、照片、代码等等)。figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
figcaption:定义figure元素的标题
例:<figure>
<figcaption>黄浦江上的的卢浦大桥</figcaption>
<img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
</figure>
details:标签用于描述文档或文档某个部分的细节
summary:此标签配合details使用,可为details定义标题。标题是可见的,用户点击标题时,details会显示出来。
mark:突出显示部分文本。
progress:与js一起使用,用来显示任务的进度。<progress value="22" max="100"></progress>max规定任务一共需要多少工作,value表示现在完成的任务量。
meter:定义已知范围或分数值内的标量测量。也被称为尺度,例子:磁盘用量、查询结果的相关性。不应用于进度
ol:定义有序列表。新属性:compact:规定的列表的呈现效果比正常情况更小。reversed:(reversed)规定列表顺序为降序。start:规定有序列表的起始值。type:规定在列表中的标记类型
dl:定义了定义列表。结合<dt>(定义列表中的项目)和<dd>(描述列表中的项目)
cite:通常表示它所包含的文本对某个参考文献的引用。
embed:定义外部交互内容或插件
video:定义视频