乐乐捕鱼赢话费

書名： Adobe Dreamweaver CS5 網頁設計與制作技能基礎教程
作者名：易連雙趙林
本章字數： 3612字
更新時間： 2020-04-22 16:19:54

3.2 HTML的基本標記

網頁中常見的標記有文本標記、圖像標記、表格標記和超鏈接標記等。下面將進行具體介紹。

3.2.1 文本標記

在HTML中，通過<hn>標記來標識文檔中的標題和副標題，n代表從1～6的數字，數字越大所標記的標題字越來越小。

例如，用<hn>標記設置標題示例，代碼顯示如下。

    <html>
    <head>
    <title>文本標記</title>
    </head>
    <body>
    <h1>往返于紫陌纖塵</h1>
    <h2>往返于紫陌纖塵</h2>
    <h3>往返于紫陌纖塵</h3>
    <h4>往返于紫陌纖塵</h4>
    <h5>往返于紫陌纖塵</h5>
    <h6>往返于紫陌纖塵</h6>
    </body>
    </html>

效果如圖3-3所示。

圖3-3

3.2.2 段落標記

段落文本是通過<p>標記定義的，文本內容寫在開始標記<p>和結束標記</p>之間。屬性align用于設置段落文本的對齊方式，屬性值有3個，分別是left（左對齊）、center（居中對齊）和right（右對齊）。當沒有設置align屬性時，默認為左對齊。

例如，用<p>標記設置段落文本示例，代碼如下。

    <html>
    <head>
    <title>段落文字的對齊方式</title>
    </head>
    <body>
    <p >每天給自己一個希望</p>
    <p align=”left”>每天給自己一個希望</p>
    <p align=”center”>每天給自己一個希望</p>
    <p align=”right”>每天給自己一個希望</p>
    </body>
    </html>

效果如圖3-4所示。

圖3-4

可用來進行段落處理的還有強制換行標記<br>,<br>放在一行的末尾，可以使后面的文字、圖片、表格等顯示于下一行。它和<p>標記的區別是，用<br>分開的兩行之間不會有空行，而<p>分開的兩行之間卻會有空行。

例如，用<br>換行的代碼如下。

    <html>
    <head>
    <title>強制換行標記</title>
    </head>
    <body>
    <p>每天給自己一個希望</p>
    <p>每天給自己一個希望</p>
    不為明天煩惱<br />不為昨天嘆息
    </body>
    </html>

效果如圖3-5所示。

圖3-5

3.2.3 文本格式標記

文本顯示的格式通過<font>標記來標志。<font>標記常用的屬性有3個，size設置文本字號大小，取值是0-7;color設置文本顏色，取值是十六進制RGB顏色；face設置字體，取值可以是宋體、黑體等。

例如，用<font>標記設置文本格式，代碼如下。

    <html>
    <head>
    <title>文本格式標記</title>
    </head>
    <body>
    <font size=”3”>聽弦斷，風華荏苒</font><br />
    <font size=”6”>聽弦斷，風華荏苒</font><br />
    <font color=”#000000”>聽弦斷，風華荏苒</font><br />
    <font color=”red”>聽弦斷，風華荏苒</font><br />
    <font face=”黑體”>聽弦斷，風華荏苒</font><br />
    <font face=”宋體”>聽弦斷，風華荏苒</font><br />
    </body>
    </html>

效果如圖3-6所示。

圖3-6

為了讓文字顯示有變化，或者為了強調某部分文字，可以設置一些其他文本格式標記。這些單獨的文本格式標記有以下4種。

    <b></b>       文本以加粗形式顯示
    <i></i>       文本以斜體形式顯示
    <u></u>       文本加下劃線顯示
    <strong></strong>  文本加重顯示通常黑體加粗

其他文本格式標記的示例，代碼如下。

    <html >
    <head>
    <title>文本格式標記</title>
    </head>
    <body>
    <b>要生存，先做一株小草</b><br />
    <i>要生存，先做一株小草</i><br />
    <u>要生存，先做一株小草</u><br />
    <strong>要生存，先做一株小草</strong>
    </body>
    </html>

效果如圖3-7所示。

圖3-7

3.2.4 圖像標記

在頁面中插入圖片用<img>標記，<img>是單向標記，不成對出現，如<img src="image01. jpg">。src屬性用來設置圖片所在的路徑和文件名。圖片標記常用的屬性還有width和height，分別用來設置圖片的寬和高。另外，alt也是常見屬性設置，用來設置替代文字屬性，當瀏覽器尚未完全讀入圖片時，或者瀏覽器不支持圖片顯示時，在圖片位置顯示這些文字。

圖像標記的使用示例，代碼如下。

    <html>
    <head>
    <title>圖像標記</title>
    </head>
    <body>
    <img src="image1.jpg" alt="image3" width="300" height="200" />
    <img src="iamge/image2.jpg" alt="image2" width="300" height="200" />
    </body>
    </html>

效果如圖3-8所示。

圖3-8

在上例中，圖image1.jpg和網頁保存在同一目錄下，所以在屬性src后面的引號內直接輸入圖像名即可。而圖image2.jpg和網頁沒有保存在同一目錄下，所以屬性src后面的引號內要輸入圖像的完整地址。

3.2.5 超鏈接標記

超鏈接是指從一個頁面跳轉到另一個頁面，或者是從頁面的一個位置跳轉到另一個位置的鏈接關系，它是HTML的關鍵技術。鏈接的目標可以是頁面、圖片、多媒體、電子郵件等，有了超鏈接，各個孤立的頁面才可以相互聯系起來。

1．頁面鏈接

在HTML中創建超鏈接需要使用<a>標記，具體格式如下：

    <a href="URL" target="_blank">鏈接</a>

Href屬性控制鏈接到的文件地址，target屬性控制目標窗口，target=blank表示在新窗口打開鏈接文件，如果不設置target屬性則表示在原窗口打開鏈接文件。在<a>和</a>之間可以用任何可單擊的對象作為超鏈接的源，如文字或圖像。

常見的超鏈接指向其他網頁的超鏈接，如果超鏈接的目標網頁位于同一站點，則可以使用相對URL，如果超鏈接的目標網頁位于其他位置，則需要指定絕對URL。例如，以下的HTML代碼顯示了創建超鏈接的方式。

    <a  >百度搜索</a>
    <a href="test2.htm" >網頁test2</a>

2．錨記鏈接

如果要對同一網頁的不同部分進行鏈接，則需要建立錨記鏈接。

設置錨記鏈接，首先為頁面中要跳轉到的位置命名。命名時使用<a>標記的name屬性，此處<a>與</a>之間可以包含內容，也可以不包含內容。

例如，在頁面開始處用以下語句進行標記。

    <a name="top" >頂部</a>
    對頁面進行標記后，可以用<a>標記設置指向這些標記位置的超鏈接。如果在頁面開始處標記
了“top”，則可以用以下語句進行鏈接：
    <a href="#top" >返回頂部</a>

這樣，設置后用戶在瀏覽器單擊文字“返回頂部”時，將顯示“頂部”文字所在的頁面部分。

要注意的是，應用錨記鏈接要將其href的值指定為符號#后跟錨記名稱。如果將值指定為一個單獨的#，則表示空鏈接，不做任何跳轉。

3．電子郵件鏈接

如果將href屬性的取值指定為“mailto：電子郵件地址”，則可以獲得指向電子郵件的超鏈接。例如，使用以下HTML代碼可以設置電子郵件超鏈接。

    <a href=" mailto:lx_book@126.com" >lx_book的郵箱</a>

當瀏覽用戶點擊該超鏈接后，系統將自動啟動郵件客戶程序，并將指定的郵件地址填寫到【收件人】欄中，用戶可以編輯并發送郵件。

3.2.6 列表標記

列表分為有序列表、無序列表和定義列表。有序列表是指帶有序號標志（如數字）的列表，沒有序號標志的列表為無序列表，定義列表則可對列表項做出解釋。

1．有序列表

有序列表的標記是<ol>，其列表項標記是<li>。具體格式如下。

    <ol type="序號類型">
     <li>列表項1 </li>
     <li>列表項2 </li>
     <li>列表項3 </li>
    </ol>

type屬性的取值包含以下5種。

1：序號為數字。

A：序號為大寫英文字母。

a：序號為小寫英文字母。

I：序號為小寫羅馬字母。

i：序號為小寫羅馬字母。

有序列表示例，代碼如下。

    <html>
    <head>
    <title>有序列表</title>
    </head>
    <body>
    <ol type="a">
      <li>流年過往，歲月靜好 </li>
      <li>煙雨江南，無你何歡 </li>
      <li>仰望穹蒼，且聽風吟 </li>
      <li>花滿樹，此時春風意 </li>
    </ol>
    <ol type="I">
      <li>流年過往，歲月靜好 </li>
      <li>煙雨江南，無你何歡 </li>
      <li>仰望穹蒼，且聽風吟 </li>
      <li>花滿樹，此時春風意 </li>
    </ol>
    </body>
    </html>

效果如圖3-9所示。

圖3-9

2．無序列表

無序列表的標記是<ul>，其列表項標記是<li>。具體格式如下。

    <ul type="符號類型">
     <li>列表項1 </li>
     <li>列表項2 </li>
     <li>列表項3 </li>
    </ul>
    type屬性控制列表在排序時使用的字符類型，取值包含以下3種。
    disc：符號為實心圓。
    circle：符號為空心圓。
    square：符號為實心方點。
    無序列表示例，代碼如下。
    <html>
    <head>

    <title>有序列表</title>
    </head>
    <body>
    <ul type="circle">
      <li>流年過往，歲月靜好 </li>
      <li>煙雨江南，無你何歡 </li>
      <li>仰望穹蒼，且聽風吟 </li>
      <li>花滿樹，此時春風意 </li>
    </ul>
    <ul type="disc">
      <li>流年過往，歲月靜好 </li>
      <li>煙雨江南，無你何歡 </li>
      <li>仰望穹蒼，且聽風吟 </li>
      <li>花滿樹，此時春風意 </li>
    </ul>
    <ul type="square">
      <li>流年過往，歲月靜好 </li>
      <li>煙雨江南，無你何歡 </li>
      <li>仰望穹蒼，且聽風吟 </li>
      <li>花滿樹，此時春風意 </li>
    </ul>
    </body>
    </html>

效果如圖3-10所示。

圖3-10

3．定義列表

定義型列表一般用于對列表項目進行簡短說明，具體格式如下。

    <dl>
    <dt></dt>
    <dd></dd>
    </dl>

定義列表在HTML中的標簽是<dl>，列表項的標簽是<dt>和<dd>。<dt>標簽所包含的列表項目標志一個定義術語，<dd>標簽包含的列表項目是對定義術語的定義說明。

例如以下代碼。

    <dl>
        <dt>2012/2/28</dt>
              <dd>時光走失在那年夏天</dd>
        <dt>2012/2/26</dt>
              <dd>年華里最美好的信仰</dd>
    </dl>

效果如圖3-11所示。

圖3-11

3.2.7 表格標記

表格的主要用途是顯示數據，它是進行信息管理的有效手段。通常表格由三部分組成，即行、列和單元格。使用表格會用到3個標簽，即<table>、<tr>和<td>。<table>表示表格對象，<tr>表示表格中的行，<td>表示單元格，<td>必須包含在<tr>標簽內。具體格式如下。

    <table>
     <tr><td>表項目1</td>……<td>表項目n</td></tr>
    ……
     <tr><td>表項目1</td>……<td>表項目n</td></tr>
    </table>

表格的屬性設置如寬度、邊框等包含在<table>標記內，如果要在頁面中創建一個3行、3列，寬度為400，邊框為1的表格。其代碼如下。

    <table width="400" border="1">
        <tr>
        <td>語文</td>
        <td>英語</td>
        <td>數學</td>
      </tr>
      <tr>
        <td>數學</td>
        <td>英語</td>
        <td>語文</td>
      </tr>
      <tr>
        <td>英語</td>
        <td>語文</td>
        <td>數學</td>
      </tr>
      </table>

效果如果3-12所示。

圖3-12

<table>、<tr>和<td>三者是組成表格最基本的標簽，另外還有一些其他標簽可用于控制表格如<caption>和<th>等。

1．<caption>

<caption>標簽用于定義表格標題。它可以為表格提供一個簡短說明。把要說明的文本插入<caption>標簽內，<caption>標簽必須包含在<table>標簽內，可以在任何位置。顯示的時候表格標題顯示在表格的上方中央。

2．<th>

<th>標簽用于設定表格中某一表頭的屬性，適當標出表格中行或列的頭可以讓表格更有意義。在表格中，往往把表頭部分用粗體表示，也可以直接使用<th>取代<td>建立表格的標題行。

例如，制作一個成績表表格，代碼如下。

    <html>
    <head>
    <title>表格標記</title>
    </head>
    <body>
    <table width="400" border="1">
    <caption>成績表</caption>
      <tr>
        <td>&nbsp;</td>
        <td>語文</td>
        <td>數學</td>
        <td>英語</td>
        <td>物理</td>
        <td>化學</td>
      </tr>
      <tr>
        <th>丁一</th>
        <td>90</td>
        <td>98</td>
        <td>95</td>
        <td>90</td>
        <td>89</td>
      </tr>
      <tr>
          <th>張三</th>
        <td>96</td>
        <td>90</td>
        <td>85</td>
        <td>99</td>
        <td>100</td>
      </tr>
      </table>

效果如圖3-13所示。

圖3-13

3.2.8 表單標記

表單在網絡中的應用范圍非常廣泛，可以實現很多功能，如網站登錄、賬戶注冊等。表單是網頁上的一個特定區域，這個區域是由一對<form>標記定義的。<form>標記聲明表單，定義了采集數據的范圍，也就是<form></form>里面包含的數據將被提交到服務器。表單的元素很多，包括常用的輸入框、文本框、單選按鈕、復選框和按鈕等。大多的表單元素都由input標記定義，表單的構造方法則由type屬性聲明。但下拉菜單和多行文本框這兩個表單元素除外。常用的表單元素有下面8種。

1．文本框

文本框可接受任何類型的文本的輸入，如圖3-14所示。文本框的標記為<input>，其type屬性為text。