web前端之列表

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

「已注销」

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

阅读量288

点赞数

分类专栏： web 列表

本文链接：https://blog.csdn.net/qq_43711677/article/details/101381068

版权

web 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

列表

1 篇文章 0 订阅

订阅专栏

第一次学习web前端，第一节学习表格：第一个无序列表ul，子事件li，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无序表格</title></head><body> ...

摘要由CSDN通过智能技术生成

第一次学习web前端，第一节学习列表：
第一个无序列表ul，子事件li，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>无序表格</title>
</head>
<body>
     <h4>Disc 项目列表:</h4><!--disc实心圆属性，在无序列表ul的type中定义-->
     <ul type="disc">
         <li>apple</li>
         <li>banana</li>
         <li type="circle">tree</li>
     </ul>

     <h4>Circle 项目列表:</h4><!--circle空心圆-->
     <ul type="circle">
         <li>apple2</li>
         <li>banana2</li>
         <li type="disc">tree</li>
     </ul>

     <h4>Square 项目列表:</h4><!--square实心正方体-->
     <ul type="square">
         <li>apple3</li>
         <li>banana3</li>
         <li type="circle">tree</li>
     </ul>

</body>
</html>

第二个菜单列表menu和dir，代码如下：

 <h1 align="center"> 菜单和目录列表</h1><!--属性设置与无序列表ul相同-->
     <h4>这是菜单列表</h4>
     <menu><!--菜单列表只有实心球这个属性了-->
         <li>This is menu.</li>
     </menu>

     <h4>这是目录列表</h4>
     <dir type = "circle">
         <li>This is dir.</li>
     </dir>

第三种有序列表，ol，其中value作为单个li的属性尤其值得注意，改变当前编号的同时改变后面的编号。代码如下：

<!--ol 有序列表-->
     <h1 align="center">This is ordered list:</h1>
     <h4>默认为数字标号</h4>
     <ol>
         <li>apple</li>
         <li>banana</li>
         <li>tree</li>
         <li>flower</li>
         <li>sunshine</li>
     </ol>
     <h4>typle 决定标号属性</h4>
     <ol type="a">
         <li>apple</li>
         <li>banana</li>
         <li>tree</li>
         <li>flower</li>
         <li>sunshine</li>
     </ol>
     <h4>statr 决定开始序号</h4>
     <ol type="A" start="5">
         <li>apple</li>
         <li>banana</li>
         <li>tree</li>
         <li>flower</li>
         <li>sunshine</li>
     </ol>
     <h4> value 改变后面的所有序号</h4>
     <ol type="I">
         <li>apple</li>
         <li>banana</li>
         <li value="8">tree</li>
         <li>flower</li>
         <li>sunshine</li>
     </ol>

定义列表dl，dt和dd参数，代码如下：

<!--定义列表-->
     <h1 align="center">This is definition list:</h1>
     <h4> dd用于解释dt的内容 </h4>
     <dl>
         <dt>姓名：</dt>
         <dd>傅显坤</dd>
     </dl>

网页运行效果如下：
在这里插入图片描述

「已注销」

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
web前端之列表

第一次学习web前端，第一节学习表格：第一个无序列表ul，子事件li，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>无序表格</title></head><body> ...
复制链接

扫一扫