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 >代表一個獨立的、完整的相關內容塊，可獨立于頁面其它內容使用，例如一篇完整的論壇帖子，一篇博客文章，一個用戶評論等
<!DOCTYPE html>
<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 > 標簽允許您規定可替換的視頻/音頻檔案供瀏覽器根據它對媒體型別或者編解碼器的支持進行選擇，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/245231.html
標籤：其他