文字版面的編輯

發布時間:2007年02月07日      浏覽次數:2381 次
3-1 換行标簽<br>
換行标簽是個單标簽,也叫空标簽,不包含任和内容,在html文件中(zhōng)的任何位置隻要使用了<br>标簽,當文件顯示在浏覽器中(zhōng)時,該标簽之後的内容将顯示下(xià)一(yī)行。
請看下(xià)面的例子:3-1html
<html>
<head>
<title>無換行示例</title>
</head>
<body>
無換行标記:登鹳雀樓 白(bái)日依山盡,黃河入海流。欲窮千裏目,更上一(yī)層樓。
<br>有換行标記:<br>登鹳雀樓<br>白(bái)日依山盡,<br>黃河入海流。<br>欲窮千裏目,<br>更上一(yī)層樓。
</body>
</html>
3-2 換段落标簽<p>及屬性:
由<p>标簽所标識的文字,代表同一(yī)個段落的文字。不同段落間的間距等于連續加了兩個換行符,也就是要隔一(yī)行空白(bái)行,用以區别文字的不同段落。它可以單獨使用,也可以成對使用。單獨使用時,下(xià)一(yī)個<P>的開(kāi)始就意味着上一(yī)個<P>的結束。良好的習慣是成對使用。
格式:
<P>
<P ALIGN= 參數>
其中(zhōng),ALIGN是<p>标簽的屬性,屬性有三個參數left,center,right.這三個參數設置段落文字的左,中(zhōng),右位置的對齊方式.
實例:3-2html
<html>
<head>
<title>測試分(fēn)段控制标簽</title>
</head>
<body>
<p>花兒什麽也沒有。它們隻有凋謝在風中(zhōng)的輕微、凄楚而又(yòu)無奈的吟怨,
就像那受到了緻命傷害的秋雁,悲哀無助地發出一(yī)聲聲垂死的鳴叫。</p>
<p align="right">或許,這便是花兒那短暫一(yī)生(shēng)最凄涼、最傷感的歸宿。</p>
<p align=center>而美麗苦短的花期</p>
<p align="left">卻是那最後悲傷的秋風挽歌中(zhōng)的瞬間插曲。</p>
</body>
</html>
3-3 原樣顯示文字标簽<pre>
要保留原始文字排版的格式,就可以通過<pre>标簽來實現,方法是把制作好的文字排版内容前後分(fēn)别加上始标簽<pre>和尾标簽</pre>.
實例:3-3html
<HTML>
<HEAD>
<TITLE>原樣顯示文字标簽</TITLE>
</HEAD>
<BODY>
<PRE>
白(bái)日依山盡,
黃河入海流。
欲窮千裏目,
更上一(yī)層樓。
</PRE>
</BODY>
</HTML>
3-4 居中(zhōng)對齊标簽<center>
文本在頁面中(zhōng)使用<center>标簽進行居中(zhōng)顯示,<center>是成對标簽,在需要居中(zhōng)的内容部分(fēn)開(kāi)頭處加<center>,結尾處加</center>
實例:3-4html
<HTML>
<HEAD>
<TITLE>居中(zhōng)對齊标簽</TITLE>
</HEAD>
<BODY>
<CENTER>
《送孟浩然之廣陵》<p>
故人西辭黃鶴樓,
煙花三月下(xià)揚州。
孤帆遠影碧山盡,
惟見長江天際流。
</CENTER>
</BODY>
</HTML>
3-5 引文标簽 (縮排标簽)<blockquote>
<blockquote>标簽可以用來建立一(yī)個引文,他特别适合較長文本的引用,引文顯示時将會自動右移,左邊空出幾個格,加以區别。
實例:3-5html
<HTML>
<HEAD>
<TITLE>引文标簽</TITLE>
</HEAD>
<BODY>
春 <BR>
<PRE>
<BLOCKQUOTE>
盼望着,盼望着,東風來了,春天腳步近了。<br>
一(yī)切都像剛睡醒的樣子,欣欣然張開(kāi)了眼。山朗潤起來了,水漲起來了,太陽的臉紅起來了。
小(xiǎo)草偷偷地從土裏鑽出來,嫩嫩的,綠綠的。園子裏,田野裏,瞧去(qù)一(yī)大(dà)片一(yī)大(dà)片滿是的。坐着,躺着,打兩個滾,踢幾腳球,賽幾趟跑,捉幾
回迷藏。風輕悄悄的,草軟綿綿的。
</BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE>
桃樹(shù)、杏樹(shù)、梨樹(shù),你不讓我(wǒ)(wǒ),我(wǒ)(wǒ)不讓你,都開(kāi)滿了花趕趟兒。紅的像火(huǒ),粉的像霞,白(bái)的像雪。花裏帶着甜味兒;閉了眼,村(cūn)上仿佛已
經滿是桃兒、杏兒、梨兒。花下(xià)成千成百的蜜蜂嗡嗡地鬧着,大(dà)小(xiǎo)的蝴蝶飛來飛去(qù)。野花遍地是:雜(zá)樣兒,有名字的,沒名字的,散在草
叢裏像眼睛,像星星,還眨呀眨的。
“吹面不寒楊柳風”,不錯的,像母親的手撫摸着你。風裏帶來些新翻的泥土的氣息,混着青草味兒,還有各種花的香,都在微微潤濕的
空氣裏醞釀。鳥兒将巢安在繁花嫩葉當中(zhōng),高興起來了,呼朋引伴地賣弄清脆的喉嚨,唱(chàng)出宛轉的曲子,跟輕風流水應和着。牛背上牧童
的短笛,這時候也成天嘹亮地響着。
雨是最尋常的,一(yī)下(xià)就是三兩天。可别惱。看,像牛毛,像花針,像細絲,密密地斜織着,人家屋頂上全籠着一(yī)層薄煙。樹(shù)葉兒卻綠得發
亮。小(xiǎo)草兒也青得逼你的眼。傍晚時候,上燈了,一(yī)點點黃暈的光,烘托出一(yī)片安靜而和平的夜。在鄉下(xià),小(xiǎo)路上,石橋邊,有撐着傘慢(màn)
慢(màn)走着的人;地裏還有工(gōng)作的農民,披着蓑戴着笠。他們的房屋,稀稀疏疏的,在雨裏靜默着。
</BLOCKQUOTE></BLOCKQUOTE>
<BLOCKQUOTE><BLOCKQUOTE><BLOCKQUOTE>
天上風筝漸漸多了,地上孩子也多了。城裏鄉下(xià),家家戶戶,老老小(xiǎo)小(xiǎo),也都趕趟兒似的,一(yī)個個都出來了。舒活舒活筋骨,抖擻
抖擻精神,各做各的一(yī)份事兒去(qù)。
“一(yī)年之計在于春”,剛起頭兒,有的是工(gōng)夫,有的是希望。
春天像剛落地的娃娃,從頭到腳都是新的,它生(shēng)長着。
春天像小(xiǎo)姑娘,花枝招展的,笑着,走着。
春天像健壯的青年,有鐵一(yī)般的胳膊和腰腳,他領着我(wǒ)(wǒ)們上前去(qù)。
</BLOCKQUOTE></BLOCKQUOTE></BLOCKQUOTE>
</PRE>
</BODY>
</HTML>
3-6水平分(fēn)隔線标簽<hr>
<hr>标簽是單獨使用的标簽,是水平線标簽,用于段落與段落之間的分(fēn)隔,使文檔結構清晰明了,使文字的編排更整齊。通過設置<hr>标簽的屬性值,可以控制水平分(fēn)隔線的樣式。
<hr>标簽的屬性
屬性
參數
功能
單位
默認值

size

設置水平分(fēn)隔線的粗細
pixel(像素)
2

width

設置水平分(fēn)隔線的寬度
pixel(像素)、%
100%

align
left enter right
設置水平分(fēn)隔線的對齊方式

center

color

設置水平分(fēn)隔線的顔色

black

noshade

取消水平分(fēn)隔線的3d陰影



實例:3-6html
<HTML>
<HEAD>
<TITLE>測試水平分(fēn)隔線标簽</TITLE>
</HEAD>
<BODY>
<CENTER>
春 曉
<HR >
春眠不覺曉,
<hr size="6">
處處聞啼鳥。
<hr width="40%">
夜來風雨聲,
<hr width="60" align="left">
花落知(zhī)多少?
<hr size="6" width="30%" align="center" noshade color=red >
</CENTER>
</BODY>
</HTML>
3-7署名标簽<address>
<address>署名标簽一(yī)般用于說明這個網頁是由誰或是由哪個公司編寫的,以及其它相關信息。在<address></address>标簽之間的文字顯示效果是斜體(tǐ)字。
實例:3-7html
<HTML>
<HEAD>
<TITLE>署名标簽</TITLE>
</HEAD>
<BODY>
<CENTER>
樂 遊 原
<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
<PRE>
向晚意不适,
驅車(chē)登古原。
夕陽無限好,
隻是近黃昏。
</PRE>
<HR WIDTH="50%" SIZE="5" COLOR="FFCC00" ALIGN=CENTER>
<ADDRESS>
[唐] 李商(shāng)隐
</ADDRESS>
</BODY>
</HTML>
3-8特殊字符
在HTML文檔中(zhōng),有些字符沒辦法直接顯示出來,例如?. 使用特殊字符可以将鍵盤上沒有的字符表達出來,而有些HTML文檔的特殊字符在鍵盤上雖然可以得到,但浏覽器在解析HTML文當時會報錯,例如"<"等,爲防止代碼混淆,必須用一(yī)些代碼來表示它們。
HTML幾種常見特殊字符及其代碼表
特殊或專用字符
字符代碼 特殊或專用字符
字符代碼
< < © ©
> > × ×
& & ® ®
" " 空格  
實例:3-8html
<HTML>
<HEAD>
<TITLE>特殊字符</TITLE>
</HEAD>
<BODY>
<CENTER>
<賦得古原草送别>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<PRE>
離(lí)離(lí)原上草,
一(yī)歲一(yī)枯榮。
野火(huǒ)燒不盡,
春風吹又(yòu)生(shēng)。
</PRE>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<ADDRESS>
白(bái)居易 ©
</ADDRESS>
</BODY>
</HTML>
3-9注釋标簽
在HTML文檔中(zhōng)可以加入相關的注釋标記,便于查找和記憶有關的文件内容和标識,這些注釋内容并不會在浏覽器中(zhōng)顯示出來。
注釋标簽的格式有如下(xià):
<!--注釋的内容-->

實例:3-9html
<HTML>
<HEAD>
<TITLE>注釋标簽</TITLE>
</HEAD>
<BODY>
<!--body标簽是主體(tǐ)内容-->
<CENTER>
<賦得古原草送别>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<PRE>
<! pre代表原樣顯示排版格式>
離(lí)離(lí)原上草,
一(yī)歲一(yī)枯榮。
野火(huǒ)燒不盡,
春風吹又(yòu)生(shēng)。
</PRE>
<HR WIDTH="49%" SIZE="5" ALIGN=CENTER NOSHADE>
<ADDRESS>
白(bái)居易 ©
</ADDRESS>
</BODY>
</HTML>
3-10字體(tǐ)屬性
3-10-1标題文字标簽<hn>
<hn>标簽用于設置網頁中(zhōng)的标題文字,被設置的文字将以黑體(tǐ)或粗體(tǐ)的方式顯示在網頁中(zhōng)。
标題标簽的格式:<hn align=參數〉标題内容</hn>
說明:<hn>标簽是成對出現的,<hn>标簽共分(fēn)爲六級,在<h1>...</h1>之間的文字就是第一(yī)級标題,是最大(dà)最粗的标題;<h6>...</h6>之間的文字是最後一(yī)級,是最小(xiǎo)最細的标題文字。align屬性用于設置标題的對齊方式,其參數爲 left(左), enter(中(zhōng)), right (右)。<hn>标簽本身具有換行的作用,标題總是從新的一(yī)行開(kāi)始。
實例 3-10-1html
<HTML>
<HEAD>
<TITLE>設定各級标題</TITLE>
</HEAD>
<BODY>
<H1 ALIGN="CENTER">一(yī)級标題。</H1>
<H2>二級标題。</H2>
<H3>三級标題。</H3>
<H4>四級标題。</H4>
<H5 ALIGN="RIGHT">五級标題。</H5>
<H6 ALIGN="LEFT">六級标題。</H6>
</BODY>
</HTML>
3-10-2文字格式控制标簽<FONT>
<FONT>标簽用于控制文字的字體(tǐ),大(dà)小(xiǎo)和顔色。控制方式是利用屬性設置得以實現的。
FONT标簽的屬性 屬性
使用功能
默認值
face
設置文字使用的字體(tǐ)
宋體(tǐ)
size
設置文字的大(dà)小(xiǎo)
3
color
設置文字的顔色
黑色
格式:<font face=值1 size=值2 color=值3〉文字 </font>
說明:如果用戶的系統中(zhōng)沒有face屬性所指的字體(tǐ),則将使用默認字體(tǐ)。size屬性的取值爲1~7。也可以用"+"或"-"來設定字号的相對值。color屬性的值爲:rgb顔色"#nnnnnn"或顔色的名稱
實例:3-10-2html
<html>
<head>
<title>控制文字的格式</title>
</head>
<body>
<center>
<font face=黑體(tǐ) size=6 color="red" >盼望着,盼望着,東風來了,春天腳步近了。</font> <p>
<font face=隸書(shū) size=+3 color="green">
一(yī)切都像剛睡醒的樣子,欣欣然張開(kāi)了眼。<p>山朗潤起來了,水漲起來了,太陽的臉紅起來了。
</font><p>
<font face=楷體(tǐ) size=4 color="#ff00ff">
小(xiǎo)草偷偷地從土裏鑽出來,嫩嫩的,綠綠的。<p>園子裏,田野裏,瞧去(qù)一(yī)大(dà)片一(yī)大(dà)片滿是的。<p>坐着,躺着,打兩個滾,踢幾腳球,賽幾趟跑,捉幾回迷藏。<p>風輕悄悄的,草軟綿綿的。
</font>
</center>
</body>
</html>
3-10-3特定文字樣式标簽
在有關文字的顯示中(zhōng),常常會使用一(yī)些特殊的字形或字體(tǐ)來強調、突出、區别以達到提示的效果。在html中(zhōng)用于這種功能的标簽可以分(fēn)爲兩類,物(wù)理類型和邏輯類型。
1、物(wù)理類型
(1) 粗體(tǐ)标簽<b>
放(fàng)在<b>與</b>标簽之間的文字将以粗體(tǐ)方式顯示。
(2) 斜體(tǐ)标簽<i>
放(fàng)在<i>與</i>标簽之間的文字将以斜體(tǐ)方式顯示。
(3) 下(xià)劃線标簽<u>
放(fàng)在<u>與</u>标簽之間的文字将以下(xià)劃線方式顯示。
實例3-10-31html
<html>
<head>
<title>字體(tǐ)的物(wù)理類型</title>
</head>
<body>
<center>
<font color="#FF0000" size="+2"><b>這些文字是粗體(tǐ)的</b></font><br><br>
<i>這些文字是斜體(tǐ)的</i> <br><br>
<u>這些文字帶有下(xià)劃線</u>
</center>
</body>
</html>
2、邏輯類型
邏輯類型是使用一(yī)些标簽來改變字體(tǐ)的形态和式樣,以便産生(shēng)一(yī)些浏覽者習慣的或約定的顯示效果,常用的邏輯類型标簽有八種,放(fàng)在标簽之間的文字受其控制。下(xià)面請看常用邏輯标簽的實例
實例3-10-32htrml
<html>
<head>
<title>字體(tǐ)的邏輯類型</title>
</head>
<body>
<pre>
em标簽:<em>用于強調的文本,一(yī)般顯示爲斜體(tǐ)字</em>
strong标簽:<strong>用于特别強調的文本,顯示爲粗體(tǐ)字</strong>
cite标簽:<cite>用于引證和舉例,通常是斜體(tǐ)字</cite>
code标簽:<code>用來指出這是一(yī)組代碼</code>
small标簽:<small>規定文本以小(xiǎo)号字顯示</small>
big标簽:<big>規定文本以大(dà)号字顯示</big>
samp标簽:<samp>顯示一(yī)段計算機常用的字體(tǐ),即寬度相等的字體(tǐ)</samp>
kbd标簽:<kbd>由用戶輸入文本,通常顯示爲較粗的寬體(tǐ)字</kbd>
var标簽:<var>用來表示變量,通常顯示爲斜體(tǐ)字</var>
dfn标簽:<dfn>表示一(yī)個定義或說明,通常顯示爲斜體(tǐ)字</dfn>
sup标簽:12<sup>2</sup>=144
sub标簽:硫酸亞鐵的分(fēn)子式是Fe<sub>2</sub>SO<sub>4</sub>
</pre>
</body>
</html>
文章來源:http://longka.flasher123.com/zy/index/html3-1.html
免責聲明:本站相關技術文章信息部分(fēn)來自網絡,目的主要是傳播更多信息,如果您認爲本站的某些信息侵犯了您的版權,請與我(wǒ)(wǒ)們聯系,我(wǒ)(wǒ)們會即時妥善的處理,謝謝合作!