1. html5.1中有哪些新特性

1.为响应设计定义多个图像资源
<picture>
<source srcset="mobile.jpg, mobile-hd.jpg 2x" media="(max-width: 360px)">
<source srcset="large.jpg, large-hd.jpg 2x" media="(min-width: 1920px)">
<img src="default.jpg" srcset="default-hd.jpg 2x" alt="your image">
</picture>

在HTML 5.1中，你可以使用<picture>标签和srcset属性来使响应式图像选择成为可能。<picture>标签表示图像容器，其允许开发者声明不同的图像资源以便适应UA的视口大小，屏幕像素密度，屏幕类型和在响应设计中使用的其他参数。
2.显示或隐藏额外信息
<section>
<h2>Error Message</h2>
<details>
<summary>We couldn't finish downloading this video.</summary>
<dl>
<dt>File name:</dt><dd>yourfile.mp4</dd>
<dt>File size:</dt><dd>100 MB</dd>
<dt>Duration:</dt><dd>00:05:27</dd>
</dl>
</details>
</section>

使用<details>和<summary>标签，可以向内容项添加扩展信息。 默认情况下不显示额外信息，但如果用户感兴趣，他们可以选择查看。 在你写代码的时候，应该将<summary>标签放在<details>中。 你可以在<summary>标签之后添加要隐藏的额外信息。
3.将功能添加到浏览器的上下文菜单
<button contextmenu="rightclickmenu">Right click me</button>
<menu type="context" id="rightclickmenu">
<menuitem type="checkbox" label="I HTML5.1.">
</menu>

使用<menuitem>元素及其type =“context”属性，可以将自定义功能添加到浏览器的上下文菜单中。你需要将<menuitem>指定为<menu>标签的子元素。<menu>元素的id需要与我们要添加上下文菜单的元素（即上面示例中的<button>元素）的contextmenu属性的值相同。
注意：浏览器对这个功能的支持还不是很好。 Chrome 54并不支持，而Firefox 50仅允许一个额外的上下文菜单。
4.嵌入页眉和页脚
<article>
<header>
<h1>Article Title</h1>
<aside>
<header>
<h2>About the author</h2>
<p><a href="#">Email</a><a href="#">Twitter</a></p>
</header>
<img src="photo.jpg" alt="Author photo">
<p>Author bio ... </p>
</aside>
</header>
<p>Article intro</p>
<p>Other paragraphs ...</p>
</article>

在HTML 5.1中，如果每个级别都包含在分段内容里，则允许嵌套页眉和页脚。
如果要向语义分段元素（例如<article>和<section>）添加精细的标题话，这个功能会非常有用。 下面的代码示例在标题中创建一个侧边栏，<aside>标签也是一个分段元素，并在其中添加了关于作者的额外信息。 标题中的侧边栏也有自己的标题，以及一个副标题和作者的联系方式。
5.对样式和脚本使用加密随机数
<script nonce='adfjaf8eda64U7'>
// some javaScript
</script>

使用HTML 5.1，通过在<script>和<style>元素中使用nonce属性。你可以将加密随机数添加到样式和脚本中。加密随机数是随机生成的数字并且一个只能使用一次，而且是在每次页面请求的时候重新生成。网站的内容安全策略可以使用随机数来决定是否应在网页上应用特定的脚本或样式。在Google 开发者的网页基础中，你可以进一步了解如何正确使用随机数和CSP。
6.创建反向链路关系
<!-- Current document is the parent of the linked category.html document -->
<link rev="parent" href="category.html">

你可以再次将rev属性添加到你的链接。它之前在HTML 4中被定义，但HTML5不支持。 HTML 5.1允许开发人员再次为<link>和<a>元素使用此属性。rev属性与rel相反，它指定当前文档和链接文档在相反方向上的关系（当前文档与链接文档的关系）。
rev属性已包含在HTML 5.1规范中，主要用于支持RDFa，后者是一种广泛使用的结构化数据标记格式，并扩展了HTML语言。
7.使用零宽度图像
<img src="yourimage.jpg" width="0" height="0" alt="">

HTML 5.1允许开发人员创建width属性值为0的 零宽度图像 。 如果你想要包含不想向用户显示的图像（例如跟踪图像文件）则此功能很有用。建议将零宽度图像与空alt属性一起使用。
8.分离浏览器上下文以防止网络钓鱼攻击
<a href="#" target="_blank" rel="noopener">
Your link that won't make troubles
</a>

在你的网站上使用相同的源链接最终可能会让你陷入麻烦。 该漏洞被称为target =“_ blank”漏洞，这是一个让讨厌的网络钓鱼攻击。你可以（安全地）测试下这个漏洞是如何在这个机智的Github演示页上进行攻击的，你可以在Github上查看该代码。
HTML 5.1已经标准化了rel =“noopener”属性的用法，它消除了分隔浏览器上下文的问题，你可以在<a>和<area>元素中使用rel =“noopener”。
9.创建一个空选项
HTML 5.1允许开发人员创建一个空的<option>元素。<option>标签可以是<select>，<optgroup>或<datalist>元素的子元素。 如果你不想建议用户应该选择哪个选项，以及在想要设计用户友好的表单时，使用空的<option>可能很有用。
10.更灵活地处理图形标题
<figcaption>标签表示<figure>元素的题注或说明，其是用于视觉（例如插图，照片和图表）的容器。以前，<figcaption>标记只能用作<figure>元素的第一个或最后一个子元素。HTML 5.1已放松此规则，现在<figcaption>可以出现在其<figure>容器中的任何位置。

2. HTML5新特性大概包括哪些

H5新特性主要包括：

  1. 语义化标签：header,footer,nav etc.

  2. canvas 画布

  3. audio, video

  4. drag 拖拽

  5. 本地存储 localStorage, sessionStorage

  6. webSocket 长连接

  7. 定位

  8. 增强型版表单 input number, datalist, keygen, output, progress

  9. svg 矢量绘图

  10. webWorker 实现js多进权程。

3. 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新增的特性中，允许通过页面元素访问硬件设备，比如：[ ]摄像头、地理位置服务、检测方向、触控事件等。

4. 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

5. html5的新特性有哪些

特性
A. 语义特性（Class：Semantic）
HTML5赋予网页更好的意义和结构。更加丰富的标签将随着对RDFa的，微数据与微格式等方面的支持，构建对程序、对用户都更有价值的数据驱动的Web。
B. 本地存储特性（Class: OFFLINE & STORAGE）
基于HTML5开发的网页APP拥有更短的启动时间，更快的联网速度，这些全得益于HTML5 APP Cache，以及本地存储功能。Indexed DB（html5本地存储最重要的技术之一） 和API说明文档。

6. 跟HTML相比，HTML5新增了哪些新特性

HTML5跟HTML相比新增了很多内容，其中有一些特性是作为开发人员必须要了解的。

在网上有一个叫“秒专秒学”的教学属网站上有专门针对HTML5的课程，推荐可以观看；

新增的具体内容如下：

1、新的文档类型 (New Doctype)；

2、脚本和链接无需type；

3、更加语义化的元素；

4、占位符(Placeholder)；

5、Audio 和Video 支持；

6、离线 & 存储；

7、HTML5 canvas；

8、设备访问。

7. 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）也提供了更高的灵活性和控制性。

8. HTML5都有哪些新特性

accesskey 规定激活元素的快捷键。
class 规定元素的一个或多个类名（引用样专式表中的类）。属
contenteditable 规定元素内容是否可编辑。
contextmenu 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。
data-* 用于存储页面或应用程序的私有定制数据。
dir 规定元素中内容的文本方向。
draggable 规定元素是否可拖动。
dropzone 规定在拖动被拖动数据时是否进行复制、移动或链接。
hidden 规定元素仍未或不再相关。
id 规定元素的唯一 id。
lang 规定元素内容的语言。
spellcheck 规定是否对元素进行拼写和语法检查。
style 规定元素的行内 CSS 样式。
tabindex 规定元素的 tab 键次序。
title 规定有关元素的额外信息。
translate 规定是否应该翻译元素内容。

9. html5新技术有哪些

微数据（Microdata）

HTML5 定义了一个标准化方法来标记 HTML 文档主体的元数据。对于使用过微格式（如 hCard 和 hCalendar） 的人来说，对微数据会很熟悉，但其中还有一些重要的不同之处。最重要的是，微数据将相关信息从此前微格式控制的类移到了新的 itemprop 属性中。
另外，此标准添加了其他能精确定义微数据格式的属性，以及一个可以直接通过程序访问微数据的方法：
itemscope 设置微数据段的范围。
itemtype 提供了定义可用的具体数据格式的 URL。
document.getItems() 提供对顶层微数据条目的访问；此方法会返回一个 NodeList，其中包含对应于可选参数 itemType 的条目，如果没有参数，则返回所有类型。
回页首
HTML5 中属于单独的规范和工作组的技术
多项技术已经成熟，脱离了 HTML5 规范，形成自己的文档。还有其他一些，也从 HTML 脱离出来，归类为 “Web 平台”。
SVG
也许归类到 HTML5 大杂烩中最奇怪的技术就要算 Scalable Vector Graphics (SVG) 了。SVG 是用 XML 定义的矢量图形语法。自从 1999 年起，就由 W3C 开始开发 SVG，因此将它作为 “新” 内容或 HTML5 一部分的一个延伸。
但依然值得为重新发掘 SVG 而感到高兴，因为它实际推动了标准。主要浏览器的最新版本都提供或多或少的支持，而有些库，如 Raphael.js 中还有支持旧版本 Internet Explorer 的 API。
Web 存储
Web Storage 规范定义了一个 API，可对 Web 浏览器的中的键-值进行连续存储。 此规范与 cookies 的功能类似，但有了很大的改进。
存储有两种形式：sessionStorage 与 localStorage。每一个都提供了类似的方法来管理条目（setItem()、removeItem() 和 getItem()) 和清除整个存储（clear()）。Session 存储是用来保存当前浏览器会话。Local 存储用来对网站收藏或其他用户数据进行长期存储。还可以监听存储事件，以便监控存储活动并对存储活动作出响应。
对于现在就想体验此功能的用户，Persist.js 库提供了完善的跨浏览器解决方案可在所有主要浏览器中使用 Web 存储或等效的功能。
还有另外两个规范可与 Web Storage 同时使用：
IndexedDB 是一个相关的绿色规范，它提供了更强大的在浏览器中长期存储数据的功能，其中包括查询数据库，更重要是，能够保存复杂对象而不仅是简单的字符串。
Web Workers 是功能超强的规范，它定义了能在主页运行 JavaScript 同时让用户在底层运行脚本的 API。此功能可以让开发人员将时间较长的处理任务卸载到底层进程，从而释放浏览器，可在主要环境中进行持续交互。
文件 API
此规范提供了操作 Web 应用程序中文件的 API。加上其他一些新兴和成熟技术，如 XMLHttpRequest、拖放和 Web Workers，File API 能够提供比目前可用技术更强大的 Web 和桌面交互功能。 与简单文件上传输入元素将文件传递给 Web 服务器进行处理或复杂的 Flash 界面不同的是，File API 允许直接访问浏览器文件数据。
WebSocket
WebSocket API 可以通过一个 TCP 端口在 Web 浏览器和 Web 服务器之间同时双向通讯。在实现方面，WebSocket 还可以走得更远一些，它支持最新版本 Firefox、Opera、Chrome 和 Apple Safari，但已发现的安全漏洞使得它在 Firefox 和 Opera 中默认禁用。
服务器发送的事件
此规范定义了一个 API，可以打开一个 HTTP 连接，以 DOM 事件形式接收来自服务器的推送通知。本规范改变了目前在固定时间间隔轮询服务器进行更新的模式，节约了大量不需要的请求和相关的处理器时间和带宽。
WebGL
Web-based Graphics Library (WebGL) 增强了JavaScript，它具有在浏览器中创建三维交互图形的功能。WebGL 是 canvas HTML 元素的上下文。此规范与 2011 年 3 月推出 1.0 版，由非营利的 Khronos Group 管理。
XMLHttpRequest Level 2
XMLHttpRequest Level 2 规范通过一些新特性增强了核心 XMLHttpRequest 对象。其中最有趣的大概就是 Cross-Origin Resource Sharing 了，它一种绕过同源安全策略的安全方式，可以实现 XMLHttpRequest 与第三方服务器交互。目前，XMLHttpRequest 只能与相同协议的服务器通讯。