HTML之列表学习记录

embedded/2024/11/19 2:03:26/
htmledit_views">

练习题:

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

58cc72ec33694acab65dde7a953047f7.png

代码:

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

练习过程的代码:

 

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>

效果图:

f63ac112dd7843599e0199e43e7c63a0.png

 


http://www.ppmy.cn/embedded/138666.html

相关文章

构建SSH僵尸网络

import argparse import paramiko# 定义一个名为Client的类&#xff0c;用于表示SSH客户端相关操作 class Client:# 类的初始化方法&#xff0c;接收主机地址、用户名和密码作为参数def __init__(self, host, user, password):self.host hostself.user userself.password pa…

从 Rust 官方文档理解 Ownership

Rust 的 Ownership 感觉仍然很复杂&#xff0c;但 Rust 官方文档 The Rust Programming Language - Understanding Ownership 所费篇幅似乎并不多。下面就阅读该文档并记录下来对 Rust Ownership 的理解&#xff0c;相信官方的文档会表述的比准确而清晰。 本文中对 Ownership,…

QT_CONFIG宏使用

时常在Qt代码中看到QT_CONFIG宏&#xff0c;之前以为和#define、DEFINES 差不多&#xff0c;看了定义才发现不是那么回事&#xff0c;定义如下&#xff1a; 看注释就知道了QT_CONFIG宏&#xff0c;其实是&#xff1a;实现了一个在编译时期安全检查&#xff0c;检查指定的Qt特性…

uni-app快速入门(七)--组件路由跳转和API路由跳转及参数传递

uni-app有两种页面路由跳转模式&#xff0c;即使用navigator组件跳转和调用API跳转&#xff0c;API调转不要理解为调用后台接口的API&#xff0c;而是指脚本函数中使用跳转函数。 一、组件路由跳转 1.1 打开新页面 打开新页面使用组件的open-type"navigate",见下面…

【WPF】Prism学习(二)

Prism Commands 1.命令&#xff08;Commanding&#xff09; 1.1. ViewModel的作用&#xff1a; ViewModel不仅提供在视图中显示或编辑的数据&#xff0c;还可能定义一个或多个用户可以执行的动作或操作。这些用户可以通过用户界面&#xff08;UI&#xff09;执行的动作或操作…

Chrome 浏览器开启打印模式

打开开发者工具ctrl shift p输入print 找到 Emulate CSS print media type

Java基础-组件及事件处理(下)

(创作不易&#xff0c;感谢有你&#xff0c;你的支持&#xff0c;就是我前行的最大动力&#xff0c;如果看完对你有帮助&#xff0c;请留下您的足迹&#xff09; 目录 面板组件 说明 常见组件 JScrollPane常用构造方法 JScrollPane设置面板滚动策略的方法 JScrollPane滚…

C++:哈希拓展-位图

目录 一.问题导入 二.什么是位图? 2.1如何确定目标数在哪个比特位? 2.2如何存放高低位 2.3位图模拟代码实现 2.3.1如何标记一个数 2.3.2如何重置标记 2.3.3如何检查一个数是否被标记 整体代码实现 标准库的Bitset 库中的bitset的缺陷 简单应用 一.问题导入 这道…