首先我們定義一塊畫(huà)布，然后在上面畫(huà)一個(gè)圓形。
他看起來(lái)應(yīng)該是這個(gè)樣子的：（每一個(gè)實(shí)例我都會(huì)附加圖片以及demo鏈接，方便直觀的理解與源代碼的查看，查看的時(shí)候請(qǐng)使用標(biāo)準(zhǔn)瀏覽器）
現(xiàn)在我們就讓這個(gè)圓動(dòng)起來(lái)
動(dòng)起來(lái)是這個(gè)樣子的（gif循環(huán)之后234三個(gè)demo將無(wú)法區(qū)分，所以這里的gif只循環(huán)一次，需要多次查看效果請(qǐng)刷新或者進(jìn)入demo查看）：
我們可以看到圓動(dòng)起來(lái)的時(shí)候，circle元素里邊不再是空的，多了一個(gè)animate的元素，這個(gè)animate含有下面幾個(gè)屬性：
attributeName：動(dòng)畫(huà)屬性名，顧名思義，你想要改變哪個(gè)屬性
attributeType：動(dòng)畫(huà)屬性的類(lèi)別，常見(jiàn)的兩個(gè)值，XML和css，取決于屬性是在xml里還是在style里，下面改變opacity的demo里，就是使用的css。不寫(xiě)的時(shí)候默認(rèn)值為auto，他會(huì)先搜索css，建議寫(xiě)上。
from to ：性的開(kāi)始和結(jié)束值，from可選，當(dāng)不寫(xiě)的時(shí)候會(huì)取默認(rèn)值。
begin dur ：動(dòng)畫(huà)的開(kāi)始時(shí)間與結(jié)束時(shí)間。如果你想打開(kāi)頁(yè)面過(guò)幾秒才開(kāi)始動(dòng)畫(huà)，那么就定義begin就好了。
觀察上邊的動(dòng)畫(huà)，我們發(fā)現(xiàn)動(dòng)畫(huà)結(jié)束的時(shí)候又回到了第一幀，如果我們想讓他停在最后一幀，就需要用到 fill 屬性（animate的fill屬性與svg的fill填充要區(qū)分一下）
fill支持參數(shù)有：freeze與remove. 其中remove是默認(rèn)值，表示動(dòng)畫(huà)結(jié)束直接回到開(kāi)始的地方，現(xiàn)在再看這個(gè)動(dòng)畫(huà)的樣子：
這樣看起來(lái)動(dòng)畫(huà)還是沒(méi)有滿足我的需求，我想讓動(dòng)畫(huà)一直循環(huán)播放怎么辦？這就要用到 repeatCount
屬性的取值可以是一個(gè)數(shù)字，也可以是“indefinite”表示無(wú)限循環(huán)?，F(xiàn)在動(dòng)畫(huà)變成了這樣：
現(xiàn)在動(dòng)畫(huà)是循環(huán)了，可我還是覺(jué)得哪里別扭，第一幀和最后一幀并沒(méi)有銜接起來(lái)，看起來(lái)有突兀。這時(shí)候我們就回過(guò)頭再看看動(dòng)畫(huà)的開(kāi)始和結(jié)束。
from和to只能定義開(kāi)始和終結(jié)兩個(gè)時(shí)間點(diǎn)，另外還有一個(gè)屬性by，是可以替代to的，to表示的是一個(gè)絕對(duì)值，by表示的是一個(gè)offset，比如from為50，to為80，表示從50到80，by為80的話，表示offset為80，那么最終的結(jié)果就是130,如果我們的demo使用by，那么就是by 30.除了by意外，還有一個(gè)屬性values，他可以接受一組數(shù)值，比如我們想作出圓的呼吸效果，那么只需要
現(xiàn)在我們?cè)倏匆谎蹌偛诺膭?dòng)畫(huà)
可是現(xiàn)在的效果我還是不滿意，我想讓這個(gè)圓形呼吸的同時(shí)改變透明度，這就是svg在單個(gè)對(duì)象上面做多重動(dòng)畫(huà)了。我們?cè)?attributeName=”r” 下面，增加一個(gè)animate元素，用來(lái)改變圓的透明度
現(xiàn)在這個(gè)動(dòng)畫(huà)是這個(gè)樣子的（gif并不能很好的展示出透明度的漸變，建議使用標(biāo)準(zhǔn)瀏覽器打開(kāi)demo查看）：
寫(xiě)到這里，我上邊的呼吸效果已經(jīng)實(shí)現(xiàn)了，但是我現(xiàn)在又有了新的想法，我想放一排的圓，讓一個(gè)動(dòng)完，才讓下一個(gè)接著動(dòng)。這也就是我們編程里的“同步”概念，在svg里就是 同步動(dòng)畫(huà)。同步動(dòng)畫(huà)的實(shí)現(xiàn)很簡(jiǎn)單，只需要有動(dòng)畫(huà)id，然后下一個(gè)動(dòng)畫(huà)的 begin 值 為上一個(gè)的 id.end, 比如
我們來(lái)看一下同步動(dòng)畫(huà)的實(shí)例：
更為強(qiáng)大的是，begin的值可以是表達(dá)式，比如
這樣就實(shí)現(xiàn)了同步的同時(shí)，帶有5s的偏移，也就是第一個(gè)結(jié)束5s之后，第二個(gè)動(dòng)畫(huà)才開(kāi)始。OK，同步動(dòng)畫(huà)實(shí)現(xiàn)了，不過(guò)現(xiàn)在我要改需求……..把剛才的圓還給我，我要讓他旋轉(zhuǎn)。SVG的旋轉(zhuǎn)動(dòng)畫(huà)需要用到另一個(gè)<animateTransform>元素，他的用法和animate并沒(méi)有本質(zhì)的區(qū)別，只不過(guò)屬性需要換一批。比如我們相讓剛才那個(gè)圓形旋轉(zhuǎn)起來(lái)，等等，圓形原地旋轉(zhuǎn)的話，好像我們并看不出他在旋轉(zhuǎn)呀，那好吧，我們換一個(gè)旋轉(zhuǎn)起來(lái)視覺(jué)效果比較強(qiáng)的圖形，現(xiàn)場(chǎng)寫(xiě)一個(gè)五角星出來(lái)，并給他加animateTransform ：
查看一下他動(dòng)起來(lái)的樣子：
和前邊的例子并沒(méi)有本質(zhì)區(qū)別，唯一不同的地方在于from部分，from和to都是三個(gè)值，第一個(gè)值是角度，從0到360度的旋轉(zhuǎn)，第二個(gè)和第三個(gè)組成一個(gè)坐標(biāo)，這個(gè)坐標(biāo)決定了svg圍繞哪個(gè)點(diǎn)來(lái)進(jìn)行旋轉(zhuǎn)，關(guān)于這方面的知識(shí)推薦新同學(xué)了解一下SVG的坐標(biāo)系相關(guān)知識(shí)。transform的type可以包括translate，scale,skew等，和css相通，用法也與rotate大同小異，這里就不一一的列舉實(shí)例。實(shí)現(xiàn)了旋轉(zhuǎn)以后，我們?cè)贀Q一個(gè)更強(qiáng)大的動(dòng)畫(huà)元素，<animateMotion>.我們可以用他來(lái)實(shí)現(xiàn)引導(dǎo)線動(dòng)畫(huà)，讓你的圖形沿著復(fù)雜的路徑運(yùn)動(dòng)。比如我們先畫(huà)一條路徑
哎呀一不小心畫(huà)的太圓了，不過(guò)沒(méi)關(guān)系，我們現(xiàn)在把用過(guò)的二手五角星拿過(guò)來(lái)
加入了animateMotion元素，animateMotion的path決定了五角星的運(yùn)動(dòng)路線，可以先看一下效果，是這樣的
好像哪里不對(duì)勁，對(duì)了，五角星沿著路徑轉(zhuǎn)動(dòng)的時(shí)候能不能隨著角度傾斜？那么就需要用到
這個(gè)屬性會(huì)讓你的圖形隨著你的路徑自動(dòng)做角度的調(diào)整。加上之后的最終動(dòng)效是這樣的
總結(jié)語(yǔ)：看完上邊的實(shí)例，你其實(shí)已經(jīng)站在SVG動(dòng)畫(huà)的門(mén)里了，剩下的就是進(jìn)階知識(shí)的獲取，以及熟練度的達(dá)成。下一次我繼續(xù)和大家一起學(xué)習(xí)SVG動(dòng)畫(huà)一些進(jìn)階的技巧！
原文鏈接: 騰訊ISUX
]]>既然HTML中定義了這么多標(biāo)簽，而且每種標(biāo)簽都有其用法，我們?yōu)槭裁床槐M量去使用這些標(biāo)簽?zāi)亍Ｏ旅媸占⒄砹?6個(gè)常被我們遺忘卻非常有用的HTML標(biāo)簽。
1. <!? ?> :注釋
2. <!DOCTYPE>：文檔類(lèi)型聲明
文檔類(lèi)型，會(huì)使瀏覽器使用相應(yīng)的方式加載網(wǎng)頁(yè)并顯示，忽略DTDs，將使網(wǎng)頁(yè)進(jìn)入一種混亂模式(quirks mode)。
示例：
XHTML過(guò)渡定義類(lèi)型，此類(lèi)型可以使用HTML4中的標(biāo)簽
<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
XHTML嚴(yán)格定義類(lèi)型，此文檔只可以使用XHTML1中定義的標(biāo)簽
<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
XHTML1.1版定義類(lèi)型
<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.1//EN” “http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd”>
XHTML框架定義類(lèi)型。(可以使用框架)
<!DOCTYPE html PUBPC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>
3. <abbr>：縮寫(xiě)
示例：<abbr title=”Pmited”>Ltd.</abbr>
說(shuō)明：簡(jiǎn)稱(chēng)和縮寫(xiě)是對(duì)一個(gè)慣用詞組的縮寫(xiě)表示，一般使用詞組中每個(gè)單詞的首字母，比如CSS(Cascading Style Sheets),而HTML(Hypertext Markup Language)就不是一種提取首字母的縮寫(xiě).有時(shí)候縮寫(xiě)經(jīng)常會(huì)在最后加一個(gè)。
4. <acronym>： 取首字母的縮寫(xiě)
示例：<acronym title=”Cascading Style Sheets”>CSS</acronym>
5. <area>： 定義圖像點(diǎn)擊區(qū)域
area標(biāo)簽是單獨(dú)出現(xiàn)的，<area />
area標(biāo)簽必須使用在map標(biāo)簽中，而且必須配合img標(biāo)簽使用。
屬性：
Common ― 一般屬性
accesskey ― 鏈接的快捷鍵訪問(wèn)方式
alt ― 圖像的提示文字
coords ― 定義可點(diǎn)擊區(qū)域圖形的坐標(biāo)
href ― HTML鏈接源的URL
nohref ― 圖像點(diǎn)擊排除的區(qū)域，當(dāng)不使用href時(shí)應(yīng)使用nohref
shape ― 可點(diǎn)擊區(qū)域的形狀
tabindex ― 使用”Tab”鍵的遍歷順序
target ― 鏈接目標(biāo)
area是cPent-side image map area的意思，區(qū)域
area標(biāo)簽示例：
<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>
6. <base>: 定義基URL用于頁(yè)面的鏈接與引用
base標(biāo)簽是單獨(dú)出現(xiàn)的，<base />
base標(biāo)簽只能放置在head標(biāo)簽內(nèi)
當(dāng)使用相對(duì)路徑定義鏈接時(shí)，可以使用base標(biāo)簽定義基URL解析所有文檔中定義的相對(duì)路徑的URL
屬性：
href ― 基URL
target ― 鏈接目標(biāo)
base是document base URI的意思
base標(biāo)簽示例
<head> <base href=”http://www.renniaofei.com/” target=”_blank”> </head>
使用上面示例代碼的html頁(yè)面中的相對(duì)鏈接，將直接指向基URL http://www.renniaofei.com/，并且使用彈出窗口。
base標(biāo)簽在框架中的使用
base標(biāo)簽通常可以使用在框架鏈接中，例如
<frameset cols=”20%, *”> <frame src=”Pst.html”> <frame src=”http://www.renniaofei.com/” name=”mainTarget”> < /frameset>
鏈接頁(yè)P(yáng)st.htm
l<head> <base target=”mainTarget”> </head> < a href=”http://www.renniaofei.com/category/design/”>design</a> < a href=”http://www.renniaofei.com/category/graphic/”>graphic</a> <a href=”http://www.renniaofei.com/category/inspiration/”>inspiration</a> <a href=”http://www.renniaofei.com/category/freebies/”>freebies</a>
通過(guò)上面示例可以避免在每個(gè)鏈接中寫(xiě)入target=”mainTarget”
7. <blockquote>：表示引用塊
blockquote標(biāo)簽是成對(duì)出現(xiàn)的，以<blockquote>開(kāi)始，以</blockquote>結(jié)束
屬性：
Common ― 一般屬性
cite ― 被引用內(nèi)容的URI
示例：
<blockquote cite=”http://www.renniaofei.com/xhtml/”> <p>標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)要區(qū)分內(nèi)容與表現(xiàn)，學(xué)習(xí)標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)。</p> </blockquote>
8. <button> ：定義按鈕
button標(biāo)簽是成對(duì)出現(xiàn)的，以<button>開(kāi)始，</button>結(jié)束
可以定義比input內(nèi)容更豐富的按鈕。
屬性：
Common ― 一般屬性
accesskey ― 快捷鍵訪問(wèn)方式
disabled ― 禁止使用
name ― 標(biāo)簽名稱(chēng)
tabindex ― 使用”Tab”鍵的遍歷順序
type ― 按鈕類(lèi)型
button ― 普通按鈕
reset ― 重置表單按鈕
submit ― 提交按鈕
value ― 通過(guò)表單傳遞到服務(wù)器端的數(shù)據(jù)
button是push button的意思，按鈕
button標(biāo)簽示例：
<button type=”submit”>提交</button>
一個(gè)使用文字的普通的提交按鈕
<button type=”reset”> 從<strong>任鳥(niǎo)飛</strong>提交表單 </button>
改變按鈕內(nèi)加重文字的button標(biāo)簽
<button type=”button”> <img src=”renniaofei.png” alt=”提交” /></button>
說(shuō)明：使用圖片的button標(biāo)簽，注意有alt的提示文字。
9. <caption>：HTML表格的標(biāo)題
caption標(biāo)簽是成對(duì)出現(xiàn)的，以<caption>開(kāi)始。</caption>結(jié)束
屬性：
Common ― 一般屬性
caption:標(biāo)題
示例：
<table width=”80%”> <caption> 域名數(shù)量介紹 < /caption> <tr> < th>www.renniaofei.com</th> < th>.com域名的數(shù)量</th> <th>.cn域名的數(shù)量</th> < th>.net域名的數(shù)量</th> </tr> <tr> < td>2003年</td> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <td>2004年</td> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <td>2005年</td> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>
說(shuō)明：
caption標(biāo)簽可以為表格提供一個(gè)描述，和圖像的說(shuō)明alt比較類(lèi)似.默認(rèn)情況下，瀏覽器顯示表格標(biāo)題在表格的上方。
CSS里的caption-side屬性用來(lái)控制表格標(biāo)題顯示的位置。
10. <cite>引用
cite標(biāo)簽是成對(duì)出現(xiàn)的，以<cite>開(kāi)始，以</cite>結(jié)束
屬性：
Common ― 一般屬性
cite ― 引用內(nèi)容的URI
cite是citation的縮寫(xiě)
示例：
<cite cite=”http://www.renniaofei.com/”>一步步的教我學(xué)會(huì)HTML與XHTML</cite>
11. <col> 可以對(duì)HTML表格結(jié)構(gòu)化分區(qū)后的一個(gè)或幾個(gè)區(qū)域使用同樣的樣式行
col標(biāo)簽是單獨(dú)出現(xiàn)的，<col />
屬性：
Common ― 一般屬性
span ― 定義一個(gè)col跨越的列數(shù),默認(rèn)值為1
12. <colgroup>表示對(duì)HTML表格進(jìn)行結(jié)構(gòu)化的分區(qū),在此分區(qū)中可以通過(guò)使用col定義每列表格的樣式
colgroup標(biāo)簽是成對(duì)出現(xiàn)的，以<colgroup>開(kāi)始，以</colgroup>結(jié)束
屬性：
Common ― 一般屬性
span ― 定義一個(gè)colgroup跨越的列數(shù),默認(rèn)值為1
13. <dd>代表HTML自定義列表描述
dd標(biāo)簽是成對(duì)出現(xiàn)的，,以<dd>開(kāi)始，</dd>結(jié)束
屬性：
Common ― 一般屬性
dd是definition description的縮寫(xiě)
14. del 標(biāo)簽 ― 定義被刪除的文本
del標(biāo)簽是成對(duì)出現(xiàn)的,以<del>開(kāi)始，</del>結(jié)束
del通常應(yīng)連同ins標(biāo)簽一同使用，表示被刪除與被插入的文本
通過(guò)del與ins定義文檔可以幫助了解文檔內(nèi)容的修改過(guò)程，利于多人編輯系統(tǒng)
使用del定義的文本通常帶有刪除線
屬性：
Common ― 一般屬性
cite ― 引用網(wǎng)址，定義為何刪除的引用網(wǎng)址
datetime ― 刪除的時(shí)間與日期
title ― 定義刪除的目的或提示
del是deleted text的縮寫(xiě)，刪除文本
del標(biāo)簽示例：
<p>任鳥(niǎo)飛網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ < /del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.renniaofei.com/</del> 網(wǎng)址已經(jīng)刪除。 </p>
15. <dir> 定義多層目錄列表
不符合標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的理念，不贊成使用.
dir標(biāo)簽是成對(duì)出現(xiàn)的，以<dir>開(kāi)始，</dir>結(jié)束
屬性：
Common ― 一般屬性
dir是directory Psts的縮寫(xiě)，目錄列表
16. <dfn> ? 定義標(biāo)簽
dfn標(biāo)簽是成對(duì)出現(xiàn)的，以<dfn>開(kāi)始，以</dfn>結(jié)束
屬性：
Common ― 一般屬性
dfn是defining instance的縮寫(xiě)
示例： <dfn>任鳥(niǎo)飛</dfn>網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)!
17. <dl> 代表HTML自定義列表
dl標(biāo)簽是成對(duì)出現(xiàn)的，以<dl>開(kāi)始，</dl>結(jié)束
自定義列表的開(kāi)始使用<dl>標(biāo)簽，列表中每個(gè)元素的標(biāo)題使用<dt>(definition term)定義，后面跟隨<dd>(definition description)用于描述列表中元素的內(nèi)容.
屬性：
Common ― 一般屬性
dl是definition Psts的英文縮寫(xiě)
示例：
<dl> <dt>www</dt> <dd>World Wide Web的縮寫(xiě).</dd> <dt>renniaofei</dt> < dd>任鳥(niǎo)飛</dd> <dd>www的:).</dd> < dt>com</dt> <dt>com.cn</dt> < dt>cn</dt> <dd>這都是域名的后綴.</dd> </dl>
說(shuō)明：
不一定每個(gè)dt標(biāo)簽要對(duì)應(yīng)一個(gè)dd，可以一對(duì)多或多對(duì)一(就像上面的例子)
18. <dt>代表HTML自定義列表組
dt標(biāo)簽是成對(duì)出現(xiàn)的，以<dt>開(kāi)始，</dt>結(jié)束
屬性：
Common ― 一般屬性
dt是definition term的縮寫(xiě)
19. <em> 強(qiáng)調(diào)標(biāo)簽
em標(biāo)簽是成對(duì)出現(xiàn)的，以<em>開(kāi)始，以</em>結(jié)束
屬性：
Common ― 一般屬性
em是emphasis的縮寫(xiě)
示例： 強(qiáng)調(diào)一下,<em>不要</em>和我開(kāi)玩笑!
20. <ins> 定義被插入的文本
ins標(biāo)簽是成對(duì)出現(xiàn)的，以<ins>開(kāi)始，</ins>結(jié)束
ins通常應(yīng)連同del標(biāo)簽一同使用，表示被插入與被刪除的文本
通過(guò)ins與del定義文檔可以幫助了解文檔內(nèi)容的修改過(guò)程，利于多人編輯系統(tǒng)
使用ins定義的文本通常帶有下劃線
屬性：
Common ― 一般屬性
cite ― 引用網(wǎng)址，定義為何插入的引用網(wǎng)址
datetime ― 插入的時(shí)間與日期
title ― 定義插入的目的或提示
ins是inserted text的縮寫(xiě)，插入文本
ins標(biāo)簽示例：
<p>任鳥(niǎo)飛網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)址 <del title=”del url” cite=”http://www.renniaofei.com/”> http://www.renniaofei.com/ < /del> <ins>http://www.renniaofei.com/</ins> ，原先 <del>http://www.renniaofei.com/</del> 網(wǎng)址已經(jīng)刪除。 </p>
21. <kbd>標(biāo)簽表明使用者輸入的文字
kbd標(biāo)簽是成對(duì)出現(xiàn)的，以<kbd>開(kāi)始，以</kbd>結(jié)束
屬性:
Common ― 一般屬性
示例： To exit, type <kbd>QUIT</kbd>.
22. <map>定義圖像點(diǎn)擊區(qū)域的集合
map標(biāo)簽是成對(duì)出現(xiàn)的,以<map>開(kāi)始，</map>結(jié)束
map標(biāo)簽必須配合area標(biāo)簽使用
map標(biāo)簽中name與id屬性指定的值必須與定義圖像點(diǎn)擊區(qū)中圖像(img)的usemap屬性指定的值一致
屬性
Common ― 一般屬性
id ― 定義map的名稱(chēng)。
name ― 定義map的名稱(chēng)。
map是cPent-side image map的意思
map標(biāo)簽示例：
<img src=”http://www.renniaofei.com/images/logo.png” usemap=”#Map” /> <map name=”Map” id=”Map”> <area shape=”rect” coords=”35,29,135,99″ href=”#” /> <area shape=”circle” coords=”243,78,44″ href=”#” /> <area shape=”poly” coords=”120,137,195,154,135,207″ href=”#” /> </map>
23. <menu> 定義菜單列表
不符合標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的理念，不贊成使用。
menu標(biāo)簽是成對(duì)出現(xiàn)的,以<menu>開(kāi)始，</menu>結(jié)束
屬性
Common ― 一般屬性
menu:菜單
24. <noframes>對(duì)不支持框架的設(shè)備進(jìn)行提示
noframes標(biāo)簽是成對(duì)出現(xiàn)的，以<noframes>開(kāi)始，</noframes>結(jié)束
由于frameset內(nèi)不能包含body標(biāo)簽，因此noframes內(nèi)部必須包含body標(biāo)簽
示例
<frameset cols=”50%,25%,25%”> <frame src=”http://www.renniaofei.com/category/design/”> <frame src=”http://www.renniaofei.com/graphics/”> <frame src=”http://www.renniaofei.com/inspiration/”> <noframes> <body> < p>任鳥(niǎo)飛網(wǎng)頁(yè)設(shè)計(jì)網(wǎng)使用了框架技術(shù)，但是您的瀏覽器不支持框架，請(qǐng)升級(jí)您的瀏覽器以便正常訪問(wèn)。</p> < /body> </noframes> </frameset>
25. <noscript>無(wú)法加載腳本時(shí)的提示文字
noscript標(biāo)簽是成對(duì)出現(xiàn)的，以<noscript>開(kāi)始,以</noscript>結(jié)束
示例
<noscript>此頁(yè)面無(wú)法加載js腳本代碼。</noscript>
26. <q>
表示一個(gè)行引用
q標(biāo)簽是成對(duì)出現(xiàn)的，以<q>開(kāi)始，以</q>結(jié)束。
屬性:
Common ― 一般屬性
cite ― 引用內(nèi)容的URI
q是quoted text的縮寫(xiě)
示例：
<cite>古人</cite>云：<q>良言一句三冬暖，惡語(yǔ)傷人六月寒。</q>
27. <s>定義刪除線的文字
不符合標(biāo)準(zhǔn)網(wǎng)頁(yè)設(shè)計(jì)的理念，不贊成使用。
s標(biāo)簽是成對(duì)出現(xiàn)的，以<s>開(kāi)始，以</s>結(jié)束
屬性：
Common ― 一般屬性
s是strikethrough的縮寫(xiě)
28. <sub>表示下標(biāo)
sub標(biāo)簽是成對(duì)出現(xiàn)的，以<sub>開(kāi)始。以</sub>結(jié)束
屬性：
Common ― 一般屬性
sub是subscript的縮寫(xiě)
29. <sup>表示上標(biāo)
sup標(biāo)簽是成對(duì)出現(xiàn)的，以<sup>開(kāi)始，以</sup>結(jié)束
屬性：
Common ― 一般屬性
sup是superscript的縮寫(xiě)
30. <tbody> 表示HTML表體
瀏覽器顯示表格時(shí)，通常是完全下載表格后，再全部顯示，所以當(dāng)表格很長(zhǎng)時(shí),可以使用tbody分段顯示。
31. <tfoot>表示HTML表腳
表格的表腳tfoot，可以使用單獨(dú)的樣式定義表腳，并且在打印時(shí)可以在分頁(yè)的下部打印表腳。
32. <th>代表HTML表格中的表頭
th標(biāo)簽是成對(duì)出現(xiàn)的,以<th>開(kāi)始，</th>結(jié)束
屬性：
Common ― 一般屬性
abbr ― 代表表頭的簡(jiǎn)寫(xiě)
axis ― 對(duì)單元格在概念上分類(lèi)
colspan ― 一行跨越多列
headers ― 連接表格的數(shù)據(jù)與表頭
rowspan ― 一列跨越多行
scope ― 定義行或列的表頭
aPgn ― 代表水平對(duì)齊方式(left(左對(duì)齊) | center(居中對(duì)齊) | right(右對(duì)齊) | justify)(此屬性應(yīng)該使用CSS實(shí)現(xiàn))
vaPgn ― 代表垂直對(duì)齊方式(top(頂部對(duì)齊) | middle(中部對(duì)齊) | bottom(下部對(duì)齊) | basePne(基線對(duì)齊))(此屬性應(yīng)該使用CSS實(shí)現(xiàn))
th是table header cell的縮寫(xiě)
示例：
<table width=”80%” border=”1″> <tr> < th>www.renniaofei.com</th> < th>.com域名的數(shù)量</th> <th>.cn域名的數(shù)量</th> < th>.net域名的數(shù)量</th> </tr> <tr> < th>2003年</th> <td>1000</td> < td>2000</td> <td>3000</td> </tr> < tr> <th>2004年</th> <td>4000</td> <td>5000</td> <td>6000</td> </tr> < tr> <th>2005年</th> <td>7000</td> <td>8000</td> <td>9000</td> </tr> < /table>
33. <thead>表示HTML表頭
表格的頭部thead，可以使用單獨(dú)的樣式定義表頭，并且在打印時(shí)可以在分頁(yè)的上部打印表頭
34. l 標(biāo)簽 ― 表示一段語(yǔ)句
l標(biāo)簽是成對(duì)出現(xiàn)的，以<l>開(kāi)始,以</l>結(jié)束
屬性：
Common ― 一般屬性
l是Pne of text的縮寫(xiě)
示例： <l>一行實(shí)實(shí)在在的文字!</l>
35. <Code>代碼標(biāo)簽
code標(biāo)簽是成對(duì)出現(xiàn)的，以<code>開(kāi)始，以</code>結(jié)束，常用于顯示源代碼。
36. <fieldset> 表單分組
如果一個(gè)頁(yè)面的表單項(xiàng)太多，我們最好把它們分組顯示，就像使用p標(biāo)簽分開(kāi)段落一樣，可以使用fieldset與legend標(biāo)簽對(duì)表單內(nèi)容分組。
fieldset標(biāo)簽是成對(duì)出現(xiàn)的，以<fieldset>開(kāi)始，以</fieldset>結(jié)束
一個(gè)表單可以有多個(gè)<fieldset>，每對(duì)<fieldset>為一組，每組內(nèi)容的描述可以使用legend標(biāo)簽說(shuō)明
示例：
<fieldset> <legend>我最喜愛(ài)的：</legend> <label for=”computer”>計(jì)算機(jī)</label> <input type=”checkbox” value=”1″ id=”fav” name=”fav” /> <label for=”trval”>旅游</label> <input type=”checkbox” value=”2″ id=”fav” name=”fav” /> <label for=”buy”>購(gòu)物</label> < input type=”checkbox” value=”3″ id=”fav” name=”fav” /> < /fieldset>
]]>保持良好的代碼風(fēng)格是每個(gè)Coder必學(xué)的課程,同樣在HTML設(shè)計(jì)的時(shí)候也要特別注意代碼的規(guī)范性,雖然說(shuō)不規(guī)范的代碼不會(huì)直接造成嚴(yán)重的后果,但很有可能對(duì)用戶(hù)體驗(yàn)造成一定的干擾,同時(shí)也會(huì)降低搜索引擎對(duì)網(wǎng)站的好感度.這份列表包含了10個(gè)最容易犯的HTML標(biāo)簽錯(cuò)誤,記下他們,能夠讓我們避免犯此常見(jiàn)錯(cuò)誤,讓我們的HTML標(biāo)簽符合語(yǔ)義,和標(biāo)準(zhǔn)的要求.
罪行1:把塊級(jí)元素放入了行內(nèi)元素內(nèi)
HTML 元素的表現(xiàn)方式不外乎就兩種:塊級(jí)和行內(nèi).每一個(gè)標(biāo)簽都有默認(rèn)的表現(xiàn)方式不是塊級(jí)就是行內(nèi).像P和p 就是塊級(jí)元素,他們用來(lái)形成文檔結(jié)構(gòu).行內(nèi)元素只能在快級(jí)元素內(nèi).
罪行2: img 標(biāo)簽沒(méi)有包含alt屬性
alt屬性是所有顯示在網(wǎng)頁(yè)中圖片的必須屬性,它能夠幫助人們知道這是什么圖片.或者在網(wǎng)速比較慢的時(shí)候顯示圖片的含義是什么.它的主要目的是,說(shuō) 明圖片的含義,想這樣的說(shuō)明 alt=”image”是很糟糕的.如果,有些圖片的確只是裝飾作用而已,那么建議你寫(xiě)成 alt=””.
罪行3:在必要的時(shí)候沒(méi)使用list
犯罪4：使用<b>和<i>顯示黑體字和斜體
可以用css樣式定義 font-weight 和 font-style. 如果必須在頁(yè)面中寫(xiě)標(biāo)簽的話,用 <strong> 或 <em>標(biāo)簽來(lái)替換.<b><i>的沒(méi)有任何語(yǔ)義可言, 但是,為了更簡(jiǎn)潔的頁(yè)面,還是選擇 css定義樣式吧
犯罪5：使用太多<br/>
<br />換行標(biāo)記只應(yīng)該用于插入是在第一個(gè)文本流換行符敲到一個(gè)新行一個(gè)特別字了。它不應(yīng)該被用來(lái)制造元素之間的差距，而是分裂成不同的段落，或調(diào)整的幅度CSS樣式的文本。
罪行6: 使用錯(cuò)誤的 Strikethrough 標(biāo)簽
在昔日，<S>和<strike>允許用來(lái)定義網(wǎng)站文字。不過(guò)，現(xiàn)在他們被定義為不推薦使用的標(biāo)簽,當(dāng)他們?nèi)稳豢梢杂行Ч?現(xiàn)在用新的標(biāo)記集- <del>和<ins>。來(lái)替換<s><strike>
罪行 7: 使用內(nèi)聯(lián)樣式
css最重要的目的只是為了區(qū)分文檔和樣式,如果,你把style寫(xiě)到頁(yè)面里面,那么完全沒(méi)有css的作用可言.所以,記住把你的樣式放在它該放的位子
罪行 8: 把border添加到HTML中
罪行 9: 沒(méi)有使用header標(biāo)簽<h1>-<h6>
罪行10: 沒(méi)有語(yǔ)義的 <blink> 或<marquee>
不被w3推薦，<blink>和<marquee> (閃動(dòng),滾動(dòng))標(biāo)簽是純粹的丑陋。
不要使用這個(gè)標(biāo)簽,如果一定要用這樣的效果,相信,你會(huì)有其他更好的效果
]]>
這問(wèn)題在網(wǎng)絡(luò)相信已經(jīng)有不少人問(wèn)到，最近再次被牽起討論，籍此記錄一下個(gè)人的理解，border:none;與border:0;的區(qū)別體現(xiàn)有兩點(diǎn)：一是理論上的性能差異二是瀏覽器兼容性的差異。
性能差異：
【border:0;】把border設(shè)為“0”像素雖然在頁(yè)面上看不見(jiàn)，但按border默認(rèn)值理解，瀏覽器依然對(duì)border-width/border-color進(jìn)行了渲染，即已經(jīng)占用了內(nèi)存值。
【border:none;】把border設(shè)為“none”即沒(méi)有，瀏覽器解析“none”時(shí)將不作出渲染動(dòng)作，即不會(huì)消耗內(nèi)存值。
兼容性差異：
兼容性差異只針對(duì)瀏覽器IE6、IE7與標(biāo)簽button、input而言，在win、win7、vista 的XP主題下均會(huì)出現(xiàn)此情況。
【border:none;】當(dāng)border為“none”時(shí)似乎對(duì)IE6/7無(wú)效邊框依然存在，如下例Demo1：
【border:0;】當(dāng)border為“0”時(shí)，感覺(jué)比“none”更有效，所有瀏覽器都一致把邊框隱藏，如下例Demo2：
總結(jié)：
對(duì)比border:0;與border:none;之間的區(qū)別在于有渲染和沒(méi)渲染，感覺(jué)他們和display:none;與visibility:hidden;的關(guān)系類(lèi)似，而對(duì)于border屬性的渲染性能對(duì)比暫時(shí)沒(méi)找測(cè)試的方法，雖然認(rèn)為他們存在渲染性能上的差異但也只能說(shuō)是理論上。
如何讓border:none;實(shí)現(xiàn)全兼容？只需要在同一選擇符上添加背景屬性即可，如下例Demo3：
對(duì)于border:0;與border:none;個(gè)人更向于使用,border:none;，因?yàn)閎order:none;畢竟在性能消耗沒(méi)有爭(zhēng)議，而且兼容性可用背景屬性解決不足以成為障礙。
]]> 1、人為的加入兩個(gè)中文全角空格，才能夠顯示出位置縮進(jìn)效果。
2、插入點(diǎn)圖或圖形
點(diǎn)圖是指圖片中只有一個(gè)或幾個(gè)像素點(diǎn)，用肉眼看不出來(lái)。當(dāng)我們?cè)诙温溟_(kāi)頭插入這樣一個(gè)點(diǎn)圖，并用HSPACE和VSPACE屬性來(lái)調(diào)整點(diǎn)圖的左右和上下的空格，以達(dá)到段落縮進(jìn)。
同樣可以插入圖形，只不過(guò)該圖形的顏色需要用網(wǎng)頁(yè)背景色，這種方式用IMG的WIDTH和HEIGHT屬性調(diào)整圖形大小，以達(dá)到縮進(jìn)。
插入圖形的方法，需要我們掌握好HSPACE和VSPACE大小的尺度，使之剛好留出兩個(gè)漢字的位置，這樣才比較美觀。
3、插入沒(méi)有邊框和內(nèi)容的表格
這種方式與上述的插入圖形方式類(lèi)似，該表格沒(méi)有邊框和內(nèi)容，是空表格。用TABLE的WIDTH和HEIGHT屬性調(diào)整表格大小適合縮進(jìn)的需要。
利用表格來(lái)定位一般來(lái)說(shuō)比較可靠，我常常就采用這種方式來(lái)對(duì)比較復(fù)雜的頁(yè)面進(jìn)行定位。不過(guò)這種方法有一個(gè)問(wèn)題，就是可能是頁(yè)面的源文件變大。因此也不見(jiàn)得是格式控制的首選。
4、插入特殊的空格字符“＆nbsp”
“＆nbsp”代表非顯示空格字符。插入若干個(gè)“＆nbsp”字符，中間用分號(hào)(；)或者空格隔開(kāi)，也可以實(shí)現(xiàn)中文段落縮進(jìn)。不過(guò)在Netscape 3.01中只能寫(xiě)小寫(xiě)字母，而在IE中大小寫(xiě)都可以。
這四種方法主要是針對(duì)利用HTML的語(yǔ)言編寫(xiě)網(wǎng)頁(yè)而言。在一些網(wǎng)頁(yè)制作工具，如網(wǎng)景瀏覽器中有專(zhuān)門(mén)加入空格的工具條，也可以完成段落縮進(jìn)。
5、預(yù)格式(PRE)
用預(yù)格式編寫(xiě)的源文件，在顯示時(shí)照源文件中的排版字樣顯示，空行和空格都能很清楚地區(qū)別開(kāi)來(lái)。如源文件為：
<pre>
－－預(yù)格式顯示……
</pre>
網(wǎng)頁(yè)就會(huì)按照你預(yù)先設(shè)置好的顯示方式顯示，即在“預(yù)格式顯示”的前面就會(huì)空兩個(gè)漢字的位置。
通過(guò)以上方法，就可以解決網(wǎng)頁(yè)制作中段落縮進(jìn)的問(wèn)題。
對(duì)于剛剛開(kāi)始學(xué)習(xí)HTML的新手而言，了解網(wǎng)頁(yè)頭部代碼是非常必要的。
以下所有代碼全是在<head>…</head>之間，具體內(nèi)容有：
1.<title>…</title>
標(biāo)題元素，幫助用戶(hù)更好識(shí)別文件，有且只有一個(gè)。當(dāng)作為首頁(yè)或收藏時(shí)做文件名。
2.<link>…</link>
顯示本文檔和其它文檔之間的關(guān)系：<link rel=“stylesheet” href=“s.css”> 和外部樣式表的連接。
rel說(shuō)明html文件和url兩文檔之間的關(guān)系，href說(shuō)明文檔名。
3.<style>…</style>
可以在文檔中包含風(fēng)格頁(yè)。文檔本身的內(nèi)部樣式。
4.<base>…</base>
為相對(duì)路徑定義絕對(duì)路徑url，讀者下載你的文檔后，也可知道從哪下的
url格式：通信協(xié)議：//主機(jī)名/路徑/文件名
5.<script>…</script>
用于包含腳本（一系列腳本語(yǔ)言寫(xiě)的命令）可以是 Javascript 或 VbScript。
6.<meta>…</meta>
meta是用來(lái)在HTML文檔中模擬HTTP協(xié)議的響應(yīng)頭報(bào)文。
meta標(biāo)簽的常見(jiàn)功能：
1.幫助主頁(yè)被各大搜索引擎登錄；
2.定義頁(yè)面的使用語(yǔ)言；
3.自動(dòng)刷新并指向新的頁(yè)面；
4.實(shí)現(xiàn)網(wǎng)頁(yè)轉(zhuǎn)換時(shí)的動(dòng)畫(huà)效果；
5.網(wǎng)頁(yè)定級(jí)評(píng)價(jià)；
6.控制頁(yè)面緩沖；
7.控制網(wǎng)頁(yè)顯示的窗口。
meta 的屬性有兩種：name和http-equiv。
name屬性主要用于描述網(wǎng)頁(yè)，對(duì)應(yīng)于content（網(wǎng)頁(yè)內(nèi)容），以便于搜索引擎機(jī)器人查找、分類(lèi)（目前幾乎所有的搜索引擎都使用網(wǎng)上機(jī)器人自動(dòng)查找meta值來(lái)給網(wǎng)頁(yè)分類(lèi)）。這其中最重要的是description（站點(diǎn)在搜索引擎上的描述）和keywords（分類(lèi)關(guān)鍵詞），所以應(yīng)該給每頁(yè)加一個(gè)meta值。
name 屬性
1.<meta name=”Generator” contect=”editplus”>用以說(shuō)明生成工具（如Microsoft FrontPage 4.0）等；
2.<meta name=”KEYWords” contect=”webjx,cnrose”>向搜索引擎說(shuō)明你的網(wǎng)頁(yè)的關(guān)鍵詞；
3.<meta name=”Description” contect=”webjx’s blog”>告訴搜索引擎你的站點(diǎn)的主要內(nèi)容；
4.<meta name=”Author” contect=”webjx”>告訴搜索引擎你的站點(diǎn)的制作的作者；
5.<meta name=”Robots” contect=”all|none|index|noindex|follow|nofollow”>
name屬性：
設(shè)定為all：文件將被檢索，且頁(yè)面上的鏈接可以被查詢(xún)；
設(shè)定為none：文件將不被檢索，且頁(yè)面上的鏈接不可以被查詢(xún)；
設(shè)定為index：文件將被檢索；
設(shè)定為follow：頁(yè)面上的鏈接可以被查詢(xún)；
設(shè)定為noindex：文件將不被檢索，但頁(yè)面上的鏈接可以被查詢(xún)；
設(shè)定為nofollow：文件將不被檢索，頁(yè)面上的鏈接可以被查詢(xún)。
http-equiv屬性：
1.<meta http-equiv=”Content-Type” contect=”text/html”;charset=gb_2312-80″>和 <meta http-equiv=”Content-Language” contect=”zh-CN”>用以說(shuō)明主頁(yè)制作所使用的文字以及語(yǔ)言；又如英文是ISO-8859-1字符集，還有BIG5、utf-8、shift-Jis、Euc、Koi8-2等字符集；
2.<meta http-equiv=”Refresh” content=”n; url=http://yourlink”> 定時(shí)讓網(wǎng)頁(yè)在指定的時(shí)間n秒內(nèi)，跳轉(zhuǎn)到頁(yè)面http;//yourlink；
3.<meta http-equiv=”Expires” contect=”Mon,12 May 2001 00:20:00 GMT”>可以用于設(shè)定網(wǎng)頁(yè)的到期時(shí)間，一旦過(guò)期則必須到服務(wù)器上重新調(diào)用。需要注意的是必須使用GMT時(shí)間格式；
4.<meta http-equiv=”Pragma” contect=”no-cache”>是用于設(shè)定禁止瀏覽器從本地機(jī)的緩存中調(diào)閱頁(yè)面內(nèi)容，設(shè)定后一旦離開(kāi)網(wǎng)頁(yè)就無(wú)法從Cache中再調(diào)出；
5.<meta http-equiv=”set-cookie” contect=”Mon,12 May 2004 00:20:00 GMT”>cookie設(shè)定，如果網(wǎng)頁(yè)過(guò)期，存盤(pán)的cookie將被刪除。需要注意的也是必須使用GMT時(shí)間格式；
6.<meta http-equiv=”Pics-label” contect=””>網(wǎng)頁(yè)等級(jí)評(píng)定，在IE的internet選項(xiàng)中有一項(xiàng)內(nèi)容設(shè)置，可以防止瀏覽一些受限制的網(wǎng)站，而網(wǎng)站的限制級(jí)別就是通過(guò)meta屬性來(lái)設(shè)置的；
7.<meta http-equiv=”windows-Target” contect=”_top”>強(qiáng)制頁(yè)面在當(dāng)前窗口中以獨(dú)立頁(yè)面顯示，可以防止自己的網(wǎng)頁(yè)被別人當(dāng)作一個(gè)frame頁(yè)調(diào)用；
8.<meta http-equiv=”Page-Enter” contect=”revealTrans(duration=10,transtion= 50)”>和<meta http-equiv=”Page-Exit” contect=”revealTrans(duration=20，transtion=6)”>設(shè)定進(jìn)入和離開(kāi)頁(yè)面時(shí)的特殊效果，這個(gè)功能即FrontPage中的“格式/網(wǎng)頁(yè)過(guò)渡”，不過(guò)所加的頁(yè)面不能夠是一個(gè)frame頁(yè)面。
Duration的值為網(wǎng)頁(yè)動(dòng)態(tài)過(guò)渡的時(shí)間，單位為秒。
Transition是過(guò)渡方式，它的值為0到23，分別對(duì)應(yīng)24種過(guò)渡方式。如下表：
0：盒狀收縮；1：盒狀放射；2：圓形收縮；3：圓形放射；4：由下往上；5：由上往下；6：從左至右；7：從右至左；8：垂直百葉窗；9：水平百葉窗；10：水平格狀百葉窗；11：垂直格狀百葉窗；12：隨意溶解；13：從左右兩端向中間展開(kāi)；14：從中間向左右兩端展開(kāi)；15：從上下兩端向中間展開(kāi)；16：從中間向上下兩端展開(kāi)；17：從右上角向左下角展開(kāi)；18：從右下角向左上角展開(kāi)；19：從左上角向右下角展開(kāi)；20：從左下角向右上角展開(kāi)；21：水平線狀展開(kāi)；22：垂直線狀展開(kāi)；23：隨機(jī)產(chǎn)生一種過(guò)渡方式。
]]>在我們?cè)O(shè)計(jì)網(wǎng)頁(yè)的時(shí)候，總會(huì)遇到一些不愉快的事情，最常見(jiàn)的莫過(guò)于在后臺(tái)添加內(nèi)容后才發(fā)現(xiàn)顯示的頁(yè)面被撐開(kāi)，導(dǎo)致網(wǎng)頁(yè)極度不美觀。以前大家基本上都是設(shè)計(jì)表格，網(wǎng)上自然不少對(duì)于的解決方法，如今還有div+css標(biāo)準(zhǔn)設(shè)計(jì)，很少看到相關(guān)好的方法，現(xiàn)在瀟湘在線把平時(shí)找到的防止表格被撐開(kāi)的好方法總結(jié)歸納一下，和大家一起分享。
一、直接在網(wǎng)頁(yè)里設(shè)置圖片大小，比如代碼：<img src=”//images.sj33.cn/uploads/allimg/200907/20090701160532188.jpg” width=”600″ height=”500″ border=”0″>，這樣雖然可以限制了圖片大小，但是需要在上傳圖片之前手動(dòng)修改圖片大小，否則上傳的圖片就會(huì)變形。
二、使用如下代碼：<img src=”//images.sj33.cn/uploads/allimg/200907/20090701160532188.jpg” onload=”javascript:if(this.width>600}{this.resized=true;this.style.width=600;}”>
這種方法會(huì)在調(diào)用圖片的時(shí)候，自動(dòng)按比例縮小到指定的寬度，不會(huì)引起圖片的變形，并且也不會(huì)撐破表格，但是缺點(diǎn)是，如果圖片太大，在圖片下載過(guò)程中，也就是圖片顯示過(guò)程中，會(huì)先以圖片原大小顯示，這時(shí)就會(huì)撐破表格，頁(yè)面很難看，二當(dāng)圖片完全顯示后，圖片又會(huì)自動(dòng)縮小。
三、我們可以針對(duì)表格的屬性來(lái)限制大小防止被撐開(kāi)，比如在<table width=”600″ border=”0″ cellpadding=”0″ cellspacing=”0″>里添加代碼“style=”table-layout:fixed;word-wrap:break-word;word-break;break-all;””，其中“table-layout:fixed; ”是為了將表格布局固定住，就可以有效地防止表格被撐開(kāi)，“word-wrap:break-word; ”是控制換行的，也就是強(qiáng)制執(zhí)行換行，這個(gè)在文本內(nèi)容較多的情況下需要使用到，特別是重復(fù)的內(nèi)容出現(xiàn)，不執(zhí)行換行的話，表格就被撐開(kāi)了；而“word-break: break-all; ”可以解決IE的框架被英文（非亞洲語(yǔ)言文本行）撐開(kāi)的問(wèn)題，但是不會(huì)強(qiáng)制換行，只顯示表格寬度里的內(nèi)容。一般情況下只要用到“style=”table-layout:fixed;word-wrap:break-word;””就可以。當(dāng)然，上面調(diào)用的語(yǔ)句可以定義在css里，比如
| table { table-layout: fixed; word-wrap:break-word; } |
四、用css控制圖片自適應(yīng)大小，代碼如：
| img { max-width: 600px; width:expression(this.width > 600 ? “600px” : this.width); overflow:hidden; } |
其中 max-width:600px; 在IE7、FireFox等其他非IE瀏覽器下最大寬度為600px，但在IE6中無(wú)效；width:600px; 在所有瀏覽器中圖片的大小為600px，當(dāng)圖片大小大于600px，自動(dòng)縮小為600px，在IE6中有效；而 overflow:hidden; 指將超出設(shè)置大小的部分隱藏，避免控制圖片大小失敗而引起的表格撐開(kāi)變形。
五、最后總結(jié)一下最實(shí)用的代碼：
如果是表格，請(qǐng)用：
| table { table-layout: fixed; word-break: break-all; } |
如果是div層，請(qǐng)用：
div { |
換行標(biāo)記<br>的使用
換行標(biāo)記<br>是一個(gè)沒(méi)有結(jié)尾的標(biāo)記，HTML文件中任何位置只要使用了<br>標(biāo)記，當(dāng)文件顯示在瀏覽器中時(shí)，該位置之后的文字將顯示于下一行，該<br>標(biāo)記就是起到換行的標(biāo)記！
請(qǐng)注意！在一般的文字文件中，只要按下鍵盤(pán)上的Enter健便用產(chǎn)生了換行，但是在HTML文件中按Enter鍵換行是沒(méi)用的，我們必須用特定的標(biāo)記<br>來(lái)讓它們產(chǎn)生換行！例：
| 以下為引用的內(nèi)容： <html> <head> <title>br標(biāo)記的使用</title> </head> <body> 清平調(diào)<br> 云想衣裳花想容，<br> 春風(fēng)拂檻露華濃，<br> 若非群玉山頭見(jiàn)，<br> 會(huì)向瑤臺(tái)月下逢。<br> </body> </html> |
看看會(huì)出現(xiàn)什么效果呢~！
有人要問(wèn)把整首詩(shī)讓它在頁(yè)面居中該怎么辦呢？如果實(shí)現(xiàn)居中我們可以用到我們以前學(xué)過(guò)的<p align=center>內(nèi)容</p>來(lái)實(shí)現(xiàn)！
例:
| 以下為引用的內(nèi)容： <html> <head> <title>br標(biāo)記的使用</title> </head> <body> <p align=center>清平調(diào)<br> 云想衣裳花想容，<br> 春風(fēng)拂檻露華濃，<br> 若非群玉山頭見(jiàn)，<br> 會(huì)向瑤臺(tái)月下逢。<br> </p> </body> </html> |
================================================
段落標(biāo)記<p>的使用
由<p>標(biāo)記所標(biāo)識(shí)和文字，代表同一個(gè)段落的文字。在瀏覽器中,不同段落文字間除了換行外,有時(shí)還會(huì)以一行空白加以間隔,以便區(qū)別出文字的不同段落,其語(yǔ)法如下:
<p>文字</p>
但在一般的應(yīng)用中,往往只會(huì)在要區(qū)分為段落的文字后,加是上一個(gè)<p>標(biāo).記例:
| 以下為引用的內(nèi)容： <html> <head> </head> <title><p>標(biāo)記的使用</title> </head> <body> 清平調(diào)<p> 云想衣裳花想容，<p> 春風(fēng)拂檻露華濃，<p> 若非群玉山頭見(jiàn)，<p> 會(huì)向瑤臺(tái)月下逢，<p> </body> </html> |
那么<br>和<p>的有什么區(qū)別呢？通俗的講就是，它們?cè)诜中械臅r(shí)候<br>分得行比
<p>分得行距比較大！我們可以看一下：
| 以下為引用的內(nèi)容： <html> <head> </head> <title><p>標(biāo)記的使用</title> </head> <body> 清平調(diào)<br> 云想衣裳花想容，<br> 春風(fēng)拂檻露華濃，<p> 若非群玉山頭見(jiàn)，<p> 會(huì)向瑤臺(tái)月下逢，<p> </body> </html> |
這樣就可以看到效果了，看出來(lái)了嗎？
]]><!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”
“http://www.w3.org/TR/html4/loose.dtd“><!–文檔類(lèi)型–>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″><!–設(shè)置網(wǎng)頁(yè)的文件編碼–>
<meta http-equiv=”expires” content=”2008/10/15 18:00:00″><!–脫機(jī)瀏覽的過(guò)期時(shí)間–>
<meta http-equiv=”pragma” content=”no-cache”><!–禁止網(wǎng)頁(yè)從緩存中讀取–>
<meta http-equiv=”Refresh” content=”5;http://www.webjx.com”><!–網(wǎng)頁(yè)重新定向–>
<meta http-equiv=”set-cookie” content=”2007/10/18 18:00:00″><!–設(shè)置網(wǎng)頁(yè)的cookie過(guò)期時(shí)間–>
<meta http-equiv=”Window-target” content=”_top”><!–設(shè)置網(wǎng)頁(yè)中鏈接的目標(biāo)窗口–>
<meta http-equiv=”Page-Enter” content=”revealTrans(duration=1000000,transition=50000000)”><!–設(shè)置網(wǎng)頁(yè)的打開(kāi)效果–>
<meta http-equiv=”Page-Exit” content=”revealTrans(duration=1000000,transition=50000000)”><!–設(shè)置網(wǎng)頁(yè)的關(guān)閉效果–>
<meta name=”keywords” content=”web,webdesign”><!–設(shè)置網(wǎng)頁(yè)的關(guān)鍵字，搜索的時(shí)候優(yōu)先！??！重要?。?！ 該數(shù)據(jù)被搜索引擎編入索引–>
<meta name=”description” content=”哈哈哈哈哈”><!–插入描述 搜索時(shí)被搜索引擎編入索引–>
<title>標(biāo)題一定不要少啊！對(duì)SEO很有用的！</title>
</head>
<body>
aaa
</body>
</html>
今天來(lái)認(rèn)識(shí)一下兩個(gè)我不太常用到的html標(biāo)簽：sub標(biāo)記和sup標(biāo)記。
定義和用法:
<sub> 標(biāo)簽可定義下標(biāo)文本。<sup> 可定義上標(biāo)文本。都屬于行內(nèi)元素，默認(rèn)比當(dāng)前字體稍小。
例子:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>html中的sub與sup標(biāo)簽</title>
<style type=”text/css”>
* { font-size:12px; font-family:Tahoma}
</style>
</head>
<body>
<div>
這個(gè)標(biāo)簽是<sub>sub</sub>
這個(gè)標(biāo)簽是<sup>sup</sup>
</div>
</body>
</html>
舉一反三：
我們來(lái)看看數(shù)學(xué)方程式這種效果怎么實(shí)現(xiàn)？
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>html中的sub與sup標(biāo)簽</title>
<style type=”text/css”>
* { font-size:12px; font-family:Tahoma}
</style>
</head>
<body>
<div>
x<sub>1</sub>+y<sub>2</sub><sup>3</sup>=15
</div>
</body>
</html>
其他應(yīng)用：
偶然的機(jī)會(huì)，發(fā)現(xiàn)前段時(shí)間的淘寶網(wǎng)在價(jià)格上做了點(diǎn)修飾(不知道什么原因，現(xiàn)在又復(fù)原了)，和以前傳統(tǒng)的價(jià)格表現(xiàn)不一樣。
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>html中的sub與sup標(biāo)簽</title>>
</head>
<style type=”text/css”>
<!–
body { font:12px/1.8 Tahoma}
span.price { font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:700; color:red;}
span.price sub { vertical-align:baseline; font-size:12px;}
span.price sup { vertical-align:text-bottom; color:#555}
–>
</style>
<body>
<span class=”price”><sup>￥</sup>43.<sub>26</sub></span>
</body>
</html>
相信sub和sup標(biāo)簽的應(yīng)用不止局限于此，其他html標(biāo)簽也如此，只要你了解了它們，發(fā)動(dòng)我們的思維和想象，就可以熟練的運(yùn)用它們、展現(xiàn)它們獨(dú)特魅力的一面。