HTML中級教程不良標(biāo)簽_XHTML教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
這次著眼于一些童話世界和史前時代的HTML標(biāo)簽。它們是被HTML標(biāo)準(zhǔn)拋棄的不良、骯臟、十足丑陋的,胡亂荒謬的屬性,只能部分地工作在一個次版本的瀏覽器上或者可以被新標(biāo)簽取代的標(biāo)簽。
有人建議我們不要歌頌標(biāo)準(zhǔn)盡管我們教授基于標(biāo)準(zhǔn)的HTML和CSS,但假如這樣的話,用戶(非凡是初學(xué)者)會遭遇不良的入門方法和不良練習(xí),同時他們并不知道哪里出錯了。所以我們的答案是:一份拒絕不良標(biāo)簽的指南。
HTML已經(jīng)嘗試去除表現(xiàn)和朝向內(nèi)容發(fā)展,導(dǎo)致這樣一個基本原理:從表現(xiàn)(CSS)中分離出內(nèi)容意義(HTML)。這將會給網(wǎng)頁減肥,因為一個表現(xiàn)指令集合(以外部CSS文檔的形式)可以應(yīng)用到多個頁面。這也會使網(wǎng)站更易于治理因為全局變動可以從修改一個單獨的文件得到。
部分不良標(biāo)簽基本上是表現(xiàn)標(biāo)簽(比如small),它們可以用更有意義和更簡單的CSS規(guī)則取代。其他的不僅用于表現(xiàn),而且還是不必要的龐大(比如font標(biāo)簽)或者對可用性有害的可惡的(比如blink)。
標(biāo)簽
下面這些是你可能會經(jīng)常碰到的可以有更好選擇的標(biāo)簽:
屬性
可能你認(rèn)為你正在使用良好的標(biāo)簽,但還是有一些麻煩的寄生蟲屬性潛伏,它們隨時會冒出來。
注重
良好標(biāo)簽,不良使用
要進入你的臥室你可以彎腰通過一個狗洞,但等等,還有一扇有把手的為人類預(yù)備的門!哇,看——剛好適合一個進入。
使用HTML標(biāo)簽(好標(biāo)簽),無論相信與否(相信它�。�,有一個很好的的理由:你使用它們有一個好前提,你就會有一個更好的結(jié)果。
網(wǎng)頁本身對用戶來說,比起HTML標(biāo)簽語法語義更易用,屏幕閱讀器常會在碰到一個ul標(biāo)簽或者有著h1或h2的標(biāo)題標(biāo)簽時強調(diào)突出它們。
在HTML標(biāo)簽世界中最被濫用的就是表格了。表格經(jīng)常用來布局,但表格應(yīng)該僅僅只用來展示表格式數(shù)據(jù),就如它們本身的設(shè)計意圖。不用表格的布局方法不是追求開悟的某種禪,它不僅可以顯著地為網(wǎng)頁減肥,而且更易于維護和重新設(shè)計。
注重
框架
Goldilocks認(rèn)為喝上一杯麥片粥是一個不錯的注重,但三個碩大的肉食哺乳動物忽然出現(xiàn),把她丟出窗戶。框架就是裝麥片粥的杯子。它們看起來似乎不錯,但已經(jīng)到了瀕危階段而且很快就會消失。
大部分的網(wǎng)站并不是用框架,而一般用戶也會把一個文檔當(dāng)作一頁。
有些情況,如你要防止用戶不能把特定的網(wǎng)頁添加到書簽,又如你希望用戶用Email或即時聊天軟件推薦特定的網(wǎng)頁,又或你想把整個網(wǎng)站變得十分復(fù)雜,讓使用屏幕閱讀器的用戶在框架之間頻繁操作,還或者你想迷惑搜索引擎,夠了夠了,你使用框架吧!
總之,框架只會增加復(fù)雜性和喪失可用性。
注重
有人建議我們不要歌頌標(biāo)準(zhǔn)盡管我們教授基于標(biāo)準(zhǔn)的HTML和CSS,但假如這樣的話,用戶(非凡是初學(xué)者)會遭遇不良的入門方法和不良練習(xí),同時他們并不知道哪里出錯了。所以我們的答案是:一份拒絕不良標(biāo)簽的指南。
HTML已經(jīng)嘗試去除表現(xiàn)和朝向內(nèi)容發(fā)展,導(dǎo)致這樣一個基本原理:從表現(xiàn)(CSS)中分離出內(nèi)容意義(HTML)。這將會給網(wǎng)頁減肥,因為一個表現(xiàn)指令集合(以外部CSS文檔的形式)可以應(yīng)用到多個頁面。這也會使網(wǎng)站更易于治理因為全局變動可以從修改一個單獨的文件得到。
部分不良標(biāo)簽基本上是表現(xiàn)標(biāo)簽(比如small),它們可以用更有意義和更簡單的CSS規(guī)則取代。其他的不僅用于表現(xiàn),而且還是不必要的龐大(比如font標(biāo)簽)或者對可用性有害的可惡的(比如blink)。
標(biāo)簽
下面這些是你可能會經(jīng)常碰到的可以有更好選擇的標(biāo)簽:
示例代碼 [www.hl5o.cn]
◆ b 可以用來產(chǎn)生粗體元素。使用strong(意味著強烈強調(diào))代替更有意義,或者用CSS來完成這項工作,增加font-weight: bold的規(guī)則,用來表明粗體元素。
◆ i可以用來產(chǎn)生斜體元素。使用em(表示強調(diào)),這也更有意義�;蛘呖梢杂肅SS來表現(xiàn)斜體:font-style: italic
◆ big可以產(chǎn)生更大字體。使用標(biāo)題(如h1,h2等,當(dāng)文本本來就是一個標(biāo)題時)代替,增加了意義,或簡單地在CSS中使用font-size屬性,獲取更多的控制權(quán)。
◆ small 可以產(chǎn)生小字體。CSS(font-size)再一次取得更多的控制權(quán)。
◆ hr 可用用來展現(xiàn)一條水平線。在CSS中用hr設(shè)計很少見,CSS的border-top,border-bottom屬性或者樸素的圖像做這個效果會更好。
上述的標(biāo)簽與最新的HTML標(biāo)準(zhǔn)盡管都兼容,但對內(nèi)容卻沒有任何好標(biāo)簽應(yīng)有的意義。They could be more useful but they aren't particularly harmful, and might easily be mistaken for innocent butter-wouldn't-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.
◆ u可以為元素產(chǎn)生下劃線。它提醒著下劃線文本還很多連接關(guān)聯(lián)。這就是這個標(biāo)簽死了很久的原因——你不必給非連接文本下劃線。
◆ center可以用來居中在元素內(nèi)部的元素。CSS屬性text-align答應(yīng)不僅僅是center,還有l(wèi)eft、right和justify。
◆ menu用來創(chuàng)建菜單列表。它并沒有ul做的完美,在因為無序列表更通用,ul高高地站在menu的尸體上。
◆ layer和div元素相似,都由CSS絕頂位置。這僅僅能在老版本的Netscape中工作,所以再也沒有什么用。
◆ blink或者marquee。大聲說不!它們應(yīng)該像本身意義一樣被期待,但有著十分有限的支持,和,只會產(chǎn)生非常,非常惡心的笑話。
◆ font,可以用來定義元素的字體名稱,尺寸和顏色,在標(biāo)簽世界中理所當(dāng)然地獲得了臭名昭著標(biāo)簽之王榮譽稱號。舊的網(wǎng)站(甚至新的也有)像滿世界的瘟疫之蟻一樣布滿整個頁面。大部分的font標(biāo)簽激增是從網(wǎng)頁制作軟件帶來的,把font標(biāo)簽包括顏色和尺寸用在每一個元素。font標(biāo)簽被濫用到出現(xiàn)在當(dāng)前的每一個重復(fù)元素的(如,每次你使用p元素),而CSS,則可以用一條簡短的代碼來應(yīng)用重復(fù)元素,甚至控制整個網(wǎng)站。使用CSS方法,不僅可以使頁面比被大量font標(biāo)簽寄生的更苗條,而且更輕易維護因為你所需要做得只是改變CSS文件中的一行,而不是逐一修改每一個font標(biāo)簽。這也增加了維護一個一直保持設(shè)計風(fēng)格一致的網(wǎng)站的可能性。font標(biāo)簽和不恰當(dāng)?shù)谋砀袷褂檬莾蓚產(chǎn)生網(wǎng)頁不必要臃腫的主要原因。
◆ i可以用來產(chǎn)生斜體元素。使用em(表示強調(diào)),這也更有意義�;蛘呖梢杂肅SS來表現(xiàn)斜體:font-style: italic
◆ big可以產(chǎn)生更大字體。使用標(biāo)題(如h1,h2等,當(dāng)文本本來就是一個標(biāo)題時)代替,增加了意義,或簡單地在CSS中使用font-size屬性,獲取更多的控制權(quán)。
◆ small 可以產(chǎn)生小字體。CSS(font-size)再一次取得更多的控制權(quán)。
◆ hr 可用用來展現(xiàn)一條水平線。在CSS中用hr設(shè)計很少見,CSS的border-top,border-bottom屬性或者樸素的圖像做這個效果會更好。
上述的標(biāo)簽與最新的HTML標(biāo)準(zhǔn)盡管都兼容,但對內(nèi)容卻沒有任何好標(biāo)簽應(yīng)有的意義。They could be more useful but they aren't particularly harmful, and might easily be mistaken for innocent butter-wouldn't-melt-in-their-mouth nuggets of pure goodness when standing next to the following filthy tags.
◆ u可以為元素產(chǎn)生下劃線。它提醒著下劃線文本還很多連接關(guān)聯(lián)。這就是這個標(biāo)簽死了很久的原因——你不必給非連接文本下劃線。
◆ center可以用來居中在元素內(nèi)部的元素。CSS屬性text-align答應(yīng)不僅僅是center,還有l(wèi)eft、right和justify。
◆ menu用來創(chuàng)建菜單列表。它并沒有ul做的完美,在因為無序列表更通用,ul高高地站在menu的尸體上。
◆ layer和div元素相似,都由CSS絕頂位置。這僅僅能在老版本的Netscape中工作,所以再也沒有什么用。
◆ blink或者marquee。大聲說不!它們應(yīng)該像本身意義一樣被期待,但有著十分有限的支持,和,只會產(chǎn)生非常,非常惡心的笑話。
◆ font,可以用來定義元素的字體名稱,尺寸和顏色,在標(biāo)簽世界中理所當(dāng)然地獲得了臭名昭著標(biāo)簽之王榮譽稱號。舊的網(wǎng)站(甚至新的也有)像滿世界的瘟疫之蟻一樣布滿整個頁面。大部分的font標(biāo)簽激增是從網(wǎng)頁制作軟件帶來的,把font標(biāo)簽包括顏色和尺寸用在每一個元素。font標(biāo)簽被濫用到出現(xiàn)在當(dāng)前的每一個重復(fù)元素的(如,每次你使用p元素),而CSS,則可以用一條簡短的代碼來應(yīng)用重復(fù)元素,甚至控制整個網(wǎng)站。使用CSS方法,不僅可以使頁面比被大量font標(biāo)簽寄生的更苗條,而且更輕易維護因為你所需要做得只是改變CSS文件中的一行,而不是逐一修改每一個font標(biāo)簽。這也增加了維護一個一直保持設(shè)計風(fēng)格一致的網(wǎng)站的可能性。font標(biāo)簽和不恰當(dāng)?shù)谋砀袷褂檬莾蓚產(chǎn)生網(wǎng)頁不必要臃腫的主要原因。
屬性
可能你認(rèn)為你正在使用良好的標(biāo)簽,但還是有一些麻煩的寄生蟲屬性潛伏,它們隨時會冒出來。
示例代碼 [www.hl5o.cn]
◆ name用來為一個元素指定一個名字,它在如input的表單元素中完全被接受,但在其它地方,name的工作已經(jīng)被id屬性取代。
◆ text和bgcolor可以在body起始標(biāo)簽中定義頁面的基本文本顏色和背景顏色。CSS的color和background-color屬性在應(yīng)用到body選擇符時也可以做到。
◆ background可以在body標(biāo)簽中指定一個背景圖畫。CSS會做得更好,用如background-image的屬性來處理背景圖片。
◆ link、alink、vlink在body標(biāo)簽中用來指定連接(未訪問,激活和已訪問)。CSS寶貝── :link、:active和:visited會做這項工作。
◆ align可以用來對齊某個元素的內(nèi)容(比如 <div align="center">Stuff</div>),但是,像center標(biāo)簽,CSS的text-align屬性是新的老板。
◆ target可以用不同的方式打開一個連接,最常用的是打開新窗口(比如<a href="wherever.html" target="_blank">Help me</a>)�?雌饋聿诲e,但你不要對你的網(wǎng)站這樣做。用戶并不預(yù)期不可思議的東西(比如新窗口)出現(xiàn),而且最常用的瀏覽工具是瀏覽器的后退按鈕,假如你打開新窗口,這將不可用。它是非法和不易用的。
◆ text和bgcolor可以在body起始標(biāo)簽中定義頁面的基本文本顏色和背景顏色。CSS的color和background-color屬性在應(yīng)用到body選擇符時也可以做到。
◆ background可以在body標(biāo)簽中指定一個背景圖畫。CSS會做得更好,用如background-image的屬性來處理背景圖片。
◆ link、alink、vlink在body標(biāo)簽中用來指定連接(未訪問,激活和已訪問)。CSS寶貝── :link、:active和:visited會做這項工作。
◆ align可以用來對齊某個元素的內(nèi)容(比如 <div align="center">Stuff</div>),但是,像center標(biāo)簽,CSS的text-align屬性是新的老板。
◆ target可以用不同的方式打開一個連接,最常用的是打開新窗口(比如<a href="wherever.html" target="_blank">Help me</a>)�?雌饋聿诲e,但你不要對你的網(wǎng)站這樣做。用戶并不預(yù)期不可思議的東西(比如新窗口)出現(xiàn),而且最常用的瀏覽工具是瀏覽器的后退按鈕,假如你打開新窗口,這將不可用。它是非法和不易用的。
注重
示例代碼 [www.hl5o.cn]
保留標(biāo)簽的表現(xiàn)屬性如圖像的width和height,表格的cellpadding和cellspacing,是由于這些元素經(jīng)常使用不同的值。這不是完美的解決方案,但假如你的網(wǎng)頁有大量的圖像和表格,你沒有其他的明智選擇,只好使用它們。
最讓人難以理解的表現(xiàn)屬性是textarea標(biāo)簽,它僅有cols和rows兩個合法屬性,在最新的HTML版本中也是必須的。
最讓人難以理解的表現(xiàn)屬性是textarea標(biāo)簽,它僅有cols和rows兩個合法屬性,在最新的HTML版本中也是必須的。
良好標(biāo)簽,不良使用
要進入你的臥室你可以彎腰通過一個狗洞,但等等,還有一扇有把手的為人類預(yù)備的門!哇,看——剛好適合一個進入。
使用HTML標(biāo)簽(好標(biāo)簽),無論相信與否(相信它�。�,有一個很好的的理由:你使用它們有一個好前提,你就會有一個更好的結(jié)果。
網(wǎng)頁本身對用戶來說,比起HTML標(biāo)簽語法語義更易用,屏幕閱讀器常會在碰到一個ul標(biāo)簽或者有著h1或h2的標(biāo)題標(biāo)簽時強調(diào)突出它們。
在HTML標(biāo)簽世界中最被濫用的就是表格了。表格經(jīng)常用來布局,但表格應(yīng)該僅僅只用來展示表格式數(shù)據(jù),就如它們本身的設(shè)計意圖。不用表格的布局方法不是追求開悟的某種禪,它不僅可以顯著地為網(wǎng)頁減肥,而且更易于維護和重新設(shè)計。
注重
示例代碼 [www.hl5o.cn]
有時侯設(shè)計者還會用在這里提到的這些標(biāo)簽和屬性(非凡是用表格來布局)來做過渡型的設(shè)計──既可以工作在老版本的瀏覽器上(尤其是Netscape4),也可以工作在現(xiàn)代瀏覽器上。表格確實可以在CSS不稱職的Netscape4上有更強的表現(xiàn)控制。很不幸,這些用戶很少而且越來越少了,而展現(xiàn)表格布局的缺點一覽無遺的移動設(shè)備用戶越來越多。上述的無表格設(shè)計可以預(yù)防這些缺點,盡管對一小部分的用戶有些許的表現(xiàn)改變,但還能在所有的瀏覽其中保持著完全的功能。
框架
Goldilocks認(rèn)為喝上一杯麥片粥是一個不錯的注重,但三個碩大的肉食哺乳動物忽然出現(xiàn),把她丟出窗戶。框架就是裝麥片粥的杯子。它們看起來似乎不錯,但已經(jīng)到了瀕危階段而且很快就會消失。
大部分的網(wǎng)站并不是用框架,而一般用戶也會把一個文檔當(dāng)作一頁。
有些情況,如你要防止用戶不能把特定的網(wǎng)頁添加到書簽,又如你希望用戶用Email或即時聊天軟件推薦特定的網(wǎng)頁,又或你想把整個網(wǎng)站變得十分復(fù)雜,讓使用屏幕閱讀器的用戶在框架之間頻繁操作,還或者你想迷惑搜索引擎,夠了夠了,你使用框架吧!
總之,框架只會增加復(fù)雜性和喪失可用性。
注重
示例代碼 [www.hl5o.cn]
只要你遵循下列規(guī)則,你不會在犯錯上有前途:
1)一個標(biāo)簽或者屬性就算只有一點點的跟表現(xiàn)搭上,都不要使用。那是CSS的事。并且CSS做得更好。
2)把標(biāo)簽使用在如它的名字所暗示的用途上。表格標(biāo)簽是用在表格式數(shù)據(jù)上的。標(biāo)題標(biāo)簽是用在標(biāo)題上的。等等等等。
3)特定的內(nèi)容用恰當(dāng)?shù)臉?biāo)簽。列表用list,標(biāo)題用hx(x = 1 - 7)等等等等。
1)一個標(biāo)簽或者屬性就算只有一點點的跟表現(xiàn)搭上,都不要使用。那是CSS的事。并且CSS做得更好。
2)把標(biāo)簽使用在如它的名字所暗示的用途上。表格標(biāo)簽是用在表格式數(shù)據(jù)上的。標(biāo)題標(biāo)簽是用在標(biāo)題上的。等等等等。
3)特定的內(nèi)容用恰當(dāng)?shù)臉?biāo)簽。列表用list,標(biāo)題用hx(x = 1 - 7)等等等等。
相關(guān)XHTML教程:
- HTML5 INPUT placeholder及兼容性處理
- HTML表單里的Label標(biāo)簽
- 淺析HTML與javascript中常用編碼
- CSS網(wǎng)頁布局中必須要了解的幾個XHTML標(biāo)簽
- title和alt 標(biāo)簽介紹及其異同
- 淺析HTML標(biāo)簽strong和em的區(qū)別
- 說說XHTML中的alt屬性和title屬性
- Semantics語義是Html Xhtml是否真正符合標(biāo)準(zhǔn)的重要部分
- 九個W3C XHTML1.0及CSS標(biāo)準(zhǔn)認(rèn)證需要注意的問題
- 請注意頁面head區(qū)域的編碼是不是規(guī)范
- HTML validate - 驗證HTML代碼穿越多重瀏覽器標(biāo)準(zhǔn)
- XHTML具有語義的標(biāo)簽:有關(guān)H1位置的討論
- 相關(guān)鏈接:
- 教程說明:
XHTML教程-HTML中級教程不良標(biāo)簽
。