游小福3.0无限充值版

書名： Dreamweaver CS6網(wǎng)頁設(shè)計(jì)與制作教程
作者名：孟帙穎王寶龍劉靜主編
本章字?jǐn)?shù)： 3558字
更新時(shí)間： 2020-05-07 11:29:11

2.4　主體標(biāo)記之間的常用標(biāo)記

2.4.1　文字與段落標(biāo)記

1．標(biāo)題標(biāo)記

<H1>　 </H1>:正文的第一級標(biāo)題標(biāo)記。此外，還有第二、三、四、五、六級標(biāo)題標(biāo)記，分別為<H2>　 </H2>、<H3>　 </H3>、<H4>　 </H4>、<H5>　 </H5>、<H6>　 </H6>。級別越高，文字越小。

六級標(biāo)題的實(shí)例代碼如下，它們在瀏覽器中的顯示效果如圖2-6所示。

<html>
      　<head>
      　　<title>標(biāo)題標(biāo)記</title>
      　</head>
<body>
      　　<！--下面是標(biāo)題標(biāo)記對-->
      　　<h1>標(biāo)題h1</h1>
      　　<h2>標(biāo)題h2</h2>
      　　<h3>標(biāo)題h3</h3>
      　　<h4>標(biāo)題h4</h4>
      　　<h5>標(biāo)題h5</h5>
      　　<h6>標(biāo)題h6</h6>
      </body>
      </html>

圖　2-6

Hn 可以有對齊屬性，ALIGN=#，“#”表示Left（標(biāo)題居左）、Center（標(biāo)題居中）和Right（標(biāo)題居右）。例如：

<h2 align=center>標(biāo)題2</h2>

2．段落標(biāo)記

<p>　 </p>:

說明：p是英文單詞“Paragraph”(段落)的縮寫。<p>標(biāo)記符用來劃分段落，不同的段落之間會(huì)自動(dòng)換行并有一定的間距。使用p標(biāo)記符時(shí)，可以有多種屬性，比較常用的是Align=#, “#”，可以是Left、Center或Right,其含義分別為：左對齊、居中或右對齊。

<pre>　 </pre>

說明：pre標(biāo)記符是預(yù)格式化標(biāo)記符。瀏覽器按照編輯文檔時(shí)<pre>和</pre>標(biāo)記符之間字符的位置，將內(nèi)容毫無變動(dòng)地顯示出來。換句話說，在html文檔中寫的時(shí)候是什么樣，在瀏覽器中顯示的就是什么樣。

3．換行符標(biāo)記

<br> 換行符標(biāo)記，可插入一個(gè)簡單的換行符。<br> 標(biāo)簽是空標(biāo)簽（意味著它沒有結(jié)束標(biāo)簽，因此這是錯(cuò)誤的：<br></br>）。請注意，<br> 標(biāo)簽只是簡單地開始新的一行，而當(dāng)瀏覽器遇到 <p> 標(biāo)簽時(shí)，通常會(huì)在相鄰的段落之間插入一些垂直的間距。

4．字體標(biāo)記

<font>　 </font>:字體標(biāo)記，用于規(guī)定文本的字體、字體尺寸、字體顏色。屬性有face（字體）、size（大小）、color（顏色）。

（1）字體大小：HTML文件可以有7種字號(hào)，1號(hào)最小，7號(hào)最大，默認(rèn)字號(hào)為3，可以用（FONT　SIZE=字號(hào)）設(shè)置默認(rèn)字號(hào)。設(shè)置文本的字號(hào)有兩種方法：一種設(shè)置絕對字號(hào)，（FONT SIZE=字號(hào)）；另一種是設(shè)置文本的相對字號(hào)，（FONT SIZE=±N）。使用第二種方法時(shí)，“+”號(hào)表示字體變大，“?”表示字體變小。

（2）字體顏色：字體的顏色用（FONT color=#）進(jìn)行設(shè)置，#可以是6位十六制數(shù)，分別指定紅、綠、藍(lán)的值，也可以使用16種標(biāo)準(zhǔn)顏色。

例如，設(shè)置“字體大小和顏色”網(wǎng)頁的代碼如下：

<HTML>
<HEAD>
<TITLE>字體大小和顏色</TITLE>
</HEAD>
<BODY>
<FONT SIZE=5 COLOR=#FF0000>字體大小和顏色</FONT>字體大小和顏色<BR>
<FONT SIZE=2 COLOR=#0000FF>字體大小和顏色</FONT>字體大小和顏色<BR>
<BLINK>閃爍的文本</BLINK>
</BODY>
</HTML>

網(wǎng)頁顯示效果如圖2-7所示。

圖　2-7

5．字體風(fēng)格

字體風(fēng)格分為物理風(fēng)格和邏輯風(fēng)格兩種。物理風(fēng)格用來指定字體，主要有<B>黑體、<I>斜體、<U>下劃線、<TT>打字機(jī)體等，邏輯風(fēng)格主要有<EM>強(qiáng)調(diào)、<STRONG>特別強(qiáng)調(diào)等。如表2-1所示。“字體風(fēng)格”網(wǎng)頁設(shè)置代碼如下，顯示效果如圖2-8所示。

表2-1　文本風(fēng)格修飾標(biāo)記

25a

圖　2-8

<html>
<head>
<title>各種字體風(fēng)格</title>
</head>
<body>
<B>各種字體風(fēng)格</B>　 各種字體風(fēng)格<BR>
<I>各種字體風(fēng)格</I>　 各種字體風(fēng)格<BR>
<U>各種字體風(fēng)格</U>　各種字體風(fēng)格<BR>
<TT>各種字體風(fēng)格</TT> 各種字體風(fēng)格<BR>
</body>
</html>

6．添加注釋

由于站點(diǎn)需要經(jīng)常更新，而且制作時(shí)往往是幾個(gè)人合作，所以創(chuàng)建的頁面必須要易于維護(hù)，而添加注釋是增強(qiáng)文件可讀性的重要手段。HTML中的注釋是由開始標(biāo)記符<!—和結(jié)束標(biāo)記符-->組成的。這兩個(gè)標(biāo)記符中間的內(nèi)容就是注釋的內(nèi)容，它們不會(huì)在瀏覽器中顯示。該標(biāo)記可以添加在HTML代碼的任何位置。下面是一個(gè)使用注釋的例子，源代碼如下：

<html>
<head>
<title>添加注釋，但注釋不會(huì)被顯示</title>
</head>
<body>
<!--注釋：這是一次添加注釋的測試，本內(nèi)容將不會(huì)在頁面中顯示-->
愉快的網(wǎng)頁學(xué)習(xí)
</body>
</html>

添加注釋的網(wǎng)頁顯示效果如圖2-9所示。

圖　2-9

2.4.2　列表標(biāo)記

列表分為項(xiàng)目列表和編號(hào)列表，在什么情況下用到這兩個(gè)列表呢？讀者在門戶網(wǎng)站上瀏覽新聞時(shí)，在網(wǎng)站的新聞列表中，新聞標(biāo)題前會(huì)出現(xiàn)一個(gè)小圓點(diǎn)，而有的是有序號(hào)的數(shù)字，前者表示的是項(xiàng)目列表，后者表示的是編號(hào)列表。學(xué)習(xí)列表的表示，通過代碼可以表現(xiàn)出列表是編號(hào)列表還是項(xiàng)目列表。

1．項(xiàng)目列表

所謂項(xiàng)目列表是指在列表中沒有順序可言，表里的每項(xiàng)都是相同的。項(xiàng)目列表的語法分兩部分，格式如下：

<!--下面一行表示項(xiàng)目列表-->
<ul>
  　　　<li>表項(xiàng)一</li>
  　　　<li>表項(xiàng)二</li>
  　　　<li>表項(xiàng)三</li>
</ul>

分析上面代碼，決定項(xiàng)目的是<ul>，而<li>只是里面的一列表項(xiàng)。如果想列出更多的表項(xiàng)，那么就在<ul></ul>里加表項(xiàng)<li></li>即可。

項(xiàng)目列表用法舉例如下：

<html>
<head>
<title>項(xiàng)目列表</title>
</head>
<body>
<ul>
<li>HTML+CSS完全自學(xué)手冊
<li>HTML+CSS完全自學(xué)手冊
<li>HTML+CSS完全自學(xué)手冊
<li>HTML+CSS完全自學(xué)手冊
</ul>
</body>
</html>

在項(xiàng)目列表符中間加了4行帶列表項(xiàng)的文字，默認(rèn)狀態(tài)下的項(xiàng)目列表顯示的效果在文本前用圓點(diǎn)表示，即在每項(xiàng)前面顯示一個(gè)小圓點(diǎn)。網(wǎng)頁顯示的效果如圖2-10所示。

圖　2-10

2．編號(hào)列表

與編號(hào)列表對應(yīng)的是有序列表，表項(xiàng)里不用設(shè)置就可以自動(dòng)按順序排列，初學(xué)者乍一看很神奇，現(xiàn)在來揭開其神秘面紗。編號(hào)列表用<ol></ol>表示有順序，里面表項(xiàng)符與項(xiàng)目列表一樣的，只代表一個(gè)表項(xiàng)而已，在多個(gè)表項(xiàng)中，系統(tǒng)自動(dòng)按順序排列，語法代碼如下：

<!--下面一行表示編號(hào)列表-->
<ol>
      　<li>表項(xiàng)一</li>
      　<li>表項(xiàng)二</li>
      　<li>表項(xiàng)三</li>
</ol>

與項(xiàng)目列表相差只是在<ol>上。下面示例的內(nèi)容與項(xiàng)目列表是一樣的（表項(xiàng)都是一樣），不同的是用<ol></ol>標(biāo)記對取代了<ul></ul>標(biāo)記對。

編號(hào)列表用法。

<html>
<head>
<title>編號(hào)列表</title>
</head>
<body>
<ol>
<li>HTML+CSS完全自學(xué)手冊</li>
<li>HTML+CSS完全自學(xué)手冊</li>
<li>HTML+CSS完全自學(xué)手冊</li>
<li>HTML+CSS完全自學(xué)手冊</li>
</ol>
</body>
</html>

與項(xiàng)目列表顯示效果不同的是，編號(hào)列表在表項(xiàng)前用數(shù)字序號(hào)表示，如圖2-11所示。

圖　2-11

提示

項(xiàng)目列表是無序列表，編號(hào)列表則是有序列表。項(xiàng)目與編號(hào)只相差一個(gè)字母，但是有明顯的不同。在編號(hào)列表或項(xiàng)目列表中還可以用其他編號(hào)或符號(hào)取代數(shù)字或圓點(diǎn)，“<ol type=#>? </ol>”中#可以有A、a、I、i、1等；<ul type=#>?</ul>中#可以有circle（圓圈）square（正方形）disc（圓點(diǎn)）等。

2.4.3　圖像標(biāo)記

<IMG />：它是圖像標(biāo)記。用來加載圖像與GIF動(dòng)畫。在網(wǎng)頁中加載GIF動(dòng)畫的方法與加載圖像的方法一樣。GIF動(dòng)畫文件的擴(kuò)展名也是.gif，文件格式是GIF89A格式。制作GIF動(dòng)畫的軟件有很多，例如Fireworks和Ulead GIF Animator 5.0等。

SRC：它是依附于其他標(biāo)記的一個(gè)屬性，依附于<IMG />標(biāo)記時(shí)，用來導(dǎo)入圖像與GIF動(dòng)畫。其格式如下：

<IMG SRC="圖像文件的目錄與文件名" />

提示

屬性除了src外，還有width（寬）、height（高）、alt（替代文本）等。

設(shè)置背景平鋪圖像：使用<BODY>標(biāo)記中的BACKGROUND屬性，可設(shè)置網(wǎng)頁的平鋪背景圖像，其格式如下：

<BODY　BACKGROUND="圖像文件名或URL">

2.4.4　超鏈接標(biāo)記

1．在同一個(gè)網(wǎng)頁中建立鏈接的HTML標(biāo)記

在同一個(gè)網(wǎng)頁文件中建立鏈接，需要做以下工作。

（1）在文件的前面需要列出鏈接的標(biāo)題文字，它們相當(dāng)于文章的目錄。同時(shí)將這些文字與相應(yīng)的錨記名稱（即定位名）建立鏈接。所謂“錨記名稱”是指網(wǎng)頁中能被鏈接到的一個(gè)特定位置。建立鏈接時(shí)，要在錨記名稱前加一個(gè)“#”符號(hào)，其格式如下:

<A HREF="#錨記名稱">標(biāo)題名字</A>

（2）為被鏈接的內(nèi)容起一個(gè)名字，該名字叫錨記名稱，錨記名稱的定義要放在相應(yīng)標(biāo)題對應(yīng)的內(nèi)容前面。其格式如下。

<A NAME="錨記名稱"></A>

2．建立電子郵件鏈接

如果將HREF屬性值指定為“MAILTO:電子郵件地址”，就可以獲得電子郵件鏈接的效果。例如，使用下面的HTML代碼可以設(shè)置電子郵件的超鏈接。

<A HREF="MAILTO:shenda@yahoo.com">郵箱地址：shenda@yahoo.com </A>

當(dāng)瀏覽網(wǎng)頁的用戶單擊了指向電子郵件的超級鏈接后，系統(tǒng)將自動(dòng)啟動(dòng)郵件客戶程序（對于安裝了Windows 98/2000以上操作系統(tǒng)的計(jì)算機(jī)，默認(rèn)時(shí)啟動(dòng)Outlook Express），并將指定的郵件地址填寫到“收件人”欄中，用戶可以編輯并發(fā)送該郵件。

如果是第一次啟動(dòng)Outlook Express，會(huì)要求進(jìn)行軟件設(shè)置。

3．鏈接到其他頁面中的錨點(diǎn)

從一個(gè)文件鏈接到另外一個(gè)文件，與同一個(gè)文件中的鏈接的格式有所不同。那么，能不能使用一個(gè)命令，鏈接到其他文件的指定位置呢？

在網(wǎng)頁中建立文字鏈接的HTML代碼是：<A HREF=“被鏈接的文件名或URL”文字</A>。只要將“被鏈接的文件名或URL”替換為“要鏈接的文件名或URL加#加錨記名稱>”即可。例如，<A HREF=“HTMLABC.htm#TT”>天壇</A>標(biāo)記，即可建立一個(gè)到HTMLABC.htm網(wǎng)頁文檔中的“天壇”錨點(diǎn)的鏈接。

2.4.5　表格標(biāo)記

表格標(biāo)記在網(wǎng)頁中可以表現(xiàn)出Word中的表格效果，即在Word中要表現(xiàn)的表格效果可以在網(wǎng)頁中顯示，就需要HTML中的表格標(biāo)記。表格標(biāo)記不僅僅用于表現(xiàn)表格中的效果，還可以用表格來給網(wǎng)頁布局，布局中的表格是不需要表格中的邊框的，故需要對表格進(jìn)行設(shè)置。

表格標(biāo)記是HTML常用的標(biāo)簽，代表在網(wǎng)頁中插入一張表格。表格標(biāo)記是用table標(biāo)簽對表示的標(biāo)簽對，其語法形式如下：

<!--設(shè)置表格標(biāo)記 -->
<table></table>

表格常常是有行和列的，那么，如何在表格內(nèi)表示行和列呢？這又要另外的代碼：<tr>標(biāo)簽對表示表行，每出現(xiàn)一個(gè)<tr></tr>代表表格的一行；<th>標(biāo)簽對表示表頭，表頭是在表格上顯示下面列的；<td>標(biāo)簽對表示表元，表元就是在表格中顯示的每一方格(即單元格)。下列代碼說明表格的基本語法。

<html>
<head>
<title>表格的基本語法</title>
</head>
<body>
      　　　<!--設(shè)置表格和邊框-->
      　　　<table border=1>
      　　　　　 <!--設(shè)置表格中的表頭 -->
      　　　　　 <tr>
      　　　　　　　　<!--設(shè)置表格中的表項(xiàng) -->
      　　　　　　　　<th>表頭一</th>
      　　　　　　　　<th>表頭二</th>
      　　　　　</tr>
      　　　　　<tr>
      　　　　　　　　<td>表元一</td>
      　　　　　　　　<td>表元二</td>
      　　　　　</tr>
      　　 </table>
</body>
</html>

上面代碼在<table>標(biāo)簽對中包括兩個(gè)行表示符：<tr>標(biāo)簽對，表示兩行。在第一個(gè)行表示符中包括了表頭符，在第二個(gè)行表示符中包括了表元表示符。為了顯示表格效果，在表格屬性中加入了border邊框，效果如圖2-12所示。

圖　2-12

提示

在<table>中的<tr>、<th>、<td>是常用的，<th>可以省略，三者都在<table></table>中，不能交叉。它們各自的屬性說明如表2-2～表2-4所示。

表2-2　表格<table>的屬性

30a

表2-3　行<tr>的屬性

30b

表2-4　單元格<td>的屬性

30c

2.4.6　多媒體標(biāo)記

1．添加背景音樂

使用<BGSOUND>標(biāo)記可以在網(wǎng)頁中插入背景音樂。<BGSOUND>標(biāo)記可以放在<HTML>與</HTML>標(biāo)記內(nèi)的任何地方。引導(dǎo)音樂文件的屬性是SRC，其格式如下：

<BGSOUND SRC ="文件目錄與文件名或URL">

2．在網(wǎng)頁中插入Flash動(dòng)畫及其他視頻

在網(wǎng)頁中直接包含多媒體對象最常用的標(biāo)記是<EMBED>標(biāo)記。

（1）<EMBED>標(biāo)記：使用<EMBED>標(biāo)記，不僅可以在網(wǎng)頁中插入Flash動(dòng)畫，還可以使用下載并顯示由插件支持的其他多媒體應(yīng)用程序。使用<EMBED>標(biāo)記可以在網(wǎng)頁中插入Flash對象，同添加背景音樂的方法一樣，<EMBED>標(biāo)記可以放在<HTML>與</HTML>標(biāo)記內(nèi)的任何地方。引導(dǎo)Flash動(dòng)畫文件的屬性是SRC，格式如下：

<EMBED SRC ="文件目錄與文件名或URL">

當(dāng)瀏覽器遇到<EMBED>標(biāo)記時(shí)，會(huì)加載其中指定的文件并確定它的MIME類型。MIME信息告知瀏覽器正在下載的文件類型，然后瀏覽器查找與該MIME類型一致的插件。如果有就使用；如果沒有則會(huì)顯示一條錯(cuò)誤信息，并且提示用戶下載該插件。

（2）<EMBED>標(biāo)記還可以使網(wǎng)頁中包含JavaApple、視頻和音頻等多媒體及其他文件。當(dāng)瀏覽器遇到<EMBED>標(biāo)記時(shí)，會(huì)加載相應(yīng)的文件，并根據(jù)該標(biāo)記包含屬性的值來顯示它。<EMBED>標(biāo)記的屬性見表2-5。

表2-5　<EMBED>標(biāo)記的屬性

31a

3．滾動(dòng)標(biāo)記

<marquee>…</marquee>滾動(dòng)標(biāo)記又稱為跑馬燈標(biāo)記。<marquee>標(biāo)記的屬性見表2-6。

表2-6　<marquee>標(biāo)記的屬性

31b

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

Dreamweaver CS6網(wǎng)頁設(shè)計(jì)與制作教程

2.4 主體標(biāo)記之間的常用標(biāo)記

2.4.1 文字與段落標(biāo)記

2.4.2 列表標(biāo)記

2.4.3 圖像標(biāo)記

2.4.4 超鏈接標(biāo)記

2.4.5 表格標(biāo)記

2.4.6 多媒體標(biāo)記