HTML5保留的常用标簽（2）

• 5.超連結标簽
• • (1).外部連結
  • (2).内部連結
• 6.表格标簽
• • (1).表格标簽 table
  • (2).表格行标簽 tr
  • (3).單元格标簽 td
  • (4).表頭标簽 th
  • (5).表格标題标簽 caption
• 7.架構标簽
• • 内聯架構标簽 iframe
• 8.容器标簽
• • (1).div 标簽
  • (2).span 标簽

5.超連結标簽

超連結标簽<a>用于在網頁中标記文本圖像進而形成超連結，使用者點選後将跳轉
   另一個指定的頁面，進而實作浏覽空間的跨越。a指的是anchor（錨），是以超
   連結又被稱作錨連結。
   
   超連結可以用于指向任何其他位置，包括Internet上的其他網頁、本地其他文檔甚至
   目前頁面中其他位置。适用于制作網頁的導航菜單或清單，也可以用于發送郵件或者
   下載下傳檔案等。預設狀态下，未被通路的連結文本顯示為帶有下劃線的藍色字型，滑鼠
   懸浮在上面會變成手形，點選通路後連結文本會變成帶有下劃線的紫色字型。
           

超連結标簽有如下兩個重要屬性：

href：目标内容的URL位址。

target：目标内容的打開方式，其屬性值如表。

target屬性值	解釋
_self	自身
_blank	新視窗
_top	頂層架構
_parent	父架構

(1).外部連結

其基本格式如下:

外部連結可包含文本内容或者圖檔内容：

<!--文本示例-->：
<a href="www.baidu.com">百度</a>
<!--圖檔示例-->
<a href="www.baidu.com"><img src="logo.png"/></a>
           

外部連結的簡單應用代碼和運作效果如下：

<h2>外部超連結的簡單應用</h2>
        <hr/>
        圖檔超連結的效果：<a href="https://www.baidu.com"><img src="ch02HTML5基礎\ch02HTML5\image\logo.png"alt="百度"width="188",hight="288"/></a>
        <br/>
        文字超連結的效果：<a href="https://www.csdn.net">CSDN</a>
           

(2).内部連結

超連結标簽也可以通過點選跳轉同一頁面的指定區域，其文法格式如下：

這裡的“指定區域名：可以自定義，但是同時目标區域也必須标記出對應的名稱，其格式如下：

内部連結運用以及運作代碼和效果如下：

<h2>内部連結的運用</h2>
        <hr/>
        <p>
            <h3>目錄</h3>
            <ul>
                <li><a href="#一">1</a></li>
                <li><a href="#二">2</a></li>
                <li><a href="#三">3</a></li>
                <li><a href="#四">4</a></li>
                <li><a href="#五">5</a></li>
                <li><a href="#六">6</a></li>
                <li><a href="#七">7</a></li>
                <li><a href="#八">8</a></li>
            </ul>
        </p>
        <hr/>
        <h3><a name="一">第一章</a></h3>
        <p>HTML5概述</p>
        <h3><a name="二">第二章</a></h1>
        <p>HTML5基礎</p>
        <h3><a name="三">第三章</a></h2>
        <p>CSS基礎</p>
        <h3><a name="四">第四章</a></h3>
        <p>Javascript基礎</p>
        <h3><a name="五">第五章</a></h3>
        <p>HTML5畫布</p>
        <h3><a name="六">第六章</a></h3>
        <p>HTML5表單</p>
        <h3><a name="七">第七章</a></h3>
        <p>HTML5音頻和視訊</p>
        <h3><a name="八">第八章</a></h3>
        <p>HTML5地理定位</p>
           

6.表格标簽

表格标簽由<table>和</table>定義，每個表格中包含若幹行（由單元行标簽
   <tr>和</tr>表示），每一行又被分為若幹單元格（由單元格标簽<td>和</td>
   表示）。
           

(1).表格标簽 table

表格标簽<table>和</table>用于定義一個完整的表格
           

(2).表格行标簽 tr

表格行标簽<tr>和</tr>用于定義表格中的一行
           

(3).單元格标簽 td

單元格标簽<td>和</td>用于定義表格行中的一個資料單元格，td為table date
    的（表格資料）的簡寫。資料單元格中可以包含表單、文本、水準線、圖檔、
    清單、段落甚至新的表格内容。預設狀态下，單元格的内容為向左對齊。
           

(4).表頭标簽 th

表頭标簽<th>和</th>用于定義表格的第一行表頭，預設為粗體字、居中對齊。
           

(5).表格标題标簽 caption

表格标題标簽<caption>和</caption>可用于為表格添加标題，該标題預設為
    居中對齊并顯示在表格頂部。
           

表格标簽綜合運作的代碼和效果如下：

<table border="1">   <!--屬性border表示表格邊緣的像素-->
            <caption>成績表</caption>
            <tr>                              <!--第一行是表頭，用表頭th标簽修飾，預設粗體字，居中對齊-->
                <th>姓名</th>
                <th>國文</th>
                <th>數學</th>
            </tr>
            <tr>                              <!--第二行開始，每一行每個單元格用單元格标簽td修飾，預設向左對齊-->
                <td>張三</td>
                <td>89</td>
                <td>78</td>
            </tr>
            <tr>
                <td>李四</td>
                <td>60</td>
                <td>100</td>
            </tr>
        </table>
           

7.架構标簽

架構标簽用于在網頁的架構内自定義子視窗。由于架構标簽對于網頁的
 可用性由負面影響，在HTML5中不再支援HTML4.01中原有的架構标簽
 <frame>和<frameset>。隻保留了内聯架構标簽<iframe>。
           

内聯架構标簽 iframe

該标簽在HTML5中僅支援src屬性，用于指定架構内部的網頁來源。
例如：<iframe src="news.html"></iframe>
           

内聯架構标簽iframe的應用代碼和效果如下：

<h3>内聯架構iframe的應用</h3>
        <hr/>
        <iframe src="測試1.html"></iframe>
           

8.容器标簽

(1).div 标簽

标簽<div>可将網頁頁面分割成不同的獨立部分，通常用于定義文檔中的區域或
   節。标簽中的元素名div來源于英文單詞division（區域）的簡寫。該标簽是一個
   塊級元素（block level element），浏覽器會自動在<div>和</div>所标記的區
   域前後自動放置一個換行符。每個标簽可以一個獨立的id号。


   同樣屬于塊級元素的還由段落标簽<p>、表格标簽<table>、标題标簽<h1>~<h6>
   等。
           

div标簽應用的代碼和運作效果如下：

<h3>div标簽的應用</h3>
        <hr/>
        <h5>這是第一段的标題（沒有使用div标簽）</h5>
        <p>這是第一段的内容（沒有使用div标簽）</p>
        <hr/>
        <div>
            <h5>這是第二段的标題（使用了無樣式要求的div标簽）</h5>
            <p>這是第二段的内容（使用了無樣式要求的div标簽）</p>
        </div>
        <hr/>
        <div style="color: blueviolet;background-color: chartreuse;">
            <h5>這是第三段的标題（使用了指定樣式要求的div标簽）</h5>
            <p>這是第三段的内容（使用了指定樣式要求的div标簽）</p>
        </div>
           

(2).span 标簽

<span>标簽通常作為文本的容器，它沒有特定的含義和樣式，隻有與CSS同時
   使用時才可以為指定文本設定樣式屬性。該标簽是一個内聯元素（inline element），與塊級元素想法，内聯元素不會自動在前後自動放置換行符，是以内聯
   元素會預設在同一行顯示。
           

span标簽的運用代碼和運作效果如下：

<h3>span标簽的應用</h3>
        <hr/>
        <p>本段落使用了<span>span标簽</span>，但未設定任何樣式。</p>
        <p>本段落使用了<span style="color: crimson;">span标簽</span>，并設定了樣式。</p>