版面風(fēng)格控制
發(fā)布時(shí)間:2008-08-07 閱讀數(shù): 次 來源:網(wǎng)樂原科技
4.1 字體大小
html有七種字號(hào),1號(hào)最小,7號(hào)最大。缺省字號(hào)為3,可以用<basefontsize=字號(hào)>設(shè)置缺省字號(hào)。
設(shè)置文本的字號(hào)有兩種辦法,一種是設(shè)置絕對(duì)字號(hào),<font size=字號(hào)>;另一種是設(shè)置文本的相對(duì)字號(hào);<font size=±n>。用第二種方法時(shí)“+”號(hào)表示字體變大,“-”號(hào)表示字體變小。
<font size=7>字體大小</font> 字體大小
<font size=6>字體大小</font> 字體大小
<font size=5>字體大小</font> 字體大小
<font size=4>字體大小</font> 字體大小
<font size=3>字體大小</font> 字體大小
<font size=2>字體大小</font> 字體大小
<font size=1>字體大小</font> 字體大小
§4.1.2 字體風(fēng)格
字體風(fēng)格分為物理風(fēng)格和邏輯風(fēng)格。
物理風(fēng)格直接指定字體,物理風(fēng)格的字體有:<b>黑體,<i>斜體,<u>下劃線,<tt>打字機(jī)體。
邏輯風(fēng)格指定文本的作用:<em>強(qiáng)調(diào) <srrony>特別強(qiáng)調(diào) <code>源代碼<samp>例子 <kbd>鍵盤輸入 <var>變量 <dfn>定義 <cite>引用 <small>較小<big>較大 <sup>上標(biāo) <sup>下標(biāo)
物理風(fēng)格(Physical Style):
<b>今天天氣真好!</b> 今天天氣真好!
<i>今天天氣真好!</i> 今天天氣真好!
<u>今天天氣真好!</u> 今天天氣真好!
<tt>今天天氣真好!</tt> 今天天氣真好!
<sup>今天天氣真好!</sup> 今天天氣真好!
<sub>今天天氣真好!</sub> 今天天氣真好!
<s>今天天氣真好!</s> 今天天氣真好!
<strike>今天天氣真好!</strike> 今天天氣真好!
邏輯風(fēng)格(Logical Style):
<em>今天天氣真好!</em> 今天天氣真好!
<strong>今天天氣真好!</strong> 今天天氣真好!
<code>今天天氣真好!</code> 今天天氣真好!
<samp>今天天氣真好!</samp> 今天天氣真好!
<kbd>今天天氣真好!</kbd> 今天天氣真好!
<var>今天天氣真好!</var> 今天天氣真好!
<dfn>今天天氣真好!</dfn> 今天天氣真好!
<cite>今天天氣真好!</cite> 今天天氣真好!
<small>今天天氣真好!</small> 今天天氣真好!
<big>今天天氣真好!</big> 今天天氣真好!
§4.1.3 字體顏色
字體的顏色用<font color="#xxxxxx">...</font>指定
xxxxxx可以是6位16進(jìn)數(shù),分別指定紅、綠、蘭的值,也可以是black,olive,teal,red,blue,maroon,navy,gray,lime,fudrsia,white,green,purple,sliver,yellow,aqua 之一。
<font color="#FF8040">字體風(fēng)格</font>
<font color=red>字體風(fēng)格</font>
§4.1.4 閃爍
<blink>文本</blink>使文本閃爍,閃爍頻率為1秒鐘一次。
§4.2 標(biāo)尺線(hr)
標(biāo)尺線,一般用于分隔同一文體的不同部分。在窗口中劃一條標(biāo)尺線非常簡(jiǎn)單,只要寫一個(gè)<hr>即可。標(biāo)尺線的寬度用<hr size=n>指定,width=#>指n是線寬,單位是象素。例:<hr size=10>。 <hr 定標(biāo)尺線長(zhǎng)度,可以指定絕對(duì)線長(zhǎng),也可以指定標(biāo)尺線長(zhǎng)度占窗口寬度的百分比。例<hr width=50> 、<hr width=50%>。
標(biāo)尺線的位置用<hr align=#>指定。
#是left成right之一,left表示左端與左邊界對(duì)齊,right是右端與右邊界對(duì)齊,缺省,標(biāo)尺線出現(xiàn)在窗口正中。
<hr>
--------------------------------------------------------------------------------
<hr size=10>
--------------------------------------------------------------------------------
<hr width=50>
--------------------------------------------------------------------------------
<hr width=50%>
--------------------------------------------------------------------------------
<hr width=50% align=left>
--------------------------------------------------------------------------------
<hr width=50% align=right>
--------------------------------------------------------------------------------
<hr noshade>
--------------------------------------------------------------------------------
<hr color=#>
#=rrggbb 16 進(jìn)制 RGB 數(shù)碼,或者是下列預(yù)定義色彩:
Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime,
Fuchsia, White, Green, Purple, Silver, Yellow, Aqua
4.3 行間圖象
行向圖象使你的頁面更加漂亮,但是行向圖象會(huì)導(dǎo)致網(wǎng)絡(luò)通訊量急劇增大。使訪問時(shí)間延長(zhǎng)。所以在主頁(homepage),不宜采用很大的圖象。如果確實(shí)需要一些大圖象,最好在主頁中用一個(gè)縮小的圖象指向原圖,并標(biāo)明該圖的大小。這樣讀者可以快速地訪問您的主頁,自己選擇看還是不看那些圖象。
圖象的基本格式為:
<img src="image-url">或<img src="image-urd" alt="text">image-url是圖象文件的url。目前,大部分瀏覽器支持 .gif 和 .xbm文件,netscape還支持jpeg文件。alt屬性告訴不支持圖象的瀏覽器用text代替該圖。
4.3.2 圖象與文本的對(duì)齊方式
圖象在窗口中會(huì)占據(jù)一塊空間,在圖象的左右可能會(huì)有空白,不加說明時(shí),瀏覽器將隨后的文本顯示在這些空白中,顯示的位置由align屬性指定。
<img src=URL align=top> My face!
My Face!
<img src=URL align=middle> My face!
My Face!
<img src=URL align=bottom> My face!
My Face!
4.3.3 圖象在頁面中的對(duì)齊方式/布局(Floating Image)
<img align=left>
<img src=URL align=left>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
My Face!
It is always
smiling.
Hahaha....
<img align=right>
My Face!
It is always
smiling.
Hahaha....
<br clear=all>
<img src=URL align=left>My Face!<br>
It is always
<br clear=all>
smiling.<br>
Hahaha....<br>
My Face!
It is always
smiling.
Hahaha....
<img vspace=# hspace=#> #=value
<img src=URL align=left vspace=10 hspace=20>My Face!<br>
It is always<br>
smiling.<br>
Hahaha....<br>
My Face!
It is always
smiling.
Hahaha....
4.4 分行<BR>和禁止分行<nobr>
<Br>表示在此處分行,<nobr>....</nobr>叫通知瀏覽器,其中的內(nèi)容在一行內(nèi)顯示,若一行內(nèi)顯示不了,則超出部分被裁剪掉。
<br clear=#>clear屬性標(biāo)明下一行的情況,如clear=left,表示下一行從左邊界處開始。#可以是left,right,all之一。例:
§4.5 背影和文本顏色
窗口背景可以用下列方法指定
<body background="image-url">
<body bgcolor=# text=# link=# alink=# vlink=#>
前者指定填充背景的圖象,如果圖象的大小小于窗口大小,則把背景圖象重復(fù),直到填滿窗口區(qū)域。
后者指定的是16進(jìn)制的紅、綠、蘭分量。
bgcolor 背景顏色
Text 文本顏色
Link 鏈接指針顏色
alinik 活動(dòng)的鏈接指針顏色
vlinik 已訪問過的鏈接指針顏色
例 <body bgcolor=FFoooo>大紅背景色.
注意,此時(shí)體元素必須寫完整,即用<body>結(jié)束
4.6 轉(zhuǎn)義字符與特殊字符
html中< , >,&有特殊含義,(前兩個(gè)字符用于標(biāo)注,&用于轉(zhuǎn)義),不能直接使用。使用這三個(gè)字符時(shí),應(yīng)使用它們的轉(zhuǎn)義序列。
& 的轉(zhuǎn)義序列為 & amps 或 & #38;
< 的轉(zhuǎn)義序列為 & Lt; & #60;
> 的轉(zhuǎn)義序列為 & gt; & #62;
前者為字符轉(zhuǎn)義序列,后者為數(shù)字轉(zhuǎn)義序列。
例如 & Lt; font &Lgt;顯示為<font>若直接寫為<font>則被認(rèn)為是一個(gè)標(biāo)注。
需要說明的是:
a. 轉(zhuǎn)義序列各字符間不能有空格;
b. 轉(zhuǎn)義序列必須以“;”結(jié)束;
c. 單獨(dú)的&不被認(rèn)為是轉(zhuǎn)義開始。
如“ & Lt; ”被解釋為 “& Lt;”而不是<“&# 62 ;”被解釋為 “& # 60;”而不是>另一個(gè)需要轉(zhuǎn)義的字符是引號(hào),它的轉(zhuǎn)義序列為"""或""",例如<img src="image.gif"alt="A &quol; real " example">。html使用的字符集是ISO &859 Larin-1字符集,該字符集中有許多標(biāo)準(zhǔn)鍵盤上無法輸入的字符。對(duì)這些特殊字符只能使用轉(zhuǎn)義序列。