Web基本教程~03.HTML5新特性
Web基本教程~03.HTML5新特性
上一期
HTML5 新增 type 类型
定义用于 e-mail 地址的字段（当提交表单时会自动对 email 字段的值进行验证）
E-mail: <input type="email" name="usremail">
url
定义用于输入 URL 的字段
添加你的主页: <input type="url" name="homepage">
search
定义搜索字段（比如站内搜索或谷歌搜索等）
Search Google: <input type="search" name="googlesearch">
tel
定义用于输入电话号码的字段
电话号码: <input type="tel" name="usrtel">
color
从拾色器中选取颜色
选择你喜欢的颜色: <input type="color" name="favcolor">
number
定义用于输入数字的字段（您可以设置可接受数字的限制）
max - 规定允许的最大值。 min - 规定允许的最小值。 step - 规定合法数字间隔。 value - 规定默认值。
数量 ( 1 到 10 之间): <input type="number" name="quantity" min="1" max="10">
range
定义用于精确值不重要的输入数字的控件（比如 slider 控件）。您也可以设置可接受 数字的限制
<input type="range" name="points" min="1" max="10">
date
定义 date 控件
生日: <input type="date" name="bday">
month
定义 month 和 year 控件（不带时区）
生日 ( 月和年 ): <input type="month" name="bdaymonth">
week
定义 week 和 year 控件（不带时区）
选择周: <input type="week" name="week_year">
HTML5 新增属性
autofocus 属性
autofocus 属性规定在页面加载时，域自动地获得焦点。注释：autofocus 属性适用于所有 < input > 标签的类型。
User name: <input type="text" name="user_name" autofocus />
multiple 属性
multiple 属性规定输入域中可选择多个值。 注释：multiple 属性适用于以下类型的 < input > 标签：email 和 file。
Email: <input type="email" multiple />
placeholder 属性
placeholder 属性提供一种提示（hint），描述输入域所期待的值。
<input type="search" name="user_search" placeholder="Search W3School" />
required 属性
required 属性规定必须在提交之前填写输入域（不能为空）。
Name: <input type="text" name="usr_name" required />
HTML5新增元素
HTML5 新增布局标签
< header >...< /header > 头部
< nav >...< /nav > 导航
< section >...< /section >定义文档中的节。比如章节、页眉、页脚或文档中的其它部分
< aside >...< /aside > 侧边栏
< footer >...< /footer > 页脚
< article >...< /article >代表一个独立的、完整的相关内容块，可独立于页面其它内容使用。例如一篇完整的论坛帖子，一篇博客文章，一个用户评论等
<html>
<head>
<meta charset="utf-8" />
<title>title>
<style type="text/css">
/*页面顶部 header*/
header{
height:150px;
background-color:#5500ff;
}
/*页面中间 div*/
div{
margin-top:15px;
height:200px;
}
section{
height:150px;
background-color:#00ffff;
width:45%;
float:left;
}
article{
background-color:#55aaff;
width:350px;
text-align:center;
margin:0px auto;
}
aside{
height:360px;
background-color:#ffaa7f;
width:35%;
float:right;
}
/*页面底部*/
footer{
height:100px;
background-color:#ff557f;
clear:both;
margin-top:10px;
}
style>
head>
<body>
<header>定义一个页面或是区域的头部header>
<div>
<section>定义一个区域section>
<aside>定义页面内容的侧边框部分aside>
div>
<footer>定义一个页面或是区域的底部footer>
body>
html>
视频和音频
HTML5 未出来之前，在线的音频和视频都是借助 Flash 或者第三方工具实现的，现在HTML5 也支持了这方面的功能。在一个支持 HTML5 的浏览器中，不需要安装任何插件就能播放音频和视频。原生的支持音频和视频。
视频和音乐
Video 标签定义视频，比如电影片段或其他视频流
audio 标签定义声音，比如音乐或其他音频流。
<body>
<video src="./vedio/动漫原声-めぐる季節(标清).mp4" autoplay="autoplay">动漫原声video>
<audio src="./music/井上杏美%20(井上あずみ)%20-%20めぐる季節%20(更替的四季).mp3" autoplay="autoplay">audio>
body>
source
< source > 标签为媒介元素（比如 < video > 和 < audio >）定义媒介资源。
< source > 标签允许您规定可替换的视频/音频文件供浏览器根据它对媒体类型或者编解码器的支持进行选择。