HTML5.1——14项新增特性以及使用案例
来源:互联网 发布:php 网站源码 编辑:程序博客网 时间:2024/06/15 08:11
HTML5归万维网组织所有,它提供访问网络标准,所以来自世界各地的协议都可以访问。在2016年11月,W3C更新了长期运行的HTML5,是两年内最小版本更新。许多最初的HTML5.1特征被弃用,因为缺乏浏览器渲染机制的支持。
虽然,HTML5.1带来很少元素和提升,但它仍然是一个小版本更新。一些新元素包含联合体标签,现在包括<dialog>,<details>,<summary>和<picture>,给开发者提供更多表达方式。
W3C已经在准备HTML5.2的起草,预计在2017年底发布。与此同时,我们将会展示一些有趣的新特性与5.1版本的改善。你可以在不接触JavaScript的情况下使用这些特性。并不是所有浏览器都支持这些特性,所以你在使用之前,可以先检测你的浏览器是否支持这些特性。
1.预防网络钓鱼攻击
大多数开发者使用target='_blank'无法避免一个奇怪的事实——最新打开的标签可以改变window.opener.location到一些钓鱼网页。它将会在已打开的网页,以你的名义执行一些恶意JavaScript代码。因为用户相信已经打开的网页,他们不会起疑心。
为了彻底解决这个问题,HTML5.1已经标准化rel=”noopener”的使用属性,与浏览器的上下文环境分开。rel=”noopener”允许在<a>和<area>标签之间使用。
<a href="#" target="_blank" rel="noopener"> The link won't make trouble anymore</a>
2.灵活处理图片捕获
<figcaption>标签表示一个与<figure>元素有关联的捕获或者图例,扮演诸如图片,图解,描述等可视化容器的角色。在HTML的早期版本,<figcaption>只可以用作第一个或最后一个<figure>元素的标签。HTML5.1已经放松这个限制,现在你可以在它的<figure>容器内任何地方使用<figcaption>。
<article> <h1>The Headline of todays news </h1> <figure> <img src="petrolimage.jpeg" alt="Petrol price drops"> <figcaption>A man fueling up his car at petrol station</figcaption> </figure> <p>This is the forth hike in petrol prices in two month and the third in case of diesel in one fortnight.</p></article>3、拼写检测
拼写检测属于一个枚举属性,关键词是空字符串,真和假。“真”的状态表示元素有它的拼写和语法检测。element.forceSpellCheck()强制用户在文本元素报告拼写和语法错误,即使用户从来没有在该元素取得焦点。
<p spellcheck="true"> <label>Name: <input spellcheck=" false" id="textbox"></label></p>4、空选择
HTML新版本允许你创建一个空的<option>元素。它可以是<optgroup>,<datalist>或<select>元素的子元素。当正在设计用户友好的表单时,你将会发现这个特性的作用。
5、允许边框的全屏
布尔值 allowfullscreen的属性,为边框而开发,通过使用requestFullscreen()方法,让你可以控制在全屏下是否显示内容本身。比如,从YouTube把一帧嵌入到一个播放器中。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>6、嵌入头部和尾部
HTML5.1允许你在另一个头部嵌入header和footer。你可以向头部元素添加一个头部或尾部,假如它们在段落内容里包含它们自己。假如你想添加详细阐述诸如<section>和<article>标签到语义段落元素,这个特性将变得非常有用。
在下面的代码中,<article>标签包含一个<header>标签,它有个<aside>标签自身包含一个<header>标签。
<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>7、图片零宽度
HTML新版本允许你添加零宽度的图片。当图片不需要向用户展示时,可以使用此特性。假如一个img元素还有其他用途而不仅仅是展示一个图片,例如,作为一个服务的一部分用来计算页面视图个数,在width和height属性中使用0数值。对于0宽度的图片,推荐使用空属性。
<img src="theimagefile.jpg" width="0" height="0" alt="">8、校验表单
新的reportValidity() 方法允许你校验一个表单和重置结果,并且在浏览器适合位置先用户报告错误。用户代理可以报告多于一个限制规则,假如单一元素同时遇到多个问题。对于这种情况,“密码”输入将会标识错误,由于它是强制性的但是为空。
<h2>Form validation</h2><p>Enter details</p><form> <label> Mandatory input <input type="password" name="password" required /> </label> <button type="submit">Submit</button></form><script> document.querySelector('form').reportValidity()</script>9、浏览器的上下文菜单
在HTML5.1中,你可以使用<menu>标签来定义由一个或多个<menuitem>元素组成的菜单,然后绑定到使用contextmenu 属性的任何元素。<menu>元素的 id应该有相同的值作为元素的contextmenu属性,以便我们向上下文菜单添加。
每个<menuitem>可以有三个表单中其中之一:
radio-从一个组里选择选项
checkbox-选择或取消选中一个选项
command-点击后的执行动作
<h2 contextmenu="popup-menu"> Right click to get the context menu demo.</h2> <menu type="context" id="popup-menu"> <menuitem type="checkbox" checked="true">Checkbox 1 </menuitem> <menuitem type="command" label="Command" onclick="alert('WARNING')">Checkbox 2</menuitem> <menuitem type="radio" name="group1">Radio button a</menuitem> <menuitem type="radio" name="group1" checked="true">Radio button b</menuitem> <menuitem type="checkbox" disabled>Disabled menu item</menuitem></menu>10、在脚本和样式中使用加密随机数
一个加密随机数是随机生成的数字,它只可以使用一次,并且它会在每个页面请求中重新生成。这个随机数属性可以在<script>和<style>元素里使用。一般使用网站内容安全策略来决定是否在页面里使用脚本或样式。在特定的代码里,这个数值是固定不变的,但是在现实世界里,它是随机生成的。
<script nonce='d3ne7uWP43Bhr0e'> The JavaScript Code </script>11、反序链接关系
rev属性在HTML4里有定义,但是它并没出现在HTML5里。W3C决定在<a>和<link>元素里重新包含rev属性。rev属性标识当前和反向的链接文档的关系。它已经被包含来支持广泛使用数据结构标记格式,RDFa。
让我们用两个文档来举个例子,每个包含一课程,在它们之间的链接可以使用如下rel和rev的属性来定义。
//Document with URL "chapter1.html" <link href="Lesson2.html" rel="next" rev="prev"> //Document with URL "chapter2.html" <link href="Lesson1.html" rel="prev" rev="next"><link href="Lesson3.html" rel="next" rev="prev">12、显示/隐藏信息
新的 <details>和<summary>元素允许你向内容片段添加扩展信息。你可以通过点击元素实现显示或隐藏额外的信息。额外的信息默认隐藏。在你的代码里,你可能使用如下方式来把<summary>标签放进<details>标签里。在<summary>标签后,你可以添加你想隐藏的部分内容。
<section> <h3>Error Message</h3> <details> <summary>This file hasn't been download due to network error.</summary> <dl> <dt>File name:</dt><dd>Passcode.txt</dd> <dt>File size:</dt><dd>8 KB</dd> <dt>Error code:</dt><dd>342a</dd> </dl> </details></section>13、更多输入类型
HTML输入元素已经扩展为三种类型– week, month 和datetime-local。像名称建议一样,首次出现的两个允许用户选择周或者月。取决于浏览器是否支持,他们两者都以下拉日历显示展示,让你选择一个特定的周或者一年里的某个月份。datatime-local标识一个日期和时间的输入变量,没有时间区域。数据可以以月份或者周类似的输入方式来进行选择,时间可以是单独类型。
<section> <h2> Week, Month and Datetime-local </h2> <form action="action_page.php"> Choose a week: <input type="week" name="year_week"> <input type="submit"> </form> <form action="action_page.php"> Birthday (month and year): <input type="month" name="bdaymonth"> <input type="submit"> </form> <form action="action_page.php"> Joining (date and time): <input type="datetime-local" name="bdaytime"> <input type="submit" value="Send"> </form></section>14、响应式图片
W3C介绍一些新特性,没有使用CSS样式情况下显示响应式图片。它们是...
srcset图片属性
srcset属性允许你定义多种可供选择的不同像素密度的图片源。它允许浏览器根据用户设备来选择一张合适的图片。例如,在移动设备网络卡顿情况下,它将会为用户选择一个低像素的合适图片。你可以在它自己的x编辑框里使用srcset属性,为图片描述像素比率。如下例子所示,假如用户的像素等于3,high-res图片将会显示。
<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 1x, clicks/medium-res.jpg 2x, clicks/high-res.jpg 3x">你可以使用w编辑框来选择显示不同大小的图片,而不是不同像素比率。在这个例子中,high-res图片被定义为1600px。
<img src="clicks/low-res.jpg" srcset=" clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w">图片属性的大小
大多数时间,开发者喜欢根据不同屏幕大小来显示不同图片。这样可以使用sizes属性。它可以让你把屏幕宽度转换成图片所需要的空间,然后使用srcset属性选择合适图片。例如...
<img src="clicks/low-res.jpg" sizes="(max-width: 25em) 60vw, 100vw" srcset="clicks/low-res.jpg 500w, clicks/medium-res.jpg 1000w, clicks/high-res.jpg 1600w">在这个例子中,sizes属性定义图片宽度为窗口宽度的100%时,大于25em,或者60%的宽度时,小于等于25em。
图片元素
图片元素允许你使用几个不同屏幕大小的源来定义图片。这样可以使用<picture>元素里的<img>属性,和描述多个<source>子元素。单独的<picture>标签并不会显示任何东西。你可以定义默认图片源作为src属性的值,在srcset属性里使用可选的图片源,如下所示...
<picture> <source media="(max-width: 25em)" srcset=" clicks/small/low-res.jpg 1x, clicks/small/medium-res.jpg 2x, clicks/small/high-res.jpg 3x "> <source media="(max-width: 60em)" srcset=" clicks/large/low-res.jpg 1x, clicks/large/medium-res.jpg 2x, clicks/large/high-res.jpg 3x "> <img src="clicks/default/medium-res.jpg"></picture>
- HTML5.1——14项新增特性以及使用案例
- HTML5.1 — 14 项新增特性及使用案例
- HTML5.1 新增的14项特性学习
- HTML5建立的规则以及新增特性
- HTML5新增的特性
- 文章标题HTML5新增特性
- HTML5与CSS3新增特性
- HTML5新增标签以及功能
- HTML5——表单新增元素与属性(1)
- HTML5宏观概览、新增特性一览
- html5篇——新增文档标签
- HTML5新增标签1
- Oracle11g的新增特性—INTERVAL分区
- HTML5新增标签的使用
- HTML5新增标签以及扩展属性
- MySQL5.6中新增特性、不推荐使用的功能以及废弃的功能
- MySQL5.6中新增特性、不推荐使用的功能以及废弃的功能
- HTML5新特性新增于废弃元素标签
- dockerUI 的安装以及使用
- 图论(四)宽度优先搜索BFS
- tensorflow学习笔记(一)-基础模型
- VC++孙鑫-第二章-C++回顾
- Unix高级编程:操作系统 、计算机语言、大型软件组织
- HTML5.1——14项新增特性以及使用案例
- 初学Android,对项目的结构分析感想
- hrbust 1143 泉水
- 史上最全设计模式导学目录(完整版)
- php interface
- Linux不同系统下的文件传输
- [翻译]<Web Scraping with Python>Chapter 0.前言
- 欢迎使用CSDN-markdown编辑器
- 1017. A除以B (20)