html5新特性有哪些,html5新特性有哪些,css3新增属性有哪些
HTML5都有哪些新特性呢？
1、离线缓存。可以在关闭浏览器后再次打开时恢复数据，以减少网络流量。
成都创新互联坚持“要么做到，要么别承诺”的工作理念，服务领域包括：成都网站设计、成都网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的滨城网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！
2、音频视频自由嵌入，多媒体形式更为灵活。
3、地理定位。地理位置定位，让定位和导航不再专属导航软件，地图也不用下载非常大的地图包，可以通过缓存来解决，到哪儿下哪儿，更灵活。
4、Canvas绘图，提升移动平台的绘图能力。使用Canvas API可以简单绘制热点图收集用户体验资料，支持图片的移动、旋转、缩放等常规编辑。
5、丰富的交互方式。提升互动能力：拖拽、撤销历史操作、文本选择等。
6、开发及维护成本低，这个相对于原生APP开发来说。更低的开发及维护成本;?使页面变得更小，减少了用户不必要的支出;而且，性能更好使耗电量更低。
7、CSS3 视觉设计师的辅助利器的支持。CSS3支持了字体的嵌入、版面的排版，以及最令人印象深刻的动画功能。
8、html5调用手机摄像头和手机相册、通讯录等功能。
html5是指万维网的核心语言、 标准通用标记语言下的一个应用 超文本标记语言（ HTML）的第五次重大修改（这是一项推荐标准、外语原文： W3C Recommendation、见本处 参考资料原文内容： ）2014年10月29日， 万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式，包括新的解析规则增强了灵活性、新属性、淘汰过时的或冗余的属性等。
跟HTML相比，HTML5新增了哪些新特性?
HTML5跟HTML相比新增了很多内容，其中有一些特性是作为开发人员必须要了解的。
在网上有一个叫“秒秒学”的教学网站上有专门针对HTML5的课程，推荐可以观看；
新增的具体内容如下：
1、新的文档类型 (New Doctype)；
2、脚本和链接无需type；
3、更加语义化的元素；
4、占位符(Placeholder)；
5、Audio 和Video 支持；
6、离线 存储；
7、HTML5 canvas；
8、设备访问。
跟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有哪些新特性
语义特性（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）也提供了更高的灵活性和控制性。
HTML5的特性主要包括哪些内容
随着移动互联网的飞速发展，目前Html5技术也得到了不断的完善，开发技术方面越来越成熟了，成为了目前主流的开发语言之一。html5的特性在五个方面体现的淋漓尽致
1、语义特性：
HTML5赋予网页更好的意义和结构。
2、HTML5 APP Cache及本地存储：
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度
3、设备兼容：
HTML5提供了前所未有的数据与应用接入开放接口。使外部应用可以与浏览器内部的数据直接相连。
4、连接特性：
更有效的连接工作效率，使得基于页面的实时聊天，更快速的网页游戏体验，更优化的在线交流得到了实现。HTML5拥有更有效的服务器推送技术，能实现服务器将数据“推送”到web app的功能。
5、图形特性：
基于SVG、Canvas、WebGL及CSS3的3D功能，用户能在浏览器中得以体验到惊艳的视觉效果。
新闻标题：html5新特性有哪些,html5新特性有哪些,css3新增属性有哪些
文章地址：http://ybzwz.com/article/dsdpose.html
