常見CSS與HTML使用誤區(qū)詳解

誤區(qū)一.多div癥
<div class="nav"> <ul> <li><a href="/home/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/concact/">Concact</a></li> </ul> </div>
上述使用使用多余的div標(biāo)簽現(xiàn)狀,就稱為“多div癥”,理應(yīng)簡化成下
<ul class="nav"> <li><a href="/home/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/concact/">Concact</a></li> </ul>
誤區(qū)二.多類class癥 注意點(diǎn)class可以應(yīng)用于頁面任意多個(gè)元素,非常適合標(biāo)識(shí)內(nèi)容類型或其他相似的條目
一段新聞(新聞標(biāo)題、新聞詳情內(nèi)容)
<h1 class="news-head">Elastic Layout Example—View Source for the HTML and CSS</h1> <p class="news-head">Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
上述類名使用news-head與news-text 就稱為"多類癥"表現(xiàn),不需要這么多的類區(qū)分元素樣式
最好使用div(division)代表部分而不是沒有語義(大多數(shù)人誤解div無語義?。。。?,實(shí)際上div可以將文檔劃分為幾個(gè)有意義的區(qū)域.
類名news從而識(shí)別整個(gè)新聞條目。然后可以使用層疊(cascade)樣式識(shí)別新聞標(biāo)題、文本,理應(yīng)修改如下
<div class="news"> <h1>Elastic Layout Example—View Source for the HTML and CSS</h1> <p>Lorem ipsum dolor sit amet. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div>
span 對(duì)行內(nèi)元素進(jìn)行分組或標(biāo)識(shí)
<h2> Andy wins an Oscar for his cameo in Iron Man</h2> <p>Public and on <span class="date">Februray 22nd, 2009</span> By <span class="author">Harry Knowles</span> </p>
誤區(qū)三.id使用誤區(qū) 用于標(biāo)識(shí)頁面上特定元素(比如站點(diǎn)導(dǎo)航、頁眉、頁腳)而且必須唯一; 也可以用來標(biāo)識(shí)持久結(jié)構(gòu)性元素(如主導(dǎo)航、內(nèi)容區(qū)域)
/*大量的使用id,很難找到唯一名稱混亂*/ #andy, #rich, #jeremy, #james-box, #sophie { font-size: 1em; font-weight: bold; border: 1px solid #ccc; } /*只需一個(gè)普通類替代它*/ .staff { font-size: 1em; font-weight: bold; border: 1px solid #ccc; }
用于標(biāo)識(shí)頁面上特定元素(比如站點(diǎn)導(dǎo)航、頁眉、頁腳)而且必須唯一; 也可以用來標(biāo)識(shí)持久結(jié)構(gòu)性元素(如主導(dǎo)航、內(nèi)容區(qū)域)
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
- 下面小編就為大家?guī)硪黄P(guān)于老式瀏覽器兼容HTML5和CSS3的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-06-01
CSS 控制Html頁面高度導(dǎo)致抖動(dòng)問題的原因
CSS 控制Html頁面高度導(dǎo)致抖動(dòng),這類由高度導(dǎo)致頁面抖動(dòng)的問題,其實(shí)究其根本原因是滾動(dòng)條是否顯示導(dǎo)致的2014-08-11CSS 控制因Html頁面高度導(dǎo)致抖動(dòng)的問題解決方法
由高度導(dǎo)致頁面抖動(dòng)的問題,其實(shí)究其根本原因是滾動(dòng)條是否顯示導(dǎo)致的,具體解決方法如下,有類似情況的朋友可以參考下,希望對(duì)大家有所幫助2013-08-23ie6下關(guān)于html編碼問題導(dǎo)致js出錯(cuò)css不被應(yīng)用的解決方法
頁面定義是編碼utf-8時(shí)如果在js文件中放置中文之類的多字節(jié)文字且保存編碼使用系統(tǒng)默認(rèn),如gbk非utf-8時(shí),就會(huì)在ie中出現(xiàn)莫名其妙的錯(cuò)誤提示2013-07-21- 本篇文章小編為大家介紹HTML標(biāo)簽語義化(含H5) ,有需要的朋友可以參考一下2013-04-08
- 打印屬性 打印 HTML 文檔總是會(huì)出現(xiàn)問題。在 CSS2 中,我們可以借助打印屬性讓打印 web 內(nèi)容更容易一些。 屬性 描述 值 orphans 設(shè)置元素放在頁面底部時(shí)所允許的最少文2009-07-13
XHTML CSS網(wǎng)站設(shè)計(jì)的優(yōu)勢和問題
XHTML是目前國際上倡導(dǎo)的網(wǎng)站標(biāo)準(zhǔn)設(shè)計(jì)語言,Webjx.com也側(cè)重于這方面,進(jìn)行了比較全面的介紹。因?yàn)閄HTML網(wǎng)站設(shè)計(jì)語言具有的基本特點(diǎn),這種XHTML CSS模式的網(wǎng)站設(shè)計(jì)具有一定2009-04-02網(wǎng)頁制作中注意應(yīng)用HTML標(biāo)簽的問題
本文介紹了在網(wǎng)頁制作學(xué)習(xí)中應(yīng)該注意的使用的一些HTML標(biāo)簽的問題。 HTML已經(jīng)嘗試去除表現(xiàn)和朝向內(nèi)容發(fā)展,導(dǎo)致這樣一個(gè)基本原理:從表現(xiàn)(CSS)中分離出內(nèi)2009-04-02網(wǎng)頁制作中注意應(yīng)用HTML標(biāo)簽的問題
HTML已經(jīng)嘗試去除表現(xiàn)和朝向內(nèi)容發(fā)展,導(dǎo)致這樣一個(gè)基本原理:從表現(xiàn)(CSS)中分離出內(nèi)容意義(HTML),這將會(huì)給網(wǎng)頁減肥,因?yàn)橐粋€(gè)表現(xiàn)指令集合(以外部CSS文檔的形式)可2008-10-17- xhtml css頁面制作過程中問題的解決方案,說是解決方案應(yīng)該有點(diǎn)過了,充其量只不過是給剛剛開始學(xué)標(biāo)準(zhǔn)頁面制作的朋友們的一些小建議,如果講得不對(duì)的地方請(qǐng)多多包涵,當(dāng)然2008-10-17