HTML之列表学习记录

时间:2024-11-15 10:55:32

练习题:

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

58cc72ec33694acab65dde7a953047f7.png

代码:

<!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>

效果图:

 

9145b4a995af4a2a92be1d3d876a9b19.png

练习过程的代码:

 

<!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>

效果图:

f63ac112dd7843599e0199e43e7c63a0.png