HTML5標籤2
建立表格
在HTML網頁中,要想建立表格,就需要使用表格相關的標籤。建立表格的基本語法格式如下:
<table>
<tr>
<td>單元格內的文字</td>
...
</tr>
...
</table>
在上面的語法中包含三對HTML標籤,分別為 <table></table>、<tr></tr>、<td></td>,他們是建立表格的基本標籤,缺一不可,下面對他們進行具體地解釋
1.table用於定義一個表格。
2.tr 用於定義表格中的一行,必須巢狀在 table標籤中,在 table中包含幾對 tr,就有幾行表格。
3.td /td:用於定義表格中的單元格,必須巢狀在<tr></tr>標籤中,一對 <tr> </tr>中包含幾對<td></td>,就表示該行中有多少列(或多少個單元格)。
注意:
1. <tr></tr>中只能巢狀<td></td>
2. <td></td>標籤,他就像一個容器,可以容納所有的元素
表頭標籤
表頭一般位於表格的第一行或第一列,其文字加粗居中,如下圖所示,即為設定了表頭的表格。設定表頭非常簡單,只需用表頭標籤<th></th>替代相應的單元格標籤<td></td>即可。
表格結構(瞭解)
在使用表格進行佈局時,可以將表格劃分為頭部、主體和頁尾(頁尾因為有相容性問題,我們不在贅述),具體 如下所示:
<thead></thead>:用於定義表格的頭部。
必須位於<table></table> 標籤中,一般包含網頁的logo和導航等頭部資訊。
<tbody></tbody>:用於定義表格的主體。
位於<table></table>標籤中,一般包含網頁中除頭部和底部之外的其他內容。
表格標題
表格的標題: caption
定義和用法
caption 元素定義表格標題。
<table>
<caption>我是表格標題</caption>
</table>
caption 標籤必須緊隨 table 標籤之後。只能對每個表格定義一個標題。通常這個標題會被居中於表格之上。
合併單元格(難點)
跨行合併:rowspan 跨列合併:colspan
合併單元格的思想:
將多個內容合併的時候,就會有多餘的東西,把它刪除。 例如 把 3個 td 合併成一個, 那就多餘了2個,需要刪除。
公式: 刪除的個數 = 合併的個數 - 1
合併的順序 先上 先左
總結表格
-
表格提供了HTML 中定義表格式資料的方法。
-
表格中由行中的單元格組成。
-
表格中沒有列元素,列的個數取決於行的單元格個數。
-
表格不要糾結於外觀,那是CSS 的作用。
表格的學習要求: 能手寫表格結構,並且能合併單元格。
表單標籤(掌握)
現實中的表單,類似我們去銀行辦理信用卡填寫的單子。
目的是為了收集使用者資訊。
在我們網頁中, 我們也需要跟使用者進行互動,收集使用者資料,此時也需要表單。
在HTML中,一個完整的表單通常由表單控制元件(也稱為表單元素)、提示資訊和表單域3個部分構成。
表單控制元件:
包含了具體的表單功能項,如單行文字輸入框、密碼輸入框、複選框、提交按鈕、重置按鈕等。
提示資訊:
一個表單中通常還需要包含一些說明性的文字,提示使用者進行填寫和操作。
表單域:
他相當於一個容器,用來容納所有的表單控制元件和提示資訊,可以通過他定義處理表單資料所用程式的url地址,以及資料提交到伺服器的方法。如果不定義表單域,表單中的資料就無法傳送到後臺伺服器。
input 控制元件(重點)
在上面的語法中,<input />標籤為單標籤,type屬性為其最基本的屬性,其取值有多種,用於指定不同的控制元件型別。除了type屬性之外,<input />標籤還可以定義很多其他的屬性,其常用屬性如下表所示。
label標籤(理解)
label 標籤為 input 元素定義標註(標籤)。
作用: 用於繫結一個表單元素, 當點選label標籤的時候, 被繫結的表單元素就會獲得輸入焦點
如何繫結元素呢?
for 屬性規定 label 與哪個表單元素繫結。
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
textarea控制元件(文字域)
如果需要輸入大量的資訊,就需要用到<textarea></textarea>標籤。通過textarea控制元件可以輕鬆地建立多行文字輸入框,其基本語法格式如下:
<textarea cols="每行中的字元數" rows="顯示的行數">
文字內容
</textarea>
下拉選單
使用select控制元件定義下拉選單的基本語法格式如下
<select>
<option>選項1</option>
<option>選項2</option>
<option>選項3</option>
...
</select>
注意:
-
<select></select>中至少應包含一對<option></option>。
-
在option 中定義selected =" selected "時,當前項即為預設選中項。
表單域
在HTML中,form標籤被用於定義表單域,即建立一個表單,以實現使用者資訊的收集和傳遞,form中的所有內容都會被提交給伺服器。建立表單的基本語法格式如下:
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控制元件
</form>
常用屬性:
-
Action 在表單收集到資訊後,需要將資訊傳遞給伺服器進行處理,action屬性用於指定接收並處理表單資料的伺服器程式的url地址。
-
method 用於設定表單資料的提交方式,其取值為get或post。
-
name 用於指定表單的名稱,以區分同一個頁面中的多個表單。
注意: 每個表單都應該有自己表單域。
文件型別設定
-
document
-
HTML: sublime 輸入 html:4s
-
XHTML: sublime 輸入 html:xt
-
HTML5 sublime 輸入 html:5 <!DOCTYPE html>
-
字元設定
- <meta http-equiv="charset" content="utf-8">:HTML與XHTML中建議這樣去寫
- <meta charset="utf-8">:HTML5的標籤中建議這樣去寫
常用新標籤
w3c 手冊中文官網 : http://w3school.com.cn/
-
header:定義文件的頁首 頭部
-
nav:定義導航連結的部分
-
footer:定義文件或節的頁尾 底部
-
article:定義文章。
-
section:定義文件中的節(section、區段)
-
aside:定義其所處內容之外的內容 側邊
<header> 語義 :定義頁面的頭部 頁首</header>
<nav> 語義 :定義導航欄 </nav>
<footer> 語義: 定義 頁面底部 頁尾</footer>
<article> 語義: 定義文章</article>
<section> 語義: 定義區域</section>
<aside> 語義: 定義其所處內容之外的內容 側邊</aside> -
datalist 標籤定義選項列表。請與 input 元素配合使用該元素
<input type="text" value="輸入明星" list="star"/> <!-- input裡面用 list -->
<datalist id="star"> <!-- datalist 裡面用 id 來實現和 input 連結 -->
<option>劉德華</option>
<option>劉若英</option>
<option>劉曉慶</option>
<option>郭富城</option>
<option>張學友</option>
<option>郭郭</option>
</datalist> -
fieldset 元素可將表單內的相關元素分組,打包 legend 搭配使用
<fieldset>
<legend>使用者登入</legend> 標題
使用者名稱: <input type="text"><br /><br />
密 碼: <input type="password">
</fieldset>
新增的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**** | 年月日 | |
datetime**** | <input type="datetime"> | 時間 |
month**** | <input type="month"> | 月年 |
week**** | <input type="week"> | 星期 年 |
屬性**** | 用法**** | 含義**** |
---|---|---|
placeholder**** | <input type="text" placeholder="請輸入使用者名稱"> | 佔位符 當用戶輸入的時候 裡面的文字消失 刪除所有文字,自動返回 |
autofocus**** | <input type="text" autofocus> | 規定當頁面載入時 input 元素應該自動獲得焦點 |
multiple**** | <input type="file" multiple> | 多檔案上傳 |
autocomplete**** | <input type="text" autocomplete="off"> | 規定表單是否應該啟用自動完成功能 有2個值,一個是on 一個是off on 代表記錄已經輸入的值 1.autocomplete 首先需要提交按鈕 2.這個表單您必須給他名字 |
required**** | <input type="text" required> | 必填項 內容不能為空 |
accesskey**** | <input type="text" accesskey="s"> | 規定啟用(使元素獲得焦點)元素的快捷鍵 採用 alt + s的形式 |
<form action="">
<fieldset>
<legend>學生檔案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="請輸入使用者名稱"> <br>
<label for="userPhone">手機號碼:</label>
<input type="tel" name="userPhone" id="userPhone" pattern="^1\d{10}$"><br>
<label for="email">郵箱地址:</label>
<input type="email" required name="email" id="email"><br>
<label for="collage">所屬學院:</label>
<input type="text" name="collage" id="collage" list="cList" placeholder="請選擇"><br>
<datalist id="cList">
<option value="前端與移動開發學院"></option>
<option value="java學院"></option>
<option value="c++學院"></option>
</datalist><br>
<label for="score">入學成績:</label>
<input type="number" max="100" min="0" value="0" id="score"><br>
<form action="">
<fieldset>
<legend>學生檔案思密達</legend>
<label>姓名: <input type="text" placeholder="請輸入學生名字"/></label> <br /><br />
<label>手機號: <input type="tel" /></label> <br /><br />
<label>郵箱: <input type="email" /></label> <br /><br />
<label>所屬學院: <input type="text" placeholder="請選擇學院" list="xueyuan"/>
<datalist id="xueyuan">
<option>java學院</option>
<option>前端學院</option>
<option>php學院</option>
<option>設計學院</option>
</datalist>
<br /><br />
<label>出生日期: <input type="date" /></label> <br /><br />
<label>成績: <input type="number" /></label> <br /><br />
<label>畢業時間: <input type="date" /></label> <br /><br />
<input type="submit" /> <input type="reset" />
</fieldset>
</form>
<label for="inTime">入學日期:</label>
<input type="date" id="inTime" name="inTime"><br>
<label for="leaveTime">畢業日期:</label>
<input type="date" id="leaveTime" name="leaveTime"><br>
<input type="submit">
</fieldset>
</form>
多媒體標籤
-
embed:標籤定義嵌入的內容
-
audio:播放音訊
-
多媒體 embed(會使用)
embed可以用來插入各種多媒體,格式可以是 Midi、Wav、AIFF、AU、MP3等等。url為音訊或視訊檔案及其路徑,可以是相對路徑或絕對路徑。
因為相容性問題,我們這裡只講解 插入網路視訊, 後面H5會講解 audio 和video 視訊多媒體。
<embed src="http://player.youku.com/player.php/sid/XMTI4MzM2MDIwOA==/v.swf"
allowFullScreen="true" quality="high" width="480" height="400" align="middle"
allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
HTML5通過<audio>標籤來解決音訊播放的問題。
使用相當簡單,如下圖所示
並且可以通過附加屬性可以更友好控制音訊的播放,如:
autoplay 自動播放
controls 是否顯不預設播放控制元件
loop 迴圈播放 loop = 2 就是迴圈2次 loop 或者 loop = "-1" 無限迴圈
由於版權等原因,不同的瀏覽器可支援播放的格式是不一樣的
多瀏覽器支援的方案,如下圖
多媒體 video
HTML5通過<audio>標籤來解決音訊播放的問題。
同音頻播放一樣,<video>使用也相當簡單,如下圖
同樣,通過附加屬性可以更友好的控制視訊的播放
autoplay 自動播放
controls 是否顯示預設播放控制元件
loop 迴圈播放
width 設定播放視窗寬度
height 設定播放視窗的高度
由於版權等原因,不同的瀏覽器可支援播放的格式是不一樣的