一、HTML的概述
HTML：Hyper Text Markup Language ---超文本標記語言
用來製作(靜態頁面)，一個HTML文件擴展名爲.html或者.htm結尾
HTML有標準:
* HTML4
* <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
* HTML5:支持視頻播放,支持CSS3,支持定位,擴展標籤...
* <!DOCTYPE html>
二、標籤
1、跟標籤：<html></html>
<head>---- html的頭標籤
<body>---- html的體標籤
2、HTML的字體標籤
<font>標籤:HTML中的字體標籤.
使用：<font>文字</font>
* <font>標籤的屬性:
* <標籤 屬性名=”屬性值” 屬性名=”屬性值”></標籤>
* 屬性:
* color屬性:字體顏色
* 英文單詞設置:black,red,green,blue...
* 使用16進制數設置:#FFFFFF , #FFF
* size屬性:字體的大小（1~7）
* face屬性:字體
<font color="#00FF00" size="7">我是小綠！</font>
3、HTML的排版標籤
a. 標題標籤：h標籤<h1>...<h6>
b. 段落標籤：p標籤 <p> </p>
c. 字體加粗標籤：b標籤 <b> </b>
d. 字體斜體標籤：i標籤 <i> </i>
e. 字體下劃線：u標籤 <u> </u>
f. 居中標籤：<center>內容</center>
g. <br/> 換行
h. <hr/> 橫線
i. <pre> 原生標籤
空格
< <
> >
4、HTML的圖片標籤
圖片標籤:<img>
* 屬性:
* src :圖片的來源.
* width :圖片的寬度.
* height:圖片的高度.
* alt :圖片找不到顯示的內容.
圖片的引入的路徑問題:
* 路徑：相對路徑.
* 如果引入的圖片和html文件在同一級路徑。
* 直接寫文件名或者./文件名
<img src="cs10006.jpg" />
<img src="./cs10006.jpg" />
* 如果引入的圖片在html文件的上一級路徑。
<img src="../cs10006.jpg" />
* 如果引入的圖片在html文件的上一級的上一級路徑。
<img src="../../cs10006.jpg" />
* 如果引入的圖片在html文件的下一級路徑。
<img src="img/cs10006.jpg" />
5、HTML的列表標籤
有序列表
<ol>
<li>
</li>
</ol>
有序列表的屬性:
* type屬性:
* 1 ：數字類型
* a ：英文類型
* i ：羅馬字符
* start屬性:從type屬性的哪個值開始
無序列表
<ul>
<li>
</li>
</ul>
無序列表的屬性:
* type屬性
* disc ：實心點.
* circle ：空心圓
* square ：方塊.
<ol type="1" start="1">
<li>領導講話</li>
<li>領導講話</li>
<li>領導講話</li>
<li>會議結束</li>
</ol>
6、HTML的超鏈接標籤
HTML的超鏈接標籤：<a>
* 屬性:
* href :鏈接的路徑
* target :打開的方式
* _self :在自身頁面打開
* _blank :新打開一個窗口
* _parent：在父框架集中打開被鏈接文檔
*style = “text-decoration: none; ” 去除默認的下劃線
<a href="http://www.163.com" target="_blank">網易</a>
7、HTML的表格標籤
<table>
<tr>
<td></td>
<td></td>
</tr>
</table>
屬性:
width :表格寬度
height :表格高度
border :邊框
align :表格水平位置:
* left * center * right
cellspacing：行距
<td>的屬性:
* colspan="列數"
* rowspan="行數"
8、HTML的表單標籤：<form>
a、常用屬性:
action屬性:提交的路徑.默認提交到當前頁面
method屬性:請求的方式.GET和POST.默認是GET.
GET方式和POST方式的區別?
GET :數據會顯示到地址欄中.GET方式提交是有大小的限制.
POST :數據不會顯示到地址欄中.POST方式提交的是沒有大小限制.
b、HTML中表單元素：
* <input type=”text”> :文本框.
* 常用屬性:
* name :表單元素的名稱.必須有name屬性，然後後臺纔可以接收數據.
* value :文本框的默認值.
* size :文本框的長度.
* maxlength:文本框輸入的最大長度.
* readonly:只讀文本框.
* disabled: 文本框徹底灰掉。只用於顯示固定值
* <input type=”password”> :密碼框.
* 常用屬性:
* name :表單元素的名稱.必須有name屬性，然後後臺纔可以接收數據.
* value :密碼框的默認值.
* size :密碼框的長度.
* maxlength:密碼框輸入的最大長度.
* <input type=”radio”> :單選按鈕.
* 常用的屬性:
* name :表單元素的名稱.必須有name屬性，然後後臺纔可以接收數據.
* value :單選按鈕的默認值.
* checked:單選按鈕默認被選中.
* <input type=”checkbox”> :複選按鈕.
* 常用的屬性:
* name :表單元素的名稱.必須有name屬性，然後後臺纔可以接收數據.
* value :單選按鈕的默認值.
* checked:單選按鈕默認被選中.
* <input type=”button”> :普通按鈕.沒有任何功能的按鈕.
* <input type=”submit”> :提交按鈕.
* <input type=”reset”> :重置按鈕.
* <input type=”file”> :文件上傳的表單項.
* <input type=”hidden”> :隱藏字段.
* <input type=”image”> :圖片按鈕
*<input type=”email”> :郵箱
*<input type=”date”> :日期
*<input type=”number”> : 數字框(只可用於輸入數字)
*<input type=”color”> : 顏色(可以挑選顏色)
*<select> 下拉列表
name:表單元素名稱。後臺接收name的值
<option>: 下拉列表選項
value:下拉列表中的值
selected: 下拉列表默認選中的值
* <textarea> 文本域
name: 表單元素名稱。後臺接收name的值
rows: 文本域的行數
cols: 文本域的列數
9、HTML的框架標籤
框架標籤:<frameset >,標籤與body標籤是衝突,有frameset就可以沒有body.
* 屬性:
* rows：橫着切割
* cols： 豎行切割
使用<frame>標籤，frame代表切分的每個部分.
點擊left.html裏的超鏈接，會把data.html的內容顯示到右半部分
<frameset rows="15%,*">
<frame src="top.html" name="top"/>
<frameset cols="15%,*">
<frame src="left.html" name="left"/>
<frame src="right.html" name="right"/>
</frameset>
</frameset>
left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<center>
<h2>
<a href="data.html" target="right">商品管理</a> <br /><br />
<a href="data.html" target="right">菜單管理</a> <br /><br />
<a href="data.html" target="right">訂單管理</a> <br /><br />
<a href="http://www.baidu.com" target="right">任意搜索</a> <br /><br />
</h2>
</center>
</body>
</html>