中文字幕二区_国产精品免费在线观看_黄色网站观看_人人草人人澡_日本真实娇小xxxx

您的位置: 首頁 > 技術(shù)文檔 > 網(wǎng)頁制作 > 關(guān)于web標準的思考
用background 插入flash播放器 回到列表 詳細介紹IE7新支持的選擇器
 關(guān)于web標準的思考

作者:wheatlee 時間: 2006-12-05 文檔類型:原創(chuàng) 來自:藍色理想

第 1 頁 對于web標準和W3C XHTML規(guī)范的理解
第 2 頁 HTML標簽的語義

2 HTML標簽的語義

如今Web標準都被通俗的叫做“div+css”或者“層布局”。我不反對這種便宜行事的叫法。但是這樣會陷入一個誤區(qū):即大量的使用div標簽作為結(jié)構(gòu)元素。事實上這是一種更高級的div濫用(Jeffrey Zeldman在《網(wǎng)站重構(gòu)》一書中提到)。

HTML為我們提供了相當豐富的標簽,每個標簽都有它各自的含義。我認為在設(shè)計時,除了遵循HTML語法以外,應(yīng)該充分利用并遵守各標簽的“語義”。如標題文字應(yīng)該包含在h1-h6中,大段的文字內(nèi)容應(yīng)該由<p>進行分段而不是<br />,列表項應(yīng)該放在ul或ol或dl中,表格形式的數(shù)據(jù)應(yīng)該仍然用table布局。

為什么要這樣做?一個很有說服力的原因是,保證在用戶去掉CSS顯示的情況下,網(wǎng)頁能夠盡量有效的將內(nèi)容的結(jié)構(gòu)層次顯示出來。如果全部用div,當去掉CSS之后,整個網(wǎng)頁就失去了層次,只剩下一些雜亂的文字碎片。這并不符合Web標準對低配置兼容性的要求。

我下面詳細的列舉一下我對一些標簽的語義的理解:

p br
先說個最簡單的。分段要用p標簽而不是用br(甚至連續(xù)兩個<br />)。這個似乎不用多說。但是有時候我們不得不放棄這個原則。一個常見的例子是論壇發(fā)帖,如果我想分段,便打回車。而如此傳輸?shù)胶笈_并顯示出來的,顯然就是用<br />分段的。

table th
由于大力宣揚div+css的結(jié)果,似乎現(xiàn)在誰用table布局誰就是未開化的土著。但我認為這種觀點是不正確的。table的含義是表格,因此凡是應(yīng)該以表格形式出現(xiàn)的數(shù)據(jù),仍然應(yīng)該用table布局。簡單的例子是班級同學(xué)的花名冊,包括姓名學(xué)號性別等等,這明顯是一個表格形式的數(shù)據(jù),因此應(yīng)該用table布局。另一個比較值得探討的例子是,blog里面的日歷導(dǎo)航。我曾經(jīng)有見過一個blog程序,它的日歷導(dǎo)航里的各個日期,從1號到30號全用div套好,再使用float:left樣式7個一排的排出當月的日歷。當我取消瀏覽器的CSS顯示之后,日歷的那部分則從1號到30號一豎排下來。我認為這是不對的。因為日歷應(yīng)該是一個表格形式的數(shù)據(jù),因此仍然應(yīng)該用table布局。當取消css之后,應(yīng)該仍然按照一排7個的樣子歸成一個表格。

th則是另一個會被忽視的標簽。由于CSS的萬能,所有的表格單元都可以用td加一個class屬性搞定。但是從語義上講,一些表格單元應(yīng)該用th標簽。比如上文說到的日歷表格,里面的“MON TUE WED... SUN”這些標識星期的單元,就應(yīng)該用th而不是td。

h1-h6
對于h1-h6標簽,從語義上講,它們應(yīng)該適用于所有標題文字。因此,一些如<div class="diary-title>的寫法都是多余的,直接寫成<h1>,然后直接對h1而不是.diary-title定義CSS,不是一樣的效果么?當然,這個規(guī)矩我也不能定得太死,因為有時候標題部分的結(jié)構(gòu)元素并不能簡單的用一個h1就能解決的。但我最多用類似<h1><span></span></h1>的方法將標題的結(jié)構(gòu)嵌套得更復(fù)雜,以滿足表現(xiàn)的需要。

但這里會出現(xiàn)一個語義上的分歧。h1究竟該理解為一級標題呢還是理解為1號字體大小的標題。我通常理解為一級標題,一級標題下再有小標題就用h2。但是事實上回顧HTML設(shè)計之初,h1-h6后面的數(shù)字更多的被理解為控制標題文字大小的。用h3或許只是為了使用三號大小的字體,而并非它就是三級標題。否則一級標題全用h1,個個都是斗大的字,又不得不用CSS來控制字號,感覺很累贅。所以,這是一個待商榷的問題。

ul ol
凡是需要羅列條款的,都應(yīng)該用ul或者ol,而不是用p。比如招聘廣告里的職位需求,比如注意事項,比如操作步驟說明。此外一個流行的用法是網(wǎng)頁的導(dǎo)航菜單也用ul li來列舉,然后再用CSS控制其排列方式。

應(yīng)該要補充的是,別忘了li里面還可以再用ul或ol,形成第二級列表。

dl dt dd
這是一組幾乎被人忘記的標簽,但Jeffrey Zeldman在《網(wǎng)站重構(gòu)》中大力推崇對它們的使用。dl應(yīng)該是“defining list(或是definition list?有知道的朋友請告訴我)”的全稱,一個典型的用法是字典的詞條。單詞的名字放在dt里面,單詞的解釋放在dd里面。而alistapart.com網(wǎng)站更加高明的,將右側(cè)欄整個定義為dl,每個單元的標題用dt,而該單元的內(nèi)容則用dd。

img
img標簽本身也沒啥好說的。只是想老生常談一個,即只有當確實這個元素是內(nèi)容里必須的圖片的時候才使用img,否則應(yīng)該用CSS定義為樣式。如插圖,頭像,表情圖標,這些是內(nèi)容里必須出現(xiàn)的圖片,用img。而其他的比如標題的背景圖,列表項前面的小icon,這些都不應(yīng)該用img標簽。

span
span如今大有和div并駕齊驅(qū)的風頭。但是事實上我認為我們還是應(yīng)該遵從它最初的使用。我個人的理解,span最初就是用來帶class或者style屬性的。它本身不具有明確的語義。因此在文本流中,我們需要對某些文字做樣式上的改變,就用span括起來。比如有些字需要加紅,我就用<span class="red">。

但是值得注意的是,這樣又有可能犯之前h1里面提到的問題。因為有些文字的樣式其實是有現(xiàn)成的標簽的,比如<strong>、<sub>等,我們也應(yīng)該適當?shù)慕o它們一些機會。

a
a是控制超連接的標簽。但有些特殊的情況,我們不一定喜歡用它。比如需要彈出一個小窗口。我沒怎么留心,但我想有些設(shè)計師會將onclick直接定義到“播放”小圖標的<img>標簽里。我個人認為還是應(yīng)該在img外面加一個a,然后將onclick定義到a里面,并記住在js函數(shù)最后寫上return false。如果可以,該a標簽的href屬性也應(yīng)該寫上彈出窗口的URL,保證用戶在禁止JS的情況下仍能夠有效的打開頁面。

我暫時就列出這么多。

最后再總結(jié)一下遵循HTML標簽語義的重要性。Web標準的其中一個要求是低配置的兼容性:當用戶禁用圖片、禁用CSS或禁用JS的時候,我們?nèi)阅軌蜃屗行У臑g覽網(wǎng)頁內(nèi)容。眾所周知強制alt屬性就是為禁用圖片時的兼容性作考慮。而正確的遵循HTML標簽的語義,則是保證禁用CSS時的兼容性。只有當正確使用了HTML標簽,我們的網(wǎng)頁在“CSS裸奔”的時候,才會仍然讓人看得出哪里是導(dǎo)航菜單,哪里是文章標題,日歷表格也不會分崩離析。

經(jīng)典論壇討論
http://bbs.blueidea.com/thread-2699896-1-1.html

出處:藍色理想
責任編輯:moby

上一頁 對于web標準和W3C XHTML規(guī)范的理解 下一頁

◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論

相關(guān)文章 更多相關(guān)鏈接
用好的設(shè)計替代不好的
十條準則做WEB的啟發(fā)式評估
JavaScript的目的
web標準常見問題集合
XHTML代碼的基本應(yīng)用
關(guān)鍵字搜索 常規(guī)搜索 推薦文檔
熱門搜索:CSS Fireworks 設(shè)計比賽 網(wǎng)頁制作 web標準 用戶體驗 UE photoshop Dreamweaver Studio8 Flash 手繪 CG
站點最新 站點最新列表
周大!熬•自然”設(shè)計大賽開啟
國際體驗設(shè)計大會7月將在京舉行
中國國防科技信息中心標志征集
云計算如何讓安全問題可控
云計算是多數(shù)企業(yè)唯一擁抱互聯(lián)網(wǎng)的機會
阿里行云
云手機年終巨獻,送禮標配299起
阿里巴巴CTO王堅的"云和互聯(lián)網(wǎng)觀"
1499元買真八核 云OS雙蛋大促
首屆COCO桌面手機主題設(shè)計大賽
欄目最新 欄目最新列表
淺談JavaScript編程語言的編碼規(guī)范
如何在illustrator中繪制臺歷
Ps簡單繪制一個可愛的鉛筆圖標
數(shù)據(jù)同步算法研究
用ps作簡單的作品展示頁面
CSS定位機制之一:普通流
25個最佳最閃亮的Eclipse開發(fā)項目
Illustrator中制作針線縫制文字效果
Photoshop制作印刷凹凸字體
VS2010中創(chuàng)建自定義SQL Rule
>> 分頁 首頁 前頁 后頁 尾頁 頁次:2/21個記錄/頁 轉(zhuǎn)到 頁 共2個記錄

藍色理想版權(quán)申明:除部分特別聲明不要轉(zhuǎn)載,或者授權(quán)我站獨家播發(fā)的文章外,大家可以自由轉(zhuǎn)載我站點的原創(chuàng)文章,但原作者和來自我站的鏈接必須保留(非我站原創(chuàng)的,按照原來自一節(jié),自行鏈接)。文章版權(quán)歸我站和作者共有。

轉(zhuǎn)載要求:轉(zhuǎn)載之圖片、文件,鏈接請不要盜鏈到本站,且不準打上各自站點的水印,亦不能抹去我站點水印。

特別注意:本站所提供的攝影照片,插畫,設(shè)計作品,如需使用,請與原作者聯(lián)系,版權(quán)歸原作者所有,文章若有侵犯作者版權(quán),請與我們聯(lián)系,我們將立即刪除修改。

您的評論
用戶名:  口令:
說明:輸入正確的用戶名和密碼才能參與評論。如果您不是本站會員,你可以注冊 為本站會員。
注意:文章中的鏈接、內(nèi)容等需要修改的錯誤,請用報告錯誤,以利文檔及時修改。
不評分 1 2 3 4 5
注意:請不要在評論中含與內(nèi)容無關(guān)的廣告鏈接,違者封ID
請您注意:
·不良評論請用報告管理員,以利管理員及時刪除。
·尊重網(wǎng)上道德,遵守中華人民共和國的各項有關(guān)法律法規(guī)
·承擔一切因您的行為而直接或間接導(dǎo)致的民事或刑事法律責任
·本站評論管理人員有權(quán)保留或刪除其管轄評論中的任意內(nèi)容
·您在本站發(fā)表的作品,本站有權(quán)在網(wǎng)站內(nèi)轉(zhuǎn)載或引用
·參與本評論即表明您已經(jīng)閱讀并接受上述條款
推薦文檔 | 打印文檔 | 評論文檔 | 報告錯誤  
專業(yè)書推薦 更多內(nèi)容
網(wǎng)站可用性測試及優(yōu)化指南
《寫給大家看的色彩書1》
《跟我去香港》
眾妙之門—網(wǎng)站UI 設(shè)計之道
《Flex 4.0 RIA開發(fā)寶典》
《贏在設(shè)計》
犀利開發(fā)—jQuery內(nèi)核詳解與實踐
作品集 更多內(nèi)容

雜⑦雜⑧ Gold NORMANA V2