HTML基礎(chǔ)教學(xué)之HTML列表
HTML項(xiàng)目符號(hào)(無序列表)
#網(wǎng)頁中的清單隨處可見,例如新聞頁面隨處可見這樣的清單
這些清單就可以使用ul-li標(biāo)籤來完成。 ul-li是沒有前後順序的資訊列表。
在下面,我們來實(shí)現(xiàn)這樣的效果
語法:
##<ul >????<li>內(nèi)容1</li>????<li>內(nèi)容2</li>????<li>/li>????<li>/li>????<li>/li>??”> ##</ul>
- <ul>或<li>的常用屬性
- ##type:項(xiàng)目符號(hào)的類型,取值:disc(小黑點(diǎn))、circle(空心圓)、square(實(shí)心方塊)
實(shí)例:<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<ul type="square">
<li>三星在大陸召回19萬臺(tái)Note7手機(jī) 可全額退款</li>
<li>國土部等5部委:進(jìn)城落戶人口人均用地不超1百平米</li>
<li>13位科學(xué)家實(shí)名呼吁對(duì)韓春雨啟動(dòng)調(diào)查:為學(xué)界名聲</li>
</ul>
</body>
</html>
註:在HTML標(biāo)記中,內(nèi)容應(yīng)該放在最底層標(biāo)記。
HTML編號(hào)清單(有序列表)
#網(wǎng)站之中還有這樣的清單
這類資訊展示就可以使用<ol>標(biāo)籤來製作有序列表來展示。
文法:<ol>
#????<li>…</li>
????<li>/li>
????<li><li> ;……</li>
????<li>……</li>
????<li>……</li>- </ol> #<ol>或<li>的常用屬性
start:從第幾個(gè)開始編號(hào)(數(shù)字)。
######改造上面一個(gè)範(fàn)例:###<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <ol type="1" start="1"> <li>三星在大陸召回19萬臺(tái)Note7手機(jī) 可全額退款</li> <li>國土部等5部委:進(jìn)城落戶人口人均用地不超1百平米</li> <li>13位科學(xué)家實(shí)名呼吁對(duì)韓春雨啟動(dòng)調(diào)查:為學(xué)界名聲</li> </ol> </body> </html>######註:大家可以試著改變屬性的值,看看輸出有什麼變化#######