規(guī)范HTML代碼可以節(jié)省修改代碼的時間
發(fā)布時間:2009-12-08 03:50:44 作者:佚名
我要評論

css技巧 清除多余的標簽讓代碼更加有意義.
如果你是一個喜歡什么都用<div>來標簽的人,那么這個教程一定很適合你.在這個教程里著重講如何規(guī)范的來寫HTML代碼讓它更加的有意義.你有沒有經(jīng)歷過這樣的場景:在編緝別人的模版時發(fā)現(xiàn)那些語意不明的標簽,你的感覺是什么樣子的.學完這個教程后你會發(fā)現(xiàn)規(guī)范的代碼不僅僅為你以后修改代碼省下時間,特別是當你調(diào)試一個大的項目時你會發(fā)現(xiàn),原來規(guī)范代碼之后是那么的有用.
1.清除不必要的<div>標簽
很多人都喜歡用<div>來包裹<form>和<ul>來建立菜單列表.你有沒有想過這樣一個多余的<div>是不是需要的.你可以使用css規(guī)則來實現(xiàn)同樣的效果.
Example 1:
這個例子展示如何刪除<form>中的<div>.

Example 2:
有時候我們會給內(nèi)容添加一個額外的<div>標簽來以示這是一個內(nèi)容.在事例中用了<div class="sidebox">來包括內(nèi)容區(qū).如果一個內(nèi)容有一個標題的話(如:<h4>),那么我們就可以把這個<h4& gt;來代替<div>.

2.使用有語義的標簽
用有語義的標簽來編寫你的HTML文檔(如:<h1>為標題;<p>為段落;<ul>為列表.)那么即使用戶不支持css的話,那你的文檔也被正確的讀出來.
Example:
這個例子很好的說明了,使用有語義標簽的好處.

3.盡量減少使用<div>
你有沒有見過那么混亂的模板,到處都可以看到<div>標簽,看到這些,你的頭有沒有變大了.你是否因為少用</div>來結(jié)束標簽,或者因為多用了<div>標簽而把一個布局弄亂了.我想大多數(shù)初學者都有這樣的經(jīng)歷.所以盡可能的少使用<div>,它會使調(diào)試和編輯更加的容易.
Example 1:
使用<p>來代替<div>來創(chuàng)建導航.

Example 2:
看如何使用<span>來代替<div>實現(xiàn)同樣的效果.

4.格式(縮進)代碼
你應該格式源代碼(即縮進嵌套元素),以便于容易閱讀和修改.如果你使用DW來編寫代碼的話,那么你就可以很方便的格式代碼.

5.在</div>標簽之后添加注解.
你有沒有見過在一些模版在</div>之后有注明這一部分是什么.(如:header;contant;footer.)所以你可以在< /div>之后加入一個<!-- footer -->.這樣別人就可以知道這是一個頁腳結(jié)束點.
1.清除不必要的<div>標簽
很多人都喜歡用<div>來包裹<form>和<ul>來建立菜單列表.你有沒有想過這樣一個多余的<div>是不是需要的.你可以使用css規(guī)則來實現(xiàn)同樣的效果.
Example 1:
這個例子展示如何刪除<form>中的<div>.

Example 2:
有時候我們會給內(nèi)容添加一個額外的<div>標簽來以示這是一個內(nèi)容.在事例中用了<div class="sidebox">來包括內(nèi)容區(qū).如果一個內(nèi)容有一個標題的話(如:<h4>),那么我們就可以把這個<h4& gt;來代替<div>.

2.使用有語義的標簽
用有語義的標簽來編寫你的HTML文檔(如:<h1>為標題;<p>為段落;<ul>為列表.)那么即使用戶不支持css的話,那你的文檔也被正確的讀出來.
Example:
這個例子很好的說明了,使用有語義標簽的好處.

3.盡量減少使用<div>
你有沒有見過那么混亂的模板,到處都可以看到<div>標簽,看到這些,你的頭有沒有變大了.你是否因為少用</div>來結(jié)束標簽,或者因為多用了<div>標簽而把一個布局弄亂了.我想大多數(shù)初學者都有這樣的經(jīng)歷.所以盡可能的少使用<div>,它會使調(diào)試和編輯更加的容易.
Example 1:
使用<p>來代替<div>來創(chuàng)建導航.

Example 2:
看如何使用<span>來代替<div>實現(xiàn)同樣的效果.

4.格式(縮進)代碼
你應該格式源代碼(即縮進嵌套元素),以便于容易閱讀和修改.如果你使用DW來編寫代碼的話,那么你就可以很方便的格式代碼.

5.在</div>標簽之后添加注解.
你有沒有見過在一些模版在</div>之后有注明這一部分是什么.(如:header;contant;footer.)所以你可以在< /div>之后加入一個<!-- footer -->.這樣別人就可以知道這是一個頁腳結(jié)束點.

寫完代碼累了,那就輕松一下:
相關(guān)文章
- 本文給大家分享html文本溢出顯示省略字符的兩種常用解決方法,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2018-04-09
HTML超出文本顯示省略號...通過text-overflow實現(xiàn)
HTML超出文本顯示省略號在一些新聞列表中還是比較常見的一種做法,其實很簡單通過text-overflow便可實現(xiàn),有需要的朋友可以參考下本文2013-09-06html中把多余文字轉(zhuǎn)化為省略號的實現(xiàn)方法方法
這篇文章主要介紹了html中把多余文字轉(zhuǎn)化為省略號的實現(xiàn)方法,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2020-07-30