首先我們定義一塊畫布，然后在上面畫一個圓形。

他看起來應該是這個樣子的：（每一個實例我都會附加圖片以及demo鏈接，方便直觀的理解與源代碼的查看，查看的時候請使用標準瀏覽器）

點擊查看Demo

現(xiàn)在我們就讓這個圓動起來

動起來是這個樣子的（gif循環(huán)之后234三個demo將無法區(qū)分，所以這里的gif只循環(huán)一次，需要多次查看效果請刷新或者進入demo查看）：

點擊查看Demo

我們可以看到圓動起來的時候，circle元素里邊不再是空的，多了一個animate的元素，這個animate含有下面幾個屬性：

attributeName：動畫屬性名，顧名思義，你想要改變哪個屬性

attributeType：動畫屬性的類別，常見的兩個值，XML和css，取決于屬性是在xml里還是在style里，下面改變opacity的demo里，就是使用的css。不寫的時候默認值為auto，他會先搜索css，建議寫上。

from to ：性的開始和結(jié)束值，from可選，當不寫的時候會取默認值。

begin dur ：動畫的開始時間與結(jié)束時間。如果你想打開頁面過幾秒才開始動畫，那么就定義begin就好了。

觀察上邊的動畫，我們發(fā)現(xiàn)動畫結(jié)束的時候又回到了第一幀，如果我們想讓他停在最后一幀，就需要用到 fill 屬性（animate的fill屬性與svg的fill填充要區(qū)分一下）

fill支持參數(shù)有：freeze與remove. 其中remove是默認值，表示動畫結(jié)束直接回到開始的地方，現(xiàn)在再看這個動畫的樣子：

點擊查看Demo

這樣看起來動畫還是沒有滿足我的需求，我想讓動畫一直循環(huán)播放怎么辦？這就要用到 repeatCount

屬性的取值可以是一個數(shù)字，也可以是“indefinite”表示無限循環(huán)。現(xiàn)在動畫變成了這樣：

點擊查看Demo

現(xiàn)在動畫是循環(huán)了，可我還是覺得哪里別扭，第一幀和最后一幀并沒有銜接起來，看起來有突兀。這時候我們就回過頭再看看動畫的開始和結(jié)束。
from和to只能定義開始和終結(jié)兩個時間點，另外還有一個屬性by，是可以替代to的，to表示的是一個絕對值，by表示的是一個offset，比如from為50，to為80，表示從50到80，by為80的話，表示offset為80，那么最終的結(jié)果就是130,如果我們的demo使用by，那么就是by 30.除了by意外，還有一個屬性values，他可以接受一組數(shù)值，比如我們想作出圓的呼吸效果，那么只需要

現(xiàn)在我們再看一眼剛才的動畫

點擊查看Demo

可是現(xiàn)在的效果我還是不滿意，我想讓這個圓形呼吸的同時改變透明度，這就是svg在單個對象上面做多重動畫了。我們在 attributeName=”r” 下面，增加一個animate元素，用來改變圓的透明度

現(xiàn)在這個動畫是這個樣子的（gif并不能很好的展示出透明度的漸變，建議使用標準瀏覽器打開demo查看）：

點擊查看Demo

寫到這里，我上邊的呼吸效果已經(jīng)實現(xiàn)了，但是我現(xiàn)在又有了新的想法，我想放一排的圓，讓一個動完，才讓下一個接著動。這也就是我們編程里的“同步”概念，在svg里就是 同步動畫。同步動畫的實現(xiàn)很簡單，只需要有動畫id，然后下一個動畫的 begin 值 為上一個的 id.end, 比如

我們來看一下同步動畫的實例：

點擊查看Demo

更為強大的是，begin的值可以是表達式，比如

這樣就實現(xiàn)了同步的同時，帶有5s的偏移，也就是第一個結(jié)束5s之后，第二個動畫才開始。OK，同步動畫實現(xiàn)了，不過現(xiàn)在我要改需求……..把剛才的圓還給我，我要讓他旋轉(zhuǎn)。SVG的旋轉(zhuǎn)動畫需要用到另一個<animateTransform>元素，他的用法和animate并沒有本質(zhì)的區(qū)別，只不過屬性需要換一批。比如我們相讓剛才那個圓形旋轉(zhuǎn)起來，等等，圓形原地旋轉(zhuǎn)的話，好像我們并看不出他在旋轉(zhuǎn)呀，那好吧，我們換一個旋轉(zhuǎn)起來視覺效果比較強的圖形，現(xiàn)場寫一個五角星出來，并給他加animateTransform ：

查看一下他動起來的樣子：

點擊查看Demo

和前邊的例子并沒有本質(zhì)區(qū)別，唯一不同的地方在于from部分，from和to都是三個值，第一個值是角度，從0到360度的旋轉(zhuǎn)，第二個和第三個組成一個坐標，這個坐標決定了svg圍繞哪個點來進行旋轉(zhuǎn)，關于這方面的知識推薦新同學了解一下SVG的坐標系相關知識。transform的type可以包括translate，scale,skew等，和css相通，用法也與rotate大同小異，這里就不一一的列舉實例。實現(xiàn)了旋轉(zhuǎn)以后，我們再換一個更強大的動畫元素，<animateMotion>.我們可以用他來實現(xiàn)引導線動畫，讓你的圖形沿著復雜的路徑運動。比如我們先畫一條路徑

哎呀一不小心畫的太圓了，不過沒關系，我們現(xiàn)在把用過的二手五角星拿過來

加入了animateMotion元素，animateMotion的path決定了五角星的運動路線，可以先看一下效果，是這樣的

點擊查看Demo

好像哪里不對勁，對了，五角星沿著路徑轉(zhuǎn)動的時候能不能隨著角度傾斜？那么就需要用到

這個屬性會讓你的圖形隨著你的路徑自動做角度的調(diào)整。加上之后的最終動效是這樣的

點擊查看Demo

總結(jié)語：看完上邊的實例，你其實已經(jīng)站在SVG動畫的門里了，剩下的就是進階知識的獲取，以及熟練度的達成。下一次我繼續(xù)和大家一起學習SVG動畫一些進階的技巧！

原文鏈接: 騰訊ISUX

點擊下載

2. Responsive Slides

點擊下載

3. iView Slider

點擊下載

4. Adaptor

點擊下載

5. Refineslide

點擊下載

6. Nivo Slider

點擊下載

7. Rhinoslider

點擊下載

8. Camera: jQuery Slider with Touch Support

點擊下載

9. Craftyslide

點擊下載

]]> http://m.createwh.com/35192.html/feed 0 http://m.createwh.com/34673.html http://m.createwh.com/34673.html#respond Fri, 07 Jun 2013 01:49:46 +0000 為什么Facebook是藍色的——從最初到最新的版本，幾經(jīng)設計更迭，始終不變的主色調(diào)都是藍色？答案其實很簡單，根據(jù)《紐約客》的一次采訪，F(xiàn)acebook的創(chuàng)始人馬克·扎克伯格其實是一個紅綠色盲，他只能分辨出藍色：“藍色對我來說是色彩最豐富的顏色。”

* Facebook最初始的設計界面，那時候它還叫做thefacebook.com。當時，想要在上面開個賬戶必須有一個以.edu（哈佛大學）結(jié)尾的郵箱才行。

無心插柳也好，有意栽培也好，色彩往往能夠體現(xiàn)互聯(lián)網(wǎng)品牌的創(chuàng)始人的審美和喜好，而設計師對于色彩的挑選和取舍，也是完成作品中的必備環(huán)節(jié)。

Youtube設計師Marc Hemeon就曾收集了18組流行網(wǎng)站或產(chǎn)品的按鈕設計色彩，用來評估和調(diào)研色彩對于用戶心理的影響：

對應網(wǎng)站或產(chǎn)品的謎底如下：

1、Google
2、Twitter
3、Facebook
4、Microsoft
5、Pinterest
6、Yahoo
7、Instagram
8、Flickr
9、Spotify
10、Rdio
11、Svbtle
12、Medium
13、Basecamp
14、Square
15、Amazon
16、Quora
17、LinkedIn
18、Path

大部分網(wǎng)站或產(chǎn)品的按鈕色彩都不會超過3種，指向“動作”的按鈕應當統(tǒng)一為同一種顏色，比如Google的“搜索”按鈕是藍色，而Twitter的“注冊”按鈕則是明亮的黃色。

社交分享工具Buffer的聯(lián)合創(chuàng)始人Leo Widrich在博客上補充了關于色彩的一些觀點，摘錄部分內(nèi)容如下。

色彩能夠幫助品牌極為簡易的建立用戶認知：

灰色：象征冷靜、中立；（蘋果、維基百科、紐約時報……）
綠色：象征健康、生命；（BP石油、食品超市whole foods、星巴克……）
藍色：象征可靠、力量；（戴爾、大眾汽車、IBM……）
紫色：象征智慧、想象；（雅虎、T-Mobile、科幻主題電視臺Syfy……）
紅色：象征血氣、年輕；（可口可樂、樂高、肯德基……）
橙色：象征歡樂、信任；（芬達、亞馬遜、火狐……）
黃色：象征溫暖、透明；（百思買、法拉利、麥當勞……）

站在消費者角度，色彩也能夠在理解和決策階段起到一定的影響作用：

黃色：吸引注意力的購物窗口；
紅色：刺激心血的緊迫感，常出現(xiàn)在清倉場景；
藍色：多用于銀行和商業(yè)機構里，強調(diào)安全；
綠色：讓人聯(lián)想到富裕和輕松，緩解壓力；（支付寶的信用卡還款按鈕選擇了綠色作為主色調(diào)，能夠理解原因了吧）
橙色：呼叫意味濃厚，用于創(chuàng)建下訂、購買、出售的行動；
粉色：服務于女性和年輕女孩的浪漫色調(diào)；
黑色：奢侈品的最佳匹配；
紫色：給人舒緩&平靜的感受，常被美容及抗衰老產(chǎn)品使用；

男性和女性對于色彩的喜好度有所偏差：

企業(yè)分析服務公司KISSmetrics的調(diào)查報告顯示（這份報告主要用于建議App產(chǎn)品的創(chuàng)業(yè)者在產(chǎn)品設計上的策略）——
女性喜愛的色彩：藍色、紫色和綠色；
女性討厭的色彩：橙色、棕色和灰色；

男性喜愛的色彩：藍色、綠色和黑色；
男性喜愛的色彩：褐色、橙色和紫色；

色彩能夠決定轉(zhuǎn)化率的差距：

美國數(shù)字營銷公司Hubspot曾經(jīng)做過一場A/B Testing，用于測試不同顏色對于用戶點擊轉(zhuǎn)化造成的差異——

左右兩個測試顏面在內(nèi)容上完全一直，唯一不同的是按鈕的顏色，在超過2000人次的樣本測試中，最終紅色方案的點擊率超過綠色方案的點擊率足足21%。
而在測試之前，大部分的研究員都猜測綠色方案會獲得更高的點擊，因為就直覺而言，綠色代表著通行、準許通過的意思，而紅色則更傾向于警告、阻止意味。

最后，為什么Html語言里超鏈接的默認顏色是藍色的？

因為藍色是從灰色底色中脫穎而出的最佳色調(diào)。

這個決定是由Tim Berners-Lee——萬維網(wǎng)的發(fā)明者做出的。在他那個年代，互聯(lián)網(wǎng)的第一代瀏覽器Mosaic顯示的網(wǎng)頁底色通常都是灰底黑字，為了讓超文本鏈接能夠更方便識別，Tim Berners-Lee將超鏈接定義為藍色并帶有下劃線的文字。

一個好的網(wǎng)頁設計會給用戶帶來記憶深刻，好用易用的體驗。從網(wǎng)頁設計的版式、信息層級、圖片、色彩等視覺方面的運用，直接影響到用戶對網(wǎng)站的最初感覺，而在這些內(nèi)容中，色彩的配色方案是至關重要的，網(wǎng)站整體的定位、風格調(diào)性都需要通過顏色，給用戶帶來感官上的刺激，從而產(chǎn)生共鳴。

從色彩研究的方向來看，色彩分為色調(diào)、飽和度、明度三方面，顏色的運用是純色之間的關系，以及它們混合在一起的效果。我們可以從當前眾多的網(wǎng)絡應用中的實例，找到色彩運用的一些廣泛的色彩關系和配色方案，通過這些色彩的關系，可以作為實際工作學習中配色的指南。

單色：使用一種色調(diào)不同的飽和度與亮度

近似色：使用色盤中的鄰近色調(diào)

互補色：使用色盤中的相反色調(diào)

分割互補色：使用一個色調(diào)和兩個與它的補色鄰近色調(diào)

三分色階：使用色盤中的等距三個色調(diào)

雙互補色：使用兩個色調(diào)和它們的補色

近似互補色：使用兩個互補色調(diào)和一個顏色相近色調(diào)

中間色：使用沒有色度的顏色

突出色：在沒有色調(diào)的顏色中突出一個高飽和度的色調(diào)

暖色：使用色盤中暖色調(diào)的顏色

冷色：使用色盤中冷色調(diào)的顏色

原文地址：阿里巴巴良無限UPD團隊

下面介紹常見的CSS簡寫規(guī)則：

一、盒子大小

這里主要用于兩個屬性：margin和padding，我們以margin為例，padding與之相同。盒子有上下左右四個方向，每個方向都有個外邊距：

margin-top:1px;
margin-right:2px;
margin-bottom:3px;
margin-left:4px;

你可以簡寫成：

margin:1px 2px 3px 4px;

語法 margin:top right bottom left;

//四個方向的邊距相同，等同于margin:1px 1px 1px 1px;
margin:1px;
//上下邊距都為1px，左右邊距均為2px，等同于margin:1px 2px 1px 2px;
margin:1px 2px;
//右邊距和左邊距相同，等同于margin:1px 2px 3px 2px;
margin:1px 2px 3px;
//注意，這里雖然上下邊距都為1px，但是這里不能縮寫。
margin:1px 2px 1px 3px;

二、邊框(border)

邊框的屬性如下：

border-width:1px;
border-style:solid;
border-color:#000;

可以縮寫為一句：

border:1px solid #000;

語法 border:width style color;

三、背景(Backgrounds)

背景的屬性如下：

background-color:#f00;
background-image:url(background.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background-position:00;

可以縮寫為一句：

background:#f00 url(background.gif) no-repeat fixed 0 0;

語法是background:color image repeat attachment position;
你可以省略其中一個或多個屬性值，如果省略，該屬性值將用瀏覽器默認值，默認值為：

• color: transparent

• image: none

• repeat: repeat

• attachment: scroll

• position: 0% 0%

四、字體(fonts)

字體的屬性如下：

font-style:italic;
font-variant:small-caps;
font-weight:bold;font-size:1em;
line-height:140%;
font-family:"Lucida Grande",sans-serif;

可以縮寫為一句：

font:italic small-caps bold 1em/140%"Lucida Grande",sans-serif;

注意，如果你縮寫字體定義，至少要定義font-size和font-family兩個值。

五、列表(lists)

取消默認的圓點和序號可以這樣寫list-style:none;,
list的屬性如下:

list-style-type:square;
list-style-position:inside;
list-style-image:url(image.gif);

可以縮寫為一句：

list-style:square inside url(image.gif);

六、顏色(Color)

16進制的色彩值，如果每兩位的值相同，可以縮寫一半。例如：

Aqua: #00ffff ——#0ff
Black: #000000 ——#000
Blue: #0000ff ——#00f
Dark Grey: #666666 ——#666
Fuchsia:#ff00ff ——#f0f
Light Grey: #cccccc ——#ccc
Lime: #00ff00 ——#0f0
Orange: #ff6600 ——#f60
Red: #ff0000 ——#f00
White: #ffffff ——#fff
Yellow: #ffff00 ——#ff0

七、屬性值為0

書寫原則是如果CSS屬性值為0，那么你不必為其添加單位(如:px/em)，你可能會這樣寫:

padding:10px 5px 0px 0px;

試試這樣吧:

padding:10px 5px 00 ;

八、最后一個分號

最后一個屬性值后面分號可以不寫，如：

#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal;
}

可以簡寫成:

#nav{
border-top:4px solid #333;
font-style: normal;
font-variant:normal;
font-weight: normal
}

九、字體粗細(font-weight)

你可能會這樣寫:

h1{
font-weight:bold;
}
p{
font-weight:normal;
}

可以簡寫成:

h1{
font-weight:700;
}
p{
font-weight:400;
}

十、圓角半徑(border-radius)

border-radius是css3中新加入的屬性，用來實現(xiàn)圓角邊框。

-moz-border-radius-bottomleft:6px;
-moz-border-radius-topleft:6px;
-moz-border-radius-topright:6px;
-webkit-border-bottom-left-radius:6px;
-webkit-border-top-left-radius:6px;
-webkit-border-top-right-radius:6px;
border-bottom-left-radius:6px;
border-top-left-radius:6px;
border-top-right-radius:6px;

可以簡寫成:

-moz-border-radius:0 6px 6px;
-webkit-border-radius:0 6px 6px;
border-radius:0 6px 6px;

語法 border-radius:topleft topright bottomright bottomleft

形式需要思考創(chuàng)造，圖片素材需要學習處理，文字需要梳理編排，但網(wǎng)頁色彩是不是一定需要有天生的色感、豐富的理論和多年經(jīng)驗沉淀才能運用自如？

當然不！

關于網(wǎng)頁配色

網(wǎng)頁配色的文章在網(wǎng)絡上很多，甚至有些泛濫，稍微關注過的同學應該都知道“色輪”、“色卡”等輔助性配色工具，但那更多都是從印刷介質(zhì)上的色彩系統(tǒng)延伸出來的，不完全適用于網(wǎng)頁，甚至造成很大的局限，比如你會較真的通過色輪來選用網(wǎng)頁色彩嗎？再比如通過下面提供的配色組合，你能自由的應對一個又一個的類型相若的網(wǎng)頁設計需求嗎？

由于CMYK與RGB色彩模式不同，網(wǎng)頁的色彩呈現(xiàn)數(shù)量要龐大的多，選用也應該更自由，但在配色上卻常碰到設計作品偏臟、發(fā)灰、花哨等大問題，這事兒得解決。

網(wǎng)頁案例剖析

“網(wǎng)頁配色不宜超過三種。”

真理，這沒錯，但更多是從色相（赤橙黃綠青藍紫等不同顏色）上來說的。

色相差異明顯，主要色彩的選取就比較好辦，常見的有對比色、臨近色、冷暖色調(diào)互補等方式，可以簡單設定，或直接從成功作品中借鑒主輔色配比都可以，比如常見的朱紅點綴深藍、明黃點綴深綠等。

但通常，我們需要面對的設計需求在色彩分配上會有更多的問題出現(xiàn)：

（由于本人從事游戲網(wǎng)頁視覺設計工作，故案例均以游戲網(wǎng)頁做示意說明，其他網(wǎng)頁類型可以做延伸思考或僅作參閱）

如上所示，根據(jù)網(wǎng)頁信息的多寡，會有更多色彩區(qū)域的層級劃分和文字信息層級區(qū)分需求，那么在守住“網(wǎng)頁色彩（相）不超過三種”的原則下，只能尋找更多同色系的色彩來完善設計，也就是在“飽和度”和“明度”上做文章。

這也就是本文為解決這一問題所要分享的“天然”配色技巧：疊柔配色法。

疊柔配色技巧分享（這里才是正文，上面都是廢話）

這個方法非常簡單，無需知道三角函數(shù)、四則運算，無需理解色彩指數(shù)和直方圖，甚至不用了解色階曲線和亮度強弱……甚至，你可以對色彩毫無知覺。

★只需要明白三個關鍵詞：疊加、柔光和透明度（填充）。

如果連這三個關鍵詞都不甚明了，那就記住他們所在的位置（下圖）：

注意：透明度與填充略有不同，填充不會影響到“混合選項”的效果，而透明度則是作用于整個圖層。

順便，花幾分鐘時間了解一下這個配色技巧的原理：

即：用純白色（#ffffff）和純黑色（#000000）通過“疊加”和“柔光”的混合模式（效果類似調(diào)整飽和度和明度），在任意一個色彩上得到最匹配的顏色（然后通過調(diào)整透明度選取最適合的輔色）。

（上圖示例中，調(diào)整疊/柔模式的黑白色塊的不同透明度（取10%到100%整數(shù)值為例）就可以得到差異較明顯的40種配色，通過這種技巧，理論上每一種顏色都可以輕易獲得無窮盡的“天然配色”，并且是“0失誤”?。?/p>

★ 由于疊加和柔光模式對圖像內(nèi)的最高亮部分和最陰影部分無調(diào)整，因此該配色方法對純黑色和純白色不起作用。

設計實戰(zhàn)演示：

要不要像上面圖示看起來的那樣復雜？
不用，只需要理解了上面的方法，就可以忘記圖示，在你的設計工作中自由發(fā)揮！

簡單三步：
①  一個黑或白色，或黑白漸變（可以是點、線、面…甚至字體）
②  混合模式選擇疊加或柔光
③  調(diào)整透明度（1%-100%隨意，省心的做法是直接鍵入一個整數(shù)值，比如：輕質(zhì)感類頁面可以選擇20%-40%，重質(zhì)感感類可以鍵入60%或以上）

如下圖：

（無論你采用何種主色，用黑白色彩疊加或柔光，你都可以輕松自如的獲得完美匹配的整套色系。）

這并不僅僅適用于色域劃分或提取幾個輔色，如下圖：字體顏色、細節(jié)線條、按鈕漸變、邊角高光、描邊陰影……都可以用黑白色肆意揮灑！

方法延伸（細節(jié)篇）

假如將該方法運用到一個按鈕上……

通過混合選項中的“陰影、外發(fā)光、描邊（不適用疊柔法）、內(nèi)陰影、內(nèi)發(fā)光”可以自由的刻畫5層像素級細節(jié)（當然，通常在實際的使用中刻畫1到3層即可）。

且無論形狀、色彩如何變化，這些細節(jié)都如影隨形、色彩都隨變而變~可節(jié)省大量重調(diào)細節(jié)或盲目選取配色的時間！

細節(jié)、品質(zhì)和效率，一石三鳥，兼而得之！

（近期看到設計圈有討論“網(wǎng)頁雕花不可取”的課題，假如讓細節(jié)成為習慣，讓美感成為直覺，雕花也便只是普通設計行為而已。）

案例歷練：

后記：

疊柔配色法：無招勝有招~把抓不住的感覺交給精密的計算機，科學化進行你的設計。
更短的時間，更高的品質(zhì)，你，值得擁有~……
另：方法是死的，人是活的，配合色階、曲線、色彩平衡等，還可以玩出更多花樣來……

分享來自：TGideas-騰訊游戲官方設計團隊

    [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

網(wǎng)頁打開的順序都是按頁面從上到下的順序加載完成的，所以要想使廣告不影響頁面打開速度，就要等頁面全部打開完成后，再加載JS代碼。
 
先加載完頁面再加載廣告的原理：
網(wǎng)頁打開的順序都是按頁面從上到下的順序加載完成的，所以要想使廣告不影響頁面打開速度，就要等頁面全部打開完成后，再加載JS代碼。等頁面加載完再加載廣告其實就是將廣告的 JS 代碼放在頁面的底部，等頁面內(nèi)容打開完成后再加載到廣告代碼，再用頁面上預留好的的 DIV 輸出廣告。

使用方法：
1、將以下代碼放置頁面中想要放廣告的地方
<div id=”myads”>載入中…</div>

2、將一下代碼放置頁面底部，也就是footer，php文件的底部。
<div id=”span_myads”>這里放廣告代碼</div>
<script type=”text/javascript”>
document.getElementById(“myads”).innerHTML = document.getElementById(“span_myads”).innerHTML;
document.getElementById(“span_myads”).innerHTML = “”;
</script>

OK，這樣就實現(xiàn)了先加載完頁面再加載廣告了，怎么樣不影響大家閱讀吧~

    [Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]

在css中使用margin可以將margin-top，margin-right，margin-bottom，margin-left，縮寫為一個標記，順序為上右下左（順時針）。

margin標記可以帶一個、二個、三個、四個參數(shù)，各有不同的含義。

既然HTML中定義了這么多標簽，而且每種標簽都有其用法，我們?yōu)槭裁床槐M量去使用這些標簽呢。下面收集并整理了36個常被我們遺忘卻非常有用的HTML標簽。

1. <!? ?> :注釋

2. <!DOCTYPE>：文檔類型聲明

文檔類型，會使瀏覽器使用相應的方式加載網(wǎng)頁并顯示，忽略DTDs，將使網(wǎng)頁進入一種混亂模式(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)就不是一種提取首字母的縮寫.有時候縮寫經(jīng)常會在最后加一個。

4. <acronym>： 取首字母的縮寫

示例：<acronym title=”Cascading Style Sheets”>CSS</acronym>

5. <area>： 定義圖像點擊區(qū)域

area標簽是單獨出現(xiàn)的，<area />

area標簽必須使用在map標簽中，而且必須配合img標簽使用。

屬性：

Common ― 一般屬性

accesskey ― 鏈接的快捷鍵訪問方式

alt ― 圖像的提示文字

coords ― 定義可點擊區(qū)域圖形的坐標

href ― HTML鏈接源的URL

nohref ― 圖像點擊排除的區(qū)域，當不使用href時應使用nohref

shape ― 可點擊區(qū)域的形狀

tabindex ― 使用”Tab”鍵的遍歷順序

target ― 鏈接目標

area是cPent-side image map area的意思，區(qū)域

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標簽是單獨出現(xiàn)的，<base />

base標簽只能放置在head標簽內(nèi)

當使用相對路徑定義鏈接時，可以使用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標簽通?？梢允褂迷诳蚣苕溄又校?br /> <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標簽是成對出現(xiàn)的，以<blockquote>開始，以</blockquote>結(jié)束

屬性：

Common ― 一般屬性

cite ― 被引用內(nèi)容的URI

示例：

<blockquote cite=”http://www.renniaofei.com/xhtml/”> <p>標準網(wǎng)頁設計要區(qū)分內(nèi)容與表現(xiàn)，學習標準網(wǎng)頁設計。</p> </blockquote>

8. <button> ：定義按鈕

button標簽是成對出現(xiàn)的，以<button>開始，</button>結(jié)束

可以定義比input內(nèi)容更豐富的按鈕。

屬性：

Common ― 一般屬性

accesskey ― 快捷鍵訪問方式

disabled ― 禁止使用

name ― 標簽名稱

tabindex ― 使用”Tab”鍵的遍歷順序

type ― 按鈕類型

button ― 普通按鈕

reset ― 重置表單按鈕

submit ― 提交按鈕

value ― 通過表單傳遞到服務器端的數(shù)據(jù)

button是push button的意思，按鈕

button標簽示例：

<button type=”submit”>提交</button>

一個使用文字的普通的提交按鈕

<button type=”reset”> 從<strong>任鳥飛</strong>提交表單 </button>

改變按鈕內(nèi)加重文字的button標簽

<button type=”button”> <img src=”renniaofei.png” alt=”提交” /></button>

說明：使用圖片的button標簽，注意有alt的提示文字。

9. <caption>：HTML表格的標題

caption標簽是成對出現(xiàn)的，以<caption>開始。</caption>結(jié)束

屬性：

Common ― 一般屬性

caption:標題

示例：

<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>

說明：

caption標簽可以為表格提供一個描述，和圖像的說明alt比較類似.默認情況下，瀏覽器顯示表格標題在表格的上方。

CSS里的caption-side屬性用來控制表格標題顯示的位置。

10. <cite>引用

cite標簽是成對出現(xiàn)的，以<cite>開始，以</cite>結(jié)束

屬性：

Common ― 一般屬性

cite ― 引用內(nèi)容的URI

cite是citation的縮寫

示例：

<cite cite=”http://www.renniaofei.com/”>一步步的教我學會HTML與XHTML</cite>

11. <col> 可以對HTML表格結(jié)構化分區(qū)后的一個或幾個區(qū)域使用同樣的樣式行

col標簽是單獨出現(xiàn)的，<col />

屬性：

Common ― 一般屬性

span ― 定義一個col跨越的列數(shù),默認值為1

12. <colgroup>表示對HTML表格進行結(jié)構化的分區(qū),在此分區(qū)中可以通過使用col定義每列表格的樣式

colgroup標簽是成對出現(xiàn)的，以<colgroup>開始，以</colgroup>結(jié)束

屬性：

Common ― 一般屬性

span ― 定義一個colgroup跨越的列數(shù),默認值為1

13. <dd>代表HTML自定義列表描述

dd標簽是成對出現(xiàn)的，,以<dd>開始，</dd>結(jié)束

屬性：

Common ― 一般屬性

dd是definition description的縮寫

14. del 標簽 ― 定義被刪除的文本

del標簽是成對出現(xiàn)的,以<del>開始，</del>結(jié)束

del通常應連同ins標簽一同使用，表示被刪除與被插入的文本

通過del與ins定義文檔可以幫助了解文檔內(nèi)容的修改過程，利于多人編輯系統(tǒng)

使用del定義的文本通常帶有刪除線

屬性：

Common ― 一般屬性

cite ― 引用網(wǎng)址，定義為何刪除的引用網(wǎng)址

datetime ― 刪除的時間與日期

title ― 定義刪除的目的或提示

del是deleted text的縮寫，刪除文本

del標簽示例：

<p>任鳥飛網(wǎng)頁設計網(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> 定義多層目錄列表

不符合標準網(wǎng)頁設計的理念，不贊成使用.

dir標簽是成對出現(xiàn)的，以<dir>開始，</dir>結(jié)束

屬性：

Common ― 一般屬性

dir是directory Psts的縮寫，目錄列表

16. <dfn> ? 定義標簽

dfn標簽是成對出現(xiàn)的，以<dfn>開始，以</dfn>結(jié)束

屬性：

Common ― 一般屬性

dfn是defining instance的縮寫

示例： <dfn>任鳥飛</dfn>網(wǎng)頁設計網(wǎng)!

17. <dl> 代表HTML自定義列表

dl標簽是成對出現(xiàn)的，以<dl>開始，</dl>結(jié)束

自定義列表的開始使用<dl>標簽，列表中每個元素的標題使用<dt>(definition term)定義，后面跟隨<dd>(definition description)用于描述列表中元素的內(nèi)容.

屬性：

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標簽是成對出現(xiàn)的，以<dt>開始，</dt>結(jié)束

屬性：

Common ― 一般屬性

dt是definition term的縮寫

19. <em> 強調(diào)標簽

em標簽是成對出現(xiàn)的，以<em>開始，以</em>結(jié)束

屬性：

Common ― 一般屬性

em是emphasis的縮寫

示例： 強調(diào)一下,<em>不要</em>和我開玩笑!

20. <ins> 定義被插入的文本

ins標簽是成對出現(xiàn)的，以<ins>開始，</ins>結(jié)束

ins通常應連同del標簽一同使用，表示被插入與被刪除的文本

通過ins與del定義文檔可以幫助了解文檔內(nèi)容的修改過程，利于多人編輯系統(tǒng)

使用ins定義的文本通常帶有下劃線

屬性：

Common ― 一般屬性

cite ― 引用網(wǎng)址，定義為何插入的引用網(wǎng)址

datetime ― 插入的時間與日期

title ― 定義插入的目的或提示

ins是inserted text的縮寫，插入文本

ins標簽示例：

<p>任鳥飛網(wǎng)頁設計網(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>標簽表明使用者輸入的文字

kbd標簽是成對出現(xiàn)的，以<kbd>開始，以</kbd>結(jié)束

屬性:

Common ― 一般屬性

示例： To exit, type <kbd>QUIT</kbd>.

22. <map>定義圖像點擊區(qū)域的集合

map標簽是成對出現(xiàn)的,以<map>開始，</map>結(jié)束

map標簽必須配合area標簽使用

map標簽中name與id屬性指定的值必須與定義圖像點擊區(qū)中圖像(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> 定義菜單列表

不符合標準網(wǎng)頁設計的理念，不贊成使用。

menu標簽是成對出現(xiàn)的,以<menu>開始，</menu>結(jié)束

屬性

Common ― 一般屬性

menu:菜單

24. <noframes>對不支持框架的設備進行提示

noframes標簽是成對出現(xiàn)的，以<noframes>開始，</noframes>結(jié)束

由于frameset內(nèi)不能包含body標簽，因此noframes內(nèi)部必須包含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>任鳥飛網(wǎng)頁設計網(wǎng)使用了框架技術，但是您的瀏覽器不支持框架，請升級您的瀏覽器以便正常訪問。</p> < /body> </noframes> </frameset>

25. <noscript>無法加載腳本時的提示文字

noscript標簽是成對出現(xiàn)的，以<noscript>開始,以</noscript>結(jié)束

示例

<noscript>此頁面無法加載js腳本代碼。</noscript>

26. <q>

表示一個行引用

q標簽是成對出現(xiàn)的，以<q>開始，以</q>結(jié)束。

屬性:

Common ― 一般屬性

cite ― 引用內(nèi)容的URI

q是quoted text的縮寫

示例：

<cite>古人</cite>云：<q>良言一句三冬暖，惡語傷人六月寒。</q>

27. <s>定義刪除線的文字

不符合標準網(wǎng)頁設計的理念，不贊成使用。

s標簽是成對出現(xiàn)的，以<s>開始，以</s>結(jié)束

屬性：

Common ― 一般屬性

s是strikethrough的縮寫

28. <sub>表示下標

sub標簽是成對出現(xiàn)的，以_{開始。以}結(jié)束

屬性：

Common ― 一般屬性

sub是subscript的縮寫

29. <sup>表示上標

sup標簽是成對出現(xiàn)的，以^{開始，以}結(jié)束

屬性：

Common ― 一般屬性

sup是superscript的縮寫

30. <tbody> 表示HTML表體

瀏覽器顯示表格時，通常是完全下載表格后，再全部顯示，所以當表格很長時,可以使用tbody分段顯示。

31. <tfoot>表示HTML表腳

表格的表腳tfoot，可以使用單獨的樣式定義表腳，并且在打印時可以在分頁的下部打印表腳。

32. <th>代表HTML表格中的表頭

th標簽是成對出現(xiàn)的,以<th>開始，</th>結(jié)束

屬性：

Common ― 一般屬性

abbr ― 代表表頭的簡寫

axis ― 對單元格在概念上分類

colspan ― 一行跨越多列

headers ― 連接表格的數(shù)據(jù)與表頭

rowspan ― 一列跨越多行

scope ― 定義行或列的表頭

aPgn ― 代表水平對齊方式(left(左對齊) | center(居中對齊) | right(右對齊) | justify)(此屬性應該使用CSS實現(xiàn))

vaPgn ― 代表垂直對齊方式(top(頂部對齊) | middle(中部對齊) | bottom(下部對齊) | basePne(基線對齊))(此屬性應該使用CSS實現(xiàn))

th是table header cell的縮寫

示例：

<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，可以使用單獨的樣式定義表頭，并且在打印時可以在分頁的上部打印表頭

34. l 標簽 ― 表示一段語句

l標簽是成對出現(xiàn)的，以<l>開始,以</l>結(jié)束

屬性：

Common ― 一般屬性

l是Pne of text的縮寫

示例： <l>一行實實在在的文字!</l>

35. <Code>代碼標簽

code標簽是成對出現(xiàn)的，以<code>開始，以</code>結(jié)束，常用于顯示源代碼。

36. <fieldset> 表單分組

如果一個頁面的表單項太多，我們最好把它們分組顯示，就像使用p標簽分開段落一樣，可以使用fieldset與legend標簽對表單內(nèi)容分組。

fieldset標簽是成對出現(xiàn)的，以<fieldset>開始，以</fieldset>結(jié)束

一個表單可以有多個<fieldset>，每對<fieldset>為一組，每組內(nèi)容的描述可以使用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>