HTML列表

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>

运行效果：

参考文档链接：http://www.runoob.com/html/html-lists.html

猜你喜欢