表單
表單使用表單標(biāo)簽 <form> 來設(shè)置
<form action=""method="post" enctype="multipart/form-data">
其中action是服務(wù)器地址，method中post是添加進(jìn)服務(wù)器，get是從服務(wù)器中取數(shù)據(jù)。如果要添加文件，必須在后面加enctype="multipart/form-data"
多數(shù)情況下被用到的表單標(biāo)簽是輸入標(biāo)簽（<input>）。
輸入類型是由類型屬性（type）定義的。
| 標(biāo)簽 | 描述 |
|---|---|
| [<form>] | 定義供用戶輸入的表單 |
| [<input>] | 定義輸入域 |
| [<text>] | 定義文本域 |
| [<textarea>] | 定義文本域 (一個(gè)多行的輸入控件) |
| [<label>] | 定義了 <input> 元素的標(biāo)簽，一般為輸入標(biāo)題 |
| [<fieldset>] | 定義了一組相關(guān)的表單元素，并使用外框包含起來 |
| [<legend>] | 定義了 <fieldset> 元素的標(biāo)題 |
| [<select>] | 定義了下拉選項(xiàng)列表 |
| [<optgroup>] | 定義選項(xiàng)組 |
| [<option>] | 定義下拉列表中的選項(xiàng) |
| [<button>] | 定義一個(gè)點(diǎn)擊按鈕 |
| [<datalist>] | 指定一個(gè)預(yù)先定義的輸入控件選項(xiàng)列表 |
| [<keygen>] | 定義了表單的密鑰對(duì)生成器字段 |
| [<output>] | 定義一個(gè)計(jì)算結(jié)果 |
以用戶注冊(cè)頁面為例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表單的例子 - 注冊(cè)</title>
</head>
<body>
<form action=""method="post" enctype="multipart/form-data">
<p>用戶名:
<input type="text" name="username" size="20" placeholder="用戶名由6-20個(gè)字符構(gòu)成" required>
</p>
<p>密碼:
<input type="password" name="password"required>
</p>
<p>確認(rèn)密碼:
<input type="password" name="password1"required>
</p>
<p>性別:
<input type="radio"name="sex" value="1" checked>男
<input type="radio"name="sex" value="0">女
</p>
<p>愛好:
<input type="checkbox" name="fav" value="閱讀">閱讀
<input type="checkbox" name="fav" value="旅游">旅游
<input type="checkbox" name="fav" value="美食">美食
<input type="checkbox" name="fav" value="運(yùn)動(dòng)">運(yùn)動(dòng)
<p>省份:
<select name="province">
<option value="510000">四川</option>
<option value="120000">天津</option>
<option value="310000">上海</option>
<option value="110000">北京</option>
<option value="500000">重慶</option>
</select>
</p>
<p>生日:
<input type="date" name="birthday">
</p>
<p>郵箱:
<input type="email" name="email"required>
</p>
<p>頭像:
<input type="file" name="photo">
</p>
<p>自我介紹:
<textarea cols="30" rows="10" name="intro"></textarea>
</p>
<p>
<input type="submit" value="確認(rèn)注冊(cè)">
<input type="reset" value="重新填寫">
</p>
</form>
</body>
</html>
注意:每一個(gè)都需要對(duì)其賦值，以便于傳入服務(wù)器。
audio&video
HTML中通過<audio>和<video>標(biāo)簽在網(wǎng)頁中顯示音頻和視頻。
<audio controls autoplay loop> <!--controls控制按鍵 loop循環(huán)播放-->
<source src="audio/test-audio.mp3"></source>
</audio>
<video controls>
<source src="video/puppy.mp4"></source>
</video>
controls控制按鍵 loop循環(huán)播放 autoplay自動(dòng)播放
疊層樣式表(css)
1.通配符選擇器
清除邊框邊距(一般都要先寫)
* {
margin: 0;
padding: 0;
}
2.標(biāo)簽選擇器
通過標(biāo)簽{}來定義標(biāo)簽的屬性，比如h1{},h2{}...
屬性:定義標(biāo)簽的width寬度，height高度，margin邊距
auto居中，background-color背景顏色等，查菜鳥教程。
3.類選擇器
添加class = "a" 通過.a{}來定義屬性
4.ID選擇器
添加id = "header" 通過#header{}來定義屬性，一個(gè)id只能對(duì)應(yīng)一個(gè)樣式
5.內(nèi)部樣式表
放在<head>中的<style></style>稱為內(nèi)部樣式表
6.外部樣式表
將樣式表單獨(dú)寫在一個(gè)文件里，當(dāng)要使用時(shí)直接導(dǎo)入該文件
<link rel="stylesheet" href="css/style.css">
一般情況下網(wǎng)站的首頁會(huì)使用內(nèi)部樣式表 - 首頁正常渲染
其他的頁面可以共享一個(gè)或者多個(gè)外部樣式表 - 代碼復(fù)用/減少對(duì)帶寬和流量的占用
7.不沖突的樣式會(huì)疊加，有沖突的樣式遵循三條原則
1.就近原則
2.具體性原則 優(yōu)先執(zhí)行ID
3.重要性原則 ! importtant
