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

標籤：character   ash   source   ogr   ima   text   type屬性   muti   影響   

十二、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【完】