HTML5新增标签
一、新增的主题结构元素
1. article 元素
1.1作用
article 元素代表文档,页面或应用程序中独立的、完整的、可以独自被外部引用的内容。
1.2 实例
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
</article>
1.3 应用场景
论坛帖子、报纸文章、博客条目、用户评论
2. section 元素
2.1作用
对于网站或应用程序中页面上的内容进行分块。<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
2.2 实例
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>
2.3属性
属性 | 值 | 描述 |
cite | URL | section 的 URL,假如 section 摘自 web 的话。 |
3.nav元素
3.1 作用
可以作为页面导航连接组,其中的导航元素链接到其他页面或当前页面的其他部分。
3.2 实例
<nav>
<a href="index.asp">Home</a>
<a href="html5_meter.asp">Previous</a>
<a href="html5_noscript.asp">Next</a>
</nav>
4.aside元素
4.1 作用
Aside元素,表示当前或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条。aside 的内容应该与附近的内容相关。
4.2 实例
<p>Me and my family visited The Epcot center this summer.</p>
<aside>
<h4>Epcot Center</h4>
The Epcot Center is a theme park in Disney World, Florida.
</aside>
5.time元素
5.1作用
元素 time、pubdate 属性,用来无歧义、明确地对机器的日期和时间进行编码,并且以让人易读的方式来展现它,这个元素就是 time 元素。
5.2实例
<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<p>我在 <time datetime="2008-02-14">情人节</time> 有个约会。</p>
5.3 属性
属性 | 值 | 描述 |
datetime | 规定日期 / 时间。否则,由元素的内容给定日期 / 时间。 | |
pubdate | 指示 <time> 元素中的日期 / 时间是文档(或 <article> 元素)的发布日期。 |
二、非主题结构元素
1.header元素
1.1 作用
header 元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格、搜索表单或相关的 logo 图片
1.2 实例
<header>
<h1>Welcome to my homepage</h1>
<p>My name is Donald Duck</p>
</header>
<p>The rest of my home page...</p>
2.footer元素
2.1 作用
footer 元素可以作为其上层父级内容区块或是一个根区块的脚注。footer 通常包括其相关区块的脚注信息,如作者、相关阅读链接及版权信息等。
2.2实例
<footer>
<p>Posted by: W3School</p>
<p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>
3.address元素
1.作用
address 元素用来在文档中呈现联系信息,包括文档作者或文档维护者的名字、他们的网站链接、电子邮箱、真实地址、电话号码等。address 应该不只用来呈现电子邮箱或真实地址,还用来展示跟文档相关的联系人的所有联系信息。
2. 定义和用法
<address> 标签定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息。
<address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。
3.实例
<address>
Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
三、HTML5 表单新增元素与属性
1. form 属性和 formaction 属性
Ø form 属性
在 HTML4 中,表单内的从属元素必须书写在表单内部,而在 HTML5 中,可以把他们书写在页面上任何地方,然后为该元素指定一个 form 属性,属性值为该表单的 id,这样就可以声明该元素从属于指定表单了
<form id="testForm" action="正六面体联系.html">
<input type="text">
</form>
<textarer form="textForm"></textarer>
说明:这样写虽然<textarer>标签不在form表单内,但是还是从属于该表单。这样方便设置CSS样式。关键是表单元素的form属性指向了该表单的ID
Ø formaction 属性
在 HTML4 中,一个表单内的所有元素只能通过表单的action属性统一提交到另一个页面,而在 HTML5 中,可以为所有的提交按钮增加不同的formaction属性,使单击不同的按钮时将表单提交到不同的页面。
<form id="testForm" action="正六面体联系.html">
<input type="submit" value="提交到1">
<input type="submit" value="提交到2" formaction="正方体练习.html">
<input type="submit" value="提交到3" formaction="date.html">
</form>
这样就可以把一个表单提交到不同地方。
2. formmethod 和 formenctype 属性
Ø formmethod属性
在 HTML4 中,一个表单内只能有一个 action 属性用来对表单内所有元素统一指定提交页面,所以每个表单内页只有一个 method 属性来统一指定提交方法。在 HTML5 中,可以使用 formmethod 属性来对每一个表单元素分别指定不同的提交方法。
<form id="testForm" action="正六面体联系.html">
<input type="text" formmethod="get">
<input type="password" formmethod="post">
</form>
Ø formenctype 属性
在HTML4中,表单元素具有一个enctype属性,该属性用于指定在表单发送到服务器之前应该如何对表单内的数据进行编码。在HTML5中,可以使用formenctype属性对表单元素分别制定不同的编码方式。
作用:formenctype 属性覆盖 form 元素的 enctype 属性。
该属性与 type="submit" 和 type="image" 配合使用。
Ø 取值
值 | 描述 |
application/x-www-form-urlencoded | 在发送前对所有字符进行编码(默认)。 |
multipart/form-data | 不对字符编码。当使用有文件上传控件的表单时,该值是必需的。 |
text/plain | 将空格转换为 "+" 符号,但不编码特殊字符。 |
3. formtarget 属性和 autofocus 属性
Ø formtarget 属性
在 HTML4 中,表单元素具有一个 target 属性,该属性用于指定在何处打开表单提交后所需要加载的页面。 在 HTML5 中,可以对多个提交按钮分别使用 formtarget 属性来指定提交后在何处打开所需加载的页面。
<form id="testForm" action="正六面体联系.html">
<input type="text" formmethod="get" > <input type="submit" formtarget="_blank"><br>
<input type="password" formmethod="post" > <input type="submit" formtarget="_self">
</form>
Ø autofocus 属性
为文本框、选择框或按钮控件加上autofocus属性,当画面打开时,该空间自动获得光标焦点。
<form action="">
<input type="text" >
<input type="text" autofocus>
</form>
页面打开时会自动为第二个输入框聚焦。
4. required 属性和 labels 属性
Ø required 属性
HTML5 中新增的 required 属性可以应用在大多数输入元素上,在提交时,如果元素中内容为空白,则不允许提交,同时在浏览器中显示信息提示文字。
<form action="">
<input type="text" required="required">
<input type="submit" >
</form>
Ø labels 属性
在HTML5中,为所有可使用标签的表单元素、button、select元素等,定义一个labels属性,属性值为一个Nodelist对象,代表该元素所绑定的标签元素的集合。配合JavaScript使用
5. control属性与placeholder属性
Ø control属性
在HTML5中,可以在标签内部放置一个表单元素,并且通过该标签的control属性来访问该表单元素。配合JavaScript使用
Ø placeholder属性
placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。
<form action="">
<input type="text" placeholder="请输入用户名">
<input type="submit" >
</form>
6. list属性和AutoComplete属性
Ø list属性
在HTML5中,为单行文本框增加了一个list属性,该属性的值为某个datalist元素的id。datalist元素也是HTML5中新增的元素,该元素类似于选择框,但是当用户想要设定的值不在选择列表之内时,允许自行输入。datalist元素本身并不显示,而是当文本框获得焦点时以提示输入的方式显示。(有点像下拉菜单,但是当下拉列表中没有所需选项时可以自动输入)
<form action="">
<input type="text" list="adr">
<datalist id="adr">
<option value="北京"></option>
<option value="上海"></option>
<option value="苏州"></option>
</datalist>
</form>
Ø AutoComplete属性
帮助输入所用的自动完成功能,是一个既节省输入时间又十分方便的功能。在HTML5之前,因为谁都可以看见输入的值,所以在安全方面存在缺陷,只要使用autoComplete属性,安全方面也可以得到很好的控制。
Ø 自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。
Ø 注释:autocomplete 属性适用于 <form>,以及下面的 <input> 类型:text, search, url, telephone, email, password, datepickers, range 以及 color。
Ø 实例
<form action="demo_form.asp" method="get" autocomplete="on">
First name:<input type="text" name="fname" /><br />
Last name: <input type="text" name="lname" /><br />
E-mail: <input type="email" name="email" autocomplete="off" /><br />
<input type="submit" />
</form>
7. pattern属性和SelectionDirection属性
Ø pattern属性
在HTML5中,对input元素使用pattern属性,并且将属性值设为某个格式的正则表达式,在提交时会针对这些进行检查,检查其内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式。
Ø 实例--只能包含三个字母的文本字段(数字或特殊字符):
Country code: <input type="text" name="country_code" pattern="[A-z]{3}"
title="Three letter country code" />
Ø 注意点:pattern 属性适用于以下 <input> 类型:text, search, url, telephone, email 以及 password 。
Ø SelectionDirection属性
对input元素与textarer元素,HTML5增加了selectionDirection属性。当用户在这两个元素中用鼠标选取部分文字是,可以使用该属性来获取选取方向。当用户正向选取文字时,该属性值为“forward”,当用户反向选取文字时,该属性值为backward。当用户没有选取任何文字时,该属性值为forward。
8. indeterminate属性和image提交按钮的height属性与width属性
Ø indeterminate属性
对于复选框checkbox元素来说,过去只是选取与非选取这两种状态。在HTML5中,可以在JavaScript脚本代码中对该元素使用indeterminate属性,以说明复选框处于“尚未明确是否选取”状态。
Ø image提交按钮的height属性与width属性
针对类型为image的input元素,HTML5新增了两个属性,height、width分别用来制定图片按钮的高度和宽度。
9.output元素
Ø <output> 标签定义不同类型的输出,比如脚本的输出。
属性 | 值 | 描述 |
element_id | 定义输出域相关的一个或多个元素。 | |
form_id | 定义输入字段所属的一个或多个表单。 | |
name | 定义对象的唯一名称。(表单提交时使用) |
Ø 实例 执行计算然后在 <output> 元素中显示结果:
<form οninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
Ø 应用
四、HTML5改良的input元素
1、url类型
2、email类型
3.date类型
4.time类型
5.datetime类型
6. datetime-local类型
7.month类型
8.number类型
Ø Number类型的input标签可以提交非number类型数据,只不过提交的为空白
9.range类型
Ø 代码示例
<input type="range" value="50" >
Ø 效果展示
10.search类型
Ø search 输入类型用于搜索字段,比如站内搜索或谷歌搜索等。
搜索字段的外观与常规的文本字段无异。
<input type="search">
11.总览
值 | 描述 |
button | 定义可点击的按钮(大多与 JavaScript 使用来启动脚本) |
checkbox | 定义复选框。 |
color | 定义拾色器。 |
date | 定义日期字段(带有 calendar 控件) |
datetime | 定义日期字段(带有 calendar 和 time 控件) |
datetime-local | 定义日期字段(带有 calendar 和 time 控件) |
month | 定义日期字段的月(带有 calendar 控件) |
week | 定义日期字段的周(带有 calendar 控件) |
time | 定义日期字段的时、分、秒(带有 time 控件) |
| 定义用于 e-mail 地址的文本字段 |
file | 定义输入字段和 "浏览..." 按钮,供文件上传 |
hidden | 定义隐藏输入字段 |
image | 定义图像作为提交按钮 |
number | 定义带有 spinner 控件的数字字段 |
password | 定义密码字段。字段中的字符会被遮蔽。 |
radio | 定义单选按钮。 |
range | 定义带有 slider 控件的数字字段。 |
reset | 定义重置按钮。重置按钮会将所有表单字段重置为初始值。 |
search | 定义用于搜索的文本字段。 |
submit | 定义提交按钮。提交按钮向服务器发送数据。 |
tel | 定义用于电话号码的文本字段。 |
text | 默认。定义单行输入字段,用户可在其中输入文本。默认是 20 个字符。 |
url | 定义用于 URL 的文本字段。 |
五、canvas标签(画布)
1. 定义和用法
<canvas> 标签定义图形,比如图表和其他图像。
<canvas> 标签只是图形容器,您必须使用脚本来绘制图形。
2.属性
属性 | 值 | 描述 |
pixels | 设置 canvas 的高度。 | |
pixels | 设置 canvas 的宽度。 | |
|
|
|
3.实例--如何通过 canvas 元素来显示一个红色的矩形:
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
六、响应式布局:
1.响应式布局介绍
响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端—而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览二诞生的。其目的是为用户提供更加舒适的界面和更好的用户体验。
2.优缺点
优点:1):面对不同分辨率设备灵活性强
2):能够快捷解决多设备显示适应问题
缺点:1)兼容各种设备工作量大,效率低下
2)代码累赘,会出现隐藏无用的元素,加载时间加长
3.响应式布局基本实现
4.响应式布局示例
七、新增属性
1.data属性
1.1 定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
1.2 介绍
HTML 5之前,我们必须依赖于class和rel属性来存储需要在网站中使用的数据片段,这种做法有时会在网站的外观和实用性之间产生冲突。而HTML 5 Data属性的存在就能很好满足需要。
有时我们需要保存时长、速度和作者等更多关于音频本身的信息,而不是音频来源。这就需要用到Data属性了,示例如下:
<audio controls="controls">
<source src="track1.mp3" type="audio/mpeg" data-duration="1min5secs" data-tempo="125bpm" data-artist="The Beatles" />
</audio>
通过这些自定义的Data属性,就能够对audio执行搜寻、过滤以及分组等动作。
1.3怎么使用Data属性
自定义的Data属性的名字必须以data-开头,并且连字号后面至少要有一个符合HTML规范的字符。我们只能在应用程序内部使用data数据,而不应该将它呈现给用户。更重要的是你可以给元素自定义任何数量的Data属性,并赋予任何有意义的值。
1.4什么时候不需要使用Data属性?
当元素已经建立或者更适当的属性时,就不应该用Data属性了。
详情请见https://segmentfault.com/a/1190000002445964。
2.aria属性和role属性
aria的意思是Accessible Rich Internet Application。 Accessible一般是为不方便的人士提供的功能,比如windows的放大镜,语音朗读,高对比度主题等。
role的作用是描述一个非标准的tag的实际作用。比如用div做button,那么设置div 的 role=“button”,辅助工具就可以认出这实际上是个button。
而aria-*的作用就是描述这个tag在可视化的情境中的具体信息。比如,
<div role="checkbox" aria-checked="checked"$amp;>amp;$lt;/div>
辅助工具就会知道,这个div实际上是个checkbox的角色,为选中状态。
<form role = "form">
这里的 role = “form” 强调这个元素是表单让其更容易匹配读屏软件
<div class = "form-group">
这里的class = "form-group"相当于段落标签 让段落之间距离增大15px 更好看
<label for= "value">zhanghao<label>
这里的for指向input的id使其点击文字和点击输入框一样的功能
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
form-control 类的 <input>、<textarea> 和 <select> 元素都将被默认设置宽度属性为 width: 100%;