*都是要記住的
一、html文檔
1、Doctype
<!DOCTYPE html> <!--對應關係-->
2、head標籤
Meta(metadata information)
提供有關頁面的元信息，例如：頁面編碼、刷新、跳轉、針對搜索引擎和更新頻度的描述和關鍵詞
-
頁面編碼（告訴瀏覽器是什麼編碼）
<meta charset="utf-8"> -
刷新和跳轉
<meta http-equiv="Refresh" Content="3"> <!-- 3秒刷新一次 --> <meta http-equiv="Refresh" Content="3;Url=http://www.baidu.com"> <!-- 3秒之後跳轉到百度 --> -
關鍵詞
<meta name="keywords" content="hello1, hello2, hello3"> <!-- 給搜索引擎用的，搜索這些關鍵字就能找到這個網站 --> -
描述
<meta name="description" content="nihao,nihao"> <!-- 網站相關的描述 --> -
X-UA-Compatible
<meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;IE=IE7;"> <!-- 兼容模式 -->
Title
網頁頭部信息
Link *
-
css
<link rel="stylesheet" type="text/css" href="css/common.css"> -
icon
<link rel="shortcut icon" href="image/favicon.ico"> <!-- 標題的小圖標 -->
Style *
Script *
3、body標籤
-
各種符號
> < ... -
p 和 br *
p表示段落，默認段落之間是有換行的
br表示換行 -
H標籤 *
<h1>xue</h1> <h2>xue</h2> <h3>xue</h3> <h4>xue</h4> <h5>xue</h5> <h6>xue</h6> -
input標籤 *
<input type="text" name="user" value="" /> <!--默認值--> <!--密碼--> <input type="password" name="pwd" /> <!--按鈕--> <input type="button" value="登錄1"/> <input type="submit" value="登錄2"/> <!--單選框--> 男：<input type="radio" name="gender" value="1" checked="checked"/> <!--單選框，name相同是隻能二選一--> 女：<input type="radio" name="gender" value="2"/> <!--後臺根據value來進行區分到底選擇了哪一個--> <!--多選框1,name屬性批量獲取數據--> 籃球：<input type="checkbox" name="favor" value="1"/> 足球：<input type="checkbox" name="favor" value="2" checked="checked"/> <!--checked默認被選中--> <!--多選框2,--> 撩妹：<input type="checkbox" name="skill" value="1"/> coding：<input type="checkbox" name="skill" value="2"/> <!--上傳文件,依賴form表單的一個屬性，enctype="multipart/form-data"--> <input type="file" name="fname"> <!--重置--> <input type="reset" name="重置"> -
form標籤 *
<!--表單,點擊按鈕，提交表單數據，GET：數據拼接在url上面上傳，不放在內容裏面，POST：數據不放在url上面，放在裏面裏面--> <!--enctype="multipart/form-data":表示將你本地的文件一點一點的發送給服務器--> <form action="" enctype="multipart/form-data" method="GET"> <input type="text" name="user" /> <!--name屬性：後臺提數據所用--> <input type="password" name="pwd" /> <!--{"user": "xx", "pwd": "xx"}字典形式放送到後臺--> <input type="button" value="登錄1"/> <!--普通按鈕--> <input type="submit" value="登錄2"/> <!--提交按鈕，表單--> </form> -
多行文本 *
<!--textarea,name屬性--> <textarea name="meno" >默認值</textarea> -
下拉框 *
<!--size把整個框放大了, multiple：多選--> <select name="city" multiple="multiple" size="10"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4" selected="selected">4</option> </select> <select name="city" multiple="multiple" size="10"> <optgroup label="zhejiang"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4" selected="selected">4</option> </optgroup> </select> -
a標籤（超鏈接）*
功能1：跳轉
功能2：錨<_blank:在新頁打開> <a href="http://www.baidu.com" target="_blank">百度</a> <!--錨--> <a href="#i1">第一章</a> <a href="#i2">第二章</a> <a href="#i3">第三章</a> <a href="i4">第四章</a> <div id="i1" style="height:600px;">第一章的內容</div> <div hrfe="i2" style="height:600px;">第二章的內容</div> <div id="i3" style="height:600px;">第三章的內容</div> <div href="i4" style="height:600px;">第四章的內容</div> -
img標籤 *
<!--alt:找不到圖片時顯示--> <img src="a.jpg" title="鼠標移到圖片上顯示的內容" style="height:200px;width:200px;" alt="not find"/> -
列表 *
<!-- . . . --> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <!-- 1 2 3 --> <ol> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ol> <!-- ttt ddd ddd ddd ttt ddd ddd ddd --> <dl> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> <dt>ttt</dt> <dd>ddd</dd> <dd>ddd</dd> <dd>ddd</dd> </dl> -
表格 *
<!--border:邊框與邊框之間的寬度爲1--> <table border="1"> <tr> <td>主機名</td> <td>端口</td> <td>操作</td> </tr> <tr> <td>1.1.1</td> <td>80</td> <td>刪除</td> </tr> <tr> <td>1.1.1</td> <td>80</td> <td> <a href="http://www.baidu.com">查看詳細</a> </td> </tr> </table><!--thead tbody，規範的，寫這個，不要寫上面的--> <table border="1"> <thead> <tr> <th>表頭1</th> <th>表頭2</th> <th>表頭3</th> <th>表頭4</th> </tr> </thead> <tbody> <tr> <td>1</td> <td colspan="2">2</td><!--這個td橫跨佔兩個空間--> <td>3</td> <!--<td>4</td>--> </tr> <tr> <td rowspan="2">1</td> <!--這個td縱向佔兩個--> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <!--<td>1</td>--> <td>2</td> <td>3</td> <td>4</td> </tr> </tbody> </table> -
label標籤 *
<普通文本，結合input使用，for：與input創建關聯,點擊文字，獲取光標> <label for="user">用戶名：</label> <input id="username" type="text" name="user"/> -
fieldset標籤 （一般用不到）
<fieldset> <legend>登錄</legend> <label for="user">用戶名：</label> <input id="username" type="text" name="user"/> <br/> </fieldset> -
div標籤 *
-
span標籤 *
小總結：
所有標籤分爲：
- 塊級標籤：H標籤、P標籤、div標籤（白板）
- 行內標籤（內聯標籤）：span（白板）、a標籤
標籤之間可以嵌套
input標籤、textarea標籤、select標籤可以把數據提交到後臺
a標籤作用：跳轉、錨（例：跳轉章節）
