web前端基础复习_day03_HTML5新增的标签和表单元素

HTML5

一. 新增的语义化标签

1. header 标签

• <header> 标签定义文档的页眉（介绍信息）。

<header>
	<h1>Welcome to my homepage</h1>
	<p>My name is Donald Duck</p>
</header>

2. nav 标签

• <nav> 标签定义导航链接的部分。

<nav>
	<a href="index.jsp">Home</a>
	<a href="html5_meter.jsp">Previous</a>
	<a href="html5_noscript.jsp">Next</a>
</nav>

3. main 标签

• <main> 标签规定文档的主要内容。

<main>
  <h1>Web Browsers</h1>
  <p>Google Chrome、Firefox 以及 Internet Explorer 是目前最流行的浏览器。</p>

  <article>
    <h1>Google Chrome</h1>
    <p>Google Chrome 是由 Google 开发的一款免费的开源 web 浏览器，于 2008 年发布。</p>
  </article>

  <article>
    <h1>Internet Explorer</h1>
    <p>Internet Explorer 由微软开发的一款免费的 web 浏览器，发布于 1995 年。</p>
  </article>
</main> 

• 注: 在一个文档中，不能出现一个以上的 元素。 元素不能是以下元素的后代：<article>、<aside>、<footer>、<header> 或 <nav>。

4. article 标签

• <article> 标签规定独立的自包含内容。

<article>
  <h1>Internet Explorer 9</h1>
  <p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>

5. aside 标签

• <aside> 标签定义其所处内容之外的内容。

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

6. footer 标签

• <footer> 标签定义文档或节的页脚。

<footer>
  <p>Posted by: W3School</p>
  <p>Contact information: <a href="mailto:someone@example.com">someone@example.com</a>.</p>
</footer>

二. 新增的多媒体标签

1. audio 标签

• <audio> 标签定义声音，比如音乐或其他音频流。

<audio src="someaudio.wav">
您的浏览器不支持 audio 标签。
</audio>

• 新增属性
  • src 要播放的音频的 URL。
  • autoplay 如果出现该属性，则音频在就绪后马上播放。
  • controls 如果出现该属性，则向用户显示控件，比如播放按钮。
  • loop 如果出现该属性，则每当音频结束时重新开始播放。

2. video 标签

• <video> 标签定义视频，比如电影片段或其他视频流。

<video src="movie.ogg" controls="controls">
您的浏览器不支持 video 标签。
</video>

• 新增属性
  • src 要播放的音频的 URL。
  • autoplay 如果出现该属性，则音频在就绪后马上播放。
  • controls 如果出现该属性，则向用户显示控件，比如播放按钮。
  • loop 如果出现该属性，则每当音频结束时重新开始播放。
  • width 设置视频播放器的宽度。
  • height 设置视频播放器的高度。

3. source 标签

• <source> 标签为媒介元素（比如 <video> 和<audio>）定义媒介资源。

<audio controls>
   <source src="horse.ogg" type="audio/ogg">
   <source src="horse.mp3" type="audio/mpeg">
 Your browser does not support the audio element.
</audio> 

• 常用属性
  • media: 规定媒体资源的类型。
  • src: 规定媒体文件的 URL。
  • type: 规定媒体资源的 MIME 类型。

新增的表单元素

一. 新增的Input type属性

1. email

• email 类型用于应该包含 e-mail 地址的输入域。
• 在提交表单时，会自动验证 email 域的值。

E-mail: <input type="email" name="user_email" />

2. url

• url 类型用于应该包含 URL 地址的输入域。
• 在提交表单时，会自动验证 url 域的值。

Homepage: <input type="url" name="user_url" />

3. number

• number 类型用于应该包含数值的输入域。
• 您还能够设定对所接受的数字的限定：

Points: <input type="number" name="points" min="1" max="10" />

4. Date Pickers（日期选择器）

• HTML5 拥有多个可供选取日期和时间的新输入类型：
  • date - 选取日、月、年
  • month - 选取月、年
  • week - 选取周和年
  • time - 选取时间（小时和分钟）
  • datetime - 选取时间、日、月、年（UTC 时间）
  • datetime-local - 选取时间、日、月、年（本地时间）

Date: <input type="date" name="user_date" />

4. tel

• 电话号码;
• 其本质是用于移动端, 点击该文本框会默认弹出数字键盘;

Tel: <input type="tel" name="phone_num" />

二. 新增的表单元素

1. datalist

• datalist 元素规定输入域的选项列表。
• 列表是通过 datalist 内的 option 元素创建的。
• 如需把 datalist 绑定到输入域，请用输入域的 list 属性引用 datalist 的 id：

Webpage: <input type="url" list="url_list" name="link" />
<datalist id="url_list">
	<option label="W3School" value="http://www.W3School.com.cn" />
	<option label="Google" value="http://www.google.com" />
	<option label="Microsoft" value="http://www.microsoft.com" />
</datalist>

三. 新增的表单属性

1. autocomplete

• autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。

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

• 注释：autocomplete 适用于 <form> 标签，以及以下类型的 <input> 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。

2. autofocus

• autofocus 属性规定在页面加载时，域自动地获得焦点。

User name: <input type="text" name="user_name"  autofocus="autofocus" />

• 注释：autofocus 属性适用于所有 标签的类型。

3. placeholder

• placeholder 属性提供一种提示（hint），描述输入域所期待的值。

<input type="search" name="user_search"  placeholder="Search W3School" />

• 注释：placeholder 属性适用于以下类型的 <input> 标签：text, search, url, telephone, email 以及 password。
• 提示（hint）会在输入域为空时显示出现，会在输入域获得焦点时消失：

4. required

• required 属性规定必须在提交之前填写输入域（不能为空）。

Name: <input type="text" name="usr_name" required="required" />

• 注释：required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。