html 中li怎么用
在HTML中，<li>标签用于定义列表中的一个项目。<li>标签是<ul>(无序列表)或<ol>(有序列表)元素的子元素，下面我们将详细介绍如何使用<li>标签以及相关的技术教学。
（图片来源网络，侵删）
1、<li>标签的基本语法
<li>列表项内容</li>
<li>苹果</li> <li>香蕉</li> <li>橙子</li>
2、<li>标签与<ul>和<ol>的关系
无序列表(unordered list):使用<ul>标签创建，列表项前不需要添加数字或符号。
<ul> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ul>
有序列表(ordered list):使用<ol>标签创建，列表项前需要添加数字或符号。
<ol> <li>苹果</li> <li>香蕉</li> <li>橙子</li> </ol>
3、<li>标签的样式设置
可以通过CSS为<li>标签设置样式，例如设置字体大小、颜色等，以下是一个简单的示例：
<!DOCTYPE html>
<html>
<head>
<style>
li {
fontsize: 18px;
color: red;
}
</style>
</head>
<body>
<h2>有序列表示例：</h2>
<ol>
<li><a href="https://www.example1.com">苹果</a></li>
<li><a href="https://www.example2.com">香蕉</a></li>
<li><a href="https://www.example3.com">橙子</a></li>
</ol>
<h2>无序列表示例：</h2>
<ul>
<li><a href="https://www.example1.com">苹果</a></li>
<li><a href="https://www.example2.com">香蕉</a></li>
<li><a href="https://www.example3.com">橙子</a></li>
</ul>
</body>
</html>
4、<li>标签与其他列表元素的嵌套使用
可以将其他列表元素(如<table><tr><td></td></tr></table>)嵌套在<li>标签中，实现更复杂的布局。
<!DOCTYPE html>
<html>
<head>
<style>
li {
marginbottom: 10px;
}
</style>
</head>
<body>
<h2>嵌套列表示例：</h2>
<ul style="liststyletype: none;">
<li style="marginbottom: 10px;">一级标题</li>
<ul style="liststyletype: none;">
<li style="marginbottom: 5px;">二级标题</li>
<table border="1">
<tr><td></td></tr> <!这里可以放置表格内容 >
</table>
</ul> <!这里可以放置其他列表 >
</ul> <!这里可以放置更多列表 >
</body>
</html>
以上就是关于HTML中<li>标签的基本用法和技术教学，希望对你有所帮助，如果有其他问题，请随时提问。
