一、HTML文本格式化標簽（這些標簽都不換行）
eg：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML文本格式化標簽</title> 6 </head> 7 8 <body> 9 <b>定義粗體文字</b><br /> 10 <big>定義大號字</big><br /> 11 <em>定義着重文字</em><br /> 12 <i>定義斜體字</i><br /> 13 <small>定義小號字</small><br /> 14 <strong>定義加重語氣</strong><br /> 15 <sub>定義下標字</sub><br /> 16 <sup>定義上標字</sup><br /> 17 <ins>定義插入字</ins><br /> 18 <del>定義刪除字</del><br /> 19 </body> 20 </html>
效果：
二、HTML圖像
1、圖像標簽：
<map> 標簽指帶有可點擊區域的圖像映射，<area>定義其具體位置
2、源屬性（Src）、替換文本屬性（Alt）
src： 指 "source"，源屬性的值是圖像的 URL 地址。
alt：在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。
3、圖片應用實例
（1）將圖片當做背景
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML圖像</title> 6 </head> 7 8 <body background="1.png"> 9 <h3>圖像背景</h3> 10 <p>gif 和 jpg 文件均可用作 HTML 背景。</p> 11 <p>如果圖像小於頁面，圖像會進行重復。</p> 12 </body> 13 </html>
效果：
（2）排列圖片：使用align屬性(align="bottom";align="middle";align="top")
（3）圖像的浮動：使圖片浮動至段落的左邊或右邊：使用align屬性（align="left"或align="left"）
（4）調整圖像尺寸：通過改變 img 標簽的 "height" 和 "width" 屬性的值，可以放大或縮小圖像
1 <body> 2 <img src="1.png" width="50" height="50"> 3 <img src="1.png" width="100" height="100"> 4 </body>
（5）可以將圖像作為鏈接使用
（6）創建圖像映射：即使用<map> 標簽創建帶有可供點擊區域的圖像地圖
三、HTML表格
1、表格標簽
2、表格中的空單元格
如果某個單元格是空的（沒有內容），瀏覽器可能無法顯示出這個單元格的邊框。為了避免這種情況，在空單元格中添加一個空格占位符，就可以將邊框顯示出來。（<td> </td>）
3、設置表格邊框：<table border="1">，無邊框則border="0”
4、跨行或者跨咧的單元格：使用colspan來合並單元格
1 <body> 2 <table border="1"> 3 <tr> 4 <th>姓名</th> 5 <th colspan="2">電話</th> 6 </tr> 7 <tr> 8 <td>Bill Gates</td> 9 <td>555 77 854</td> 10 <td>555 77 855</td> 11 </tr> 12 </table> 13 </body>
效果：
5、單元格邊距：cellpadding與單元格間距：cellspacing
1 <body> 2 <table border="1"> 3 <tr> 4 <th>單元格</th><th>單元格</th> 5 </tr> 6 <tr> 7 <th>單元格</th><th>單元格</th> 8 </tr> 9 </table><br /> 10 <table border="1" cellpadding="10"> 11 <tr> 12 <th>單元格</th><th>單元格</th> 13 </tr> 14 <tr> 15 <th>單元格</th> <th>單元格</th> 16 </tr> 17 </table><br /> 18 <table border="1" cellspacing="10"> 19 <tr> 20 <th>單元格</th> <th>單元格</th> 21 </tr> 22 <tr> 23 <th>單元格</th><th>單元格</th> 24 </tr> 25 </table> 26 </body>
效果：
四、HTML 塊元素、HTML 內聯元素
1、塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。例子：<h1>, <p>, <ul>, <table>
2、內聯元素在顯示時通常不會以新行開始。例子：<b>, <td>, <a>, <img>
3、HTML <div> 元素是塊級元素，它是可用於組合其他 HTML 元素的容器，如果與 CSS 一同使用，<div> 元素可用於對大的內容塊設置樣式屬性。<span> 元素是內聯元素，可用作文本的容器，當與 CSS 一同使用時，<span> 元素可用於為部分文本設置樣式屬性。
五、HTML顏色
1、顏色值：
顏色由一個十六進制符號來定義，這個符號由紅色、綠色和藍色的值組成（RGB）。每種顏色的最小值是 0（十六進制：#00）。最大值是 255（十六進制：#FF）。
2、顏色名：
僅有 16 種顏色名被 W3C 的 HTML 4.0 標准支持，它們是：aqua、black、blue、fuchsia、gray、green、lime、maroon、navy、olive、purple、red、silver、teal、white、yellow。如果使用其它顏色的話，就應該使用十六進制的顏色值。
3、部分顏色如下：
六、HTML布局
1、使用<div>元素布局
每一對<div></div>標簽代表一個塊，對塊的屬性進行定義后，在標簽里輸入塊的內容。
（1）先將整體分塊
1 <body> 2 <div class="container"> 3 <div class="header">這是頭部</div> 4 <div class="left">這是左半部分</div> 5 <div class="right">這是右半部分</div> 6 <div class="footer">這是底部</div> 7 </div> 8 </body>
效果：
（2）對每一塊進行樣式定義
1 <style type="text/css"> 2 *{ //使整體充滿，不留一點空白邊距 3 margin:0px; 4 padding:0px; 5 } 6 body{margin:0px;} 7 .container{ 8 height:500px; 9 width:100%; 10 } 11 .header{ 12 height:10%; 13 background-color:#FF80C0; 14 } 15 .left{ 16 height:80%; 17 width:30%; 18 background-color:#0F9; 19 float:left; <!--從左到右的一個浮動--> 20 } 21 .right{ 22 height:80%; 23 width:70%; 24 background-color:#90F; 25 float:left; <!--沒有這一行的話，此部分會出現在頁面下方，不會靠右--> 26 } 27 .footer{ 28 height:10%; 29 background-color:#999; 30 clear:both; <!--清除浮動，否則此部分會跟着上面浮動，不會出現在底部--> 31 } 32 </style>
最后完成效果：
2、使用<table>布局
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML布局</title> 6 </head> 7 8 <body marginheight="0px" marginwidth="0px"> 9 <table width="100%" height="500px"> 10 <tr> 11 <td colspan="2" height="10%" bgcolor="#CC66CC"></td> 12 </tr> 13 <tr> 14 <td height="80%" width="30%" bgcolor="#66FFCC"></td> 15 <td height="80%" width="70%" bgcolor="#9900CC"></td> 16 </tr> 17 <tr> 18 <td colspan="2" height="10%" bgcolor="#999999"></td> 19 </tr> 20 </table> 21 </body> 22 </html>
效果：
七、框架
框架也可以用來布局，通過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。
1、標簽：
(1)框架集標簽：<frameset>
*框架集標簽定義如何將窗口分割為框架
*每一個<frameset>定義一系列行或列
*rows和cols的值規定了每行或每列占據屏幕的面積
（2）框架標簽：<frame>
（3）內聯框架：<iframe>
（4）<noframes> 標簽：固定框架大小，使用戶不可以拖動邊框來改變它的大小
注意：不能將 <body></body> 標簽與 <frameset></frameset> 標簽同時使用！不過，假如你添加包含一段文本的 <noframes> 標簽，就必須將這段文字嵌套於 <body></body> 標簽內
2、使用實例
（1）垂直框架：
*先創建三個基礎框架，以其中一個為例：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML框架</title> 6 </head> 7 8 <body bgcolor="#66FFFF"> 9 </body> 10 </html>
*最后創建一個框架，將前面三個導入：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML框架</title> 6 </head> 7 8 <frameset cols="20%,30%,50%"> 9 <frame src="frame_a.html" /> 10 <frame src="frame_b.html" /> 11 <frame src="frame_c.html" /> 12 </frameset><noframes></noframes> 13 14 </html>
效果：
（水平框架只需將cols改為rows）
（2）混合型框架：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>HTML框架</title> 6 </head> 7 8 <frameset rows="50%,50%"> 9 <frame src="frame_a.html" /> 10 11 <frameset cols="30%,70%"> 12 <frame src="frame_b.html" /> 13 <frame src="frame_c.html" /> 14 </frameset> 15 </frameset> 16 </html>
效果：
（3）內聯框架
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>內聯框架</title> 6 </head> 7 8 <body> 9 <iframe src="Web前端練習代碼/框架/1.png"></iframe> 10 </body> 11 </html>
效果：
內聯框架可以用frameborder="0"來取消邊框效果，還可以用width、height來設置大小
（4）導航框架
*設計好框架集頁面，並為框架窗口定義名稱
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>導航框架2</title> 6 </head> 7 8 <frameset cols="120,*"> <!--*計算機稱為通配符，這是一個框架，一部份為120，其余的為剩下的全部！--> 9 <frame src="導航框架1.html" /> 10 <frame src="1.png" name="mainframe" /> 11 </frameset> 12 </html>
*設置導航欄中的超鏈接的target目標窗口屬性，使其值為框架窗口的名字
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>導航框架1</title> 6 </head> 7 8 <body> 9 <a href="frame_a.html" target="mainframe">frame_a</a><br /> <!--注意設置導航欄中的超鏈接的target目標窗口屬性，使其值為框架窗口的名字--> 10 <a href="frame_b.html" target="mainframe">frame_b</a><br /> 11 <a href="frame_c.html" target="mainframe">frame_c</a><br /> 12 </body> 13 </html>
效果：
