HTML之列表学习记录

news2024/11/19 0:47:38

练习题:

图所示为一个问卷调查网页,请制作出来。要求:大标题用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

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2243086.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【设计模式】行为型模式(五):解释器模式、访问者模式、依赖注入

《设计模式之行为型模式》系列&#xff0c;共包含以下文章&#xff1a; 行为型模式&#xff08;一&#xff09;&#xff1a;模板方法模式、观察者模式行为型模式&#xff08;二&#xff09;&#xff1a;策略模式、命令模式行为型模式&#xff08;三&#xff09;&#xff1a;责…

基于Java Springboot二手家电管理平台

一、作品包含 源码数据库设计文档万字PPT全套环境和工具资源部署教程 二、项目技术 前端技术&#xff1a;Html、Css、Js、Vue、Element-ui 数据库&#xff1a;MySQL 后端技术&#xff1a;Java、Spring Boot、MyBatis 三、运行环境 开发工具&#xff1a;IDEA/eclipse 数据…

利用SSH中的弱私钥

import paramiko import argparse import os from threading import Thread, BoundedSemaphore # 设置最大连接数 maxConnections 5 # 创建一个有界信号量&#xff0c;用于控制同时进行的连接数 connection_lock BoundedSemaphore(valuemaxConnections) # 用于控制是否停止所…

基于Python的仓库管理系统设计与实现

背景&#xff1a; 基于Python的仓库管理系统功能介绍 本仓库管理系统采用Python语言开发&#xff0c;利用Django框架和MySQL数据库&#xff0c;实现了高效、便捷的仓库管理功能。 用户管理&#xff1a; 支持员工和管理员角色的管理。 用户注册、登录和权限分配功能&#x…

自动驾驶系列—从数据采集到存储:解密自动驾驶传感器数据采集盒子的关键技术

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

vue3【实战】切换白天黑夜(暗黑模式)【组件封装】DarkMode.vue

效果预览 原理解析 切换为暗黑模式时&#xff0c;会在 html 标签上添加样式类 dark导入 ElementPlus 的暗黑模式样式后&#xff0c; ElementPlus 组件会自动响应暗黑模式自定义组件需用 UnoCSS 的 dark: 语法自定义暗黑模式的样式 代码实现 技术方案 vue3 vite ElementPlus …

java八股-jvm入门-程序计数器,堆,元空间,虚拟机栈,本地方法栈,类加载器,双亲委派,类加载执行过程

文章目录 PC Register堆虚拟机栈方法区(Metaspace元空间双亲委派机制类加载器 类装载的执行过程 PC Register 程序计数器&#xff08;Program Counter Register&#xff09;是 Java 虚拟机&#xff08;JVM&#xff09;中的一个组件&#xff0c;它在 JVM 的内存模型中扮演着非常…

Nature Communications 基于触觉手套的深度学习驱动视触觉动态重建方案

在人形机器人操作领域&#xff0c;有一个极具价值的问题&#xff1a;鉴于操作数据在人形操作技能学习中的重要性&#xff0c;如何有效地从现实世界中获取操作数据的完整状态&#xff1f;如果可以&#xff0c;那考虑到人类庞大规模的人口和进行复杂操作的简单直观性与可扩展性&a…

Linux:进程的优先级 进程切换

文章目录 前言一、进程优先级1.1 基本概念1.2 查看系统进程1.3 PRI和NI1.4 调整优先级1.4.1 top命令1.4.2 nice命令1.4.3 renice命令 二、进程切换2.1 补充概念2.2 进程的运行和切换步骤&#xff08;重要&#xff09; 二、Linux2.6内核进程O(1)调度队列&#xff08;重要&#x…

鸿蒙学习生态应用开发能力全景图-赋能套件(1)

文章目录 赋能套件鸿蒙生态应用开发能力全景图 赋能套件 鸿蒙生态白皮书: 全面阐释了鸿蒙生态下应用开发核心理念、关键能力以及创新体验,旨在帮助开发者快速、准确、全面的了解鸿蒙开发套件给开发者提供的能力全景和未来的愿景。 视频课程: 基于真实的开发场景,提供向导式…

Docker 的安装与使用

Docker 的安装 Docker 是一个开源的商业产品&#xff0c;有两个版本&#xff1a;社区版&#xff08;Community Edition&#xff0c;缩写为 CE&#xff09;和企业版&#xff08;Enterprise Edition&#xff0c;缩写为 EE&#xff09;。 Docker CE 的安装请参考官方文档&#xf…

MATLAB向量元素的引用

我们定义一个向量后&#xff0c;如果想引用的话&#xff0c;可以通过索引 i n d ind ind来实现。 注意&#xff1a;MATLAB中向量的开始索引是1&#xff0c;与许多编程语言不同。 例如&#xff1a; 如果想引用多个的话&#xff0c;可以用索引 i n d ind ind来提取多个位置 例如…

力扣周赛:第424场周赛

&#x1f468;‍&#x1f393;作者简介&#xff1a;爱好技术和算法的研究生 &#x1f30c;上期文章&#xff1a;力扣周赛&#xff1a;第422场周赛 &#x1f4da;订阅专栏&#xff1a;力扣周赛 希望文章对你们有所帮助 第一道题模拟题&#xff0c;第二道题经典拆分数组/线段树都…

SpringBoot配置相关的内容

依赖Starter和Parent 查依赖坐标网站&#xff1a;Maven Repository: Search/Browse/Explorehttps://mvnrepository.com/ 设置配置文件 配置文件相关的配置 yml多个数据的书写 配置文件的读取

第九部分 :1.STM32之通信接口《精讲》(USART,I2C,SPI,CAN,USB)

本芯片使用的是STM32F103C8T6型号 STM32F103C8T6是STM32F1系列中的一种较常用的低成本ARM Cortex-M3内核MCU&#xff0c;具有丰富的通信接口&#xff0c;包括USART、SPI、I2C等。下面是该芯片上通信接口的管脚分布、每个接口的工作模式、常用应用场景和注意事项。 1. USART (通…

【计算机网络】协议定制

一、结构化数据传输流程 这里涉及协议定制、序列化/反序列化的知识 对于序列化和反序列化&#xff0c;有现成的解决方案&#xff1a;①json ②probuff ③xml 二、理解发送接收函数 我们调用的所有发送/接收函数&#xff0c;根本就不是把数据发送到网络中&#xff01;本质都是…

WebRTC视频 02 - 视频采集类 VideoCaptureModule

WebRTC视频 01 - 视频采集整体架构 WebRTC视频 02 - 视频采集类 VideoCaptureModule&#xff08;本文&#xff09; WebRTC视频 03 - 视频采集类 VideoCaptureDS 上篇 WebRTC视频 04 - 视频采集类 VideoCaptureDS 中篇 WebRTC视频 05 - 视频采集类 VideoCaptureDS 下篇 一、前言…

解决Windows远程桌面 “为安全考虑,已锁定该用户账户,原因是登录尝试或密码更改尝试过多。请稍后片刻再重试,或与系统管理员或技术支持联系“问题

当我们远程连接服务器连接不上并提示“为安全考虑&#xff0c;已锁定该用户账户&#xff0c;原因是登录尝试或密码更改尝试过多。请稍候片刻再重试&#xff0c;或与系统管理员或技术支持联系”时&#xff0c;根本原因是当前计算机远程连接时输入了过多的错误密码&#xff0c;触…

企业BI工具如何选择?主流5款BI工具多维对比

数据大爆炸时代&#xff0c;企业数据爆发式增长&#xff0c;来自产品、运营、价值链以及外部的数据都成指数级增长趋势。利用大数据分析实现精细化运营&#xff0c;驱动业务增长是企业的理想蓝图。而BI工具能够整合、分析并可视化复杂的数据集&#xff0c;帮助管理层和决策者快…

Sping全面复习

Spring框架是一个功能强大且广泛使用的Java平台&#xff0c;它通过提供全面的基础设施支持&#xff0c;使得开发人员能够轻松构建高效、可移植、易于测试的代码。Spring的核心特性包括依赖注入&#xff08;DI&#xff09;、面向切面编程&#xff08;AOP&#xff09;和事件驱动模…