列表相关元素及其属性
生活随笔
收集整理的這篇文章主要介紹了
列表相关元素及其属性
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
HTML5保留了如下幾個(gè)列表相關(guān)元素：無(wú)序列表<ul>、有序列表<ol>、自定義列表<dl>
1、<ul>：定義無(wú)序列表，可以指定id、style、class等屬性，還可以指定onclick等事件屬性。
2、<ol>：定義有序列表，可以指定id、style、class等屬性，還可以指定onclick等事件屬性。除此之外，在HTML5規(guī)范中，該元素還可以指定如下三個(gè)屬性
- start：指定列表項(xiàng)的起始數(shù)字
- type：指定使用哪種類(lèi)型的編號(hào)，例如1代表使用數(shù)字，A或a分別代表用大寫(xiě)或小寫(xiě)字母，I或i代表使用大寫(xiě)或小寫(xiě)羅馬數(shù)字。但該屬性在HTML規(guī)范中已經(jīng)不推薦使用了，推薦使用CSS來(lái)定義。
- reversed：該屬性指定是否將排序反轉(zhuǎn)。該屬性是HTML 5新增的屬性。
例如如下代碼：
<body><h2>定義反序的有序列表</h2><ol reversed="true"><li>薯片</li><li>牛奶</li><li>巧克力</li></ol><h2>定義從3開(kāi)始的有序列表</h2><ol start="3"><li>薯片</li><li>牛奶</li><li>巧克力</li></ol><h2>定義使用小寫(xiě)字母編號(hào)的有序列表</h2><ol type="a"><li>薯片</li><li>牛奶</li><li>巧克力</li></ol><h2>定義使用小寫(xiě)羅馬數(shù)字、從4開(kāi)始的有序列表</h2><ol type="i" start="4"><li>薯片</li><li>牛奶</li><li>巧克力</li></ol> </body>其運(yùn)行結(jié)果如下：
3、<dl>：用于定義術(shù)語(yǔ)列表。自定義列表不僅僅是一列項(xiàng)目，而是項(xiàng)目及其注釋的組合。自定義列表以 <dl> 標(biāo)簽開(kāi)始。每個(gè)自定義列表項(xiàng)以 <dt> 開(kāi)始。每個(gè)自定義列表項(xiàng)的定義以 <dd> 開(kāi)始。
- <dt>：定義標(biāo)題列表項(xiàng)。可以指定id、style、class等屬性，還可以指定onclick等事件屬性。該元素只能包含文本、圖像、超鏈接、文本格式化元素和表單控件元素等
- <dd>：定義普通列表項(xiàng)。該元素可以包含與<div../>完全類(lèi)似的內(nèi)容。
例如如下代碼：
<body><h2>dt定義標(biāo)題、dd定義解釋</h2><dl><dt style="color:red;">Java</dt><dd>Java是一門(mén)廣泛使用的、跨平臺(tái)的開(kāi)發(fā)語(yǔ)言</dd><dt style="color:red;">Java簡(jiǎn)介</dt><dd>Java是一門(mén)面向?qū)ο缶幊陶Z(yǔ)言，不僅吸收了C 語(yǔ)言的各種優(yōu)點(diǎn)，還摒棄了C 里難以理解的多繼承、指針等概念，因此Java語(yǔ)言具有功能強(qiáng)大和簡(jiǎn)單易用兩個(gè)特征。</dd><dd>Java語(yǔ)言作為靜態(tài)面向?qū)ο缶幊陶Z(yǔ)言的代表，極好地實(shí)現(xiàn)了面向?qū)ο罄碚?#xff0c;允許程序員以?xún)?yōu)雅的思維方式進(jìn)行復(fù)雜的編程</dd></dl> </body>運(yùn)行結(jié)果如下：
更多專(zhuān)業(yè)前端知識(shí)，請(qǐng)上 【猿2048】www.mk2048.com
總結(jié)
以上是生活随笔為你收集整理的列表相关元素及其属性的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 微信小程序下拉框
- 下一篇： 起名与选择器~（总结类、持续更新系列）