1. 编程号首页

irl算法_HTML 5.1的10个新功能以及如何使用它们IRL

编程小号 • • 未分类

irl算法_HTML 5.1的10个新功能以及如何使用它们IRL几周前，W3C在2016年11月发布了新HTML5.1建议，对HTML规范进行了重大修改

几周前， W3C在2016年11月发布了新HTML 5.1建议 ，对HTML规范进行了重大修改 。在最近的博客文章中 ，W3C称新版本为黄金标准 ，因为HTML 5.1为我们提供了新的方式我们可以使用HTML创建更灵活的网络体验。

在本文中，我们将介绍不用触摸JavaScript就可以使用的新功能，但是JavaScript背景的改进也非常出色，正如您在官方变更日志中所看到的那样。

HTML 5.1建议


请注意，当前并非所有浏览器都支持所有这些功能，因此在生产中使用它们之前，请不要忘记检查浏览器的支持 。 如果您对HTML标准的进一步发展感兴趣，则可以查看HTML 5.2的工作草案。

1.定义多个图像资源以进行响应式设计

在HTML 5.1中，可以将 标记与srcset属性一起使用，以使响应图像选择成为可能。 <picture>标记表示一个图像容器 ，允许开发人员声明不同的图像资源 ，以适应UA的视口大小，屏幕像素密度，屏幕类型以及用于响应式设计的其他参数。

<picture>标记本身不显示任何内容，它仅用作多个图像资源的上下文 。 您需要将默认图像资源声明为<img>标记的src属性的值，并且备用图像资源位于<img>和元素的srcset属性内。 

<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>
2.显示或隐藏其他信息

使用

和

标记，可以将扩展信息添加到内容片中。 默认情况下 ， 不会显示其他信息，但是如果用户感兴趣，他们可以选择查看 。 在代码中，应该将<summary>标记放在<details> 。 在<summary>标记之后，您可以添加要隐藏的其他信息。 

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

这是此代码示例在Firefox 50.0.2中的样子：

实践中的详细信息和摘要标签


3.向浏览器的上下文菜单添加功能

使用元素及其type="context"属性，可以将自定义功能添加到浏览器的上下文菜单 。 您需要将<menuitem>分配为<menu>标记的子元素。 <menu>元素的id必须带有与我们要向其添加上下文菜单的元素的contextmenu属性相同的值 （在下面的示例中为<button>元素）。 

<button contextmenu="rightclickmenu">Right click me</button>
<menu type="context" id="rightclickmenu">
  <menuitem type="checkbox" label="I ♥ HTML5.1.">
</menu>

<menuitem>标记可以具有三种不同的类型 ： "checkbox" ， "command" （您需要使用JavaScript向其中添加操作）和radio 。 可以在上下文菜单中添加多个菜单项，但是浏览器对此功能的支持 还不是很好 。 Chrome 54不支持它，而Firefox 50仅允许存在一个额外的上下文菜单。 您可以在下面看到该代码示例在Firefox 50中的工作方式。

Contextmenu属性


4.嵌套页眉和页脚

如果每个级别都包含在节内容中，则HTML 5.1允许您嵌套页眉和页脚 。 下面的注释是W3C文档的屏幕截图，并向开发人员建议正确的页眉和页脚嵌套方式。

W3C关于标题嵌套的说明


如果要将详细的标头添加到语义分段元素 （例如<article>和<section> ，则此功能很有用。 下面的代码示例在标题内创建侧边栏， <aside>标记也是sectioning元素，并在其中添加有关作者的其他信息 。 标头内的侧边栏也有其自己的标头 ，带有字幕和作者的联系信息。 

<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>
5.对样式和脚本使用加密随机数

使用HTML 5.1，您可以将密码随机数添加到样式和脚本中 。 您可以在

今天的文章irl算法_HTML 5.1的10个新功能以及如何使用它们IRL分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/67825.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注