HTML網(wǎng)頁的段落排版和換行
互聯(lián)網(wǎng) 發(fā)布時間:2009-04-02 20:55:32 作者:佚名
我要評論

網(wǎng)頁的外觀是否美觀,很大程度上取決于其排版。在頁面中出現(xiàn)大段的文字,通常采用分段進(jìn)行規(guī)劃,對換行也有極其嚴(yán)格的劃分。本節(jié)從段落的細(xì)節(jié)設(shè)置入手,使讀者學(xué)習(xí)后能利用標(biāo)簽自如地處理大段的文字。
HTML網(wǎng)頁中的文字和段落
網(wǎng)頁的外觀是否美觀,很大程度上取決于其排版。在頁面中出現(xiàn)大段的文字,通常采用分段進(jìn)行規(guī)劃,對換行也有極其嚴(yán)格的劃分。本節(jié)從段落的細(xì)節(jié)設(shè)置入手,使讀者學(xué)習(xí)后能利用標(biāo)簽自如地處理大段的文字。
HTML網(wǎng)頁中的文字和段落
通過上一章的學(xué)習(xí),讀者在網(wǎng)頁整體表現(xiàn)設(shè)置方面有了比較扎實的基礎(chǔ)。但是讀者不僅是希望在網(wǎng)頁上表現(xiàn)文字,更希望對網(wǎng)頁上的文字進(jìn)行排版、修飾。本章將學(xué)習(xí)文字的簡單排版、修飾、滾動文字以及超級鏈接。超級鏈接在網(wǎng)站開發(fā)中無處不在,是網(wǎng)頁中的重點。
學(xué)習(xí)本章時,在D:\web\目錄下創(chuàng)建一個目錄命名為chapter3,把上一章的文件移動到D:\web\chapter3,做一個歸類。本章繼續(xù)在D:\web\目錄下創(chuàng)建示例文件,這樣方便用IIS測試示例文件。
— 說明:以后章節(jié)都作類似處理,不再重復(fù)說明。如第4章文件歸類到D:\web\ chapter4。
4.1 段落排版和換行
網(wǎng)頁的外觀是否美觀,很大程度上取決于其排版。在頁面中出現(xiàn)大段的文字,通常采用分段進(jìn)行規(guī)劃,對換行也有極其嚴(yán)格的劃分。本節(jié)從段落的細(xì)節(jié)設(shè)置入手,使讀者學(xué)習(xí)后能利用標(biāo)簽自如地處理大段的文字。
4.1.1 給大段文字進(jìn)行分段
簡單地對文字分段常用<p></p>標(biāo)簽,即段落的開始用<p>,段落的結(jié)束用</p>標(biāo)簽。某些網(wǎng)頁分段時省略了</p>,即作為單標(biāo)簽使用,因為下一段開始的<p>標(biāo)簽就意味上一段的結(jié)束。
— 注意:筆者不推薦把<p>當(dāng)作單標(biāo)簽使用,這樣代碼不規(guī)范,易出錯。
在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為p.htm,編寫代碼如代碼4.1所示。
代碼4.1 分段的設(shè)置:p.htm
<html>
<head>
<title>分段的設(shè)置</title>
</head>
<body>
<p>電影雙周刊:《無間道三:終極無間》評論專題</p>
<p>落幕后剛剛開始</p>
<p>2002年歲末,神話開始。2003年秋冬,走向高潮和終極?!稛o間道》即自承取乎佛家理念,光明與黑暗、生存與消亡、存在與虛無糾結(jié)于混然一體,愕然分崩離析,亦是豐富兼統(tǒng)一的過程。有因就有果,有孽就有緣,境與相的妙處在于言詮的限度,不可道破,又不可沉默,相互依托。心音始終在,拷問自我,拷問時空。這是最好的時代,這是最壞的時代,幾乎每個時代的人都在這么說。然而《維摩詰經(jīng)·觀眾生品第七》中說:無住則無本。從身體的言行開始,經(jīng)過辯難言說的層面,初步達(dá)到存有自視境界,最后不過是歸結(jié)為生存的態(tài)度。在我看來,劉健明、陳永仁、韓琛、黃志誠、倪永孝、陸啟昌、楊錦榮、沈澄等人其實是宿命中的鏡像人物,都可以從對方身上看到自我,抗?fàn)帯⒈虐l(fā)、沉雄、揮灑,仿佛的劫數(shù)、扭曲的生命,于是乎“無間道”。</p>
<p>顧準(zhǔn)說從理想主義到經(jīng)驗主義,王小波說要警惕僭主和英雄,誰是英雄?他們從哪里來?他們來了又怎樣?我們這個時代還要不要英雄?我在編輯這期E論壇時,有一些欣慰,從文字中可以看出大家都在思考,畢竟我們不再是盲從的一代。在我看來,娛樂從來就不僅僅是娛樂本身,從一滴水、一朵花、一粒沙可以看到一個世界,從一場電影中我們想到的注定更多,理解定可變奏無窮。我們每個人就構(gòu)成了這個世界,無論這個世界是好是壞,我們都有份。我們每個人都有自己的生活,都有優(yōu)點都有缺點,這是我們共同進(jìn)步的基礎(chǔ)。</p>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/p.htm,瀏覽效果如圖4.1所示。

圖4.1 分段的設(shè)置
通過<p></p>標(biāo)簽的分段,大段的文字排版井井有條。
4.1.2 給文字加入空格
仔細(xì)觀察圖4.1,圖中的分段感覺有點別扭,因為每段開始沒有字符空格。
— 說明:按中文寫作習(xí)慣,段落的首行須空格2個中文字符。
前面章節(jié)學(xué)習(xí)過,在HTML代碼中直接用鍵盤敲擊空格鍵,是無法顯示在頁面上的。HTML使用“ ”表現(xiàn)1個空格字符(英文的空格字符)。由于1個中文字符占兩個英文字符的寬度,所以在段落的首行開頭加上4個“ ”字符,修改p.htm的代碼如代碼4.2所示。
代碼4.2 空格符的設(shè)置:p.htm
<html>
<head>
<title>分段的設(shè)置</title>
</head>
<body>
<p>電影雙周刊:《無間道三:終極無間》評論專題</p>
<p>落幕后剛剛開始</p>
<p> 2002年歲末,神話開始。2003年秋冬,走向高潮和終極。《無間道》即自承取乎佛家理念,光明與黑暗、生存與消亡、存在與虛無糾結(jié)于混然一體,愕然分崩離析,亦是豐富兼統(tǒng)一的過程。有因就有果,有孽就有緣,境與相的妙處在于言詮的限度,不可道破,又不可沉默,相互依托。心音始終在,拷問自我,拷問時空。這是最好的時代,這是最壞的時代,幾乎每個時代的人都在這么說。然而《維摩詰經(jīng)·觀眾生品第七》中說:無住則無本。從身體的言行開始,經(jīng)過辯難言說的層面,初步達(dá)到存有自視境界,最后不過是歸結(jié)為生存的態(tài)度。在我看來,劉健明、陳永仁、韓琛、黃志誠、倪永孝、陸啟昌、楊錦榮、沈澄等人其實是宿命中的鏡像人物,都可以從對方身上看到自我,抗?fàn)?、迸發(fā)、沉雄、揮灑,仿佛的劫數(shù)、扭曲的生命,于是乎“無間道”。</p>
<p> 顧準(zhǔn)說從理想主義到經(jīng)驗主義,王小波說要警惕僭主和英雄,誰是英雄?他們從哪里來?他們來了又怎樣?我們這個時代還要不要英雄?我在編輯這期E論壇時,有一些欣慰,從文字中可以看出大家都在思考,畢竟我們不再是盲從的一代。在我看來,娛樂從來就不僅僅是娛樂本身,從一滴水、一朵花、一粒沙可以看到一個世界,從一場電影中我們想到的注定更多,理解定可變奏無窮。我們每個人就構(gòu)成了這個世界,無論這個世界是好是壞,我們都有份。我們每個人都有自己的生活,都有優(yōu)點都有缺點,這是我們共同進(jìn)步的基礎(chǔ)。</p>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/p.htm,瀏覽效果如圖4.2所示。

圖4.2 空格符的設(shè)置
段落已經(jīng)初步成形了,空格已經(jīng)表現(xiàn)了出來。讀者可以在段落中任意加上空格符測試。
4.1.3 設(shè)置文字換行與不換行
圖4.1看上去已經(jīng)沒有問題了,當(dāng)文字到達(dá)瀏覽器的邊界后將自動換行。但是當(dāng)調(diào)整瀏覽器的寬度時,文字換行的位置也相應(yīng)發(fā)生變化,格式顯得相當(dāng)混亂。為了規(guī)范格式,讀者應(yīng)該在編寫代碼時在需要換行的位置用單標(biāo)簽<br />標(biāo)簽強(qiáng)制換行。反之,不需要換行的部分用雙標(biāo)簽<nobr></nobr>包含。修改p.htm代碼如代碼4.3所示。
代碼4.3 換行的控制:p.htm
<html>
<head>
<title>分段的設(shè)置</title>
</head>
<body>
<p>電影雙周刊:《無間道三:終極無間》評論專題</p>
<p>落幕后剛剛開始</p>
<p> 2002年歲末,神話開始。2003年秋冬,走向高潮和終極。<br /><nobr>《無間道》即自承取乎佛家理念,光明與黑暗、生存與消亡、存在與虛無糾結(jié)于混然一體,愕然分崩離析,亦是<br />豐富兼統(tǒng)一的過程。有因就有果,</nobr>有孽就有緣,境與相的妙處在于言詮的限度,不可道破,又不可沉默,相互依托。心音始終在,拷問自我,拷問時空。<nobr>這是最好的時代,這是最壞的時代,幾乎每個時代的人都在這么說。然而《維摩詰經(jīng)·觀眾生品第七》中說:無住則無本。</nobr>從身體的言行開始,經(jīng)過辯難言說的層面,初步達(dá)到存有自視境界,最后不過是歸結(jié)為生存的態(tài)度。在我看來,劉健明、陳永仁、韓琛、黃志誠、倪永孝、陸啟昌、楊錦榮、沈澄等人其實是宿命中的鏡像人物,都可以從對方身上看到自我,抗?fàn)?、迸發(fā)、沉雄、揮灑,仿佛的劫數(shù)、扭曲的生命,于是乎“無間道”。</p>
<p> 顧準(zhǔn)說從理想主義到經(jīng)驗主義,王小波說要警惕僭主和英雄,誰是英雄?他們從哪里來?他們來了又怎樣?我們這個時代還要不要英雄?我在編輯這期E論壇時,有一些欣慰,從文字中可以看出大家都在思考,畢竟我們不再是盲從的一代。在我看來,娛樂從來就不僅僅是娛樂本身,從一滴水、一朵花、一粒沙可以看到一個世界,從一場電影中我們想到的注定更多,理解定可變奏無窮。我們每個人就構(gòu)成了這個世界,無論這個世界是好是壞,我們都有份。我們每個人都有自己的生活,都有優(yōu)點都有缺點,這是我們共同進(jìn)步的基礎(chǔ)。</p>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/p.htm,瀏覽效果如圖4.3所示。

圖4.3 換行的控制
由本例可得,被<nobr></nobr>包含的部分不會自動換行,除非有<br />強(qiáng)制換行。
4.1.4 設(shè)置文字對齊方式
段落中的文字在某些時候需要有不同的對齊方式,默認(rèn)對齊方式是左對齊。<p>標(biāo)簽的對齊屬性為align,通過設(shè)置align為left、right或center值實現(xiàn)左對齊、右對齊和居中對齊。修改p.htm代碼如代碼4.4所示。
代碼4.4 對齊的控制:p.htm
<html>
<head>
<title>分段的設(shè)置</title>
</head>
<body>
<p>電影雙周刊:《無間道三:終極無間》評論專題</p>
<p>落幕后剛剛開始</p>
<p align="center"> 2002年歲末,神話開始。2003年秋冬,走向高潮和終極?!稛o間道》即自承取乎佛家理念,光明與黑暗、生存與消亡、存在與虛無糾結(jié)于混然一體,愕然分崩離析,亦是豐富兼統(tǒng)一的過程。有因就有果,有孽就有緣,境與相的妙處在于言詮的限度,不可道破,又不可沉默,相互依托。心音始終在,拷問自我,拷問時空。這是最好的時代,這是最壞的時代,幾乎每個時代的人都在這么說。然而《維摩詰經(jīng)·觀眾生品第七》中說:無住則無本。從身體的言行開始,經(jīng)過辯難言說的層面,初步達(dá)到存有自視境界,最后不過是歸結(jié)為生存的態(tài)度。在我看來,劉健明、陳永仁、韓琛、黃志誠、倪永孝、陸啟昌、楊錦榮、沈澄等人其實是宿命中的鏡像人物,都可以從對方身上看到自我,抗?fàn)?、迸發(fā)、沉雄、揮灑,仿佛的劫數(shù)、扭曲的生命,于是乎“無間道”。</p>
<p align="right"> 顧準(zhǔn)說從理想主義到經(jīng)驗主義,王小波說要警惕僭主和英雄,誰是英雄?他們從哪里來?他們來了又怎樣?我們這個時代還要不要英雄?我在編輯這期E論壇時,有一些欣慰,從文字中可以看出大家都在思考,畢竟我們不再是盲從的一代。在我看來,娛樂從來就不僅僅是娛樂本身,從一滴水、一朵花、一粒沙可以看到一個世界,從一場電影中我們想到的注定更多,理解定可變奏無窮。我們每個人就構(gòu)成了這個世界,無論這個世界是好是壞,我們都有份。我們每個人都有自己的生活,都有優(yōu)點都有缺點,這是我們共同進(jìn)步的基礎(chǔ)。</p>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/p.htm,瀏覽效果如圖4.4所示。

圖4.4 對齊的控制
4.1.5 添加水平分隔線
HTML提供了修飾段落的水平分隔線,在很多場合中可以輕松使用,不需要另外作圖。水平分隔線的標(biāo)簽是單標(biāo)簽<hr />,默認(rèn)情況下占一行。
在D:\web\目錄下創(chuàng)建網(wǎng)頁文件,命名為hr.htm,編寫代碼如代碼4.5所示。
代碼4.5 分隔線的設(shè)置:hr.htm
<html>
<head>
<title>分隔線的設(shè)置</title>
</head>
<body>
<p align="center">回顧樂壇粵語歌曲輝煌</p>
<hr />
<p> 究竟哪首歌是最早的粵語歌,還存在爭議。1973年,“筷子姊妹花”成員仙杜拉演唱了由顧嘉輝創(chuàng)作的電視劇《啼笑因緣》同名主題歌,此歌也是香港歌壇第一首粵語劇集主題歌。同年,初出茅廬的鄭少秋同樣在TVB劇集《煙雨蒙蒙》中出演并主唱同名主題歌。而1974年由許冠杰演唱的大熱電影《鬼馬雙星》同名主題歌則更是樂壇的重磅炸彈,成為第一首在英國BBC電臺播放的中文歌曲,在當(dāng)時名震一時,也最受大家對粵語歌起源的認(rèn)同。</p>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/hr.htm,瀏覽效果如圖4.5所示。
究竟哪首歌是最早的粵語歌,還存在爭議。1973年,“筷子姊妹花”成中仙杜拉演唱了上顧嘉輝創(chuàng)作的電視劇《啼笑因緣》同名主題歌,此歌也是香港歌壇第一首粵語劇集主題歌。同年,初了茅廬的鄭少秋同樣在TVB劇集《煙雨蒙蒙》中出演并主唱同名主題歌。而1974年由許冠杰演唱的大熱電影《鬼馬雙星》同名主題歌則更是樂壇的重磅炸彈,成為第一首在英國BBC電臺播放的中文歌曲,在當(dāng)時名震一時,也最受大家對粵語起源的認(rèn)同。

圖4.5 分隔線的設(shè)置
一個簡單的<hr />標(biāo)簽就可以實現(xiàn)分隔線,輕松地修飾了段落排版,使之更美觀。不過對于不同的應(yīng)用場合,<hr />默認(rèn)單一的線條樣式顯然不能滿足要求。<hr />標(biāo)簽的多種屬性解決了這個問題,常用的屬性有width、size、align、color和title。width即寬度設(shè)置,屬性值默認(rèn)單位為像素,也可以用百分比來表示分隔線所占空間的比例。size可以理解為分隔線的厚度或高度,屬性值默認(rèn)單位同寬度。align為對齊方式,類似于<p>的align。color即顏色,根據(jù)需要設(shè)置分隔線的不同顏色。title屬性使用不多,瀏覽者光標(biāo)懸停在分隔線上時出現(xiàn)屬性值的內(nèi)容提示。
— 說明:<hr />的默認(rèn)對齊方式是居中。HTML的寬度和高度屬性默認(rèn)單位為像素,一般無須標(biāo)識單位。不過style屬性中必須標(biāo)識單位。
<hr />還有一個屬性是noshade,當(dāng)分隔線沒有設(shè)置顏色,并且設(shè)置了一定的size時,分隔線看上去是立體下凹的,有陰影。如果使用了noshade屬性,分隔線將會呈現(xiàn)單色。修改hr.htm代碼如代碼4.6所示。
代碼4.6 分隔線的樣式設(shè)置:hr.htm
<html>
<head>
<title>分隔線的設(shè)置</title>
</head>
<body>
設(shè)置了300像素寬度并且右對齊的分隔線:<br />
<hr width="300" align="right" />
設(shè)置了50%寬度并且居中對齊的分隔線:<br />
<hr width="50%" align="left" />
設(shè)置了50%寬度、50像素的厚度并且沒有使用noshade的分隔線:<br />
<hr width="50%" size="50" />
設(shè)置了50像素的厚度并且使用noshade的分隔線:<br />
<hr size="50" noshade="noshade" />
設(shè)置了50像素的厚度并且設(shè)置了深紅色的分隔線:<br />
<hr size="50" color="770000"/>
設(shè)置了50像素的厚度、設(shè)置了淺藍(lán)色并且設(shè)置了“感謝你的到來!”提示的分隔線:<br />
<hr size="50" color="0000cc" title="感謝你的到來!"/>
</body>
</html>
在瀏覽器地址欄輸入http://localhost/hr.htm,瀏覽效果如圖4.6所示。

圖4.6 分隔線的樣式設(shè)置
相關(guān)文章
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標(biāo)簽及其相關(guān)標(biāo)簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細(xì)介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動的方法:通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點,感興2025-02-24
- 在 Web 開發(fā)中,文本的視覺效果是提升用戶體驗的重要因素之一,通過 CSS 技巧,我們可以創(chuàng)造出許多獨特的效果,例如文字鏤空效果,本文將帶你一步一步實現(xiàn)一個簡單的文字鏤空2024-11-17
Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼
在Html中,a標(biāo)簽?zāi)J(rèn)的超鏈接樣式是藍(lán)色字體配下劃線,這可能不滿足所有設(shè)計需求,如需去除這些默認(rèn)樣式,可以通過CSS來實現(xiàn),本文給大家介紹Html去除a標(biāo)簽的默認(rèn)樣式的操作代碼2024-09-25- 在HTML中,可以通過設(shè)置CSS的resize屬性為none,來禁止用戶手動拖動文本域(textarea)的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進(jìn)行測試以確保2024-09-25
如何通過HTML/CSS 實現(xiàn)各類進(jìn)度條的功能
本文詳細(xì)介紹了如何利用HTML和CSS實現(xiàn)多種風(fēng)格的進(jìn)度條,包括基礎(chǔ)的水平進(jìn)度條、環(huán)形進(jìn)度條以及球形進(jìn)度條等,還探討了如何通過動畫增強(qiáng)視覺效果,內(nèi)容涵蓋了使用HTML原生標(biāo)簽2024-09-19- Canvas 提供了一套強(qiáng)大的 2D 繪圖 API,適用于各種圖形繪制、圖像處理和動畫制作,可以幫助你創(chuàng)建復(fù)雜且高效的網(wǎng)頁圖形應(yīng)用,這篇文章主要介紹了HTML中Canvas關(guān)鍵知識點總結(jié)2024-06-03
html table+css實現(xiàn)可編輯表格的示例代碼
本文主要介紹了html table+css實現(xiàn)可編輯表格的示例代碼,主要使用HTML5的contenteditable屬性,文中通過示例代碼介紹的非常詳細(xì),需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)2024-03-06- 本文主要介紹了HTML中使用Flex布局實現(xiàn)雙行夾批效果,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)2024-02-22
- 在網(wǎng)站開發(fā)中,登錄頁面是必不可少的一部分,本文就來介紹一下HTML+CSS實現(xiàn)登錄切換,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需2024-02-02