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