1. 程式人生 > >web標準頁面知識必備Ⅰ(轉載)

web標準頁面知識必備Ⅰ(轉載)

1、必備工具

其實web標準並不是很複雜的技術,實現web標準的工具也很簡單,說白了,只要可以進行純文字編輯的軟體,都可以作為程式碼編寫的gon工具。例如記事本、UltraEdit甚至CuteFTP的編輯器(象我這種懶人有時候就用那玩藝兒直接線上編輯,汗)。

而另一些較專業軟體會提供高亮顯示程式碼(前面提到的UltraEdit也具有此項功能)、程式碼提示、自動閉合標籤等等功能,使用起來會大大提高工作 效率。如DreamWeaver、MS Expression、EditPlus等等,這些編輯軟體目前是絕對的主流,無論是初學者上手容易還是專業人士提高效率都是不錯的選擇。

再說說瀏覽器環境,目前一臺機器同時裝IE、Firefox、Opera、Safari已經不是難事,而IE7 Standalone和MultipleIE的問世也讓IE7和低版本IE並存成為可能。推薦瀏覽器環境--本機安裝IE7、FF、Opera、 Safari,同時安裝MultipleIE。從我個人的使用經驗,IE7 Standalone存在一定的缺陷,有可能導致本機安裝的IE6無法正常使用。

除了編輯器以外,還有就是必不可少的除錯工具啦,首推當然是Firefox下的Firebug!IE下目前還沒有與之相當的除錯工具,比較好的有 IE development toobar、IE Debugbar等等,不過和Firebug完全不是一個檔次的東西,只能說勉強湊合用。

2、必備的HTML/XHTML基礎

說到基礎,其實正是我最想談的。從論壇許多的帖子也可以看出來,大多數問題的產生是由於製作者本身基礎的不牢固。而HTML/XHTML作為基礎中 的基礎,更是許多人的薄弱環節。然而很多人還是喜歡一上來就問佈局或者Hack這些技巧方面的問題,其實很多問題如果本人的基礎牢固了,幾乎不能被稱之為 問題。

web標準必備的HTML/XHTML基礎,大致有幾個方面:

  1. 每個標籤的語義,這一點是網頁標準的根本。而整個網頁標準化幾乎都是圍繞著這一點而來的,明確了語義,才能選擇合適的標籤;明確了語義,才能構建 可讀性良好的結構。例如<h1>就是網站最高等級的標題,它不應該放在<h2>層級之下;例如<fieldset> 和<legend>,主要用於表單元素分組,不應該因為它那個漂亮的邊框就用來表現新聞列表。
  2. 每個標籤的初始樣式,現在有很多重置標籤樣式就是針對這一點,因為每個標籤在不同瀏覽器下的初始樣式是不同的,而重置樣式是為了更 好地實現網頁相容性。從我個人的角度來說,不推薦初學者一上來就瞭解如何重置樣式,而應該從瞭解標籤的初始樣式入手,先了解了這些,才能明白每一行重置樣 式的程式碼的真正含義。
  3. 標籤的正確巢狀規則,同時還必須瞭解的是哪些標籤屬於塊元素,而哪些屬於行內元素。這是即使是高手也會經常忽略的方面,例如本人(^_^)。今天看到 這個帖子 的時候,才意識到,原來之前對dt、dd的巢狀規則理解有誤,二者不能一視同仁。HTML/XHTML的巢狀規則並不算簡單,常用的標籤不過三十個上下, 就有大約二十種不同的巢狀規則,稍不留神就會出錯。雖然不嚴格遵循並不會影響頁面的表現,但養成一個良好的習慣是很重要的,它往往能決定你在這條路上可以 走多遠。
  4. 標籤的屬性。這個又要分為兩方面,一是符合標準的常用屬性及對應的值,例如<table>的summary屬 性、<th><td>的scope屬性、<label>的for屬性等等;二是標準強制要求的屬性,例如圖片的 alt屬性、form的action屬性、textfield的col屬性和row屬性等等。

HTML/XHTML基礎,雖然可以分開成多個方面講,但實際關於它們的知識往往是綜合在一起的,大多數相關的手冊幾乎都有詳盡的介紹。對於這方面知識的學習,除了看相關手冊外,多把自己的網頁拿去w3c做校驗也是不錯的方法。

3、必須瞭解的CSS知識

CSS是標準化最吸引人的地方,也是時下討論最多的話題,市面上的相關書籍也在web標準類裡佔據壓倒性的比重,甚至有些人(包括一些用人單位)認為CSS就是網頁標準。這種過於誇大CSS作用的觀點固然是錯誤的,但CSS對於網頁標準的重要性卻也可見一斑。

CSS相關的知識、技巧很多,從知識的必備性方面來講,以下幾個方面是我認為最重要的:

  1. 佈局。佈局是表現層技術的基礎,任何表現層的東西都是基於佈局之上的。利用CSS佈局的方法有很多種,例如float、絕對定位、負margin 等等。每一種佈局都有著各自的優勢和侷限性,從適性最廣來講顯然是float最佳,也最為常用,但清除浮動往往是讓人頭疼的問題。絕對定位的網頁抗壓性 好,但自由度低,而且渲染效率最差。負margin是最不破壞文件流的辦法,但在對負值支援不佳的IE下往往會有靈異表現。關於佈局方面的知識,建議看一 下webflash的《徹底弄懂CSS盒子模式》系列文章,個人認為相關知識的文章尚無出其右者。
  2. IE下的Haslayout渲染模式。其實hack是許多標準工程師所深惡痛絕的東西,但在瀏覽器相容性要求越來越高的今 天,hack卻往往是一種無奈之舉。而深入瞭解IE的Haslayout渲染模式,就會明白許多hack的來由,以及許多相容性問題的產生之源。推薦閱讀 --譯文On having layout。然而HasLayout問題之多,絕非一兩篇文章所能概括,通過閱讀文章,瞭解其中的原理,再舉一反三,很多問題就會迎刃而解了。
  3. 符合標準的CSS規則。關於這一點,我可以不負責任地說,數以千萬計的網站,其CSS完全符合標準的,所佔比重不會超過1%。這並 不是一個悲觀的估計,即使是w3c推薦的一些網站,例如ESPN,他們的CSS也時常會通不過校驗。CSS的許多規則的確令CSSer們非常不適,例如 background和color,這兩個屬性絕大多數人都是分開來使用的,而w3c標準卻規定兩者必須"生則同生,死則同死"。還有就是各個瀏覽器的專 有屬性,在實現一些效果時是最簡單有效的。這種時候我們往往會選擇放棄標準,但暫時的放棄不意味著無視。今天知道我們哪些行為是錯誤的,以及為什麼要用錯 誤的方法,明天改正起來就不會太難。
  4. 提高網站效能的技巧,如有助於SEO的以圖代字、用盡量少和小容量的圖片實現圓角表格、用background-position實現圖片切換以提高渲染效率等等。從對網站的幫助角度來看,這些技巧遠比瀏覽器hack更值得掌握。
  5. 瞭解一點js知識。這個和CSS關係不是那麼密切,但經常看到很多人鑽牛角尖,用js可以非常簡單實現的效果,非要用CSS去勉強實 現。例如將子選單放在連結裡,通過:hover觸發。又比如多列等高佈局的實現。這已經是行為層的範疇了,為什麼還非要用表現層來實現呢?當然這裡並不是 說所有CSS不容易實現的都往js裡扔,而是要了解一下雙方的技術特點,合理地選用最佳方案。

4、必備的網站樣式管理技巧

  1. 規範化的命名與合理的程式碼重用性,也就是ID和class。對不起,這裡又要老生常談一下,因為昨天剛剛又看到一個通篇沒有用一個ID的網站。 ID和class是屬於結構層的,不過CSS的呼叫卻幾乎都要通過ID和class來實現。但是,ID和class不僅僅是為了呼叫CSS樣式而存在的。 恰恰相反,是良好的ID和class構建的結構給了CSS大展身手的舞臺。搞反了彼此關係,其實還是表現主導結構的思路,也就和滿螢幕的table沒有本 質區別。理清了ID、class和CSS的關係,再來談命名,命名其實只有一個基本原則,就是結構化。當然,在結構化之餘,body、框架、模組之間的命 名如能以某種形式加以區別(我個人習慣是加不同字首),會讓程式碼更加清晰。
  2. 樣式檔案的管理,也就是如何儲存網站的樣式檔案。如果是一個很小的網站,把所有樣式存在一個檔案中也是沒有問題的。但大網站的 CSS往往幾十上百k,全部存在一個檔案裡不但影響網頁載入,也不利於修改維護。如何分割CSS,需要事先做好規劃,無論是按欄目按功能還是按層級,要根 據自己網站的特點。

5、其他

期待大家繼續補充......

相關推薦

web標準頁面知識必備轉載

1、必備工具 其實web標準並不是很複雜的技術,實現web標準的工具也很簡單,說白了,只要可以進行純文字編輯的軟體,都可以作為程式碼編寫的gon工具。例如記事本、UltraEdit甚至CuteFTP的編輯器(象我這種懶人有時候就用那玩藝兒直接線上編輯,汗)。 而另一些較專業軟

.Net MVC 中_Layout.cshtml頁面新佈局轉載

作為一個剛剛開始學習Mvc的新人來說,從之前的winform頁面到現在MVC的轉變,感覺這是華麗麗的轉身啊,再沒有拖拽控制元件,轉而是一種規範的格式,用Model-View-Controller三者把一個系統的構成完美呈現,你可以選擇用其自帶的模版來完成系統的開發,很強大,很方便。  

web前端-HTML知識體系初學者

1、web語義化和SEO web語義化是根據內容的結構化(內容語義化),選擇合適的標籤(程式碼語義化),便於開發者閱讀和寫出更優雅的程式碼,同時讓瀏覽器的爬蟲和機器更好地解析程式碼。 SEO是指在瞭解搜尋引擎自然排名的機制的基礎上,對網站進行內部及外部的調整優化,改進網站在

ASP.NET頁面生命週期 轉載

#  事件或方法  功能  描述   1  Init 事件  頁面初始化  頁面生存週期中的第一個階段是初始化。當 Init 事件發生時,在 .aspx 原始檔中靜態宣告的所有控制元件都已例項化並取其預設值。應該注意的是,這時檢視狀態資訊還不可用。   2  LoadVie

運維工程師入門必備轉載

Linux系統如果是學習可以選用Redhat或CentOS,特別是CentOS在企業中用得最多,當然還會有其它版本的,但學習者還是以這2個版本學習就行,因為這兩個版本都是兄弟,沒區別的,有空可以再研究一下SUSE,有些公司也喜歡用。 1、Linux系統基礎

Asp.net MVC使用FormsAuthentication,MVC和WEB API可以共享身份認證 轉載

mlp ges web api nbsp 快速 charset 生成頁面 核心 lds 在實際的項目應用中,很多時候都需要保證數據的安全和可靠,如何來保證數據的安全呢?做法有很多,最常見的就是進行身份驗證。驗證通過,根據驗證過的身份給與對應訪問權限。同在Web Api中如何

基於MVC4+EasyUI的Web開發框架經驗總結6--在頁面中應用下拉列表的處理

ica new web開發 don ext images 如果 bob 獲取 http://www.cnblogs.com/wuhuacong/p/3840321.html 在很多Web界面中,我們都可以看到很多下拉列表的元素,有些是固定的,有些是動態的;有些是字典內容,

用C#通過反射實現動態調用WebService 告別Web引用轉載

sse data 語言 con classname ext 級別 creat 字符 我們都知道,調用WebService可以在工程中對WebService地址進行WEB引用,但是這確實很不方便。我想能夠利用配置文件靈活調用WebService。如何實現呢? 用C#通過反射

web基礎知識梳理筆記

信息 空間 超文本 登錄訪問 trac xslt web基礎 request blog http(1.1)知識點 http協議概念 http協議是用於客戶端和服務器端之間的超文本傳輸協議,通過請求和響應實現通信,是一種無狀態協議(即對請求和響應不會做持久化處理)。 http

【linux】linux 環境下 安裝禪道轉載 -- 跟web服務器無關,無視apache、nginx!!!

sdn php 修改 鏈接 net 壓縮 操作 tps 數據庫 參考文章 鏈接 :https://blog.csdn.net/xinxin19881112/article/details/46813991 講的非常完美、透徹,不像其他的文章,都是抄襲的,沒一點註意事項和自己

JSON Web Token的使用轉載

過期 多臺 hcm 完整 協議 客戶端 word https協議 rod 定義JSON Web Token(JWT)是一個非常輕巧的規範。這個規範允許我們使用JWT在用戶和服務器之間傳遞安全可靠的信息。適用場景1、用於向Web應用傳遞一些非敏感信息。例如完成加好友、下訂單的

向Spring-MVC WEB進行頁面傳值繼續上章

8.使用RedirectView重定向 //8.使用RedirectView重定向 @RequestMapping("/test10.do") public ModelAndView test10(User user) { if(user.getUserName().equ

轉載Python總結篇——知識大全

python基礎 Python開發環境搭建 Python變數和基本資料型別 python基本資料型別之操作 python的語法規範及for和while python編碼 python檔案操作 python之函式 python函式補充 python生成器&迭代器 python裝飾器 pytho

一張圖概括必學的web前端學習知識路線圖儲存收藏

前端的焦慮,你想過30歲以後的前端路怎麼走嗎? 曾幾何時,我總會很慶幸自己進了前端這個行業。因為在這個職業範疇裡面,我如魚得水,成長很快,成就感滿滿。然而,隨著年齡和工齡的增長,漸漸發現自己的瓶頸越來越明顯了,我感覺自己似乎碰到了前端的天花板。 原因何在 1.從客觀原因來看,前端相對於後端的入門門

Linux和Windows系統的遠端桌面訪問知識轉載

為新手講解Linux和Windows系統的遠端桌面訪問知識   很多新手都是使用Linux和Windows雙系統的,它們之間的遠端桌面訪問是如何連線的,我們就為新手講解Linux和Windows系統的遠端桌面訪問知識,包括所使用的軟體及方法。本文所使用

轉載二叉樹知識總結

二叉樹是筆試中常考的題目,以下是蒐集網上的優秀解釋文章。 一、樹的定義 樹是一種資料結構,它是由n(n>=1)個有限結點組成一個具有層次關係的集合。   樹具有的特點有: (1)每個結點有零個或多個子結點 (2)沒有父節點的結點稱為根節點

登入頁面測試用例轉載

具體需求: 有一個登入頁面, (假如上面有2個textbox, 一個提交按鈕。 請針對這個頁面設計30個以上的testcase.)   此題的考察目的:面試者是否熟悉各種測試方法,是否有豐富的Web測試經驗, 是否瞭解Web開發,以及設計Test case的能力   

外網如何訪問vmware虛擬機器的web服務轉載

目的: 主機上安裝了VMware,VMware上安裝了Linux虛擬機器(我安裝的是Centos7)。我想讓虛擬機器向外提供Web服務。本文記錄如何讓我的主機和外網使用者可以訪問VM虛擬機器上的Web。 網路環境: 單IP伺服器1臺,提供固定IP1個,固定IP允許公網出入站。   VM

C++11標準之右值引用ravalue reference轉載

臨時物件的產生和拷貝所帶來的效率折損,一直是C++所為人詬病的問題。但是C++標準允許編譯器對於臨時物件的產生具有完全的自由度,從而發展出了Copy Elision、RVO(包括NRVO)等編譯器優化技術,它們可以防止某些情況下臨時物件產生和拷貝。下面簡單地介紹一下Copy Elision、RVO

轉載有關音訊編碼的知識與技術引數

自然界中的聲音非常複雜,波形極其複雜,通常我們採用的是脈衝程式碼調製編碼,即PCM編碼。PCM通過抽樣、量化、編碼三個步驟將連續變化的模擬訊號轉換為數字編碼。1、什麼是取樣率和取樣大小(位/bit)?  聲音其實是一種能量波,因此也有頻率和振幅的特徵,頻率對應於時間軸線,振幅對應於電平軸線。波是無限光滑的,絃