列表标签

目录：
无序列表
有序列表
定义列表
综合实践

列表标签的作用：
- 给一组数据添加列表语义
列表的分类
- 无序列表（unordered list），使用最多
  - 作用：给一组数据添加列表语义，且每一个数据没有先后之分；
  - 格式：li：list item,ul:unordered list
```
    <ul><li>一行内容</li></ul>
```
  - 注意点
    - 无序列表的语义是给数据添加列表属性，而不是用于在段落的开始位置插入圆点符号（虽然看起来确实是那么一回事）
    - <ul>和<li>标签是一个组合，一个整体，一般情况下不会出现单独使用的情况，都是两个标签组合使用
    - 由于<ul>和<li>标签是一个组合，在<ul>标签中不推荐使用其他标签，如需要做的界面比较复杂，可以在<li>标签中使用其他标签
    - 复杂情况下，列表是可以嵌套的，即在<li>标签中嵌套新的<ul>和<li>标签
    - 虽然通过标签的属性也能修改<ul>和<li>的格式，但是最好不要这么做
  - 应用场景
    - 新闻列表
    - 图片列表
    - 商品列表
    - 导航条
- 有序列表
  - 作用：给一组数据添加列表语义，且每一个数据有先后之分；
  - 格式：li：list item,ol:ordered list
```
    <ol><li>一行内容</li></ol>
```
  - 注意点
- 定义列表
  - 作用：给一组数据添加列表语义，且每一个数据都有各自定义的标题和描述；
  - 格式：dt：definition title,dd：definition description,dl：definition list
```
    <dl><dt>一行内容</dt><dd></dd></dl>
```
  - 注意点
    - <dl>和<dt>/<dd>是一个整体，一般情况下不会出现单独使用的情况，都是几个标签组合使用
    - 由于<dl>和<dt>/<dd>标签是一个组合，在<u=dl>标签中不推荐使用其他标签，如需要做的界面比较复杂，可以在<dt>/<dd>标签中使用其他标签
    - 一个<dt>标签可以没有对应的<dd>标签，也可以有多个对应的<dd>标签，但是推荐一一对应，不多也不少
  - 应用场景
    - 网站尾部的相关信息
    - 做图文混排
- 综合实践

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>无序标签</title><style type="text/css">dl{width: 725px;height: 400px;}dl dt{width: 268px;height: 100px;float: left;}dl dd{width: 447px;height: 100px;float: right;}dl dd h2{line-height: 50px;color:orange;margin:0 10px;font-size: 16px;}dl dd p{line-height: 24px;color:#000000;margin:0 10px;font-size: 12px;}</style>
</head>
<body>
<h1>中国四大直辖市</h1>
<hr>
<ul><li><h2>北京</h2><p>北京简介</p></li><li><h2>上海</h2><p>上海简介</p></li><li><h2>重庆</h2><p>重庆简介</p></li><li><h2>天津</h2><p>天津简介</p></li>
</ul><h1>江苏城市排行榜</h1>
<hr>
<ol><li><h2>南京</h2><p>南京简介</p></li><li><h2>苏州</h2><p>苏州简介</p></li><li><h2>无锡</h2><p>无锡简介</p></li>
</ol>
<dl ><dt><img src="https://gss2.bdstatic.com/9fo3dSag_xI4khGkpoWK1HF6hhy/baike/w%3D268%3Bg%3D0/sign=6ab335cd39adcbef01347900949449e0/aec379310a55b31951d58e7c4ba98226cffc178e.jpg"></dt><dd><h2>张卫健</h2><p>张卫健，1965年2月8日出生于香港，中国香港男演员、歌手，香港电视专业人员协会荣誉副主席。</p><p>1984年，张卫健以香港新秀歌唱大赛冠军身份出道迈入娱乐圈，在张国荣的帮助下进军歌坛后，又带着对演戏的热爱踏入影视圈 。1985年，出演个人首部电影《疯狂游戏》。1991年，凭借担纲演出电视剧《老友鬼鬼》，推出个人粤语专辑《真真假假》。1996年，出演TVB《西游记》，凭“孙悟空”获TVB“我最难忘的男主角”，后因无线电视之经验而转战台湾与内地。</p><p>2000年，凭《小宝与康熙》获台湾金钟奖电视剧最佳男主角提名   。2005年，主演古装武侠剧《小鱼儿与花无缺》。2012年，主演古装历史传奇电视剧《隋唐英雄》。2017年3月，张卫健主演香港TVB台庆剧《大帅哥》   。</p></dd></dl>
</body>
</html>

HTML学习笔记——列表标签相关推荐

Python 学习笔记列表 range() xxx XXX
Python 学习笔记列表 range() xxx XXX print("-" * 30) for value in range(1, 5):print(value)number ...
Python 学习笔记列表 xxx XXX
Python 学习笔记列表 xxx XXX bicycles = ['trek', 'cannondale', 'redline', 'specialized'] print(bicycles) p ...
Python 学习笔记列表排序 xxx XXX
Python 学习笔记列表排序 xxx XXX print("-" * 30) cars = ['bmw', 'audi', 'toyota', 'subaru'] cars. ...
Git学习笔记：标签管理以及GItHub
前言在补习python的时候主要参考的是廖雪峰的教程Python教程,在学习完后准备完成期末作业时,遇到了一个技术难题,需要初步掌握git,因此开始了git的学习. 本教程参考廖雪峰的Git教程 G ...
【Unity学习笔记】标签（Tag）和层（Layer）
声明:此篇文章是个人学习笔记,并非教程,所以内容可能不够严谨.可作参考,但不保证绝对正确.如果你发现我的文章有什么错误,非常欢迎指正,谢谢哦. 此篇文章是根据官网手册总结:https://docs.u ...
Python学习笔记 | 列表和字典
基于Python3版本的学习. 列表用中括号[ ]把里面的各种数据框起来,里面的每一个数据叫作"元素". 每个元素之间都要用英文逗号隔开. list1=['小明',18,1.70 ...
python编程学习笔记列表_python编程：从入门到实践学习笔记-函数
Python学习资料或者需要代码.视频加Python学习群:516107834 定义函数举个简单的例子由上所示,关键字def定义一个函数,后面跟着函数名以及用来输入参数的括号,定义以冒号结束,而p ...
Bootstrap学习笔记--常用标签和类模板
h标签:bootstrap中的h标签被改写了比原标签字体要细 <h1>我是标题1 h1</h1> <h2>我是标题2 h2</h2> <h3&g ...
Struts2学习笔记——StrutsTags(标签)
Struts2的标签使用起来很方便.一个网页来进行测试: <?xml version="1.0" encoding="GB18030" ?> < ...

HTML学习笔记——列表标签

列表标签

HTML学习笔记——列表标签相关推荐

最新文章

热门文章