html5新属性,html5新类型
HTML5的强大特性有哪些
语义特性（Class：Semantic）HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
目前成都创新互联公司已为上千家的企业提供了网站建设、域名、网络空间、网站托管、企业网站设计、兴安盟乌兰浩特网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。
本地存储特性（Class: OFFLINE STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一）和API说明文档。
设备兼容特性 (Class: DEVICE ACCESS)
从Geolocation功能的API文档公开以来，HTML5为网页应用开发者们提供了更多功能上的优化选择，带来了更多体验功能的优势。HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以直接与浏览器内部的数据直接相连，例如视频影音可直接与microphones及摄像头相联。
连接特性（Class: CONNECTIVITY）
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，Server-Sent Event和WebSockets就是其中的两个特性，这两个特性能够帮助我们实现服务器将数据“推送”到客户端的功能。
网页多媒体特性(Class: MULTIMEDIA)
支持网页端的Audio、Video等多媒体功能， 与网站自带的APPS，摄像头，影音功能相得益彰。
三维、图形及特效特性（Class: 3D, Graphics Effects）
基于SVG、Canvas、WebGL及CSS3的3D功能，用户会惊叹于在浏览器中，所呈现的惊人视觉效果。
性能与集成特性（Class: Performance Integration）
没有用户会永远等待你的Loading——HTML5会通过XMLHttpRequest2等技术，帮助您的Web应用和网站在多样化的环境中更快速的工作。
CSS3特性(Class: CSS3)
在不牺牲性能和语义结构的前提下，CSS3中提供了更多的风格和更强的效果。此外，较之以前的Web排版，Web的开放字体格式（WOFF）也提供了更高的灵活性和控制性。
跟HTML相比，HTML5新增了哪些新特性？
1. 新的Doctype
尽管使用!DOCTYPE html，即使浏览器不懂这句话也会按照标准模式去渲染
2. Figure元素
用figure和figcaption来语义化地表示带标题的图片
figure
img src=”path/to/image” alt=”About image” /
figcaption
pThis is an image of something interesting. /p
/figcaption
/figure
3. 重新定义的small
small已经被重新定义了，现在被用来表示小的排版，如网站底部的版权声明
4. 去掉link和script标签里面的type属性
5. 加/不加 括号
HTML5没有严格的要求属性必须加引号，闭合不闭合，但是建议加上引号和闭合标签
6. 让你的内容可编辑，只需要加一个contenteditable属性
7. Email Inputs
如果我们给Input的type设置为email，浏览器就会验证这个输入是否是email类型，当然不能只依赖前端的校验，后端也得有相应的校验
8. Placeholders
这个input属性的意义就是不必通过javascript来做placeholder的效果了
9. Local Storage
使用Local Storage可以永久存储大的数据片段在客户端（除非主动删除），目前大部分浏览器已经支持，在使用之前可以检测一下window.localStorage是否存在
10. 语义化的header和footer
11. 更多的HTML5表单特性
12. IE和HTML5
默认的，HTML5新元素被以inline的方式渲染，不过可以通过下面这种方式让
其以block方式渲染
header, footer, article, section, nav, menu, hgroup {
display: block;
}
不幸的是IE会忽略这些样式，可以像下面这样fix:
document.createElement(”article”);
document.createElement(”footer”);
document.createElement(”header”);
document.createElement(”hgroup”);
document.createElement(”nav”);
document.createElement(”menu”);
13. hgroup
一般在header里面用来将一组标题组合在一起，如
header
hgroup
h1 Recall Fan Page /h1
h2 Only for people who want the memory of a lifetime. /h2
/hgroup
/header
14. Required属性
required属性定义了一个input是否是必须的，你可以像下面这样声明
input type=”text” name=”someInput” required
或者
input type=”text” name=”someInput” required=”required”
15. Autofocus属性
正如它的词义，就是聚焦到输入框里面
input type=”text” name=”someInput” placeholder=”Douglas Quaid” required autofocus
16. Audio支持
HTML5提供了audio标签，你不需要再按照第三方插件来渲染音频，大多数现代浏览器提供了对于HTML5 Audio的支持，不过目前仍旧需要提供一些兼容处理，如
audio autoplay=”autoplay” controls=”controls”
source src=”file.ogg” /!–FF–
source src=”file.mp3″ /!–Webkit–
a href=”file.mp3″Download this file./a
/audio
17. Video支持
和Audio很像，video标签提供了对于video的支持，由于HTML5文档并没有给video指定一个特定的编码，所以浏 览器去决定要支持哪些编码，导致了很多不一致。Safari和IE支持H.264编码的格式，Firefox和Opera支持Theora和Vorbis 编码的格式，当使用HTML5 video的时候，你必须都提供：
video controls preload
source src=”cohagenPhoneCall.ogv” type=”video/ogg; codecs=’vorbis, theora’” /
source src=”cohagenPhoneCall.mp4″ type=”video/mp4; ’codecs=’avc1.42E01E, mp4a.40.2′” /
p Your browser is old. a href=”cohagenPhoneCall.mp4″Download this video instead./a /p
/video
18. 预加载视频
preload属性就像它的字面意思那么简单，你需要决定是否需要在页面加载的时候去预加载视频
video preload
19. 显示视频控制
video preload controls
20. 正则表达式
由于pattern属性，我们可以在你的markup里面直接使用正则表达式了
form action=”" method=”post”
label for=”username”Create a Username: /label
input type=”text” name=”username” id=”username” placeholder=”4 10″ pattern=”[A-Za-z]{4,10}” autofocus required
button type=”submit”Go /button
/form
21. 检测属性支持
除了Modernizr之外我们还可以通过javascript简单地检测一些属性是否支持，如：
script
if (!’pattern’ in document.createElement(’input’) ) {
// do client/server side validation
}
/script
22. Mark元素
把mark元素看做是高亮的作用，当我选择一段文字的时候，javascript对于HTML的markup效果应该是这样的：
h3 Search Results /h3
p They were interrupted, just after Quato said, mark”Open your Mind”/mark. /p
23. 什么时候用div
HTML5已经引入了这么多元素，那么div我们还要用吗？div你可以在没有更好的元素的时候去用。
24. 想立即使用HTML5?
不要等2022了，现在就可以使用了，just do it.
25. 哪些不是HTML5
1)SVG
2)CSS3
3)Geolocation
4)Client Storage
5)Web Sockets
26. Data属性
div id=”myDiv” data-custom-attr=”My Value” Bla Bla /div
CSS中使用：
style
h1:hover:after {
content: attr(data-hover-response);
color: black;
position: absolute;
left: 0;
}
/style
h1 data-hover-response=”I Said Don’t Touch Me!” Don’t Touch Me /h1
27. Output元素
output元素用来显示计算结果，也有一个和label一样的for属性
28. 用Range Input来创建滑块
HTML5引用的range类型可以创建滑块，它接受min, max, step和value属性
可以使用css的:before和:after来显示min和max的值
input type=”range” name=”range” min=”0″ max=”10″ step=”1″ value=”"
input[type=range]:before { content: attr(min); padding-right: 5px;
}
input[type=range]:after { content: attr(max); padding-left: 5px;}
html5新属性
1)email:邮件输入域，在表达提交时提供的邮箱格式验证，并弹出一个提示窗口。
2)url：地址输入域，在表单提交时提供简单的URL地址格式验证，并弹出一个提示窗口。
3)number：数字输入域，（可设置min、max、step）。
4)tel：电话号码输入域，在手机浏览器弹出数字输入域。
5)search：搜索输入域，在手机浏览器右下角呈现搜索按键。
6)range：范围选择空件。
7)color：颜色选择控件。
8)date/month/week：时间选择控件。
1)autocomplete: autocomplete属性规定输入的字段是否应该启用自动完成功能。
自动完成功能允许浏览器预测 字段输入，当用户在字段开始键入时，浏览器基于键入的值。应该显示出在字段中填写的选项。
2)placeholder：占位符，用于在输入框中显示提示性文字，与value不同，不能被提交。
3)autofoaus：自动获取输入焦点。
4)multiple：是否允许多个输入值，若声明该属性，那么输入框允许输入多个用逗号隔开的值。
5)form：值为某个表单的id，若设置，则该输入域可放在该表单外面。
6)required：在表单提交时会验证是否有输入，没有则弹出提示信息。
7)maxlength：限制最大长度，只有在有输入的情况下才有用，不区分中英文。
minlength：限制最小长度，但它不是H5标准属性，仅部分浏览器支持。
8)min：限定输入数字的最小值。
9)max：限定输入数字的最大值。
10)step：限定输入数字的步长，与min连用。
11)pattern：指定一个正则表达式，对输入进行验证。(正则默认首尾加^$)
作用：getCurrentPosition() 方法来获得用户的位置。
格式：一般在js中书写方式。
案例：
本文题目：html5新属性,html5新类型
标题来源：http://azwzsj.com/article/dsicdhc.html
