網頁製作,使用HTML常範的五個錯誤

來源:互聯網
上載者:User
錯誤|網頁    1.網頁背景色的設定

  犯錯機率:很大
  普遍性:較廣
  犯錯可能性:懶/不知道

  約2年前我曾發現21cn上出現過一次沒有設定背景色的情況,當時我用Email通知了他們,自此之後這個問題我從沒犯過。

  絕大部分人的視窗背景顏色都是白色,但如果象我這樣個性的人,就會把windows視窗的背景顏色改成灰色或其他色,這樣一來,如果你沒有設定網頁的背景顏色的話,你以為正常的網頁在我的電腦上看起來會是一團糟。

  2.Align center(自動置中)的濫用

  犯錯機率:非常大
  普遍性:非常廣
  犯錯可能性:以為方便/以為好用

  工作中,修改、維護別人的網頁是家常便飯,發現不少人有一個陋習:
  在表格中的文字或圖片,你是這樣來令它置中、靠左或靠右過?

  <divalign="center">大家好啊!!</div>
  <divalign="center"><imgsrc="http://www.webjx.com/htmldata/2005-09-03/xx.gif"></div>

  當有些表格很多、文字很多、內容分得很細的時候,愛用這種方法(它在DW裡的快速鍵是Ctrl+Alt+C,FP不知道是什麼)的人往往會狂用,慘了,我一碰到這樣的網頁就頭痛,為什麼要用那麼多<div>來置中呢?tellmewhy?難道表格沒有置中屬性嗎?為什麼要加入這些垃圾代碼?特別修改的時候也不能把文字或圖片刪除了就能自動清除<divalign="center">這個代碼,還要手工去清除,在複雜點的網頁中就會無故地浪費維護者一筆時間。

  建議使用<tdalign="center">來置中,當需要多重定位的時候,才考慮<divalign="center">,因為這個代碼並不好處理,所以能用表格代替就用表格替代。

  3.重複使用實現相同功能的代碼、或雜七雜八的亂套代碼

  犯錯機率:非常普遍
  普遍性:非常普遍
  犯錯可能性:複雜多樣

  大家先來看一看下面的代碼:

  <center>
  <p>
  <fontclass="css_id">
  <fontclass="font11">
  <fontcolor="#CCCCCC">
  <fontcolor="#FFA76C"style="font-size:14px;font-family:隸書">標題</font>
  </font>
  </font>
  <br>
  </center>你覺得這樣的代碼看起來感覺怎麼樣呢?</font>
  </p>

  我不知道讀者有什麼感覺,壓根我一看到這樣的代碼就會先自我麻木十來秒,這十來秒目的是為了找一個能表達我的思想感情的詞(我?你想反問我嗎?sorry~~,我一般不犯,因為我做網頁至少有一半以上的時間在瀏覽代碼,代碼中多了不該多的東西我一眼就能看出來。)。

  看看上面的代碼,使用了2個class,4個font來定義2個文本,其實這樣的問題很多時候是在大家不斷的修改中產生的,對代碼不熟、或懶查看代碼、又或不喜歡查看代碼的人犯這些問題特別嚴重,當然,事實上別人瀏覽這個網頁的時候,是沒有任何問題的,但維護的人就…………。
這些多餘的垃圾代碼完全是可以省略掉的,其實上面的例子不夠嚴重,更恐怖的我都見過。

  另外還有一個問題也要提提的,就是<p>...</p>和<center>...</center>,為什麼要用它們呢?tellmewhy~~,有甚者是這樣的:

  <td><divalign="center"class="css_id">
  <center>
  <palign="center"></p>
  <palign="center">
  <fontclass="css_id">
  <fontclass="font11">
  <fontcolor="#CCCCCC">
  <fontcolor="#FFA76C"style="font-size:14px;font-family:隸書">標題</font>
  </font>
  </font>
  <br>
  </center>
  </td>你覺得這樣的代碼看起來感覺怎麼樣呢?</font>
  </p>
  </center>
  </div>
  </td>

  看到這樣的代碼我是會很無奈的(更無奈的是我經常看到,而且必須看),我來簡化一下:

  lt;td lign="center" class="css_id">
  <br>
  <font color="#FFA76C" style="font-size:14px;font-family:隸書">
  標題</font>
  <br>你覺得這樣的代碼看起來感覺怎麼樣呢?</td>

  是不是看起來覺得這個世界安靜了很多?"標題"後面的文字完成可以定義在<td>的class裡,就算不用css,再用多一個<.font>也沒問題,一樣很清爽。

  4.表格不正確嵌套

  犯錯機率:一般
  普遍性:普遍
  犯錯可能性:對這個不瞭解

  其實這是一個街知巷聞的問題了,但還是不斷有人犯,不正確的巢狀表格格,可能會令到你被老總叫到辦公室裡臭罵一頓,會令到你以為正常的網頁用ADSL開2、3分鐘都開不了。

  先講第一個問題,就是在一個大表格裡不斷地巢狀表格格,這樣會令到開啟網頁的速度變慢(雖然說現在的IE改善了這一問題,但還是不建議這樣做),另一方面維護、修改也極不方便,一般來說簡單的套用是沒有問題的,甚至3、4層,但是不要把所有內容都放到一個表格裡去。

  第二個問題就是在一個大表格裡放入所有內容,而其中包括一個免費的計數器代碼,嘻嘻,你猜有可能出現什麼情況呢?其實也沒什麼大不了的,最嚴重的就是你的IE象死機了一樣,什麼都沒顯示。解決方案就是把計數器單獨放在一個表格裡,別和其他內容一起放在同一表格。

  5.寫代碼縮排的時候,不是使用Tab而是使用空格

  犯錯機率:一般
  普遍性:較少
  犯錯可能性:不知道Tab更好用

  這一個問題針對js、vbs、asp、php之類,html不能使用Tab會寫一點程式的都知道什麼叫縮排,怎麼樣縮排?有人使用空格,有人使用Tab,如果你是使用空格的,那麼從現在起,改用Tab吧。

  使用空格有二大壞處:1、縮排速度慢、修改速度慢。2、增大網頁體積,會影響速度。



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。