一、檔案標籤
構成html最基本的標籤
- html:html文件的根標籤
- head：頭標籤。用於指定html文件的一些屬性。引入外部的資源
- title：標題標籤。
- body：體標籤
- <!DOCTYPE html>：html5中定義該文件是html文件
二、文字標籤
和文字有關的標籤
1、標籤
- 註釋：<!-- 註釋內容 -->
- <h1> to <h6>：標題標籤
- h1~h6:字型大小逐漸遞減
- <p>：段落標籤
- <br>：換行標籤
- <hr>：展示一條水平線
- 屬性：
- color：顏色
- width：寬度
- size：高度
- align：對其方式
- center：居中
- left：左對齊
- right：右對齊
- 屬性：
- <b>：字型加粗
- <i>：字型斜體
- <font>:字型標籤
- <center>:文字居中
- 屬性：
- color：顏色
- size：大小
- face：字型
- 屬性：
- 屬性定義：
- color：
1. 英文單詞：red,green,blue
2. rgb(值1，值2，值3)：值的範圍：0~255 如 rgb(0,0,255)
3. #值1值2值3：值的範圍：00~FF之間。如： #FF00FF
-
- width：
1. 數值：width='20' ,數值的單位，預設是 px(畫素)
2. 數值%：佔比相對於父元素的比例
2、案例：公司簡介
<!DOCTYPE html> <html lang="ch"> <head> <meta charset="UTF-8"> <title>黑馬程式設計師簡介</title> </head> <body> <h1> 公司簡介 </h1> <hr color="#ffd700"> <p> <font color="#FF0000">"中關村黑馬程式設計師訓練營"</font>是由<b><i>傳智播客</i></b>聯合中關村軟體園、CSDN， 並委託傳智播客進行教學實施的軟體開發高階培訓機構，致力於服務各大軟體企業，解決當前軟體開發技術飛速發展， 而企業招不到優秀人才的困擾。 </p> <p> 目前，“中關村黑馬程式設計師訓練營”已成長為行業“學員質量好、課程內容深、企業滿意”的移動開發高階訓練基地， 並被評為中關村軟體園重點扶持人才企業。 </p> <p> 黑馬程式設計師的學員多為大學畢業後，有理想、有夢想，想從事IT行業，而沒有環境和機遇改變自己命運的年輕人。 黑馬程式設計師的學員篩選制度，遠比現在90%以上的企業招聘流程更為嚴格。任何一名學員想成功入學“黑馬程式設計師”， 必須經歷長達2個月的面試流程，這些流程中不僅包括嚴格的技術測試、自學能力測試，還包括性格測試、壓力測試、 品德測試等等測試。毫不誇張地說，黑馬程式設計師訓練營所有學員都是精挑細選出來的。百裡挑一的殘酷篩選制度確 保學員質量，並降低企業的用人風險。 中關村黑馬程式設計師訓練營不僅著重培養學員的基礎理論知識，更注重培養專案實施管理能力，並密切關注技術革新， 不斷引入先進的技術，研發更新技術課程，確保學員進入企業後不僅能獨立從事開發工作，更能給企業帶來新的技術體系和理念。 </p> <p> 一直以來，黑馬程式設計師以技術視角關注IT產業發展，以深度分享推進產業技術成長，致力於弘揚技術創新，倡導分享、 開放和協作，努力打造高質量的IT人才服務平臺。 </p> <hr color="#ffd700"> <font color="gray" size="2"> <center> 江蘇傳智播客教育科技股份有限公司<br> 版權所有Copyright 2006-2018©, All Rights Reserved 蘇ICP備16007882 </center> </font> </body> </html>
三、圖片標籤
- img：展示圖片
- 屬性：
- src：指定圖片的位置
- 屬性：
- 程式碼：
<!--展示一張圖片 img--> <img src="image/jingxuan_2.jpg" align="right" alt="古鎮" width="500" height="500"/> <!-- 相對路徑 * 以.開頭的路徑 * ./：代表當前目錄 ./image/1.jpg * ../:代表上一級目錄 --> <img src="./image/jiangwai_1.jpg"> <img src="../image/jiangwai_1.jpg">
四、列表標籤
1、有序列表：
- ol:
- li:
2、無序列表：
- ul:
- li:
五、連結標籤
1、a:定義一個超連結
屬性：
- href：指定訪問資源的URL(統一資源定位符)
- target：指定開啟資源的方式
-
- _self:預設值，在當前頁面開啟
- _blank：在空白頁面開啟
2、程式碼：
<!--超連結 a--> <a href="http://www.itcast.cn">點我</a> <br> <a href="http://www.itcast.cn" target="_self">點我</a> <br> <a href="http://www.itcast.cn" target="_blank">點我</a> <br> <a href="./5_列表標籤.html">列表標籤</a><br> <a href="mailto:itcast@itcast.cn">聯絡我們</a> <br> <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
六、div和span
div:每一個div佔滿一整行。塊級標籤
span：文字資訊在一行展示，行內標籤 內聯標籤
七、語義化標籤
html5中為了提高程式的可讀性，提供了一些標籤。
1、<header>：頁首
2.、<footer>：頁尾
八、表格標籤
1、table：定義表格
- width：寬度
- border：邊框
- cellpadding：定義內容和單元格的距離
- cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、
- bgcolor：背景色
- align：對齊方式
2、tr：定義行
- bgcolor：背景色
- align：對齊方式
3、td：定義單元格
- colspan：合併列
- rowspan：合併行
4、th：定義表頭單元格
5、<caption>：表格標題
7、<tbody>：表示表格的體部分
8、<tfoot>：表示表格的腳部分
九、案例：旅遊網站首頁
1. 確定使用table來完成佈局
2. 如果某一行只有一個單元格，則使用<tr><td></td></tr>
3. 如果某一行有多個單元格，則使用
<tr> <td> <table></table> </td> </tr>
4. 程式碼實現
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>黑馬旅遊網</title> </head> <body> <!--採用table來完成佈局--> <!--最外層的table，用於整個頁面的佈局--> <table width="100%" align="center"> <!-- 第1行 --> <tr> <td> <img src="image/top_banner.jpg" width="100%" alt=""> </td> </tr> <!-- 第2行 --> <tr> <td> <table width="100%" align="center"> <tr> <td> <img src="image/logo.jpg" alt=""> </td> <td> <img src="image/search.png" alt=""> </td> <td> <img src="image/hotel_tel.png" alt=""> </td> </tr> </table> </td> </tr> <!-- 第3行 --> <tr> <td> <table width="100%" align="center"> <tr bgcolor="#ffd700" align="center" height="45" > <td> <a href="">首頁</a> </td> <td> 門票 </td> <td> 門票 </td> <td> 門票 </td> <td> 門票 </td> <td> 門票 </td> <td> 門票 </td> <td> 門票 </td> <td> 門票 </td> <td> 門票 </td> </tr> </table> </td> </tr> <!-- 第4行 輪播圖 --> <tr> <td> <img src="image/banner_3.jpg" alt="" width="100%"> </td> </tr> <!-- 第5行 黑馬精選--> <tr> <td> <img src="image/icon_5.jpg" alt=""> 黑馬精選 <hr color="#ffd700" > </td> </tr> <!-- 第6行 --> <tr> <td> <table align="center" width="95%"> <tr> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> <td> <img src="image/jiangxuan_1.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 899</font> </td> </tr> </table> </td> </tr> <!-- 第7行 國內遊 --> <tr> <td> <img src="image/icon_6.jpg" alt=""> 國內遊 <hr color="#ffd700" > </td> </tr> <!-- 第8行 --> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2"> <img src="image/guonei_1.jpg" alt=""> </td> <td> <img src="image/jiangxuan_2.jpg" alt="" height="100%"> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_2.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <!-- 第9行 境外遊 --> <tr> <td> <img src="image/icon_7.jpg" alt=""> 境外遊 <hr color="#ffd700" > </td> </tr> <!-- 第10行 --> <tr> <td> <table align="center" width="95%"> <tr> <td rowspan="2"> <img src="image/jiangwai_1.jpg" alt=""> </td> <td> <img src="image/jiangxuan_3.jpg" alt="" height="100%"> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> <tr> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> <td> <img src="image/jiangxuan_3.jpg" alt=""> <p>上海飛三亞五天4晚自由行(春節銷售+親子+蜜月+自由行)</p> <font color="red">¥ 699</font> </td> </tr> </table> </td> </tr> <!-- 第11行 --> <tr> <td> <img src="image/footer_service.png" alt="" width="100%"> </td> </tr> <!-- 第12行 --> <tr> <td align="center" bgcolor="#ffd700" height="40"> <font color="gray" size="2"> 江蘇傳智播客教育科技股份有限公司 版權所有Copyright 2006-2018©, All Rights Reserved 蘇ICP備16007882 </font> </td> </tr> </table> </body> </html>