当前位置：首页 > news >正文

HTML之列表学习记录

news 2025/7/12 19:38:05

练习题：

图所示为一个问卷调查网页，请制作出来。要求：大标题用h1标签；小题目用h3标签；前两个问题使用有序列表；最后一个问题使用无序列表。

代码：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>列表练习</title>
</head>
<body>
<h1>问卷调查</h1>
<h3>1、你是通过什么途径来到绿叶学习网的？</h3>
<ol type="A"><li>百度途径</li><li>谷歌搜索</li><li>其他途径</li>
</ol>
<h3>2、你觉得绿叶学习网页设计怎么样？</h3>
<ol type="A"><li>炫酷大方</li><li>比较普通</li><li>非常粗糙</li>
</ol>
<h3>3、你觉得这本书怎么样？(多选)</h3>
<ul><li>通俗易懂，轻松幽默</li><li>内容丰富，技巧贼多</li><li>三个字，好到爆！</li>
</ul>
</ul></body>
</html>

效果图：

练习过程的代码：

<!DOCTYPE html>
<html><head><title>列表</title><meta charset="utf-8"/></head><bady><!-- ol，即ordered list（有序列表）。li，即list（列表项) --><h3>有序列表</h3><ol><li>第一项</li><li>第二项</li><li>第三项</li></ol><!-- ol标签和li标签是配合一起使用的，不可以单独使用，而且<ol>标签的子标签只能是li标签，不能是其他标签。 --><!-- 使用type属性来改变列表项符号 --><ol type="A"><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol type="a"><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol type="i"><li>第一项</li><li>第二项</li><li>第三项</li></ol><ol type="I"><li>第一项</li><li>第二项</li><li>第三项</li></ol><!-- ul，即unordered list（无序列表）。li，即list（列表项) --><h3>无序列表</h3><ul><li>第一项</li><li>第二项</li><li>第三项</li></ul><!-- 使用type属性来改变列表项符号 --><ul type="circle"><li>第一项</li><li>第二项</li><li>第三项</li></ul><ul type="square"><li>第一项</li><li>第二项</li><li>第三项</li></ul><!-- ul元素的子元素只能是li，不能是其他元素。ul元素内部的文本，只能在li元素内部添加，不能在li元素外部添加。 --><!-- 定义列表 --><h3>定义列表</h3><dl><dt>HTML</dt><dd>制作网页的标准语言，控制网页的结构</dd><dt>CSS</dt><dd>制作网页的样式，控制网页的显示效果</dd><dt>JavaScript</dt><dd>制作网页的动态效果，控制网页的行为</dd></dl><!-- dl，即definition list（定义列表）。dt，即definition term（定义名词）。dd，即definition description（定义描述）。 --></bady>
</html>

效果图：