列表标签——HTML

有序列表
语法：ol,li;

<ol type="属性值">
	<li>内容1</li>
	<li>内容2</li>
	<li>内容3</li>
	.......
</ol>

属性：type：1，a，A，i，I，none，一般默认为1;
start: 起始位置

<ol type="属性值" start="数字">
	 <li>内容1</li>
	 <li>内容2</li>
	 <li>内容3</li>
	 .......
</ol>
//从该数字之后为有序排列

列表嵌套问题

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8" />
  <title></title>
 </head>
 <body>
  <ol type="i">
   <li>幼儿园</li>
   <li>小学
    <ol>
     <li>小学一年纪</li>
     <li>小学二年纪</li>
     <li>小学三年纪</li>
     <li>小学四年纪</li>
     <li>小学五年纪</li>
     <li>小学六年纪</li>
    </ol>
   </li>
   <li>初中
    <ol>
     <li>初中一年级</li>
     <li>初中二年级</li>
     <li>初中三年级</li>
    </ol>
   </li>
   <li>高中
    <ol>
     <li>高中一年级</li>
     <li>高中二年级</li>
     <li>高中三年级</li>
    </ol>
   </li>
  </ol>
 </body>
</html>

无序列表
语法：ul,li;

<ul type="属性值">
 <li>内容1</li>
 <li>内容2</li>
 <li>内容3</li>
 .......
</ul>

属性：type：disc 实心圆，circle 空心圆，square 小方块，一般默认为disc
练习

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <h2>你的兴趣爱好有哪些：</h2>
  <ul>
   <li>吃</li>
   <li>喝</li>
   <li>玩</li>
   <li>乐</li>
   <li>学习
    <ul>
     <li>英语</li>
     <li>数学</li>
     <li>编程</li>
    </ul>
   </li>
   <li>写代码</li>
  </ul>
 </body>
</html>
<!--注意，无序列表嵌套，嵌套列表前变为空心圆-->

十公斤的眼泪

发布了54 篇原创文章 · 获赞 1 · 访问量 848

私信关注

猜你喜欢