HTML之列表学习记录

练习题:

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

 

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【ElasticSearch】定位分片不分配

记录遇到的es集群分片不分配的情况--待补全 定位分片不分配的原因 定位分片不分配的原因 在shell客户端执行如下的语句&#xff1a; curl -X GET "http://192.168.0.209:9200/_cat/shards?v&hindex,shard,prirep,state,unassigned.reason"集群中各分片的状态都…

10款PDF合并工具讲解与推荐!!!

在现在的大环境下&#xff0c;PDF文件因其跨平台、格式固定等优势&#xff0c;成为了我们工作和学习中不可或缺的一部分。是最常用的文档格式之一。然而&#xff0c;面对多个PDF文件需要合并成一个的场景&#xff0c;如何选择一款高效、易用的PDF合并工具就显得尤为重要。今天&…

「QT」窗口类 之 QWidget 窗口基类

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「QT」QT5程序设计&#x1f4da;全部专栏「Win」Windows程序设计「IDE」集成开发环境「UG/NX」BlockUI集合「C/C」C/C程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「UG/NX」NX定制…

【机器学习】如何配置anaconda环境(无脑版)

马上就要上机器学习的实验&#xff0c;这里想写一下我配置机器学习的anaconda环境的二三事 一、首先&#xff0c;下载安装包&#xff1a; Download Now | Anaconda 二、打开安装包&#xff0c;一直点NEXT进行安装 这里要记住你要下载安装的路径在哪&#xff0c;后续配置环境…

【3D Slicer】的小白入门使用指南四

开源解剖影像浏览工具Open Anatomy Browser使用及介绍 和3D slicer米有太大关系,该工具是网页版影像数据的浏览工具(可以简单理解为网页版的3D slicer) 介绍 ● 开放解剖(OA)浏览器是由神经影像分析中心开发的,基于网络浏览器技术构建的图谱查看器。 ● OA浏览器将解剖模…

Unity使用PS合并贴图

前言 使用PBR渲染&#xff0c;金属工作流时&#xff0c;默认使用一个金属度贴图&#xff0c;其中r通道保存金属度&#xff0c;a通道保存光滑度&#xff0c;g通道和b通道没使用&#xff1b; 我们很可能使用Occlusion Map&#xff0c;使用其中的g通道保存Occlusion 信息。单独使用…

Linux中.NET读取excel组件,不会出现The type initializer for ‘Gdip‘ threw an exception异常

组件&#xff0c;可通过nuget安装&#xff0c;直接搜名字&#xff1a; ExcelDataReader using ConsoleAppReadFileData.Model; using ExcelDataReader; using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Task…

Qt_day4_Qt_UI设计

目录 Qt_UI设计 1. Designer 设计师&#xff08;掌握&#xff09; 2. Layout 布局&#xff08;重点&#xff09; 2.1 基本使用 2.2 高级用法 2.3 代码布局&#xff08;了解&#xff09; 3. Designer与C的关系&#xff08;熟悉&#xff09; 4. 基本组件&#xff08;掌握…

Axure网络短剧APP端原型图,竖屏微剧视频模版40页

作品概况 页面数量&#xff1a;共 40 页 使用软件&#xff1a;Axure RP 9 及以上&#xff0c;非软件无源码 适用领域&#xff1a;短剧、微短剧、竖屏视频 作品特色 本作品为网络短剧APP的Axure原型设计图&#xff0c;定位属于免费短剧软件&#xff0c;类似红果短剧、河马剧场…

网安加·百家讲坛 | 仝辉:金融机构鸿蒙应用安全合规建设方案

作者简介&#xff1a;仝辉&#xff0c;北京娜迦信息科技发展有限公司攻防安全负责人&#xff0c;深耕移动应用安全领域十余年&#xff0c;获得过CISP、CISSP、OSCP、PMP、CCRC-CIASW等相关证书&#xff0c;参与多项移动应用安全标准起草&#xff0c;参与华为、平安集团、中国移…

C语言 strlen 函数 - C语言零基础入门教程

目录 一.strlen 函数简介二.strlen 函数实战三.猜你喜欢 零基础 C/C 学习路线推荐 : C/C 学习目录 >> C 语言基础入门 一.strlen 函数简介 在C 语言中&#xff0c;char 字符串也是一种非常重要的数据类型&#xff0c;我们可以使用 strlen 函数获取字符串长度&#xff1b;…

OceanStor Pacific系列 8.1.0 功能架构

功能架构 华为OceanStor Pacific系列提供基于三层的分布式存储架构&#xff0c;融合分布式文件、对象、大数据和块多个服务形态&#xff0c;支持文件、对象、大数据服务部署在一个集群&#xff0c;并统一管理。 华为OceanStor Pacific系列整体功能架构由存储接口层、存储服务…

Simulink中Matlab function使用全局变量

目录 一. 引言二. 普通Matlab function使用全局变量三. Simulink中的Matlab function使用全局变量四. 如何利用Matlab function的全局变量施加随机噪声 一. 引言 最近发现了之前仿真中的一个问题&#xff0c;记录一下备忘。 Matlab function中有时候需要用到全局变量&#xf…

react-markdown内容宽度溢出和换行不生效问题

情景复现&#xff1a; 解决办法&#xff0c;添加样式进行限制 /* index.css */ .markdown-container {word-break: break-word; /* 强制长单词断行 */white-space: pre-wrap; /* 保留空白符序列&#xff0c;但是正常地进行换行 */overflow-wrap: break-word; /* 在长单词或…

【C#设计模式(10)——装饰器模式(Decorator Pattern)】

前言 装饰器模式可以在运行时为对象添加额外的功&#xff0c;而无需修改原始对象的代码。这种方式比继承更加灵活。 代码 //蛋糕类&#xff08;抽象类&#xff09; public abstract class Cake {public abstract void Create(); } //奶油蛋糕类 public class CreamCake : Cak…

Diffusion Transformer模型结构解析(DiT、SD3、Flux)

Diffusion Transformer模型结构解析&#xff08;DiT、SD3、Flux&#xff09; 本文将通过 DiT、SD3、Flux 三个 DiT 相关工作&#xff0c;介绍 Diffusion 中的 Transformer 结构的应用与演进。注意 SD3 和 Flux 采用的 Flow Matching 的扩散模型形式化当然是很关键的改进&#…

给阿里云OSS绑定域名并启用SSL

为什么要这么做&#xff1f; 问题描述&#xff1a; 当用户通过 OSS 域名访问文件时&#xff0c;OSS 会在响应头中增加 Content-Disposition: attachment 和 x-oss-force-download: true&#xff0c;导致文件被强制下载而不是预览。这个问题特别影响在 2022/10/09 之后新开通 OS…

如何找到系统中bert-base-uncased默认安装位置

问题&#xff1a; 服务器中无法连接huggingface&#xff0c;故需要自己将模型文件上传 ubuntu 可以按照这个链接下载 Bert下载和使用&#xff08;以bert-base-uncased为例&#xff09; - 会自愈的哈士奇 - 博客园 里面提供了giehub里面的链接 GitHub - google-research/be…

【算法】区间DP

基本内容 [!NOte] 通过分治的思想实现DP数组 入门例子 NOI1995] 石子合并 - 洛谷 | 计算机科学教育新生态 题目要求&#xff1a;给定一圈石头数组&#xff0c;每个石头对应一个权重值&#xff0c;当两个石头合并时组成一个小石头堆&#xff0c;成本为两个石头权重值相加&#x…

机器学习—决定下一步做什么

现在已经看到了很多不同的学习算法&#xff0c;包括线性回归、逻辑回归甚至深度学习或神经网络。 关于如何构建机器学习系统的一些建议 假设你已经实现了正则化线性回归来预测房价&#xff0c;所以你有通常的学习算法的成本函数平方误差加上这个正则化项&#xff0c;但是如果…