表格 table(會使用)
表格的現在還是較為常用的一種标簽，但不是用來布局，常見處理、顯示表格式資料。
建立表格
在HTML網頁中，要想建立表格，就需要使用表格相關的标簽。建立表格的基本文法格式如下：
<table>
<tr>
<td>單元格内的文字</td>
...
</tr>
...
</table>
在上面的文法中包含三對HTML标簽，分别為 <table></table>、<tr></tr>、<td></td>，他們是建立表格的基本标簽，缺一不可
1.table 用于定義一個表格
2.tr 是定義表格中的一行，必須嵌套在table标簽内，table中包含幾對tr就有幾行表格
3.td 就是單元格，必須嵌套在tr标簽内，tr有幾個td就表示有幾個單元格(就是幾列)
注意
tr 中隻能嵌套 td
td下可以有任意元素
表格屬性
border:邊框 預設值為0 像素值(px)
| border | 邊框 預設值為0 | 像素值(px) |
|---|---|---|
| cellspacing | 設定單元格和單元格之間的間距 | 像素 |
| cellpadding | 設定單元格内容和單元格的間距 | 像素 |
| width | 表格的寬度 | 像素值 |
| height | 表格的高度 | 像素 |
| align | 設定表格的水準對齊方式 | left，center，right |
表頭标簽
表頭一般位于表格的第一行或第一列，其文本加粗居中，即為設定了表頭的表格。設定表頭非常簡單，隻需用表頭标簽<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
合并的順序 先上 先左
總結表格
1.html提供的表格是資料的方法
2.表格由行中的單元格組成
3.表格沒有列元素，列的個數由單元格個數決定
4.表格不要糾結外觀，css來管
表格學習要求：能手寫表格結構，并且能合并單元格
表單标簽(掌握)
現實中的表單，類似我們填的單子。
目的是為了收集使用者資訊。
在我們網頁中， 我們也需要跟使用者進行互動，收集使用者資料，此時也需要表單。
在HTML中，一個完整的表單通常由表單控件（也稱為表單元素）、提示資訊和表單域3個部分構成。
表單控件：
包含了具體的表單功能項，如單行文本輸入框、密碼輸入框、複選框、送出按鈕、重置按鈕等。
提示資訊：
一個表單中通常還需要包含一些說明性的文字，提示使用者進行填寫和操作。
表單域：
他相當于一個容器，用來容納所有的表單控件和提示資訊，可以通過他定義處理表單資料所用程式的url位址，以及資料送出到伺服器的方法。如果不定義表單域，表單中的資料就無法傳送到背景伺服器。
input 控件(重點)
單标簽 br，hr，input
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| type | text | 單行文本輸入框 |
| password | 密碼輸入框 | |
| radio | 單選按鈕 | |
| checkbox | 多選按鈕 | |
| button | 普通按鈕 | |
| submit | 送出按鈕 | |
| reset | 重置按鈕 | |
| image | 圖像形式的送出按鈕 | |
| file | 檔案域 | |
| name | 由使用者自定義 | 控件的名稱 |
| value | 由使用者自定義 | input控件中的預設值 |
| size | 正整數 | 控件在頁面中顯示的寬度 |
| checked | checked | 定義選擇控件中預設被選中的項 |
| maxlength | 正整數 | 控件允許輸入的最大字元數 |
在上面的文法中，<input />标簽為單标簽，type屬性為其最基本的屬性，其取值有多種，用于指定不同的控件類型。除了type屬性之外，<input />标簽還可以定義很多其他的屬性，其常用屬性如下表所示。
label标簽(了解)
label 标簽為 input 元素定義标注（标簽）。
作用： 用于綁定一個表單元素, 當點選label标簽的時候, 被綁定的表單元素就會獲得輸入焦點
如何綁定元素呢？
for 屬性規定 label 與哪個表單元素綁定。
textarea控件(文本域)
如果需要輸入大量的資訊，就需要用到<textarea></textarea>标簽。通過textarea控件可以輕松地建立多行文本輸入框，其基本文法格式如下：
<textarea cols="每行的字元數" rows="顯示的行數">
</textarea>
下拉菜單
使用select控件定義下拉菜單的基本文法格式如下
注意：
- <select></select>中至少應包含一對<option></option>。
- 在option 中定義selected =" selected "時，目前項即為預設選中項。
表單域
在HTML中，form标簽被用于定義表單域，即建立一個表單，以實作使用者資訊的收集和傳遞，form中的所有内容都會被送出給伺服器。建立表單的基本文法格式如下：
action: url位址
method: 送出方式
name : 表單的名稱，區分同一界面的多個表單
每個表單都要由自己表單域
HTML5新标簽與特性
1993标記語言第一版
1995 2.0
1996 3.2 w3c推薦标準
1999 4.0
2000 XHTML1.0 相比與html，更嚴格，擴充了html
2001 xhtml1.1
2008 HTML5
文檔類型設定
- document
- HTML: sublime 輸入 html:4s
- XHTML: sublime 輸入 html:xt
- HTML5 sublime 輸入 html:5
字元設定
- ：HTML與XHTML中建議這樣去寫
- ：HTML5的标簽中建議這樣去寫
常用新标簽
w3c 手冊中文官網 : http://w3school.com.cn/
- header：定義文檔的頁眉 頭部
- nav：定義導航連結的部分
- footer：定義文檔或節的頁腳 底部
- article：定義文章。
- section：定義文檔中的節（section、區段）
- aside：定義其所處内容之外的内容 側邊
- datalist 标簽定義選項清單。請與 input 元素配合使用該元素
-
fieldset 元素可将表單内的相關元素分組，打包 legend 搭配使用
legend:标題
新增的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**** | <input type=“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的形式 |
綜合案例
多媒體标簽
- audio：播放音頻
- video：播放視訊
多媒體 audio
HTML5通過标簽來解決音頻播放的問題。
使用相當簡單，如下圖所示
并且可以通過附加屬性可以更友好控制音頻的播放，如：
autoplay 動播放
controls 是否顯不預設播放控件
loop 循環播放 loop = 2 就是循環2次 loop 或者 loop = “-1” 無限循環
多媒體 video
HTML5通過标簽來解決音頻播放的問題。
同音頻播放一樣，使用也相當簡單，如下圖
同樣，通過附加屬性可以更友好的控制視訊的播放
autoplay 自動播放
controls 是否顯示預設播放控件
loop 循環播放
width 設定播放視窗寬度
height 設定播放視窗的高度
總結
HTML 第二天的主題：
會使用表格 — 掌握常用表單 – html5的新特性
下午代碼練習**
1
2
