html5的新特性有哪些 figure
跟HMTL相比，HTML5新增了很多内容，其中有一些特性是作为开发人员必须要了解的。一个叫秒秒学的教学网站上有专门针对HTML5的课程，讲解得还蛮细致，推荐你去看看。
1.新的文档类型 (New Doctype)
HTML5简化了文档类型的声明方式。HTML5的声明方式为：《!DOCTYPE html》。
而之前的文档类型的声明方式是非常复杂，并且难以记忆的，比如XHTML 1.0的文档类型是：《!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN“ ““》
2.脚本和链接无需type
在HTML4或XHTML中，你需要用下面的几行代码来给你的网页添加CSS和JavaScript文件。
《 link rel=“stylesheet“ href=“stylesheet.css“ type=“text/css“ /》
《 script type=“text/javascript“ src=“script.js“》《/script》
而在HTML5中，你不再需要指定type属性。因此，代码可以简化如下：
《 link rel=“stylesheet“ href=“stylesheet.css“ /》
《 script src=“script.js“》《/script》
3.更加语义化的元素
HTML5 新增的一些更具有语义化的新标签来替代《div》 标签，但它们并不提供额外的功能。这些新增的标签是：《article》、《section》、《aside》、《hgroup》、 《header》,《footer》、《nav》、《time》、《mark》等。
4.占位符 (Placeholder)
在HTML4或XHTML中，一般需要用JavaScript来给文本框添加占位符。比如：通过脚本设置，当用户开始输入时，文本框中的文字就消失。而在HTML5中，新增的逗placeholder地功能可以很简单的解决这个问题。
5.Audio 和Video 支持
在HTML5之前，网页通常需要依靠第三方插件来渲染音频。而在HTML5中，《audio》元素被引进来后，我们可以使用audio元素来渲染音频。
在HTML5中，不仅新增渲染音频的元素，同时也新增了支持视频的元素video。
6.离线 & 存储
IndexedDB 是一个为了能够在客户端存储可观数量的结构化数据，并且在这些数据上使用索引进行高性能检索的 API。虽然 DOM 存储 对于存储少量数据是非常有用的，但是它对大量结构化数据的存储就显得力不从心了。IndexedDB 则提供了这样的一个解决方案。
7.HTML5 canvas
《canvas》 是 HTML5 新增的元素，可使用JavaScript脚本来绘制图形。例如：画图，合成照片，创建动画甚至实时视频处理与渲染。
8.设备访问
HTML5新增的特性中，允许通过页面元素访问硬件设备，比如：[ ]摄像头、地理位置服务、检测方向、触控事件等。
HTML5新特性有哪些，你都知道吗
-
用于绘画的 canvas 元素
-
用于媒介回放的 video 和 audio 元素
-
对本地离线存储的更好的支持
-
新的特殊内容元素，比如 article、footer、header、nav、section
-
新的表单控件，比如 calendar、date、time、email、url、search
css3:
1. CSS3实现圆角（border-radius），阴影（box-shadow），
2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜
4. 增加了更多的CSS选择器 多背景 rgba
5. 在CSS3中唯一引入的伪元素是 ::selection.
6. 媒体查询，多栏布局
7. border-image
html5有哪些新特性
html5新特性有哪些
1.语义化标签
对比之前HTML没有体现结构语义化的标签，如：
《div id=“header“》《/div》 //表头的声明
HTML5提供语义化标签，如：
《header》《article》《footer》《nav》《aside》《section》等
2.增强型表单
多个新的表单 Input 输入类型，如：
color,url,date等
这些新特性提供了更好的输入控制和验证。
新增表单元素，如：
《output》，用于用于不同类型的输出，比如计算或脚本输出。
新增表单属性，如：
placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
required 属性，是一个 boolean 属性。要求填写的输入域不能为空
pattern 属性，描述了一个正则表达式用于验证《input》 元素的值。
min 和 max 属性，设置元素最小值与最大值。
step 属性，为输入域规定合法的数字间隔。
height 和 width 属性，用于 image 类型的 《input》 标签的图像高度和宽度。
autofocus 属性，是一个 boolean 属性。规定在页面加载时，域自动地获得焦点。
multiple 属性 ，是一个 boolean 属性。规定《input》 元素中可选择多个值。
3.新增视频 《video》 和音频 《audio》 标签
《video》 《video src=“/i/movie.ogg“ controls=“controls“》
your browser does not support the video tag
《/video》
《audio》
《audio src=“someaudio.wav“》您的浏览器不支持 audio 标签。《/audio》
4.Canvas绘图
5.SVG绘图
6.地理定位
7.拖放API
8.Web Worker
9.Web Storage
10.WebSocket
html5有哪些新特性，移除了那些元素
HTML5已形成了最终的标准，概括来讲，它主要是关于图像，位置，存储，多任务等功能的增加。
新增的元素有绘画 canvas ，用于媒介回放的 video 和 audio 元素，本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失，而sessionStorage的数据在浏览器关闭后自动删除，此外，还新增了以下的几大类元素。
内容元素，article、footer、header、nav、section。
表单控件，calendar、date、time、email、url、search。
控件元素，webworker, websockt, Geolocation。
移出的元素有下列这些：
显现层元素：basefont，big，center，font, s，strike，tt，u。
性能较差元素：frame，frameset，noframes。
如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5？
处理兼容问题有两种方式：
1.IE8/IE7/IE6支持通过document.方法产生的标签，利用这一特性让这些浏览器支持HTML5新标签。
2.使用是html5shim框架
另外，DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。
跟HTML相比，HTML5新增了哪些新特性
1. 新的Doctype
尽管使用《!DOCTYPE html》，即使浏览器不懂这句话也会按照标准模式去渲染
2. Figure元素
用《figure》和《figcaption》来语义化地表示带标题的图片
《figure》
《img src=”path/to/image” alt=”About image” /》
《figcaption》
《p》This 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》
《h3》 Only for people who want the memory of a lifetime. 《/h3》
《/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 中的一些新特性：
HTML5 中的一些有趣的新特性：
用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search
html5的新特性有哪些
特性
A. 语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
B. 本地存储特性（Class: OFFLINE & STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一） 和API说明文档。
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新特性大概包括哪些
H5新特性主要包括：
-
语义化标签：header,footer,nav etc.
-
canvas 画布
-
audio, video
-
drag 拖拽
-
本地存储 localStorage, sessionStorage
-
webSocket 长连接
-
定位
-
增强型表单 input number, datalist, keygen, output, progress
-
svg 矢量绘图
-
webWorker 实现js多进程。