HTML5*与html

来源：互联网发布：办公室神器知乎编辑：程序博客网时间：2024/06/06 18:02

引导：
HTML5新特性、
新的input类型
新的表单属性
移除的元素
移除的属性
html5和html的区别

HTML5 中的一些有趣的新特性：
1、用于绘画的 canvas 元素
2、用于媒介回放的 video 和 audio 元素
3、对本地离线存储的更好的支持
4、新的特殊内容元素，比如 article、footer、header、nav、section
5、新的表单控件，比如 calendar、date、time、email、url、search

新标签
1、<video>
当前，video 元素支持三种视频格式：ogg、MPEG4、webM
<video src="movie.ogg" width="320" height="240" controls="controls">
或者<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag. </video>

control 属性供添加播放、暂停和音量控件。
<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的。
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式

2、<audio>（与<video>类似）

当前，audio 元素支持三种音频格式：ogg vorbis、MP3、Wav
<audio src="song.ogg" controls="controls">
Your browser does not support the audio tag.
</audio>

3、<canvas>

使用JavaScript在网页上绘制图像。画布是一个巨型区域，可以控制其每一个像素。
canvas拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
<canvas id="myCanvas" width="200" height="100"></canvas>
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成
<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
//getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：
localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

新的input类型

email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
<form action="/example/html5/demo_form.asp" method="get">
E-mail: <input type="email" name="user_email" /><br />
<input type="submit" />
</form>

其它：
Homepage: <input type="url" name="user_url" />
Points: <input type="number" name="points" min="1" max="10" />//还能控制数字范围
range 类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。您还能够设定对所接受的数字的限定：
<input type="range" name="points" min="1" max="10" />
Date: <input type="date" name="user_date" />

新的表单属性

新的 form 属性：
autocomplete
novalidate
新的 input 属性：
autocomplete
autofocus
form
form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
height 和 width
list
min, max 和 step
multiple
pattern (regexp)
placeholder
required

html5
移除的元素
font, center, strike, big, s, u, acronym, applet, dir...

移除的属性
如link和a元素的rev属性, link元素的target属性, td的scope属性，script元素的language属性, body元素的alink，link，text和vlink属性...

html5和html的区别：

1.在文档类型声明上<!doctype html>
2.在结构语义上<header><article><address><section><menu>
3、可以省略标记的元素
不允许使用结束标记的元素有：area、base、br、col、command、embed、hr、img、input、keygen、link、meta、param、sourse、track、wbr。
可以省略结束的标记元素有：li、dt、dd、p、rt、rp、optgroup、option、colgroup、thread、tbody、tfoot、tr、td、th。
可以省略的全部标记的元素有：html、head、body、colgroup、tbody。
4、具有boolean的属性
<!—只写属性不写属性值代表属性为true-->
<input type = “checkbox” checked> <!—属性值= 属性名，代表属性为true-->
<input type = “checkbox”checked = “checked”>
5、省略号
当属性值不包括空字符串、“<”、“>”、“=”、单引号、双引号等字符时，属性的两边的符号可以省略。
<input type = text>

0 0