小白教程
所有教程
关于
Search
172.69.58.252
172.69.58.252
参数设置
贡献
退出
操作
编辑
移动
保护
信息
历史
删除
查看“HTML列表”的源代码
本页内容
上一节:
HTML表格colgroup
下一节:
HTML块和内联元素
因为以下原因,您没有权限编辑本页:
您请求的操作仅限属于该用户组的用户执行:
用户
您可以查看和复制此页面的源代码。
[[Category:HTML教程|29]] HTML 列表允许 Web 开发人员在列表中对一组相关项进行分组。 == HTML 无序列表 == 无序列表以''' <nowiki><ul></nowiki> '''标签开头。每个列表项都以 ''' <nowiki><li></nowiki> '''标记开头。 默认情况下,列表项将标有项目符号(黑色小圆圈): <sample title="" hererun="s" desc=" " > <ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ul> </sample> == HTML 有序列表 == 有序列表以''' <nowiki><ol></nowiki> '''标签开头。每个列表项都以''' <nowiki><li></nowiki> '''标记开头。 默认情况下,列表项将用数字标记: <sample title="" hererun="s" desc="" > <ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </sample> === 有序列表 - type属性 === <nowiki>标签<ol>的type属性,定义了列表项标记的类型:</nowiki> * type="1" 列表项将用大写数字编号(默认) * type="A" 项列表项将用大写编号 * type="a" 列表项将用小写编号 * type="I" 列表项将用大写罗马数字字符 * type="i" 列表项将用小写罗马数字编号 当然也可以使用type="10" 直接设置数字编号的开始值。 <sample title="" desc="" hererun="s"> <ol type="1"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type="A"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type="I"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> <ol type="10"> <li>Coffee</li> <li>Tea</li> <li>Milk</li> </ol> </sample> == HTML 描述列表 == HTML 还支持描述列表。 描述列表是术语列表,其中包含每个术语的描述。 ''' <nowiki><dl></nowiki> '''标签定义描述列表,标签''' <nowiki><dt></nowiki> '''定义术语(名称),''' <nowiki><dd></nowiki> ''' 标签描述每个术语: <sample title="" hererun="s" desc="" > <dl> <dt>Coffee</dt> <dd>- black hot drink</dd> <dt>Milk</dt> <dd>- white cold drink</dd> </dl> </sample> == 嵌套列表 == 列表可以嵌套(列表中的列表): <sample title="" hererun="s" desc="" > <ul> <li>Coffee</li> <li>Tea <ul> <li>Black tea</li> <li>Green tea</li> </ul> </li> <li>Milk</li> </ul> </sample> <blockquote> 注意:列表项 ( ''' <nowiki><li></nowiki> ''') 可以包含新列表和其他 HTML 元素,如图像和链接等。 </blockquote> == 水平列表 == HTML 列表可以使用 CSS 以多种不同方式设置样式。 一种流行的方法是水平设置列表样式,以创建导航菜单: <sample title="" desc="" hererun="s"> <!DOCTYPE html> <html> <head> <style> ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #333333; } li { float: left; } li a { display: block; color: white; text-align: center; padding: 16px; text-decoration: none; } li a:hover { background-color: #111111; } </style> </head> <body> <h2>导航菜单</h2> <p>在本例中,我们使用CSS水平设置列表样式,以创建导航菜单:</p> <ul> <li><a href="#home">Home</a></li> <li><a href="#news">News</a></li> <li><a href="#contact">Contact</a></li> <li><a href="#about">About</a></li> </ul> </body> </html> </sample>
返回至“
HTML列表
”。
上一节:
HTML表格colgroup
下一节:
HTML块和内联元素