第2章文本格式_第1頁(yè)
第2章文本格式_第2頁(yè)
第2章文本格式_第3頁(yè)
第2章文本格式_第4頁(yè)
第2章文本格式_第5頁(yè)
已閱讀5頁(yè)，還剩53頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

第2章文本格式2.1文本分段2.2

控制文本的顯示效果

2.3列表格式2.1文本分段2.1.1段落標(biāo)記符P和換行標(biāo)記符BR以下HTML代碼顯示了P和BR標(biāo)記符的用法，效果如圖2-1所示。<HTML><HEAD><TITLE><P>與<BR>的用法</TITLE></HEAD><BODY><P>第一段<P>第二段，用<BR>標(biāo)記符控制斷行<BR>仍然為第二段，但此行已經(jīng)斷開(kāi)<P>第三段<P>第四段，多個(gè)<P>標(biāo)記符并沒(méi)有起到產(chǎn)生多個(gè)空行的效果<P><P><P><P>但多個(gè)<BR>標(biāo)記符可以產(chǎn)生多個(gè)空行效果<BR><BR><BR><BR><P>此為最后一段</BODY></HTML>圖2-1P與BR的用法2.1.2水平線標(biāo)記符HRsize屬性width屬性noshade屬性color屬性以下HTML代碼顯示了如何用HR標(biāo)記符的各種屬性控制水平線的顯示，效果如圖2-2所示。<HTML><HEAD><TITLE>水平線效果</TITLE></HEAD><BODY>以下是默認(rèn)水平線：<HR>以下是粗為5像素的水平線：<HRsize="5">以下是長(zhǎng)度為100像素的水平線：<HRwidth="100">以下是長(zhǎng)度為屏幕寬度50%的水平線：<HRwidth="50%">以下是粗為5像素的實(shí)心水平線：<HRsize="5"noshade>以下是紅色的水平線：<HRcolor="red"></BODY></HTML>圖2-2水平線效果2.1.3標(biāo)題標(biāo)記符Hn以下HTML代碼顯示了1至6級(jí)標(biāo)題的效果，如圖2-3所示。<HTML><HEAD><TITLE>標(biāo)題效果</TITLE></HEAD><BODY><H1>此為一級(jí)標(biāo)題</H1><H2>此為二級(jí)標(biāo)題</H2><H3>此為三級(jí)標(biāo)題</H3><H4>此為四級(jí)標(biāo)題</H4><H5>此為五級(jí)標(biāo)題</H5><H6>此為六級(jí)標(biāo)題</H6><P>此為正常文本</P></BODY></HTML>圖2-3標(biāo)題效果可以看出，瀏覽器在解釋標(biāo)題標(biāo)記符時(shí)，會(huì)自動(dòng)改變文本的大小并將字體設(shè)為黑體，同時(shí)自動(dòng)將內(nèi)容設(shè)置為一個(gè)段落。2.1.4段落對(duì)齊

align屬性align屬性可應(yīng)用于多種標(biāo)記符，例如前面介紹的P、Hn、HR等。以下HTML代碼顯示了align屬性的效果，如圖2-4所示。<HTML><HEAD><TITLE>使用align屬性</TITLE></HEAD><BODY><P>本行為默認(rèn)對(duì)齊的段落，相當(dāng)于align="left"<Palign="center">本行為居中對(duì)齊的段落<Palign="right">本行為右對(duì)齊的段落<H1align="center">本行為居中對(duì)齊的一級(jí)標(biāo)題</H1>以下為左對(duì)齊的水平線：<HRalign="left"width="50%"></BODY></HTML>圖2-4使用align屬性注意：對(duì)于不同的標(biāo)記符，默認(rèn)的align屬性值不同。P和Hn標(biāo)記符的默認(rèn)align屬性值是left，而HR標(biāo)記符的默認(rèn)align屬性值是center。DIV標(biāo)記符與CENTER標(biāo)記符如果需要將多個(gè)段落使用相同的對(duì)齊方式，那么可以不必在每個(gè)段落中設(shè)置align屬性，而是使用DIV標(biāo)記符將所有段落包括起來(lái)，然后在DIV標(biāo)記符中設(shè)置align屬性。例如，以下HTML代碼將多個(gè)段落的內(nèi)容都設(shè)置為居中對(duì)齊，效果如圖2-5所示。<HTML><HEAD><TITLE>使用DIV標(biāo)記符</TITLE></HEAD><BODY><DIValign="center"><H1>浣溪沙</H1><H4>晏殊</H4><HRwidth="400">

<P>一曲新詞酒一杯，</P><P>去年天氣舊池臺(tái)，</P><P>夕陽(yáng)西下幾時(shí)回？</P><P>無(wú)可奈何花落去，</P><P>似曾相識(shí)燕歸來(lái)，</P><P>小園香徑獨(dú)徘徊。</P></DIV></BODY></HTML>圖2-5使用DIV標(biāo)記符格式的嵌套（1）如果所設(shè)置的格式是相容的，則取格式疊加的效果。例如，如果為一段文字同時(shí)設(shè)置了粗體和斜體格式，則該段文字將以粗斜體顯示。（2）如果所設(shè)置的格式是沖突的，則取最近樣式符的修飾效果。例如，如果同時(shí)在不同標(biāo)記符中設(shè)置了段落對(duì)齊方式，那么相應(yīng)內(nèi)容的對(duì)齊方式以最近的標(biāo)記符為準(zhǔn)。例如，以下HTML代碼可以說(shuō)明瀏覽器如何解釋格式嵌套，效果如圖2-6所示。<HTML><HEAD><TITLE>格式嵌套示例</TITLE></HEAD><BODY><DIValign="center">本行使用<DIValign="center">對(duì)齊<Palign="right">本行的對(duì)齊方式被更改了</P></DIV><P>本行文字顯示了如何同時(shí)應(yīng)用<B><I>粗體和斜體</I></B></P><!--B標(biāo)記符和I標(biāo)記符將在2.2.2節(jié)中介紹--></BODY></HTML>圖2-6格式嵌套示例2.2

控制文本的顯示效果2.2.1字體控制標(biāo)記符FONT

size屬性以下HTML代碼顯示了size屬性的用法，效果如圖2-7所示。<HTML><HEAD><TITLE>FONT標(biāo)記符的size屬性示例</TITLE></HEAD><BODY><P>正常文本<P><FONTsize="7">這些是大字體的文本</FONT><P><FONTsize="1">這些是小字體的文本</FONT><P><FONTsize="+2">這些文字的字體比正常文本大2號(hào)</FONT><P><FONTsize="-2">這些文字的字體比正常文本小2號(hào)</FONT><P><FONTsize="+2">混</FONT>合<FONTsize="-1">字</FONT><FONTsize="+3">體</FONT>大小</BODY></HTML>圖2-7FONT標(biāo)記符的size屬性用法示例color屬性face屬性常用的一些中英文字體的示例如圖2-8所示，相應(yīng)的HTML代碼如下：<HTML><HEAD><TITLE>字體示例</TITLE></HEAD><BODY><DIValign="center"><P>以下是常用中文字體：</P><FONTface="宋體">宋體</FONT><BR><FONTface="楷體_GB2312">楷體</FONT><BR><FONTface="黑體">黑體</FONT><BR><FONTface="隸書(shū)">隸書(shū)</FONT><BR><FONTface="幼圓">幼圓</FONT><P>以下是常用英文字體：</P><FONTface="TimesNewRoman">TimesNewRoman</FONT><BR><FONTface="Arial">Arial</FONT><BR><FONTface="ArialBlack">ArialBlack</FONT><BR><FONTface="CourtierNew">CourtierNew</FONT><BR>

<FONTface="ComicSansMS">ComicSansMS</FONT><BR><FONTface="Verdana">Verdana</FONT><BR></DIV></BODY></HTML>圖2-8常用字體示例2.2.2物理字符樣式所謂物理字符樣式，是指標(biāo)記符本身就說(shuō)明了所修飾文字的效果的標(biāo)記符。例如，B標(biāo)記符表示粗體，SUB標(biāo)記符表示下標(biāo)——因?yàn)锽是Bold（粗體）這個(gè)單詞的首字母，而SUB是subscript（下標(biāo)）這個(gè)單詞的前三個(gè)字母。常用的物理字符樣式標(biāo)記符有：黑體標(biāo)記B、斜體標(biāo)記I、下劃線標(biāo)記U等，如表2-1所示。表2-1常用物理字符樣式標(biāo)記符功能標(biāo)記符功能<B></B>粗體<STRIKE></STRIKE>刪除線<BIG></BIG>大字體<SUB></SUB>下標(biāo)<I></I>斜體<SUP></SUP>上標(biāo)<S></S>刪除線<TT></TT>固定寬度字體<SMALL></SMALL>小字體<U></U>下劃線使用這些物理字符樣式時(shí)，只需將設(shè)置格式的字符括在標(biāo)記符之間即可。例如，以下HTML代碼在瀏覽器中的顯示如圖2-9所示。圖2-9物理字符樣式效果<HTML><HEAD><TITLE>物理字符樣式效果示例</TITLE></HEAD><BODY><P><B>此處為粗體顯示文本</B><P><BIG>此處為大字體文本</BIG><P><SMALL>此處為小字體文本</SMALL><P><I>此處為斜體文本</I><P><TT>此處為等寬字體文本</TT><P><U>此處為下劃線文本</U><P><S>此處為使用<S>標(biāo)記設(shè)置的刪除線文本</S><P><STRIKE>此處為使用<STRIKE>標(biāo)記設(shè)置的刪除線文本</STRIKE><P>此處為上標(biāo)示例：x<SUP>2</SUP>+y<SUP>2</SUP>=R<SUP>2</SUP><P>此處為下標(biāo)示例：H<SUB>2</SUB>SO<SUB>4</SUB></BODY></HTML>2.1.1邏輯字符樣式所謂邏輯字符樣式是指標(biāo)記符本身表示了所修飾效果的邏輯含義。例如，ADDRESS標(biāo)記符本身的邏輯意義為“地址”，但并沒(méi)有說(shuō)明具體的物理效果。常用的邏輯字符樣式如表2-2所示。

表2-2常用邏輯字符樣式標(biāo)記功能<ADDRESS></ADDRESS>用于指定網(wǎng)頁(yè)創(chuàng)建者或維護(hù)者的信息，通常顯示為斜體<CITE></CITE>用于表示文本屬于引用，通常顯示為斜體<CODE></CODE>用于表示程序代碼，通常顯示為固定寬度字體<DFN></DFN>用于表示定義了的術(shù)語(yǔ)，通常顯示為黑體或斜體<EM></EM>用于強(qiáng)調(diào)某些字詞，通常顯示為斜體<KBD></KBD>用于表示用戶的鍵盤(pán)輸入，通常顯示為固定寬度字體<SAMP></SAMP>用于表示文本樣本，通常顯示為固定寬度字體<STRONG></STRONG>用于特別強(qiáng)調(diào)某些字詞，通常顯示為粗體<VAR></VAR>用于表示變量，通常是斜體使用這些邏輯樣式時(shí)，也只需將設(shè)置格式的字符括在標(biāo)記符之間即可。例如，以下HTML代碼在瀏覽器中的顯示如圖2-10所示。圖2-10邏輯字符樣式<HTML><HEAD><TITLE>HTML邏輯字符樣式</TITLE></HEAD><BODY><P><EM>此為強(qiáng)調(diào)文本</EM><P><STRONG>此為特別強(qiáng)調(diào)文本</STRONG><P><CITE>此為引用文本</CITE><P><DFN>此為一個(gè)術(shù)語(yǔ)定義</DFN><P><CODE>代碼格式：Thisisanexampleofcodeformatting</CODE><P><VAR>變量格式：Thisisanexampleofvariableformatting</VAR><P><SAMP>樣本字符格式：Thisisasampleofliteralcharacters</SAMP><P><KBD>鍵盤(pán)輸入格式：Thisisanexampleofkeyboardinputformat</KBD><P><ADDRESS>地址格式：Thisisanaddress</ADDRESS></BODY></HTML>2.3.1有序列表創(chuàng)建有序列表創(chuàng)建有序列表需要使用有序列表標(biāo)記符OL和列表項(xiàng)標(biāo)記符LI，其中LI標(biāo)記符的結(jié)束標(biāo)記符可以省略，基本語(yǔ)法如下：<OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL>OL標(biāo)記符具有兩個(gè)常用的屬性：type和start，分別用來(lái)設(shè)置數(shù)字序列樣式和數(shù)字序列的起始值。start屬性的值可以是任意整數(shù)，type屬性的值如表2-3所示：2.3

列表格式表2-3有序列表的type屬性值值含義1阿拉伯?dāng)?shù)字：1、2、3等，此選項(xiàng)為默認(rèn)值A(chǔ)大寫(xiě)字母：A、B、C等a小寫(xiě)字母：a、b、c等I大寫(xiě)羅馬數(shù)字：I、II、III、IV等i小寫(xiě)羅馬數(shù)字：i、ii、iii、iv等當(dāng)位于OL標(biāo)記符內(nèi)時(shí)，LI標(biāo)記符具有兩個(gè)常用的屬性：type和value。type屬性用于設(shè)置數(shù)字樣式，取值與OL的type屬性相同；value屬性用于指定一個(gè)新的數(shù)字序列起始值，以獲得非連續(xù)性的數(shù)字序列。例如，以下HTML代碼顯示了如何創(chuàng)建不同的有序列表，效果如圖2-11所示。圖2-11有序列表示例

<HTML><HEAD><TITLE>有序列表示例</TITLE></HEAD><BODY>用大寫(xiě)羅馬字母表示的有序列表：<OLtype="I"><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL>起始數(shù)字為3的有序列表：<OLstart="3"><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL>編號(hào)不連續(xù)的有序列表<OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LIvalue="5">列表項(xiàng)3</OL>變換了數(shù)字樣式的有序列表<OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LItype="A">列表項(xiàng)3</OL></BODY></HTML>有序列表的嵌套

以下HTML代碼即顯示了一個(gè)嵌套的有序列表，效果如圖2-12所示。<HTML><HEAD><TITLE>嵌套的有序列表</TITLE></HEAD><BODY><H2>嵌套的有序列表</H2><OLtype="A"><LI>列表項(xiàng)1<OL><LI>子列表項(xiàng)1<LI>子列表項(xiàng)2<LI>子列表項(xiàng)3</OL><LI>列表項(xiàng)2<LI>列表項(xiàng)3</OL></BODY></HTML>圖2-12嵌套有序列表2.3.2無(wú)序列表創(chuàng)建無(wú)序列表以下HTML代碼顯示了如何創(chuàng)建無(wú)序列表，效果如圖2-13所示。<HTML><HEAD><TITLE>無(wú)序列表示例</TITLE></HEAD><BODY>默認(rèn)無(wú)序列表：<UL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</UL>使用方塊作為列表項(xiàng)標(biāo)記的無(wú)序列表：<ULtype="square"><LI>列表項(xiàng)1<LI>列表項(xiàng)2<LI>列表項(xiàng)3</UL></BODY></HTML>圖2-13無(wú)序列表示例混合嵌套列表

有序列表和無(wú)序列表也可互相嵌套，如以下HTML代碼所示（效果如圖2-14所示）：<OL><LI>列表項(xiàng)1<LI>列表項(xiàng)2<UL><LI>子列表項(xiàng)1<LI>子列表項(xiàng)2</UL><LI>列表項(xiàng)3</OL>圖2-14混合嵌套列表

2.4創(chuàng)建超鏈接一、超級(jí)鏈接定義：就是當(dāng)鼠標(biāo)單擊一些文字、圖片或其他網(wǎng)頁(yè)元素時(shí)，瀏覽器就會(huì)根據(jù)指示載入一個(gè)新的頁(yè)面或調(diào)轉(zhuǎn)到頁(yè)面的其他位置。2.4創(chuàng)建超鏈接二、相對(duì)地址與絕對(duì)地址1.什么是URL，統(tǒng)一資源定位器，資源的地址三部分組成：協(xié)議代碼；裝有所需文件的計(jì)算機(jī)地址；具體的文件地址和文件名協(xié)議表明應(yīng)使用何種方式獲取所需信息常用的有：超文本傳輸協(xié)議；文件傳輸協(xié)議；電子郵件協(xié)議；遠(yuǎn)程登陸協(xié)議等/cartoon.htm2.4創(chuàng)建超鏈接2.絕對(duì)URL和相對(duì)URL絕對(duì)URL(完整地址)例：http///public/html/example.htm協(xié)議計(jì)算機(jī)域名包含路徑的文件名相對(duì)URL相對(duì)于當(dāng)前頁(yè)面的地址，包含從當(dāng)前頁(yè)面指向目的頁(yè)面位置的路徑基于根目錄的路徑三、頁(yè)面鏈接是指指向其他網(wǎng)頁(yè)的超鏈接<A>

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論