HTML笔记 列表
程序员文章站
2022-06-19 16:21:36
一.无序列表列表的标签
一.无序列表
列表的标签
<ul> </ul>
在列表中每一项是
<li> </li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 表格 </title>
</head>
<body>
<ul>
<li>yyr</li>
<li>ljj</li>
<li> <a href="http:\\www.baidu.com" target="_blank">hh</a> </li>
</ul>
</body>
</html>
注：
- 这个列表是无序的
-
<ul> </ul>中只能嵌套<li></li> - 但是
<li></li>中能嵌套任何标签，如<li> <a href="http:\\www.baidu.com" target="_blank">hh</a> </li>
二.有序列表
有序列表使用<ol> </ol>
中间添加<li> </li>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 表格 </title>
</head>
<body>
<ol>
<li>yyr</li>
<li>ljj</li>
<li> <a href="http:\\www.baidu.com" target="_blank">hh</a> </li>
</ol>
</body>
</html>
注：
-
<ol> </ol>中只能嵌套<li></li> - 但是
<li></li>中能嵌套任何标签，如<li> <a href="http:\\www.baidu.com" target="_blank">hh</a> </li>
三.自定义列表
类似于下面这种
我们对于“获得帮助”，有以下五个解释
就是自定义的
第一个“获得帮助”没法点击
这个使用的标签是<dl> </dl>
内容是<dt> </dt>和<dd> </dd>
“获得帮助”使用的是<dt> </dt>
剩下的链接使用的是<dd> </dd>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 表格 </title>
</head>
<body>
<dl>
<dt>获得帮助</dt>
<dd>订单状态</dd>
<dd>配送方式</dd>
<dd>退换货</dd>
<dd>付款选项</dd>
<dd> <a href="https://www.nike.com" target="_blank">联系我们</a> </dd>
</dl>
</body>
</html>
注：
-
<dl> </dl>中只能嵌套<dt> </dt>和<dd> </dd> - 但是
<dt> </dt>和<dd> </dd>中能嵌套任何标签，如<dd> <a href="https://www.nike.com" target="_blank">联系我们</a> </dd> - 一个
<dt> </dt>里面能存放多个<dd> </dd>
本文地址：https://blog.csdn.net/yogur_father/article/details/109246077
上一篇： 使用面向对象抽取业务算法
下一篇： 编写多线程程序有几种实现方式？