請求頭是針對伺服器_什麼是無頭伺服器？
建立表格
在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**** | <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的形式 |
<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為音訊或視訊檔案及其路徑，可以是相對路徑或絕對路徑。
<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 設定播放視窗的高度
由於版權等原因，不同的瀏覽器可支援播放的格式是不一樣的