歸納一些H5和CSS3中的常用標籤及功能

阿新 • • 發佈：2019-01-29

H5

`<figure>` 標籤

使用 <figure> 元素標記文件中的一個影象：

<figure>
  <img src="img_pulpit.jpg" alt="The Pulpit Rock" width="304" height="228">
</figure>

`<figcaption>`標籤

使用 <figure> 元素標記文件中的一個影象。<figure> 元素帶有一個標題(自動對齊的，可上可下)：

<figure>
  <img src="img_pulpit.jpg" 
 alt="The Pulpit Rock" width="304" height="228">
  <figcaption>title</figcaption>
</figure>

`<a>` 標籤

這裡主要講的是a標籤新增的屬性:download
download屬性表明該連結旨在下載，若包含了該屬性，它的值定義了下載到本地的檔案的名字，如:
(<a>標籤中必須設定 href 屬性)
<a href="/images/myw3schoolimage.jpg" download="w3logo">

`<iframe>`

標籤

新增的seamless屬性:
seamless 屬性屬於邏輯屬性。
當設定該屬性後，它規定了<iframe> 看上去像是包含文件的一部分（無邊框或滾動條）。在支援的情況下，它可以允許CSS規則從包含它的文件級聯到<iframe> 的內容，使連結能夠導航到父級文件，並且在必要時能增長和收縮以適應父級大小，只能都位於同一個源

`<video>`和`<audio>`元素

H5以前不存在標準的在Web頁面嵌入視訊的方法，現在有了
<video>和<audio>的屬性:
src:它的值為視訊或音訊檔案的URL，它可以被多個<source>

子節點替代
autoplay:自動播放，布林型屬性
loop:迴圈播放,布林型屬性
controls:顯示媒體控制欄(時間、播放，暫停),布林型屬性
perload:若被省略或設定為none，該媒體不會被預載入，若包含或設為auto，則該媒體將被下載

下列屬性僅適用於<video>:
poster:值為一個影象的URL，用於視訊開始播放前的預覽圖
width:視訊容器的寬度(單位px)
height:視訊高度(單位px)

示例:

<video autoplay controls loop poster="poster.jpg" src="video.mp4" height="360" width="480">you dont support H5,but you can still <a href="myVideo.ogv">download the vedio</a></video>

更詳細的<video><audio> 介紹請看:

http://blog.csdn.net/qq_33535433/article/details/78119750

H5 Web表單

checked屬性

<input type="checkbox" checked>
就相當於<input type="checkbox" checked="checked">

type屬性

HTML5 擁有多個新的表單輸入型別。這些新特性提供了更好的輸入控制和驗證。
比如:

日期和時間

HTML5 擁有多個供選擇日期和時間的新的輸入型別：

date - 選擇日、月、年
month - 選擇月、年
week - 選擇周、年
time - 選擇時間（時、分）
datetime - 選擇時間、日期、月、年（UTC 時間）
datetime-local - 選擇時間、日期、月、年（本地時間）

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

email

email 輸入型別用於應該包含電郵地址的輸入欄位。
當提交表單時，會自動地對 email 欄位的值進行驗證。
例項:E-mail: <input type="email" name="user_email" />

number

number 輸入型別用於包含數字值的輸入欄位。
您可以設定可接受數字的限制。
例項:Points: <input type="number" name="points" min="1" max="10" />

url

url 輸入型別用於應該包含 URL 地址的輸入欄位。
會在提交表單時對 url 欄位的值自動進行驗證。
例項:Homepage: <input type="url" name="user_url" />

file

<input type="file" /> 選擇檔案按鈕
這個大家都很清楚
accept屬性:它可以被用來指定一個逗號分隔的處理該表單的伺服器能正確處理的內容型別清單
例項:
在檔案上傳中使用 accept 屬性，本例中的輸入欄位可以接受 GIF 和 JPEG 兩種影象：

    <form>
      <input type="file" name="pic" id="pic" accept="image/gif,      image/jpeg" />
    </form>

如果不限制影象的格式，可以寫為：accept=”image/*”。
提示：請避免使用該屬性。應該在伺服器端驗證檔案上傳。
在有些移動瀏覽器上，accept屬性允許訪問相機、麥克風和某些裝置上的攝像機:
<input type="file" name="image" accept="image/*;capture=camera">
<input type="file" name="video" accept="video/*;capture=camcorder">
<input type="file" name="audio" accept="audio/*;capture=microphone">
capture表示，可以捕獲到系統預設的裝置，比如：camera–照相機；camcorder–攝像機；microphone–錄音。
當然了，這些不是普遍支援的，某些瀏覽器上可以正常執行，包括:Android 3.0瀏覽器、Android版Chrome(0.16)、Firefox Mobile 10.0和Opera Mobile 14

對了，相關規範已經被修改了。過去是accept屬性一部分的capture元件如今是一個單獨的布林屬性。上面的程式碼已經變成了這樣:
<input type="file" name="image" accept="image/*" capture>
<input type="file" name="video" accept="video/*" capture>
<input type="file" name="audio" accept="audio/*" capture>

滑動條

<input type="range">
range輸入型別顯示成一個滑動條，可以讓使用者沿著它的長度拖曳或輕觸來選擇一個值。與number型別一樣，它的最小值和最大值也由min和max設定，它的步進用step屬性設定
<input type="range" name="points" min="1" max="10" step="2"/>

如何讓滑動條豎起來呢? 答:”在某些瀏覽器上可以”
在Webkit中這麼做的方法如下:

    input[type=range]{
       -webkit-appearance:slider-vertical;
    }

required 屬性

required 屬性規定必須在提交之前填寫輸入域（不能為空）。
註釋：required 屬性適用於以下型別的 <input> 標籤：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
<input type="text" name="usr_name" required/>

支援required屬性的瀏覽器同時也支援:required和:invalid偽類。你可以通過使用視覺提示告知使用者哪些欄位是必須的，使用CSS標識成功的資料輸入等:

input:focus:invalid{
   background-color:#CCCCCC;
}
input:valid{
   background-color:#00FF33;
}
input:required{
   border:2px solid #0066FF;
}

最小值和最大值:min和max屬性

要設定一個允許值的範圍，可以使用min和max屬性
他們只能用於日期/時間輸入，number和range。若瀏覽器為這些型別提供了對應的UI掛件，它會通過不顯示低於或高於限定值的方式禁止選擇一個在min/max之外的值

pattern屬性

哪裡允許placeholder屬性，哪裡就支援pattern屬性，這是合理的。pattern屬性包含了一個javascript風格的正則表示式，<input> 的值必須與之匹配才能提交表單。當包含了pattern時，同時包含一個用來描述該模式的title屬性通常是一個好的做法

`<datalist>` 元素及list屬性

首先說新增的list屬性，它指向一個除了允許使用者輸入任意值之外，提供給使用者的一個值的列表
該list屬性的值和它相關聯的<datalist> 的id相同。<datalist> 也是一個新的H5元素
<datalist> 元素代表的是一個<option> 元素的集合，這些<option> 元素為<input> 元素提供了預定義的選項
例項
下面是一個 input 元素，datalist 中描述了其可能的值：

<input id="myCar" list="cars" />
<datalist id="cars">
  <option value="BMW">
  <option value="Ford">
  <option value="Volvo">
</datalist>

幾個表單控制元件可以使用同一個<datalist> ，<datalist> 中的選項為使用者提供了作者指定的自動完成值，但是使用者仍然可以自主輸入，提示項列表可以硬編碼進去也可以動態生成

全域性屬性

data-xxx

當我們想給一個標籤加上一個自定義屬性，最好按照H5的規範:data-xxxx

hidden

代替了以前的display:none
<label hidden>看見了麼</label>

contenteditable(很神奇)

<p contenteditable="true">可編輯</p>

CSS3

使用rgba新增透明度功能

RGBA與RGB類似，但添加了一個表示透明度的A
rgb(255,255,255,1)
1表示完全不透明，0表示完全透明，0.5就是50%的透明

CSS的角度度量

角度度量型別有很多，這裡只介紹”度數”

度數的範圍可以從0到360度，正的度數沿順時針方向，負度數為逆時針方向。
示例:

.img{
  -webkit-transform:rotate(-5deg);
  或
  transform:rotate(-5deg);
}

動畫時長

animation-duration:0.5s或500ms;

關於CSS3更詳細的請看:
http://blog.csdn.net/qq_33535433/article/details/78150772