HTML中列表元素的使用

 时间:2024-10-12 04:03:30

1、打开PyCharm开发工具,新建‘li.html’ 文件,定义一个无序列表ul,代码如下;<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul> <li>first</li> <li>second</li> <li>third</li> </ul></body></html>

HTML中列表元素的使用

2、点击左上角浏览器,查看效果如下图,无序列表前有个黑点

HTML中列表元素的使用

3、去掉ul中每行前的黑点只需加一个样式,修改ul标签如下:<ul style="list-style:none">再次点击浏览器,查看效果,发现黑点已经不见了

HTML中列表元素的使用

4、有序列表ol,字母o理解成order的意思,方便记忆,定义一个有序列表如下:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul style="list-style:none"> <li>first</li> <li>second</li> <li>third</li> </ul> <ol> <li>o1</li> <li>o2</li> <li>o3</li> </ol></body></html>

HTML中列表元素的使用

5、点击左上角浏览器,查看效果如下图,有序列表前有序号

HTML中列表元素的使用

6、定义列表不太常见,但也是一种标签,定义一个定义列表,完私网褡爸整代码如下<!DOCTYPE html>媪青怍牙<html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <ul style="list-style:none"> <li>first</li> <li>second</li> <li>third</li> </ul> <ol> <li>o1</li> <li>o2</li> <li>o3</li> </ol> <dl> <dt>html</dt> <dd>超文本标记语言</dd> <dt>python</dt> <dd>开发语言</dd> </dl></body></html>

HTML中列表元素的使用

7、点击左上角浏览器,查看效果如下图,定义列表会自动缩进

HTML中列表元素的使用
  • 怎么在Python中删除列表的元素
  • 如何在dev-c++的代码中添加时间日期
  • C语言中用数组解约瑟夫问题
  • python集合如何移除两个集合中都存在的元素?
  • web前端初学--头部和导航
  • 热门搜索
    人间真情手抄报 关于手抄报的内容 保护环境的手抄报内容 屋顶上的小孩手抄报 知识树手抄报 初中英语手抄报版面 初一英语手抄报图片 安全逃生手抄报 低碳生活手抄报资料 保护动物的手抄报