一、Html 結構
1.1、HTML基本文檔格式—<html> 標記
—<html>文檔的頭部好和主體內容 </html> 根標記
—<head> 文檔的頭部信息</head> 頭部標記 只能有一對
—<title>顯示在瀏覽器窗口的標題欄中“網頁名稱”</title> 位於<head>標記之內
—<body></body> 主體標記 位於<html>之內，<head>標記之後
<!doctype html> 聲明文檔類型
<html> 跟標籤
<head> 頭部標籤
<title></title> 標題簽
</head>
<body>
</body>
……
</html>
1.2、HTML 標籤關係
嵌套關係：<head><title></title></head> 父子
並列關係：<head></head><body></body> 兄弟姐妹
1.3、 HTML 標籤分類
雙標記 <標記名></標記名> :<front ></front >、<p > </p> 等
單標記 <標記名/> ：註釋、 <br/> 、<!Doctype html>、<hr/>
二、標籤
2.1 單標籤
◆註釋標籤 ctrl+/
◆ 換行標籤 <br />
◆ 水平線標籤 <hr />
2.2 雙標籤
1.<p>文本內容</p> 特點：上下自動生成空白行。<br>換行不會生成空白行。
2.標題標籤 h1-h6 取值到h6
h1 在一個頁面裡只能出現一次。 （seo）
3.文本標籤 <font>文本內容</font>
4.文本格式化標籤
文本加粗標籤 <strong></strong> <b></b> 工作裡儘量使用strong
文本傾斜標籤 <em></em> <i></i> 工作裡儘量使用em
刪除線標籤 <del></del> <s></s> 工作裡儘量使用del
下劃線標籤（插入文本）<ins></ins> <u></u> 工作裡儘量ins
◆注意：之所以工作裡使用<strong></strong>、 <em></em>、 <del></del>、<ins></ins> 是因為更有語義化（瀏覽器讀起來更舒服）。
2.3圖片標籤
<img src="3.gif" alt="小嶽嶽" title="我的天吶！" width="300" height="200" />
Src 圖片的來源 必寫屬性
Alt 替換文本 圖片不顯示的時候顯示的文字
Title 提示文本 鼠標放到圖片上顯示的文字
Width 圖片寬度
Height 圖片高度
◆PS：圖片沒有定義寬高的時候，圖片按照百分之百比例顯示，如果只更改圖片的寬度或者高度，圖片等比例縮放。
三、路徑
1. 相對路徑 （相對於文件自身出發，就是相對路徑）
◆文件和圖片（html文檔）在同一個目錄(文件夾) ，直接寫文件名。 <img src="1.pig" alt="" />
◆圖片（html文檔）在文件的下一級目錄裡。文件夾名稱+/+圖片（html文件）名稱 <img src="圖片/1.pig" alt="" />
◆圖片（html）在文件的上一級目錄裡，..+/+圖片（html）名稱 <img src="../1.pig" alt="" />
◆圖片在文件的上一級的其他目錄裡，../文件夾名稱/圖片名稱 <img src="../練習/1.pig" alt="" />
★總結：找到下一級目錄（文件夾）的圖片（文件）用 / 跳出當前目錄使用../
2.絕對路徑
<img src="F:\前端開發基礎知識\練習\1.pig" alt="" /> <!-- 電腦上的絕對路徑 -->
四、超鏈接
<a href="林志玲.html" title=" 我的女神" target="_blank">超鏈接</a>
href 去往的路徑（跳轉的頁面） 必寫屬性
title 提示文本 鼠標放到鏈接上顯示的文字
target=”_self” 默認值 在自身頁面打開（關閉自身頁面，打開鏈接頁面）
Target=”_blank” 打開新頁面 （自身頁面不關閉，打開一個新的鏈接頁面）
4.1 錨鏈接
1.先定義一個錨點 <p id="sd">
2.超鏈接到錨點 <a herf="#sd">回到頂點</a>
4.2 空鏈
不知道鏈接到那個頁面的時候，用空鏈
<a herf="#">空鏈</a>
4.2 壓縮文件下載（不推薦使用）
<a herf="../../練習.rar">壓縮包</a>
4.3 超鏈接的優化寫法
<base target="_blank"> 讓所有的超鏈接都在新窗口打開
五、HTML 的特殊符號
六 、列表
6.1、無序列表
<ul>
<li></li> 列表項
<li></li>
<li></li>
</ul>
type=”square” 小方塊 type=”disc” 實心小圓圈 type=”circle” 空心小圓圈
6.2、有序列表
<ol>
<li></li> 列表項
<li></li>
<li></li>
</ol>
效果：
◆type=”1,a,A,i,I” type的值可以為1,a,A,i,I
start=”3” 決定了開始的位置。
6.3 自定義列表
<dl>
<dt></dt> 小標題
<dd></dd> 解釋標題
<dd></dd> 解釋標題
</dl>
七、音樂標籤和滾動
滾動：
更多IT資訊請關注IT優就業官網：http://www.ujiuye.com?wt.bd=zt36716
QQ交流群，一鍵加群鏈接：http://www.ujiuye.com/zt/qqhdjlpt/?wt.bd=zt36716
免費在線視頻學IT：http://xue.ujiuye.com/?wt.bd=zt36716