首頁 web前端 css教學 我的一些關於web標準的思考筆記(一)_經驗交流

我的一些關於web標準的思考筆記(一)_經驗交流

May 16, 2016 pm 12:10 PM

我是從去年初開始學習web標準的,兩年下來也有些心得。最近跳槽了剛好閒在家裡,寫一些出來跟大家交流一下。

1 對於web標準和W3C XHTML規範的理解

按照習慣的理解,這兩個概念似乎都是指的一個東西(就是咱們在這個版裡討論的這些個"高深理論“^_^)。但我認為,事實上從技術的角度上講,這兩個事物幾乎沒有任何相關性。 web標準簡而言之就是將頁面的結構、表現和行為各自獨立實現,更通俗的講就是如今招募時流行的語言」div+css"。但W3C XHTML的任何一個版本都沒有對web標準理念作限制。很明顯的,我們可以用xhtml 1.1寫出一個table定位的網頁。說到這裡,或許會認為我講了一堆廢話。但任何一項技術,只有當你對基礎概念有足夠清晰的認識的時候,你才會正確的使用它。我從下面兩個方面,來談談如今Web標準應用走向的兩個歧途:

第一種情況很簡單。自以為只要使用了XHTML+CSS就是Web標準了。頁裡面遍地是class和id。肆意的為每個細節都單獨定義class。這樣的頁面和傳統的html的差別就是img標籤裡多了個"/"。事實上這樣子還不如回到傳統的html,至少我可以輕鬆的使用font,而不用總是跟查字典一樣去查樣式表。另一種更隱蔽的隨意使用CSS的我在以後講。

第二種情況我覺得比較難理解一些,即試圖用各種紛繁複雜的div嵌套和css語句來實現你所想要的表現。很簡單的一個例子就在我剛看到的一個貼文" 不用切圖的頁面圓角"。首先我想肯定的是這個創意確實很不錯,使用CSS功能將圓角「畫」出來。為此,設計者必須在對應的位置加上一大段如下的程式碼:




但是,這裡嚴重違反了Web標準的基本概念-結構與表現要分離。因為它將用於控制網頁表現的程式碼放在結構文件中了。或許你會說它事實上還是把真正的表現代碼放在CSS裡的。但我認為這是一個偷換概念。因為以上這些b標籤跟網頁結構無關,它們都是一些空標籤。也就是說,它的存在並不是為了將某些內容放在文件結構所需的位置。因此它們對於文檔結構來說只是一些廢代碼。

另外一個例子可能更隱蔽。之前我有在alistapart.com上看到如何實現網頁三通欄的文章,其原理大概就是使用三四個div相互嵌套。我認為這也是違反Web標準思想的做法。因為這些div標籤在程式碼中擺放的次序已經不單純是為了結構的需要,而是用於網頁的表現。

當然,我承認,以上的觀點在一定程度是鑽牛角尖(但反過來說,非要實現非圖片圓角不也是在鑽牛角尖麼,呵呵)。有些時候結構和表現並不是那麼輕易的就能分開的,我們為了實現一些豐富的表現不得不讓結構去遷就(想想

的用處)。但是知道什麼是對什麼是錯是很重要的。即使我們有時候不得不做一些錯事。

最後,我想聲明的是,我並不是"非圖片圓角"是無意義或是錯誤的。我也很佩服作者的聰明和靈感。我覺得這樣的技術研究就如同以前用CSS畫國旗一樣,對CSS技術的熟練度很有幫助。但是,它的用途也應該只和CSS國旗一樣局限,不應該在實際應用中採納。因為它違反Web標準的基本原則。
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局!恭喜Vue團隊完成了完成,我知道這是一項巨大的努力,而且很長時間。所有新文檔也是如此。

使用Redwood.js和Fauna構建以太坊應用 使用Redwood.js和Fauna構建以太坊應用 Mar 28, 2025 am 09:18 AM

隨著最近比特幣價格超過20k美元的攀升,最近打破了3萬美元,我認為值得深入研究創建以太坊

您可以從瀏覽器獲得有效的CSS屬性值嗎? 您可以從瀏覽器獲得有效的CSS屬性值嗎? Apr 02, 2025 pm 06:17 PM

我有人寫了這個非常合法的問題。 Lea只是在博客上介紹瞭如何從瀏覽器中獲得有效的CSS屬性。那樣的是這樣。

帶有粘性定位的堆疊卡和一點點的雜物 帶有粘性定位的堆疊卡和一點點的雜物 Apr 03, 2025 am 10:30 AM

前幾天,我發現了科里·金尼文(Corey Ginnivan)網站上的這一點,當您滾動時,彼此之間的卡片堆放集。

在CI/CD上有點 在CI/CD上有點 Apr 02, 2025 pm 06:21 PM

我說的“網站”比“移動應用程序”更合適,但我喜歡Max Lynch的框架:

在WordPress塊編輯器中使用Markdown和本地化 在WordPress塊編輯器中使用Markdown和本地化 Apr 02, 2025 am 04:27 AM

如果我們需要直接在WordPress編輯器中向用戶顯示文檔,那麼最佳方法是什麼?

比較瀏覽器的響應式設計 比較瀏覽器的響應式設計 Apr 02, 2025 pm 06:25 PM

這些桌面應用程序中有許多目標是同時在不同的維度上顯示您的網站。因此,例如,您可以寫作

為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? 為什麼Flex佈局中的紫色斜線區域會被誤認為是'溢出空間”? Apr 05, 2025 pm 05:51 PM

關於Flex佈局中紫色斜線區域的疑問在使用Flex佈局時,你可能會遇到一些令人困惑的現象,比如在開發者工具(d...

See all articles