HTML列表

最新推荐文章于 2024-02-10 05:00:00 发布

小韩学长

最新推荐文章于 2024-02-10 05:00:00 发布

阅读量488

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML学习篇

本文链接：https://blog.youkuaiyun.com/weixin_39036700/article/details/80551362

HTML学习篇专栏收录该内容

12 篇文章

订阅专栏

HTML列表总结：

HTML列表共有三种：无序列表、有序列表、自定义列表。

1、无序列表

无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

无序列表使用 <ul> 标签

2、有序列表

有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

3、自定义列表

自定义列表不仅仅是一列项目，而是项目及其注释的组合。

自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始

代码示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Demo</title>
</head>
<body>
<!-- 整个是一个自定义列表 -->
  <h1> My 列表</h1>
  <!-- 表格 -->
  <table border="2" cellpadding="30">
    <tr>
      <td>
      	<!-- 无序列表 -->
		<ul>
	      <li>Food</li>
	      <!-- 有序列表 -->
	      <ol>
	          <li>薯片</li>
	          <li>棒棒糖</li>
	          <li>果冻</li>
	          <li>巧克力</li>
	          <li>辣条</li>
	      </ol>
	      <li>Fruits</li>
	      <!-- 有序列表 -->
	      <ol type="A">
	        <li>西瓜</li>
	        <li>桔子</li>
	        <li>哈蜜瓜</li>
	        <li>草莓</li>
	        <li>葡萄</li>
	        <li>香蕉</li>
	        <li>苹果</li>
	      </ol>
	      <li>Meat</li>
	      <!-- 有序列表 -->
	      <ol type="I">
	        <li>羊肉</li>
	        <li>牛肉</li>
	        <li>猪肉</li>
	        <li>鸡肉</li>
	        <li>涮羊肉</li>
	        <li>生鱼片</li>
	      </ol>
	  </ul>
      </td>
    </tr>
  </table>
</body>
</html>

运行效果：