mg不朽情缘手机版苹果版

書名： Dreamweaver CS4網頁制作入門、進階與提高
作者名：卓越科技編著
本章字數： 1998字
更新時間： 2019-01-01 06:27:14

1.2 HTML語言基礎

HTML（HyperText Markup Language）即超文本標記語言或超文本鏈接標示語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言。HTML的普遍應用就是使用超文本的技術，通過單擊鼠標從一個主題跳轉到另一個主題，從一個頁面跳轉到另一個頁面，實現與世界各地主機文件的連接。

1.2.1 HTML標簽

HTML文檔包含文檔內容和HTML標簽兩部分。HTML標簽是用尖括號括起來的英文單詞或字符串，用于定義文檔的結構格式和超鏈接信息。

HTML標簽在HTML語言中大多數是成對出現的，由一個開始標簽和一個結束標簽組成。但除以上情況外，還有一些例外，那就是單獨存在的標簽。因此，HTML標簽有單標簽和雙標簽兩種。

1. 單標簽

單標簽的語法結構如下：

        <標簽>

單標簽和雙標簽的開始標簽內可以包含一些屬性，其語法結構如下：

        <標簽  屬性1=屬性值1  屬性2=屬性值2>

在制作網頁時，常用的單標簽有<br>和<hr>，其中<br>表示換行，<hr>表示插入一條水平線。

2. 雙標簽

雙標簽的語法結構如下：

        <標簽>內容</標簽>

一般情況下，所有的屬性都必須寫在開始標簽的尖括號中，不同的屬性間用空格分隔，各屬性之間無先后次序，屬性值也可省略。屬性值通常要加雙引號，但如果屬性值由字母、數字組成，雙引號可省略。例如：<hr size=10 width="60%" align=right>。

1.2.2 HTML文檔

HTML文檔一般使用3對HTML標簽構成。其格式如下：

        <html>
        <head>頭部信息</head>
        <body>正文信息</body>
        </html>

各個標簽的含義如下：

<html></html>標簽（不區分大小寫）在文檔的最外層，文檔中的所有文本和HTML標簽都包含在其中，它表示該文檔是以超文本標記語言HTML編寫的。事實上，現在常用的Web瀏覽器都可以自動識別HTML文檔，并不要求有<html>標簽，也不對該標簽進行任何操作，但是為了使HTML文檔能夠適應不斷變化的Web瀏覽器，還是應該養成不省略這對標簽的良好習慣。

<head></head>是HTML文檔的頭部標簽，在瀏覽器窗口中，頭部信息是不被顯示在正文中的，在此標簽中可以插入其他標簽，用以說明文件的標題和整個文件的一些公共屬性。如果不需要頭部信息則可以省略此標簽。<title>和</title>是能嵌套在頭部標簽中的，標簽之間的文本是文檔標題，它被顯示在瀏覽器窗口的標題欄中。

<body></body>標簽一般不省略，標簽之間的文本是正文，是在瀏覽器窗口中要顯示的頁面內容。

上面的這幾對標簽在文檔中都是唯一的，<head>標簽和<body>標簽都是嵌套在<html>標簽中的。

下面是一個簡單的HTML文檔，代碼內容如下，效果如圖1.18所示。

        <html>
          <head>
            <title> 新年新希望 </title>
          </head>
          <body>
            <b> 央視2010春節聯歡晚會 </b><br>
          </body>
        </html>

圖1.18 簡單HTML文檔的效果圖

1.2.3 HTML常用標簽

使用HTML語言編寫HTML文檔，就是用HTML標簽來定義HTML文檔的文本、圖像、超鏈接、表格和顯示格式等內容，因此HTML常用標簽包括文本標簽、圖像標簽和表格標簽。

1. 文本標簽

在HTML語言中，與文本信息相關的標簽比較多，常用的是以下3個標簽。

標題標簽

標題標簽<hn></hn>用于設置網頁中的標題文字，被設置的文字將以黑體或粗體顯示在網頁中。標題標簽的格式是：<hn align=參數>標題內容</hn>。

<hn>標簽是成對出現的，共分為六級，在<h1></h1>之間的文字就是第一級標題，是最大最粗的標題。在<h6></h6>之間的文字是最后一級標題，是最小最細的標題文字。align屬性用于設置標題的對齊方式，其參數值為left（左）、right（右）或center（中間）。<hn>標簽本身具有換行的功能，標題總是從新的一行開始。

下面是一個標題標簽的例子，HTML文本如下，效果如圖1.19所示。

        <html>
          <head>
          <title>標題示例</title>
          </head>
          <body>
            正常文本
            <h1 align="center">一級標題</h1>
            <h2 align="left">二級標題</h2>
            <h3 align="right">三級標題</h3>
            <h4>四級標題</h4>
            <h5>五級標題</h5>
            <h6>六級標題</h6>
          </body>
        </html>

圖1.19 標題示例

字體控制標簽

字體控制標簽<font></font>用于控制文字的字體、大小和顏色，控制方式是利用標簽的屬性進行設置。字體控制標簽的格式是：<font face=值1 size=值2 color=值3>文字</font>。

<font>標簽的屬性如表1.4所示。

表1.4 <font>標簽屬性

下面是一個字體控制標簽的例子，HTML文本如下，效果如圖1.20所示。

        <html>
          <head>

              <title>字體控制</title>
            </head>
            <body>
              <font> 默認字體 </font>
              <p>
            <font size="+2" color="green" face="華文彩云">春天來了，我們要去踏青。</font>
            <p><font size="6" color="blue" face="華文行楷">樹梢上有了一抹綠色，小草也破土而
        出了，春天的腳步近了。</font>
            <p><font size="5" face="隸書" color="red"> 我們決定要去游覽八達嶺長城了，希望出
        游那天是一個好天氣。</font>
            <p><font size="6" face="楷體_GB2312" color="blue">想要出游的朋友快快聯系我們吧！
        </font>
            </body>
            </html>

圖1.20 字體控制效果

換行標簽

換行標簽<br>是一個單標簽，也稱空標簽，不包含任何內容。在HTML文件中的任何位置只要使用了<br>標簽，當文件顯示在瀏覽器中時，該標簽之后的內容將顯示在下一行。

下面是一個換行標簽的例子，HTML文本如下，效果如圖1.21所示。

圖1.21 換行標簽效果

        <html>
          <head>
          <title>換行標簽</title>
          </head>
          <body>
          <font size="+2" color="green" face="隸書">恭賀新春</font>
          <font size="6" color="red" face="華文行楷">恭喜發財</font><br>
          <font size="6" face="楷體_GB2312" color="blue"> 高高興興上班去</font><br>
          <font size="6" face="楷體_GB2312" color="blue">平平安安回家來</font>
          </body>
        </html>

2. 圖像標簽

在HTML語言中，使用<img>標簽可以將圖像文件插入到Web網頁中。

下面是一個圖像標簽的例子，HTML文本如下，效果如圖1.22所示。

圖1.22 圖像標簽效果

        <html>
          <head>
          <title>圖像標簽</title>
          </head>
          <body>
        <div align="center">
          <img src="images/岳山.jpg" alt="岳山" align="right" border="1" width=218
    height=273>
          <h1>望岳</h1>
          <h3>杜甫</h3>
          <p>岱宗夫如何，齊魯青未了。</p>
          <p>造化鐘神秀，陰陽割昏曉。</p>
          <p>蕩胸生層云，決眥入歸鳥。</p>
          <p>會當凌絕頂，一覽眾山小。</p>
        </div>
              </body>
        </html>

<img>標簽的相關屬性如表1.5所示。

表1.5 圖像標簽的相關屬性

3. 表格標簽

表格在網頁制作的過程中主要用來排版，以便使頁面變得更加美觀。在HTML文檔中，創建表格需要使用表格標簽<table></table>、表格標題標簽<caption></caption>、表格行標簽<tr></tr>，以及表格單元格標簽<th></th>和<td></td>。

下面是一個表格標簽的例子，HTML文本如下，效果如圖1.23所示。

圖1.23 表格標簽效果

        <html>
          <head>
          <title>表格標簽</title>
          </head>
          <body>
          <table border="2">
          <caption>學生信息表</caption>
          <tr>
            <th>學號</th><th>姓名</th><th>年齡</th><th>學院</th><th>班級</th><th>入學成績</th>
            </tr>
          <tr>
            <td>031501</td><td>李云</td><td>18</td><td>化學與材料科學</td><td>生物制藥
            </td><td>520</td>
          </tr>
          <tr>
            <td>031502</td><td>楊靜</td><td>20</td><td>化學與材料科學</td><td>有機化學
            </td><td>512</td>
          </tr>
          <tr>
            <td>031503</td><td>周一品</td><td>19</td><td>藝術設計</td><td>音樂
            </td><td>502</td>
          </tr>
          <tr>
            <td>031504</td><td>韓嘯天</td><td>18</td><td>藝術設計</td><td>舞蹈
            </td><td>523</td>
          </tr>
          <tr>
            <td>031505</td><td>張涵</td><td>20</td><td>藝術設計</td><td>美術
            </td><td>495</td>
          </tr>
          </table>
          </body>
        </html>

提示

在書寫HTML語言的時候不區分大小寫，可以根據自己的習慣統一為大寫或小寫，例如，<HR>可以寫成<hr>，也可以寫成<Hr>或<hR>，但是建議養成一個良好的書寫習慣。

官术网_书友最值得收藏!

Dreamweaver CS4網頁制作入門、進階與提高

1.2 HTML語言基礎

1.2.1 HTML標簽

1.2.2 HTML文檔

1.2.3 HTML常用標簽