App下載
話題 首頁 > HTML 教程 > HTML 教程話題列表 > 詳情

如何選擇使用的HTML標(biāo)簽?

精華
tomcat080 2016-11-30 11:42:22 瀏覽(4886) 回復(fù)(6) 贊(0)
如何選擇使用的[HTML](http://o2fo.com/html/)標(biāo)簽 ? 什么時(shí)候選擇什么樣的標(biāo)簽? 在網(wǎng)頁布局中HTML標(biāo)簽如何選擇 ?
html

回答(6)

天才異客 精華 2016-11-30

在DIV+CSS時(shí)會遇到如何選擇HTML標(biāo)簽布局,但對于絕大多數(shù)前端來說非常簡單,但對于初學(xué)CSS的朋友們來說卻是一個無形的問題。這里W3Cschool 為大家簡單介紹在DIV+CSS布局中如何選擇HTML標(biāo)簽

1、框架布局(使用DIV標(biāo)簽


在網(wǎng)頁中框架布局一般使用DIV布局,無論大小DIV盒子一般均使用DIV標(biāo)簽( <div> </div> )布局。

2、列表型布局(使用ulli 標(biāo)簽)


遇到圖片列表、文章標(biāo)題列表,通常使用ul li列表標(biāo)簽進(jìn)行布局。當(dāng)然使用這些標(biāo)簽時(shí)要進(jìn)行設(shè)置需要CSS樣式達(dá)到布局效果。這樣程序調(diào)用數(shù)據(jù)時(shí)候更容易做循環(huán)內(nèi)容。

3、標(biāo)題型布局(使用h1、h2、h3、h4標(biāo)簽


遇到獨(dú)立的欄目標(biāo)題、正文標(biāo)簽,通常使用h1、h2、h3、h4標(biāo)題標(biāo)簽,這樣布局內(nèi)容具有層次感。同時(shí)考慮SEO 來說適當(dāng)使用這些標(biāo)題標(biāo)簽有利于優(yōu)化排名。

4、內(nèi)容獨(dú)立樣式型(使用span標(biāo)簽


在一段文字中,有幾個文字需要單獨(dú)設(shè)置一個顏色值,這個時(shí)候可以對這幾個文字加span標(biāo)簽,對span標(biāo)簽單獨(dú)設(shè)置class或直接CSS樣式達(dá)到效果,一般來說布局框架很少使用span。

5、功能型布局(img 、bstrong 、u 、s 等標(biāo)簽)


遇到網(wǎng)頁中引人圖片使用Img標(biāo)簽;遇到文字加粗可以使用b標(biāo)簽或strong標(biāo)簽、遇到下劃線可以使用u標(biāo)簽、遇到文字貫穿線(刪除線)使用s標(biāo)簽等,有時(shí)不一定使用CSS來實(shí)現(xiàn)這些功能布局,適當(dāng)選用這些HTML標(biāo)簽從SEO方面更加好些。

6、段落(p標(biāo)簽


一般文章段落都是使用p標(biāo)簽,即每段文字開始時(shí)候使用<p> 結(jié)束時(shí)使用</p> ,這樣文章段落分明。

7、手動強(qiáng)行換行布局(br標(biāo)簽 )


遇到文字需要換行的使用br標(biāo)簽即“ <br /> ”,值得注意br標(biāo)簽是單獨(dú)的標(biāo)簽非盒子標(biāo)簽,獨(dú)立的一個標(biāo)簽,什么地方需要換行就使用br標(biāo)簽。

8、表格型(table表格標(biāo)簽


在HTML布局中,學(xué)習(xí)DIV+CSS 并不意味著放棄table標(biāo)簽,這個有時(shí)還是需要table標(biāo)簽的,比如遇到表格型布局的,還是需要table tr td標(biāo)簽布局,這個時(shí)候使用表格布局優(yōu)于div標(biāo)簽。

9、表單布局(form 、input 等)


遇到表單布局,比如注冊、登錄、填寫數(shù)據(jù)提交地方等,均是使用表單標(biāo)簽。

其它標(biāo)簽有待您發(fā)現(xiàn)與使用。在W3Cschool在線教程官網(wǎng) 中,很多教程中也有教過大家在什么情況下選擇什么標(biāo)簽,實(shí)踐熟悉后自然會知道如何選擇HTML標(biāo)簽布局網(wǎng)頁。

了解更多html標(biāo)簽

Silence廣 2018-02-11

如何選擇使用HTML標(biāo)簽 ? 什么時(shí)候選擇什么樣的標(biāo)簽? 在網(wǎng)頁布局中HTML標(biāo)簽如何選擇 ?

首先你的這個三問題在我看來是一個問題.

框架布局(div)

列表型布局(ul 和 li)

標(biāo)題型布局(h)

內(nèi)容獨(dú)立樣式型(span)

功能型布局(img)

段落 (p)

表格型表單(table input)

一筆荒蕪 2018-05-31

吃瓜群眾,坐等大神來解決。。。。。

1144100656 2018-05-31

我也不清楚,坐等大神,火鉗劉明?。?!

1152696398 2018-05-31

剛學(xué)習(xí)程序,過來學(xué)習(xí)學(xué)習(xí)!!!!...

要回復(fù),請先登錄 或者注冊