html塊、含樣式的標籤

html塊

1、div標籤 塊元素，表示一塊內容，沒有具體的語義。
2、span標籤 行內元素，表示一行中的一小段內容，沒有具體的語義。

含樣式和語義的標籤

1、em標籤 行內元素，表示語氣中的強調詞
2、i標籤 行內元素，原本沒有語義，w3c強加了語義，表示專業詞彙
3、b標籤 行內元素，原本沒有語義，w3c強加了語義，表示文件中的關鍵字或者產品名
4、strong標籤 行內元素，表示非常重要的內容

語義化的標籤

語義化的標籤，就是在佈局的時候多使用語義化的標籤，搜尋引擎在爬網的時候能認識這些標籤，理解文件的結構，方便網站的收錄。比如：h1標籤是表示標題，p標籤是表示段落，ul、li標籤是表示列表，a標籤表示連結，dl、dt、dd表示定義列表等，語義化的標籤不多。

html影象、絕對路徑和相對路徑

html影象

<img>標籤可以在網頁上插入一張圖片，它是獨立使用的標籤，通過“src”屬性定義圖片的地址，通過“alt”屬性定義圖片載入失敗時顯示的文字，以及對搜尋引擎和盲人讀屏軟體的支援。

<img src="images/pic.jpg" alt="產品圖片" />

絕對路徑和相對路徑

像網頁上插入圖片這種外部檔案，需要定義檔案的引用地址，引用外部檔案還包括引用外部樣式表，javascript等等，引用地址分為絕對地址和相對地址。

• 絕對地址：相對於磁碟的位置去定位檔案的地址
• 相對地址：相對於引用檔案本身去定位被引用的檔案地址

絕對地址在整體檔案遷移時會因為磁碟和頂層目錄的改變而找不到檔案，相對路徑就沒有這個問題。相對路徑的定義技巧：

• “ ./ ” 表示當前檔案所在目錄下，比如：“./pic.jpg” 表示當前目錄下的pic.jpg的圖片，這個使用時可以省略。

• “ ../ ” 表示當前檔案所在目錄下的上一級目錄，比如：“../images/pic.jpg” 表示當前目錄下的上一級目錄下的images資料夾中的pic.jpg的圖片。

html連結

html連結

<a>標籤可以在網頁上定義一個連結地址，通過src屬性定義跳轉的地址，通過title屬性定義滑鼠懸停時彈出的提示文字框。

<a href="#"></a> <!--  # 表示連結到頁面頂部   -->
<a href="http://www.itcast.cn/" title="跳轉的傳智播客網站">傳智播客</a>
<a href="2.html">測試頁面2</a>

定義頁面內滾動跳轉

頁面內定義了“id”或者“name”的元素，可以通過a標籤連結到它的頁面滾動位置，前提是頁面要足夠高，有滾動條，且元素不能在頁面頂部，否則頁面不會滾動。

<a href="#mao1">標題一</a>
......
......
<h3 id="mao1">跳轉到的標題</h3>

html列表

有序列表

在網頁上定義一個有編號的內容列表可以用<ol>、<li>配合使用來實現，程式碼如下：

<ol>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ol>

在網頁上生成的列表，每條專案上會按1、2、3編號，有序列表在實際開發中較少使用。

無序列表

在網頁上定義一個無編號的內容列表可以用<ul>、<li>配合使用來實現，程式碼如下：

<ul>
    <li>列表文字一</li>
    <li>列表文字二</li>
    <li>列表文字三</li>
</ul>

在網頁上生成的列表，每條專案上會有一個小圖示，這個小圖示在不同瀏覽器上顯示效果不同，所以一般會用樣式去掉預設的小圖示，如果需要圖示，可以用樣式自定義圖示，從而達到在不同瀏覽器上顯示的效果相同,實際開發中一般用這種列表。

定義列表

定義列表通常用於術語的定義。<dl>標籤表示列表的整體。<dt>標籤定義術語的題目。<dd>標籤是術語的解釋。一個<dl>中可以有多個題目和解釋，程式碼如下：

<h3>前端三大塊</h3>
<dl>
    <dt>html</dt>
    <dd>負責頁面的結構</dd>

    <dt>css</dt>
    <dd>負責頁面的表現</dd>

    <dt>javascript</dt>
    <dd>負責頁面的行為</dd>

</dl>

html內嵌框架

html內嵌框架

<iframe>標籤會建立包含另外一個html檔案的內聯框架（即行內框架），src屬性來定義另一個html檔案的引用地址，frameborder屬性定義邊框，scrolling屬性定義是否有滾動條，程式碼如下：

<iframe src="http://www..." frameborder="0" scrolling="no"></iframe>

內嵌框架與a標籤配合使用

a標籤的target屬性可以將連結到的頁面直接顯示在當前頁面的iframe中，程式碼如下：

<a href="01.html" target="myframe">頁面一</a>
<a href="02.html" target="myframe">頁面二</a>
<a href="03.html" target="myframe">頁面三</a>
<iframe src="01.html" frameborder="0" scrolling="no" name="myframe"></iframe>