認識HTML5中的新標籤與新屬性

時間 2019-11-19

標籤認識 html5 html 標籤屬性欄目 HTML5 简体版

原文原文鏈接

前端之HTML5，CSS3（一）

　　HTML5中經常使用內容標籤

　　header標籤

　　header標籤訂義文檔的頁眉，基本語法：<header>content</header>。javascript

　　nav標籤

　　nav標籤訂義導航連接部分，基本語法：<nav>content</nav>。php

　　footer標籤

　　footer標籤訂義文檔的頁腳，基本語法：<footer>content</footer>。css

　　article標籤

　　article標籤訂義文章內容部分，基本語法：<article>content</article>。html

　　section標籤

　　section標籤訂義文檔中區域，相似於div標籤，基本語法：<section>content</section>。前端

　　aside標籤

　　aside標籤訂義內容以外的側邊欄部分，基本語法：<aside>content</aside>。java

　　datalist標籤

　　datalist標籤與input標籤結合使用，定義輸入下拉選項，基本語法：<datalist><option>content</option>...</datalist>。python

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>datalist標籤-測試</title>
 6 </head>
 7 <body>
 8     <input type="text" value="" list="language" />
 9     <datalist id="language">
10         <option>C</option>
11         <option>C++</option>
12         <option>C#</option>
13         <option>php</option>
14         <option>python</option>
15         <option>perl</option>
16         <option>java</option>
17         <option>javascript</option>
18     </datalist>
19 </body>
20 </html>

View Code

　　效果web

　　fieldset標籤

　　fieldset標籤與legend標籤搭配使用，定義區域範圍，基本語法：<fieldset><legend>title</legend></fieldset>。瀏覽器

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>fieldset標籤-測試</title>
 6     <style type="text/css">
 7         fieldset {
 8             width: 300px;
 9         }
10     </style>
11 </head>
12 <body>
13     <fieldset>
14         <legend>用戶登陸</legend>
15         用戶名稱：<input type="text" name="user_name">    
16         <br />
17         用戶密碼：<input type="password" name="pwd">
18     </fieldset>
19 </body>
20 </html>

View Code

　　效果ide

input標籤新增type屬性值

屬性值	實例	描述
email	<input type="email">	輸入郵箱格式
tel	<input type="tel">	輸入手機號碼
url	<input type="url">	輸入url格式
number	<input type="number">	輸入數字格式
search	<input type="search">	搜索框,語義化
range	<input type="range">	自由拖動滑塊
time	<input type="time">	時，分
date	<input type="date">	年，月，日
datetime	<input type="tatetime">	時間
month	<input type="month">	月，年
week	<input type="week">	星期，年

　　效果自行測試，PC端瀏覽器兼容性較差。

input標籤新增屬性

屬性	實例	描述
placeholder	<input type="text" placeholder="Enter your name">	輸入框內文字提示，輸入內容消失
autofocus	<input type="text" autofocus>	鼠標光標自動定位在輸入框，無須點擊輸入再輸入
multiple	<input type="file" multiple>	支持多文件上傳
autocomplete	<input type="text" autocomplete="off">	表單是否啓動表單自動完成功能，屬性值有：on和off
required	<input type="text" required>	必填，內容不能爲空
accesskey	<input type="text" accesskey="s">	指定快捷鍵，使用alt+s快速定位光標到輸入框內

　　多媒體標籤

　　audio標籤：添加音頻標籤，基本語法：<audio src="xxx.mp3"></audio>，支持音頻格式有mp3,ogg,wav，根據瀏覽器不一樣，不一樣格式音頻支持程度有所不一樣。屬性有：autoplay、controls、loop，autoplay設定音頻自動播放，打開網頁播放音頻，沒法停止，至音頻播放完畢；controls設定音頻控制，頁面出現音頻控件；loop設定音頻循環播放。設置方法：<audio src="faded.ogg" autoplay/controls/loop></audio>。

　　解決瀏覽器格式不兼容的方法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>audio標籤-測試</title>
 6 </head>
 7 <body>
 8     <!-- 能夠使用屬性等於屬性值的形式 -->
 9     <audio autoplay controls="controls" loop="loop"> 
10         <source src="backgroud.mp3" />
11         <source src="backgroud.ogg" />
12         <source src="backgroud.wav" />
13     </audio>
14 </body>
15 </html>

View Code

　　video標籤：添加視頻頻標籤，基本語法：<video src="xxx.mp3"></video>，支持視頻格式有mp4,ogg,webM，根據瀏覽器不一樣，不一樣格式視頻支持程度有所不一樣。屬性有：autoplay、controls、loop，autoplay設定視頻自動播放，打開網頁播放視頻，沒法停止，至視頻播放完畢；controls設定視頻控制，頁面出現視頻控件；loop設定視頻循環播放。設置方法：<video src="faded.ogg" autoplay/controls/loop></video>。

　　解決瀏覽器格式不兼容的方法：

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title>video標籤-測試</title>
 6 </head>
 7 <body>
 8     <!-- 能夠使用屬性等於屬性值的形式 -->
 9     <video autoplay controls="controls" loop="loop"> 
10         <source src="movie.mp4" />
11         <source src="movie.ogg" />
12         <source src="movie.webM" />
13     </video>
14 </body>
15 </html>

View Code

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。