1：HTML簡介
1.1：HTML(Haper Text Markup language):超文本標記語言
超文本就是指頁面內可以包含圖片，鏈接，甚至音樂，程序等非文字元素
1.2：開發工具：Adobe Dreamwearver cs5
1.3：HTML的基本結構
1.2.1：HTML文檔標記：<html>
1.2.2：HTML文檔頭標記：<head>
1.2.3：標記內容可以存放：title,meta,style,link等
1.2.4：HTML文件標題標記：<title>
1.2.5：頁面的元信息：<meta>
1.2.5.1:顯示字符集的設定<meta http-equiv="content-Type" Content="text/html charset=utf-8"/>
1.2.5.2:刷新<Meta http-equiv="Refresh" Content="5;url=http://www.baidu.com">
1.2.5.3:向搜索引擎提供查詢關鍵字:<Meta name="Keywords" Content="vacation.greece">
1.2.6：HTML文檔主題標記：<body></body>
1.4：HTML文檔保存格式
包含兩種，分別是html,htm;
1.5：HTML語法不區分大小寫，建議盡量使用小寫
使用小寫，閱讀姓比較高。
1.6：文檔注釋<!--注釋內容-->
<!--注釋內容-->
<html>
<head>
<meta http-equiv="Content-Type" Content="text/html; charset=utf-8" />
<!--<Meta http-equiv="Refresh" Content="5;url=http://www.baidu.com">-->
<Meta name="Keywords" Content="JAVA基礎，js,javase"><!--content設置百度搜索優化-->
<title>我的第一個頁面</title>
</head>
<body bgcolor="green"><!--bgcolor設置背景顏色-->
我的hello
</body>
</html>
2:HTML字體實體
顯示結果 描述 實體名稱
空格
< 小於號 <
> 大於號 >
& 和好 &
" 引號 "
' 撇號 &qpos;(IE不支持)
等等等等.....
3：HTML常用文檔設置標記
3.1：格式標記
<br/>換行 <p>段落 <center>居中對齊
<pre>預格式化標記 <hr/>水平線割線
<div>分區顯示標記，也稱為層標記，div+css進行網頁標記
列表標記：<ul>無序列表 <ol>有序列表
<dl>定義型列表，可以用來做軟件說明
3.2：文本標記
hn標題標記，h1最大，h6最小
font字體設置標記
b粗體
i斜體
em表示強調斜體
strong表示強調顯示粗體
small小型字體
u下划線
del刪除線
案例的簡單應用源碼如下
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 4 <title>html字符實體</title> 5 </head> 6 <body bgcolor="green"><!--bgcolor設置背景顏色--> 7 <center> 8 <p>《春曉》</p><hr width=80% color="red" size=10/> 9 <p>春眠不覺曉，處處聞啼鳥。</p> 10 11 <div>夜來風雨聲，花落知多少。</div> 12 13 <pre> 14 《憫農》 15 春種一粒粟，秋成萬顆子。 16 四海無閑田，農夫猶餓死。 17 鋤禾日當午，汗滴禾下土。 18 誰知盤中餐，粒粒皆辛苦。 19 </pre> 20 </center> 21 <ul> 22 <li>1:小米</li> 23 <li>2:魅族</li> 24 <li>3:華為</li> 25 <li>4:vivo</li> 26 <li>5:ppo</li> 27 </ul> 28 <hr/> 29 <ol type="A"> 30 <li>java</li> 31 <li>c</li> 32 <li>c++</li> 33 <li>javascript</li> 34 </ol> 35 <hr/> 36 <ol type="a"> 37 <li>java</li> 38 <li>c</li> 39 <li>c++</li> 40 <li>javascript</li> 41 </ol> 42 <hr/> 43 <ol type="i"> 44 <li>java</li> 45 <li>c</li> 46 <li>c++</li> 47 <li>javascript</li> 48 </ol> 49 <hr/> 50 <dl> 51 <dt>軟件說明</dt> 52 <dd>非常好用的軟件</dd> 53 </dl> 54 55 <h1>《憫農》</h1> 56 <h2>《憫農》</h2> 57 <h3>《憫農》</h3> 58 <h4>《憫農》</h4> 59 <h5>《憫農》</h5> 60 <h6>《憫農》</h6> 61 <pre> 62 <b>春種一粒粟，</b>秋成萬顆子。 63 <font face="楷體" size=10>四海無閑田，</font>農夫猶餓死。 64 <u>鋤禾日當午，</u>汗滴禾下土。 65 <del>誰知盤中餐，</del><i>粒粒皆辛苦。</i> 66 </pre> 67 <p><small>原價：</small><del>100元</del></p> 68 <p>現價：50元</p> 69 </body> 70 </html>
4：圖像標記
知識分析：路徑分為相對路徑和絕對路徑
（1）相對路徑，就是在同一個網站下，不同文件之間的的位置定位。引用的文件是相對當前網頁的位置而言的，根據這個相對位置得出相對路徑。
（2）絕對路徑，指的是完整的路徑。
<img>圖像標記，格式支持jpg,png,gif,jpeg;
4.1：使用方法，<img src="路徑/文件名.圖片格式" width="屬性值" height="屬性值" border="屬性值" alt="屬性值">
4.2：<img>標記的屬性
src屬性，作用指定我們要加載的圖片的路徑和圖片的名稱以及圖片格式
width屬性，作用指定圖片的寬度，單位px,em,cm,mm
height屬性，作用指圖片的高度，單位px,em,cm,mm
border屬性，作用指定圖標的邊框寬度，單位px,em,cm,mm
alt屬性，作用1當網頁上的圖片被加載完成后，鼠標移動到上面去，會顯示這個圖片指定的屬性文字
作用2如果圖像沒有下載或者加載失敗，會用文字來代替圖像顯示
作用3，搜索引擎可以通過這個屬性的文字來抓取圖片
5：超鏈接的使用
5.1:基本語法，<a href="" target="打開方式" name="頁面錨點名稱">鏈接文字或者圖片</a>
5.2：屬性
5.2.1：href屬性
鏈接的地址，鏈接的地址可以是一個網頁，也可以是一個視頻，圖片，音樂等等
5.2.2：name屬性
指定頁面的錨點名稱
5.2.3：target屬性，作用：定義超鏈接的打開方式
_blank:在一個新的窗口中打開鏈接
_self(默認值)：在當前窗口中打開鏈接
_parent:在父窗口中打開頁面，框架中使用較多
_top:在頂層窗口中打開文件，框架中使用較多
案例運行如下
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 4 <title>html字符實體</title> 5 </head> 6 <body bgcolor="green"><!--bgcolor設置背景顏色--> 7 <img src="2.jpg" alt="美女" title="美女" width=150 height=200/> 8 <!--圖像的學習關鍵在於路徑的設置，如果在同一目錄下，設置如上面一行代碼所示--> 9 <img src="image/1.jpg" alt="帥哥" title="帥哥" width=150 height=200/> 10 <!--圖像的學習關鍵在於路徑的設置，如果也是在同一目錄下，設置如上面一行代碼所示--> 11 <img src="../image/3.jpg" alt="帥哥" title="帥哥" width=150 height=200/> 12 <!--圖像的學習關鍵在於路徑的設置，如果是在上一目錄下，設置如上面一行代碼所示--> 13 <a href="http://www.baidu.com" target="_self" name="不會就問百度">百度</a> 14 15 </body> 16 </html>
插入圖片，如果不是特別的開發工具，比如使用的nodpad++需要特別注意路徑的設置
以下以圖片為例，顯示我的路徑設置，如若不懂的可以私聊
案例運行結果（允許小小的自戀一下）
小說文本案例代碼如下
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 4 <title>html字符實體</title> 5 </head> 6 <body bgcolor="green"><!--bgcolor設置背景顏色--> 7 <a name="menu">目錄</a><br/> 8 <a href="#text1">第1章 大荒</a><br/> 9 <a href="#text2">第2章 祭祀</a><br/> 10 <a href="#text3">第3章 准備</a><br/> 11 <a href="#text4">第4章 返祖</a><br/> 12 13 <hr/> 14 <a name="text1"></a> 15 <pre> 16 小說文本1 17 </pre> 18 19 <a name="text2"></a> 20 <pre> 21 小說文本1 22 </pre> 23 24 <a name="text3"></a> 25 <pre> 26 小說文本1 27 </pre> 28 29 <a name="text4"></a> 30 <pre> 31 小說文本1 32 </pre> 33 <a href="#menu">頂部</a> 34 </body> 35 </html>
案例運行結果如下
6：table表格
6.1:table標記
基本格式:<table 屬性1="屬性值1" 屬性2="屬性值2"...>表格內容</table>
table標記的屬性
width屬性：表示表格的寬度，他的值可以是像素px也可以是父級元素的百分比%
height屬性：表示表格的高度，他的值可以是像素px也可以是父級元素的百分比%
border屬性：表示表格外邊框的寬度
align屬性：表格的顯示位置(默認值是left,值有left居左顯示，center居中顯示，right居右顯示)
cellpadding屬性：單元格內容與單元格邊框的顯示距離，單位像素
cellspacing屬性：單元格之間的間距，默認是2px,單位像素
frame屬性：
rules屬性：none(默認值)表示無分割線，all表示包括所有分割線
rows表示僅有行分割線，clos表示僅有列分割線，grouops表示僅有行組和列祖之間有分割線
6.2：<caption>標記
什么時候使用：使用如果表格需要標題，那么就可以使用caption標記
如何正確使用：caption屬性的插入位置，直接位於table屬性之后，tr表格行之前
align屬性：top標題放在表格的上部，botton標題放在表格的下部
left標題放在表格的左部，right標題放在表格的右部
6.3：tr標記
定義表格的一行，對於每一個表格行，都是有一對<tr></tr>標記表示，每一行<tr>標記內可以嵌套多個<td>或者<th>標記
可選屬性：bgcolor屬性設置背景顏色
align屬性：設置垂直方向對齊方式
valign屬性：設置水平方向對齊方式
6.4：td和th標記
bgcolor:設置單元格背景
align:設置單元格對齊方式
valign:設置單元格垂直對齊方式
width:設置單元格寬度
height:設置單元格高度
rowspan:設置單元格所占行數
colspan:設置單元格所占列數
6.5：thead(tr,th),tbody(tr,td),tfoot(tr,td);
案例源碼如下所示
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 4 <title>html字符實體</title> 5 </head> 6 <body bgcolor="green"><!--bgcolor設置背景顏色--> 7 <table border="1" bgcolor="blue" width="60%" height="60%"> 8 <thead align="center"> 9 <caption>員工信息表</caption> 10 <tr> 11 <th><a href="http://www.baidu.com">姓名</a></th> 12 <th>年齡</th> 13 <th>性別</th> 14 <th>電話</th> 15 <th>QQ</th> 16 </tr> 17 </thead> 18 <tbody align="center"> 19 <tr> 20 <td>別先生</td> 21 <td>22</td> 22 <td>男</td> 23 <td>152360****</td> 24 <td>1748*****</td> 25 </tr> 26 <tr> 27 <td>劉先生</td> 28 <td>22</td> 29 <td>男</td> 30 <td>158465****</td> 31 <td>4548*****</td> 32 </tr> 33 <tr> 34 <td>李先生</td> 35 <td>22</td> 36 <td>男</td> 37 <td>157516****</td> 38 <td>1771*****</td> 39 </tr> 40 </tbody> 41 <tfoot> 42 <tr> 43 <td colspan="4">一共多少人</td> 44 <td>？？？</td> 45 </tr> 46 </tfoot> 47 </table> 48 </body> 49 </html>
案例運行結果如下所示
7：HTML框架(切忌，不可以放在body標簽之間)
7.1:什么事框架？框架是將瀏覽器划分為不同的部分，每一部分加載不同的頁面，實現在同一瀏覽器窗口中加載多個頁面的效果
7.2：<frameset>划分框架標記
語法格式：<frameset>...<frameset>
屬性：
cols:使用像素數和%分割左右窗口，"*"表示剩余部分
如果使用"*","*"代表框架平均分成2個
如果使用"*","*","*"表示框架平均分成3個
rows:使用像素數和%分割上下窗口，"*"表示剩余部分
frameborder:指定是否顯示邊框，0不顯示，1顯示
border:設置邊框的大小，默認值5像素
7.3：<frame>子窗口標記
<frame>標記是一個單標記，該標記必須放在frameset中使用，在frameset中設置了幾個窗口，就必須對應幾個frame框架，而且還必須使用src屬性指定一個網頁
屬性：src屬性加載網頁文件的URL地址
name:框架名稱，是鏈接標記的target所要參數
noresize:表示不能調整框架大小，沒有設置時就可以調整
scrolling:是否需要滾動條，值auto根據需要自動出現，yes有，no無
frameborder:是否需要邊框，值1顯示邊框，值0不顯示邊框
7.4：frame和iframe的區別
1：frame不能脫離frameset單獨使用，iframe可以
2：frame不能放在body中，iframe可以
3：iframe是被嵌入在網頁的元素，而frame用於組成一個網頁的多個框架
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 4 <title>html中的框架</title> 5 </head> 6 <frameset rows="25%,*"> 7 <frame src="top.html"> 8 <frameset cols="25%,*"> 9 <frame src="left.html"/> 10 <frame src="right.html" name="rightname"/> 11 </frameset> 12 </frameset> 13 <body> 14 15 </body> 16 </html>
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 4 <title>html中的框架</title> 5 </head> 6 <body> 7 <h1>LOGO</h1> 8 </body> 9 </html>
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 4 <title>html中的框架</title> 5 </head> 6 <body> 7 <a href="http://www.baidu.com" target="rightname">百度</a><br/> 8 <a href="http://www.jd.com" target="rightname">京東</a><br/> 9 <a href="http://www.taobao.com" target="rightname">淘寶</a><br/> 10 <a href="">注冊</a><br/> 11 <a href="">登陸</a><br/> 12 </body> 13 </html>
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 4 <title>html中的框架</title> 5 </head> 6 <body> 7 8 </body> 9 </html>
運行結果頁面較大，暫不展示
8：表單設計
8.1：表單標記<form>表單元素放到這里
<form></form>定義表單的開始位置和結束位置，表單提交時的內容就是<form>表單中單的內容
基本格式：<form action="服務器端地址（接受表單內容的地址）" name="表單名稱" method="post/get"></form>
常用屬性：
name是表單名稱，
method是傳送數據的方式，分為post(常用)和get兩種方法，get方法提交時，會將表單的內容附加在url地址的后面，所以限制了提交的內容的長度，不超過8192個字符，且不具備保密性
post方式，提交時，將表單中的數據一並包含在表單主體中，一起傳送到服務器中處理，沒有數據大小限制
action:表單數據的處理程序的url地址，如果為空則使用當前文檔的url地址，如果表單中不需要使用action屬性也要指定其屬性為其屬性為"no"
enctype:設置表單的資料的編碼方式
target:和超鏈接的屬性類似，用來指定目標窗口
8.2：文本框和密碼<input>
基本語法：<input type="" name="" value="" size="" maxlength="">
屬性介紹：
type屬性：type屬性有兩個值，當type="text",表示文本輸入框，當type="password",表示密碼輸入框
name屬性：定義控件的名稱
value屬性：初始化值，打開瀏覽器時，文本框中的內容
size屬性：設置控件的長度
manlength屬性：輸入框中最大允許輸入的字符數
8.3：提交，重置(恢復至初始值，不是清空，name可以驗證效果)，普通按鈕
提交按鈕：當<input type="submit">時，為提交按鈕
重置按鈕：當<input type="reset">時，為重置按鈕
《以上兩個按鈕必須放在form表單下才可以體現功能》
普通按鈕：當<input type="button">時，為普通按鈕
8.4：單選框和復選框
單選按鈕：當type=radio時，為單選按鈕
復選框：當type=checkbox時，為復選框
注意：單選框和復選框都可以使用checked屬性來設置默認選中項
8.5：隱藏域
隱藏文本框：當type=hidden時，為隱藏文本框
8.6：多行文本域
用法，使用textarea標記可以實現一個，能夠輸入多行文本的區域
語法格式<textarea name="name" rows="value" cols="value" value="value"><textarea>
rows屬性和cols屬性分別用來指定，顯示的行數和列數，單位是字符個數
8.7：菜單下拉列表域
<select>標記
<option select="select默認選項">選項
</select>
1 <html> 2 <head> 3 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 4 <title>html中的框架</title> 5 </head> 6 <body> 7 <form method="post" action=""> 8 賬號<input type="text" name="text"/><br/> 9 密碼<input type="password" name="password"><br/> 10 <input type="submit" value="提交"> 11 <input type="reset" value="重置"> 12 <input type="button" value="按鈕"><br/> 13 性別<input type="radio" name="sex" value="男">男 14 <input type="radio" name="sex" value="女">女 15 <input type="radio" name="sex" value="保密">保密<br/> 16 愛好<input type="checkBox" name="ball" value="籃球">籃球 17 <input type="checkBox" name="ball" value="足球">足球 18 <input type="checkBox" name="ball" value="排球">排球<br/> 19 注釋<textarea rows="10" cols="20">今晚回家</textarea><br/> 20 回家方式<select> 21 <option select="select">火車</option> 22 <option>汽車</option> 23 <option>輪船</option> 24 <option>飛機</option> 25 </select><br/> 26 文件<input type="file"/> 27 </form> 28 </body> 29 </html>
案例運行結果如下
