练习题：
图所示为一个问卷调查网页，请制作出来。要求：大标题用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>效果图：
本站资源均来自互联网，仅供研究学习，禁止违法使用和商用，产生法律纠纷本站概不负责！如果侵犯了您的权益请与我们联系！
转载请注明出处： 免费源码网-免费的源码资源网站 » HTML之列表学习记录
发表评论 取消回复