Html學習筆記（二）
表格 table （會使用）
表格由 <table> 標籤來定義。每個表格均有若干行（由<tr> 標籤定義），每行被分割為若干單元格（由 <td>標籤定義）。字母 td 指表格資料（table data），即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。
<table>
<tr>
<td>
</td>
</tr>
</table>*注意：*tr標籤只能放td標籤，td標籤可以放其他元素 表格屬性
| 屬性名 | 含義 | 常用屬性值 |
|---|---|---|
| border | 設定表格的邊框（預設border=”0”無邊框） | 畫素值 |
| cellspacing | 設定單元格與單元格之間的空白間距 | 畫素值（預設為2畫素） |
| cellpadding | 設定單元格內容與單元格邊框之間的空白距離 | 畫素值（預設為1畫素） |
| width | 設定表格的寬度 | 畫素值 |
| height | 設定表格的高度 | 畫素值 |
| align | 設定表格在網頁中的水平對齊方式 | left、right、center |
表頭標籤
表頭一般位於表格的第一行或第一列，其文字加粗居中
<thead></thead>
<tbody></tbody>
表格標題標籤
caption
<table>
<caption>標題</caption>
</table>合併單元格
跨行合併：rowspan
跨列合併：colspan
<tr>
<td>吳亦凡</td>
<td rowspan="2">男</td>
<td>27</td>
</tr>
<tr>
<td 
<tr>
<td>張磊</td>
<td colspan="2">男</td>
</tr>表單標籤（掌握）
用於蒐集不同型別的使用者輸入 由表單域、提示文字和表單控制元件組成
input控制元件
<input>元素是最重要的表單元素。
<input>元素有很多形態，根據不同的 type 屬性。
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| type | text | 單行文字輸入框 |
| password | 密碼輸入框 | |
| radio | 單選按鈕 | |
| checkbox | 複選框 | |
| button | 普通按鈕 | |
| submit | 提交按鈕 | |
| reset | 重置按鈕 | |
| image | 影象形式的提交按鈕 | |
| file | 檔案域 | |
| name | 由使用者自定義 | 控制元件的名稱 |
| value | 由使用者自定義 | input控制元件中預設文字值 |
| size | 正整數 | input控制元件在頁面中的顯示寬度 |
| checked | checked | 定義選擇控制元件預設被選中的項 |
| maxlength | 正整數 | 控制元件允許輸入的最多字元數 |
如果是一組單選框，通過相同name值來實現
lable標籤 作用：用於繫結一個表單元素，當點選label標籤的時候，被繫結的表單元素就會獲得輸入焦點
- 用label直接包裹input
- 如果label裡面有多個表單，想定位到某個 可以通過 for id 的格式來進行
<label>輸入賬號：<input type="text"/></label>
<label>輸入賬號：<input type="text"/></label><br />
<label for="2">輸入賬號：<input type="text"/><input type="text" id="2"/></label>
textareal控制元件（文字域） 用於輸入大量的資訊
留言板
<textarea>請輸入留言</textarea>
<select></select>中至少含一對<option></option>
在<option></option>中定義select=selected時，當前選項為預設選中項
籍貫
<select>
<option>北京</option>
<option>上海</option>
<option>廣州</option>
<option>深圳</option>
</select>
<form>元素定義 HTML 表單，及建立一個表單，以實現使用者資訊的收集和傳通，form中的所有內容都會被提交給伺服器
<form action="url地址" method="提交方式" name="表單名稱">
各種表單控制元件
</form>action 屬性定義在提交表單時執行的動作。向伺服器提交表單的通常做法是使用提交按鈕。通常，表單會被提交到 web 伺服器上的網頁。 method 屬性規定在提交表單時所用的 HTTP 方法（GET 或 POST）。 name 屬性如果要正確地被提交，每個輸入欄位必須設定一個 name 屬性。以區分同一個頁面的多個表單。
HTML5新標籤與特性
document
- HTML: sublime 輸入 html:4s
- XHTML:sublime 輸入 html:xt
- HTML5:sublime 輸入 html:5
<!DOCTPYE html>
常用新標籤
- header：定義文件的頁首 頭部
- nav：定義導航連結的部分
- footer：定義文件或節的頁尾 底部
- article：定義文章
- section：定義文件的節（section、區段）
- aside：定義其所處內容之處的內容 側邊
- datalist：標籤定義選項列表，與input配合使用
<input type="text" list="star"/>
<datalist id="star">
<option>劉德華</option>
<option>劉若英</option>
<option>劉曉慶</option>
<option>張學友</option>
</datalist>
- fieldset：元素可將表單內的相關元素分組打包
<fieldset>
<legend>使用者登入</legend>
使用者名稱：<input type="text"/><br />
密 碼：<input type="password"/>
</fieldset>
| 屬性 | 使用示例 | 含義 |
|---|---|---|
| input type=”email” | 輸入郵箱格式 | |
| tel | input type=”tel” | 輸入手機號碼格式 |
| url | input type=”url” | 輸入url格式 |
| number | input type=”numbers” | 輸入數字格式 |
| 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” | 星期 |
<fieldset>
<legend>HTML新增input type屬性值</legend>
<form action="">
郵箱：<input type="email" /><br />
手機：<input type="tel" /><br />
數字：<input type="number" /><br />
url ：<input type="url" /><br />
搜尋：<input type="search" /><br />
區域：<input type="range" /><br />
時間：<input type="time"/><br />
年月日：<input type="date"/><br />
月份：<input type="month"/><br />
星期：<input type="week"/><br />
<input type="submit"/>
</form>
</fieldset>
| 屬性 | 使用示例 | 含義 |
|---|---|---|
| placeholder | input type=”text” placeholder=”請輸入使用者名稱” | 佔位符，當用戶輸入的時候，裡面文字消失，刪除所有文字自動顯示 |
| autofocus | input type=”text” autofocus=”autofocus” | 自動獲得焦點 |
| multiple/td> | input type=”file” multiple=”multiple” | 多檔案上傳 |
| autocomplete | input type=”text” autocomplete | 自動記錄完成autocomplete使用方式 1.必須有提交按鈕 2.表單需要name名字 |
| required | input type=”text” required | 必須填 |
| accesskey | input type=”text” accesskey=”s” | 是元素獲得焦點 |
<form action="">
使用者名稱：<input type="text" placeholder="請輸入使用者名稱" autofocus="autofocus" autocomplete name="username"/><br /><br /><br /><br />
上傳圖片：<input type="file" multiple="multiple"/>
<input type="submit"/>
</form>
多媒體標籤
- embed:標籤定義嵌入內容
- audio：播放音訊
- video：播放視訊
多媒體embed
<embed src="url"></embed>
先上傳再分享
音訊audio
<audio src="C語言/吳亦凡個人簡歷/網頁製作/Lullaby——吳亦凡 & Kevin .mp3" autoplay controls loop="loop" ></audio>autoplay 自動播放 controls 是否顯示播放控制元件 loop 迴圈播放 loop=”-1”無限播放 loop=”2”播放兩次 為了瀏覽器相容，需要三種聲音檔案 ogg mp3 wav
<audio autoplay controls>
<source src="xxx.mp3"/>
<source src="xxx.ogg"/>
您的瀏覽器不支援播放聲音
</audio>視訊video
<video src="xxx .mp4" autoplay controls ></video>autoplay 自動播放 controls 是否顯示播放控制元件 loop 迴圈播放 width設定播放視窗的寬度 height 設定播放視窗的高度 為了瀏覽器相容，需要三種聲音檔案 ogg mp4 WebM
<video controls autoplay="autoplay">
<source src="xxx.mp4"/>
<source src="xxx.ogg"/>
您的瀏覽器不支援HTML視訊播放
</video>