HTML 5.1学习之新增的14项特性与应用示例

2020-04-16 21:27:47易采站长站整理

element.forceSpellCheck() 将强制用户代理在文本元素上报告检查出来的拼写和语法错误,即使用户从来没将输入聚焦在该元素上。

<p spellcheck="true">
<label>Name: <input spellcheck=" false" id="textbox"></label>
</p>

11. 空选项

新版的 HTML 允许你创建一个空的  <option> 元素。它可以是 <optgroup>, <datalist> 或者 <select> 元素的子元素。你将会发现这项功能在设计对用户友好的表单方面时能有所帮助。

10. 支持 Frame 的全屏

为 Frame 开发的布尔变量 allowfullscreen 属性允许您通过使用 requestFullscreen() 方法控制内容是否可以全屏显示。 例如,我们使用嵌入 YouTube 的播放器的 iframe 做示例。 需要设置 allowfullscreen 属性才能让播放器全屏显示视频。

<article>
<header>
<p><img src="/usericons/16235"> <b>Fred Flintstone</b></p>
<p><a href="/posts/30934" rel=bookmark>12:44</a> — <a href="#acl-503439551">Private Post</a></p>
</header>
<main>
<p>Check out my new video!</p>
<iframe title="Video" src="https://youtube.com/?id=92469812" allowfullscreen></iframe>
</main>
</article>

9. 嵌入 header 和 footer

HTML5.1 允许你在另一个 header 嵌入 header 和 footer。你可以向头部元素添加一个 header 或 footer ,假如它们在段落内容里包含它们自己。假如你想添加详细阐述诸如 <section> 和 <article> 标签到语义段落元素,这个特性将变得非常有用。

在下面的代码中,<article> 标签包含一个 <header> 标签,它有个自身包含 <header> 标签的 <aside> 标签。

<article>
<header>
<h2>Lesson: How to cook chicken</h2>
<aside>
<header>
<h2>About the author: Tom Hank</h2>
<p><a href="./tomhank/">Contact him!</a></p>
</header>
<p>Expert in nothing but Cooking. The cookbook sideshow.</p>
</aside>
</header>
<p><ins>Pour the marinade into the zip-top bag with the chicken and seal it.
Remove as much air as possible from the bag and seal it. </ins></p>
</article>

8. 图片零宽度

HTML 新版本允许你添加零宽度的图片。当图片不需要向用户展示时,可以使用此特性。假如一个 img 元素还有其他用途而不仅仅是展示一个图片,例如,作为一个服务的一部分用来计算页面视图个数,在 width 和 height 属性中使用 0 数值。对于 0 宽度的图片,推荐使用空属性。