草丁图书馆

  1. 首页 > 生活杂烩 >

html5新特性有哪些，h5和c3新增特征

小知识


HTML5新特性大概包括哪些？ 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="http://www.ncwxdh.com/p/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="http://www.ncwxdh.com/p/#">Email</a><a href="http://www.ncwxdh.com/p/#">Twitter</a></p>
</header>
<img src="http://www.ncwxdh.com/p/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 -->

推荐阅读


上一篇：【紫荆花】紫金花和紫荆花一样吗

下一篇：【品种】目前最甜的梨新品种