十二、HTML5標記 現代HTML

html5新增的元素：header nav footer aside section article time 這些新增元素使頁面結構更清晰，取代<div id="header">這些。

還有，mark:突出顯示文本。audio:插入音頻。progress:顯示進度條。

htime元素：<time datetime="2017-07-28">7/28/2017</time>，datetime的值是官方格式只有幾種，標簽內容可以隨便寫，是顯示在頁面上讀者看到的。

在li中設置屬性，display:inline; 元素從默認的block改成inline，會像內聯元素一樣在一行，且項目標號樣式消失。

1、video元素

通過video元素引用視頻，逐漸取代flash.

該元素的基本設定都是通過在html中增加屬性來完成，除樣式外。

基本設定：<video controls autoplay poster="images/poster.png" width="512" height="288" src="video/tweetsip.mp4 "id="video"></video>

controls:是否提供播放控件。

autoplay:是否加載後自動播放。

poster:不設定的話，自動將視頻第一幀作為海報。

width, height:視頻顯示區，盡量設定為視頻原始尺寸，否則視頻會按原比例顯示，兩邊填充黑邊。

loop:是否循環播放。

2、視頻格式

主流的有三種視頻容器對應三種視頻格式。

分別是（容器/格式）：mp4/.mp4 webm/.webm ogg/.ogv，每種瀏覽器支持的格式不同，所以為了保證適應性，最好多放幾個不同格式的源，在video裏增加幾個source元素。

<video controls autoplay width="512" height="288">

<source src="video/tweetsip.mp4" type=‘video/mp4‘> 其中，type屬性指定容器。

<source src="video/tweetsip.webm" type=‘video/webm‘>

<source src="video/tweetsip.ogv" type=‘video/ogg‘>

可以將<object></object>元素放最後，作為退路播放flash視頻

</video>

十三、表格與更多列表 建立表格

用html中的元素建立表格數據。在html中<table>開始整個表格，<tr>標記一個表行，<th> <td>都在<tr>裏面，其中<th>是表頭，<td>是其他單元格內容。可以在css中針對各表格元素設定樣式。還可以在<table>的最上面添加<caption>元素，作為表格標題。

1、表格的css樣式

單元格數據對齊方式：text-align vertical-align

在table中為整個表格設定單元格邊框間距：border-spacing

邊框間距折疊，將兩個緊挨著的邊框合並為一個邊框：border-collapse: collapse;

利用偽類:nth-child可設定奇偶行/列不同格式，是這個元素相對於它的兄弟元素的數字順序。tr:nth-child(odd){ background-color: red; }奇數行紅色。

單元格跨多行：在html中為td增加屬性，<td rowspan="2">同時被占的相應單元格空出一個空行（也沒有空的<td></td>）。

在行和列上都可以跨多個單元格，只是在相應位置上空行就行，跨多列用的是colspan="2"。

十四、html表單 實現交互

表單開始是form元素：

<form action="http://wickedlysmart.com/contest.php" method="post">

<form>其中，action屬性指定處理表單文件的服務器腳本文件，method屬性指定表單提交方式，標簽裏面是表單內容。

1、常用的表單元素

每一個表單元素都要有name屬性。對於輸入性內容，瀏覽器會打包name+輸入內容到服務器，對於選擇性內容，瀏覽器會打包name+value屬性值到服務器。用戶在頁面上看到的都是標簽。

輸入類：

input 元素中的value屬性會在頁面上顯示為框內默認文本。

單行文本輸入 <input type="text" name="fullname">（input是void元素）

數字輸入 <input type="number" min="0" max="20">除了限制輸入類型為數字，還可以限制大小範圍

範圍輸入<input type="range" name="range" min="0" max="20" step="5">顯示是一個滑動條

顏色輸入<input type="color" name="color">彈出一個顏色選擇器

日期輸入<input type="date" name="date">

email輸入<input type="email" name="email">

tel輸入<input type="tel" name="tel">

url輸入<input type="url" name="url">

提交按鈕<input type="submit" value="submit now">其中value值就是按鈕上顯示的

多行文本輸入<textarea name="comments" rows="10" cols="48"></textarea>

選擇類：

單選鈕輸入<input type="radio" name="hotornot" value="hot">標簽1

<input type="radio" name="hotornot" value="not">標簽2 name是一樣的，提交的是hotornot+hot，用戶在界面看到的就是標簽值。可以為某個選項增加一個checked 屬性，顯示時會默認選中。

復選框輸入<input type="checkbox" name="spice" value="salt">標簽1

<input type="checkbox" name="spice" value="pepper">標簽2

<input type="checkbox" name="spice" value="garlic">標簽3 name是一樣的，提交的是spice+salt&pepper，用戶在界面看到標簽值 。

下拉菜單<select name="characters">

<option value="buckaroo">bucharoo banzai</option>

<option value="tommy">perfect tommy</option>

<option value="penny">penny priddy</option>

<option value="john">john parker</option>

</select>用戶在下拉框看到的是標簽內容，向服務器提交的是name+value值。

2、兩種提交方式

form中method屬性的兩種值，post和get。

post:打包表單數據發給服務器，不追加到url。當表單數據很多，或很私有時用post。

get:打包表單數據發給服務器，並將數據追加到url。可以加書簽的請求，例如搜索結果。

3、用label元素來添加標簽

與直接加文本標簽表現形式一樣，但可訪問性好。但要為元素增加一個id

<input type="radio" name="hotornot" value="hot" id="hot">

<label for="hot"(id)>hot</label>

<input type="radio" name="hotornot" value="not" id="not">

<label for="not">not</label>

4、其他

文件提交，<input type="file" name="doc">

多選下拉菜單，為select元素增加布爾屬性mutiple

輸入提示，為input元素增加屬性placeholder="ceshi"，比正常內容淺些，不影響輸入。

必須填寫，為元素增加布爾屬性required

【全書完，棒棒噠\(^o^)/~】

【幹貨】Html與CSS入門學習筆記12-14【完】