一、在Html中 列表一共分為三種:
(1)無序列表 :使用 ul 標簽來創建,用 li 標簽來表示列表項 (較常用)
<ul>
<li>結構</li>
<li>表現</li>
<li>行為</li>
</ul>
(2)有序列表 :使用 ol 標簽來創建,用 li 標簽來表示列表項
<ol>
<li>結構</li>
<li>表現</li>
<li>行為</li>
</ol>
(3)定義列表 :使用 dl 標簽來創建,用 dt 標簽來表示定義的內容 ,dd 標簽來對內容進行解釋說明
<dl>
<dt>YYDS</dt>
<dd>yyds是“永遠的神”的縮寫 [1] ,常被粉絲用來贊賞自己的愛豆 </dd>
<dt>XSWL</dt>
<dd>XSWL = 笑死我了”,作為當代沙雕青年,每天除了哈哈哈就是“窩窩頭一塊錢四個</dd>
</dl>
二、列表相互之間可以嵌套:
<ul>
<li>節日
<ol>
<li>中秋</li>
<li>國慶</li>
<li>元旦</li>
</ol>
</li>
<li>中國</li>
<li>世界</li>
</ul>
三、網頁展示:
網頁效果展示
1、無序列表概念:用來放置一些對于順序無關緊要的內容,例如下面的新聞內容。
2、有序列表概念:有序列表用于存放內容不能錯亂的信息,比如下面的阿里云內容。
3、自定義列表:自定義列表用于正文之外的框框欄欄之類的。
列表樣式2
列表樣式3
列表標簽是用 ul 表示,但是不是單獨使用的,需要和 li 標簽配合使用,并且列表標簽也有屬性,用法:
<ul type="disc"> ,屬性有多個值:
disc :小圓點,默認屬性
circle :小圓圈
square :實心方塊
none :不要任何符號
源碼:↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<!--網頁抬頭-->
<title>Title</title>
</head>
<body>
<!--列表與列表屬性-->
<ul type="disc">
<li>這是列表a</li>
<li>這是列表b</li>
<li>這是列表c</li>
</ul>
</body>
例
兩個菜單按鈕系列選項實例("File" 和 "Edit"):
<menutype="toolbar"><li><menulabel="File"><buttontype="button"onclick="file_new()">New...</button><buttontype="button"onclick="file_open()">Open...</button><buttontype="button"onclick="file_save()">Save</button></menu></li><li><menulabel="Edit"><buttontype="button"onclick="edit_cut()">Cut</button><buttontype="button"onclick="edit_copy()">Copy</button><buttontype="button"onclick="edit_paste()">Paste</button></menu></li></menu>
瀏覽器支持
目前主流瀏覽器并不支持 <menu> 標簽。
標簽定義及使用說明
<menu> 標簽定義了一個命令列表或菜單。
<menu> 標簽通常用于文本菜單,工具條和命令列表選項。
提示和注釋
提示: 使用 CSS 來定義菜單列表樣式。
HTML 4.01 與 HTML5之間的差異
HTML 4.01的 <menu> 元素已廢棄。
HTML5 中 <menu> 元素已被重新定義。
屬性
New:HTML5 新屬性。
屬性 | 值 | 描述 |
---|---|---|
labelNew | text | 描述菜單項的標記。 |
typeNew | contexttoolbarlist | 描述顯示菜單類型. 默認為 "list"。 |
全局屬性
<menu> 標簽支持全局屬性,查看完整屬性表 HTML全局屬性。
事件屬性
<menu> 標簽支持所有 HTML事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。