1.html
HTML：Hyper Text Markup Language 超文本標記語言，用來描述文本的字體，顏色，圖片。HTML代碼由標籤組成。
html書寫規則：
文件的後綴名：.html
標籤必須用 <> 引起來
屬性格式：key="value"，屬性的值用引號引起來
標籤名稱不區分大小寫
注意：
將所有的內容放在標籤 <html></html>中
有開始標籤和結束標籤的標籤稱之爲圍堵標籤，標籤最好關閉
沒有結束的標籤的稱之爲空標籤 <br/>
開始標籤和結束標籤之間的內容稱之爲標籤體
<!--註釋內容--> html頁面中的註釋
標籤必須正常嵌套
2.文件標籤
<html>：聲明當前網頁爲html頁面。html的子標籤：
<head></head>
<body></body>
head：用來存放當前頁面的重要信息，一般不展示在html頁面上。head常見的子標籤：
<title></title> 中間放網頁的標題，會被爬蟲給爬出來
<meta>元信息，<meta charset="UTF-8">指定瀏覽器用什麼編碼打開此頁面
<link>用來導入外部css標籤
<link rel="stylesheet" href="css/1.css" type="text/css"/>
<style></style>放內部樣式的css代碼，在後面會舉例說明。
body：要展示的數據放在body中。
<html>
<head>
<meta charset="utf-8">
<title>頁面標題</title>
</head>
<body>
<!-- 創建標題標籤 -->
<h2>公司簡介</h2>
<hr />
<p>
<font color="#FF0000"><b>“中關村黑馬程序員訓練營”</b></font>是由<b>傳智播客</b>聯合中關村軟件園、CSDN
</p>
<p>
一直以來，黑馬程序員以技術視角關注IT產業發展。
</p>
</body>
</html>
3.字體標籤
1）字體標籤：<font></font>，常用屬性：
face：字體
size：尺寸，取值1-7
color：顏色
color顏色的取值：(RGB)
方式1： #xxxxxx，x爲16進制
方式2：英文單詞，red
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<font>天佑中華</font>天佑中華<br/>
<font size="7">我個大7</font>
<br/>
<font color="red">我很紅</font>
<font color="#ff0000">我很紅</font>
<br />
<font face="黑體" size="6">我很黑</font>
</body>
</html>
2）標題標籤：<hn> </hn>
n取值：1~6，h1最大，h6最小，自動換行且留白，默認加粗。
常用屬性：
align：對齊方式，left：左 right：右 center：居中
<h2 align="center">標題內容</h2>
3）排版標籤：
段落標籤：<p></p>
加粗：<strong></strong>
斜體：<i></i>
水平線：<hr/>
換行： <br/>
4.圖片標籤
<img/>
<img src="圖片的路徑" alt="替代文字" width="" height=""/>
常用屬性：
src：圖片的路徑
alt：未完全加載或者沒有資源時候，用文字替代圖片
title：鼠標移上去顯示的文字
width：寬
height：高
圖片大小（width="" height=""）的寫法：
方式1像素寫法：123px，width="123px "
方式2百分比寫法：20%，width="20% "
路徑的寫法：
相對路徑：
./ 或者 什麼都不寫，將會指向當前目錄，圖片放在當前html文件的目錄下，就可以直接加載到網頁上。
../ 上一級目錄
絕對路徑（常用）：
帶協議的絕對路徑：http：//www.itheima.com
本地的磁盤路徑（開發中不用）
5.超鏈接標籤
<a href="跳轉的路徑" target="在哪裏打開">xx</a>
target默認值：_self ，即在當前頁面打開跳轉的新頁面，也可以設置爲_blank，在空白頁面打開。
6.列表標籤
<ol>有序，屬性：type=”a”、”circle”，a是abc..排序，circle是空心的圓，disc是實心圓，square是實心方形，不加的話默認是123..，這些屬性都不贊成使用。<ul> 無序
<li>爲列表項
無序列表
<ul>
<li>內容1</li>
<li>內容2</li>
</ul>
有序列表
<ol>
<li>內容1</li>
<li>內容2</li>
</ol>
7.表格標籤
<table></table>
<table border="1">
<tr>
<th> </th> <!--表頭單元格 默認居中加粗>
<td> </td> <!--普通單元格>
</tr>
</table>
table的常用屬性：
border：邊框，像素值
width：表的寬度
align：表格對齊方式
bgcolor：背景顏色
tr 的常用屬性：align：內容對齊方式
td 的常用屬性：
align：內容對齊
colspan：跨列合併，值：合併的列數，被合併的列就不要再寫了
rowspan：跨行合併，值：合併的行數，被合併的行就不要再寫了
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="40%" height="150px" align="center" bgcolor="#ffff00">
<!--創建一個4行3列-->
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr align="center">
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td align="center">32</td>
<td>33</td>
</tr>
<tr>
<td>41</td>
<td>42</td>
<td>43</td>
</tr>
</table>
<hr />
<table border="1" width="40%" height="150px" align="center" >
<!--創建一個4行3列-->
<tr>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr align="center">
<td>21</td>
<td colspan="2">22&23</td>
</tr>
<tr>
<td rowspan="2">31&41</td>
<td align="center">32</td>
<td>33</td>
</tr>
<tr>
<td>42</td>
<td>43</td>
</tr>
</table>
</body>
</html>
8.表單標籤
<form> </form>用來從瀏覽器端收集用戶的信息。常用屬性：
action：設置信息提交路徑，”#”表示提交到當前頁面
method：提交方式，get和post，後序會詳細介紹。
常見的子標籤：input，select，textarea
1）input屬性
type屬性：
文本框:
<input type=”text”/>
name
value
size
maxlength
readonly
密碼框：
<input type=”password”/>
單選按鈕：
<input type=”radio” checked="checked"/>
Checked：默認選中
複選框
<input type=”checkbox”/>
Checked：默認選中
文件上傳項
<input type=”file” name=”file”/>
提交按鈕
<input type=”submit” value=”註冊”>
重置按鈕
<input type=”reset” value=”重置”>
普通按鈕
<input type=”button” value=”普通按鈕”>
隱藏字段
<input type=”hidden” name=”id”/>
圖片提交
image
name屬性：
1.要把表單裏的信息提交到服務器，必須要有name屬性，例如name=”sex” value=”1”；即sex=1;
2.如果需要將單選框或者複選框設置爲一組，則標籤需要有一樣的name值。例如實際中sex有且只能選擇一個值，因此必須設置爲一組，否則會出現既可以是男的也可是女的。
2）select標籤
<select name="" selected="selected">
<option value="提交到服務器的值">展示內容</option>
</select>
3）textarea：文本域
<textarea cols=" " rows=" " name=" "> </textarea>
4）設置默認值方法
text：直接在<>和<>中間輸入文字
input、password：設置value屬性
radio、checkbox：設置checked="checked"屬性
select：在option上設置selected="selected"屬性
value可以設置button的展示文字
5）readonly 、disabled：
readonly="readonly" 只讀，無法更改值
disabled="disabled" 禁用，相應的項會變成灰色
<input type=”text” readonly="readonly"/>
9.frameset
常用屬性：cols：垂直切割、rows：水平切割
cols="40%,60%"
cols="40%,*,10%"，設定了第一和第三部分的百分比，剩下的直接用*表示。
常見的子標籤：frame，frame常用屬性：
src：展示的頁面的url
<frameset rows="18%,*,10%">//將整個頁面切成三個部分
<frame src="./head.html"/>//第一部分
<frameset cols="20%,*">//第二部分
<frame src="left.html"/>
<frame src="main.html" name="mainFrame"/> //設置name屬性，是爲了讓其他的鏈接在這裏打開（<a href="rygl.html" target="mainFrame">人員管理</a>，此時點擊人員管理，新的頁面將會在mainFrame這個框架內打開）
</frameset>//第三部分
<frame src="foot.html"/>
</frameset>
</frameset>
10.轉義字符
> > //great than
< <
& &
空格