十二、HTML5標記 現(xiàn)代HTML

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

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

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

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

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:視頻顯示區(qū)，盡量設定為視頻原始尺寸，否則視頻會按原比例顯示，兩邊填充黑邊。

loop:是否循環(huán)播放。

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中的元素建立表格數(shù)據(jù)。在html中<table>開始整個表格，<tr>標記一個表行，<th> <td>都在<tr>里面，其中<th>是表頭，<td>是其他單元格內(nèi)容。可以在css中針對各表格元素設定樣式。還可以在<table>的最上面添加<caption>元素，作為表格標題。

?1、表格的css樣式

單元格數(shù)據(jù)對齊方式：text-align ?vertical-align

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

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

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

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

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

?

十四、html表單 實現(xiàn)交互

表單開始是form元素：

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

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

1、常用的表單元素

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

輸入類：

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

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

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

范圍輸入<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>用戶在下拉框看到的是標簽內(nèi)容，向服務器提交的是name+value值。

2、兩種提交方式

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

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

get:打包表單數(shù)據(jù)發(fā)給服務器，并將數(shù)據(jù)追加到url。可以加書簽的請求，例如搜索結(jié)果。

3、用label元素來添加標簽

與直接加文本標簽表現(xiàn)形式一樣，但可訪問性好。但要為元素增加一個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"，比正常內(nèi)容淺些，不影響輸入。

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

?

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

?

轉(zhuǎn)載于:https://www.cnblogs.com/ziye89/p/7251100.html

總結(jié)

以上是生活随笔為你收集整理的【干货】Html与CSS入门学习笔记12-14【完】的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。