当前位置: 首页 > news >正文

编程笔记 html5cssjs 015 HTML列表

编程笔记 html5&css&js 015 HTML列表

  • 一、有序列表
    • 例1:
    • 例2:
  • 二、无序列表
    • 例1:
    • 例2:

列表是一种特定文字格式,很常用。
HTML 列表。HTML 支持有序、无序和定义列表。

一、有序列表

例1:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>有序列表</title> 
</head>
<body>
<ol><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>
<ol start="50"><li>Coffee</li><li>Tea</li><li>Milk</li>
</ol>
</body>
</html>

例2:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>有序列表</title> 
</head>
<body>
<h4>编号列表:</h4>
<ol><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  <h4>大写字母列表:</h4>
<ol type="A"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  <h4>小写字母列表:</h4>
<ol type="a"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  <h4>罗马数字列表:</h4>
<ol type="I"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  <h4>小写罗马数字列表:</h4>
<ol type="i"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ol>  </body>
</html>

二、无序列表

例1:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>无序列表</title> 
</head> 
<body>
<h4>无序列表:</h4>
<ul><li>Coffee</li><li>Tea</li><li>Milk</li>
</ul>
</body>
</html>

例2:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>无序列表</title> 
</head>
<body>
<p><b>注意:</b> 在 HTML 4中 ul 属性已废弃,HTML5 已不支持该属性,因此我们使用 CSS 代替来定义不同类型的无序列表如下:</p>
<h4>圆点列表:</h4>
<ul style="list-style-type:disc"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ul>  
<h4>圆圈列表:</h4>
<ul style="list-style-type:circle"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ul>  
<h4>正方形列表:</h4>
<ul style="list-style-type:square"><li>Apples</li><li>Bananas</li><li>Lemons</li><li>Oranges</li>
</ul>
</body>
</html>

相关文章:

编程笔记 html5cssjs 015 HTML列表

编程笔记 html5&css&js 015 HTML列表 一、有序列表例1&#xff1a;例2&#xff1a; 二、无序列表例1&#xff1a;例2&#xff1a; 列表是一种特定文字格式&#xff0c;很常用。 HTML 列表。HTML 支持有序、无序和定义列表。 一、有序列表 例1&#xff1a; <!DOCTY…...

【力扣题解】P404-左叶子之和-Java题解

&#x1f468;‍&#x1f4bb;博客主页&#xff1a;花无缺 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! 本文由 花无缺 原创 收录于专栏 【力扣题解】 文章目录 【力扣题解】P404-左叶子之和-Java题解&#x1f30f;题目描述&#x1f4a1;题解&#x1f30f;总结…...

elasticsearch 索引数据多了怎么办,如何调优,部署

当Elasticsearch索引的数据量增加时&#xff0c;可能会遇到性能瓶颈&#xff0c;需要进行调优。以下是一些建议和步骤&#xff0c;可帮助你处理数据量增加的情况&#xff1a; 1. 硬件升级&#xff1a; 增加节点数或升级硬件&#xff0c;包括更快的CPU、更大的内存和更快的存储…...

Spring Cloud Gateway之Predicate断言详解

目录 Predicate&#xff08;断言&#xff09;内置Predicate请求参数匹配请求路径匹配Header 属性匹配Cookie 匹配请求方式匹配请求 ip 地址匹配时间匹配组合匹配 Predicate&#xff08;断言&#xff09; 在 Spring Cloud Gateway 中&#xff0c;Predicate&#xff08;断言&…...

JavaScript中的prototype和_proto_的关系是什么

JavaScript中的prototype和_proto_的关系是什么 __proto__ 是 JavaScript 中对象的一个内部属性&#xff0c;它指向该对象的原型。JavaScript 中每个对象都有一个 __proto__ 属性&#xff0c;通过它可以访问对象的原型。prototype 是函数对象特有的属性&#xff0c;每个函数都…...

机器学习(二) -- 数据预处理(3)

系列文章目录 未完待续…… 目录 前言 tips&#xff1a;这里只是总结&#xff0c;不是教程哈。本章开始会用到numpy&#xff0c;pandas以及matplotlib&#xff0c;这些就不在这讲了哈。 “***”开头的是给好奇心重的宝宝看的&#xff0c;其实不太重要可以跳过。 此处以下所有…...

【数学建模美赛M奖速成系列】Matplotlib绘图技巧(三)

Matplotlib绘图技巧&#xff08;三&#xff09; 写在前面7. 雷达图7.1 圆形雷达图7.2 多边形雷达图 8. 极坐标图 subplot9. 折线图 plot10. 灰度图 meshgrid11. 热力图11.1 自定义colormap 12. 箱线图 boxplot 写在前面 终于更新完Matplotlib绘图技巧的全部内容&#xff0c;有…...

手写Spring与基本原理--简易版

文章目录 手写Spring与基本原理解析简介写一个简单的Bean加载容器定义一个抽象所有类的BeanDefinition定义一个工厂存储所有的类测试 实现Bean的注册定义和获取基于Cglib实现含构造函数的类实例化策略Bean对象注入属性和依赖Bean的功能Spring.xml解析和注册Bean对象实现应用上下…...

EasyNTS端口穿透服务新版本发布 0.8.7 增加隧道流量总数记录,可以知晓设备哪个端口耗费流量了

EasyNTS上云平台可通过远程访问内网应用&#xff0c;包含网络桥接、云端运维、视频直播等功能&#xff0c;极大地解决了现场无固定IP、端口不开放、系统权限不开放等问题。平台可提供一站式上云服务&#xff0c;提供直播上云、设备上云、业务上云、运维上云服务&#xff0c;承上…...

python自动合计各部周销

下载依赖 pip install openpyxl -i https://pypi.doubanio.com/simplepip install pandas -i https://pypi.doubanio.com/simple引入依赖 from openpyxl import load_workbook from openpyxl import styles from openpyxl.styles import * import pandas as pd import string…...

Java内存区域与内存溢出异常

Java与C++之间有一堵由内存分配和垃圾收集技术所围成的高墙,墙外面的人想进去,墙里面的人却想出来。 2.1 概述 对于从事C、C++程序开发的开发人员来说,在内存管理领域,他们即是拥有最高权力的“皇帝”,又是从事最基础工作的劳动人民——即拥有每一个对象的“所有权”,又…...

远程网络唤醒家庭主机(openwrt设置)

远程网络唤醒家庭主机&#xff08;openwrt设置&#xff09; 前提&#xff1a; 1.配置好主板bios的网络唤醒功能(网络教程自己百度一下找) 2.电脑开启网络唤醒功能(网络教程自己百度一下找) 3.路由器通过ddns实现域名和动态IP绑定内网穿透方法汇总_不修改光猫进行内网穿透-C…...

Spring知识02

1、这边是做单元测试的 2、项目部署上线的时候需要把Test那里注解掉 3、pom.xml的坐标系&#xff0c;用来导出包给别人用 4、项目名称&#xff0c;artifactId&#xff0c;name属性名保持一致 5、maven中央仓库那里可以看到导包之后会随着附加的内容 6、class.getSingleName获取…...

Linux服务器搭建笔记-006:拓展/home目录容量

一、问题说明 Ubuntu服务器在使用过程中创建的新用户&#xff0c;每位用户会在/home目录下生成一个属于其个人的主文件夹。如果不限制各个用户的使用空间&#xff0c;所有的用户都会共用/home所挂载的硬盘。在这种多用户情况下&#xff0c;会很快的填满/home目录&#xff0c;导…...

元宇宙与VR虚拟现实的未来如何?

从科幻小说到商业现实 自从 Facebook年更名为 Meta 以来&#xff0c;关于元宇宙的热议不断&#xff0c;人们对虚拟世界的兴趣也重新燃起&#xff0c;因为尽管虚拟现实 (VR) 的概念由来已久&#xff0c;但该技术现在才开始真正得以应用。 定义元宇宙和虚拟现实 首先是 The Met…...

微服务事务处理:CAP 定理和最终一致性的关系

CAP 定理和最终一致性 CAP 定理和最终一致性是两个密切相关的概念&#xff0c;但它们在范围和细节上有所不同。以下是比较&#xff1a; CAP 定理 **正式陈述&#xff1a;**在分布式系统中&#xff0c;最多只能同时满足以下三个保证中的两个&#xff1a;一致性、可用性和分区…...

【Linux操作系统】探秘Linux奥秘:操作系统的入门与实战

&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《操作系统实验室》&#x1f516;诗赋清音&#xff1a;柳垂轻絮拂人衣&#xff0c;心随风舞梦飞。 山川湖海皆可涉&#xff0c;勇者征途逐星辉。 目录 &#x1fa90;1 初识Linux OS …...

Copilot概述:AI助手引领编程新纪元

前言&#xff1a; 随着人工智能&#xff08;AI&#xff09;技术的不断进步&#xff0c;编程领域也在逐渐迎来一场革命。GitHub Copilot&#xff0c;作为一款由 OpenAI 和 GitHub 合作开发的编程助手&#xff0c;引发了广泛的关注和讨论。本篇博客将全面概述 Copilot 的背景、功…...

最小覆盖子串(LeetCode 76)

文章目录 1.问题描述2.难度等级3.热门指数4.解题思路参考文献 1.问题描述 给你一个字符串 s 、一个字符串 t 。返回 s 中涵盖 t 所有字符的最小子串。如果 s 中不存在涵盖 t 所有字符的子串&#xff0c;则返回空字符串 “” 。 注意&#xff1a; 对于 t 中重复字符&#xff…...

Windows Sockets 2 笔记

文章目录 一、Winsock简介二、Windows中Winsock对网络协议支持的情况三、使用Winsock3.1 关于服务器和客户端3.2 创建基本Winsock应用程序3.3 初始化Winscok3.3.1 初始化步骤3.3.2 初始化的核心代码3.3.3 WSAStartup函数的协调3.3.4 WSACleanup函数3.3.5 初始化的完整代码 3.4 …...

13章总结

一.泛型 1.定义泛型类 泛型机制语法&#xff1a; 类名<T> 其中&#xff0c;T是泛型的名称&#xff0c;代表某一种类型。 【例13.6】创建带泛型的图书类 代码&#xff1a; 结果&#xff1a; 2.泛型的常规用法 (1)定义泛型类时声明多个变量 class MyClass<T1,T2>…...

(2023,3D NeRF,无图像变分分数蒸馏,单步扩散)SwiftBrush:具有变分分数蒸馏的一步文本到图像扩散模型

SwiftBrush : One-Step Text-to-Image Diffusion Model with Variational Score Distillation 公众&#xff1a;EDPJ&#xff08;添加 VX&#xff1a;CV_EDPJ 或直接进 Q 交流群&#xff1a;922230617 获取资料&#xff09; 目录 0. 摘要 1. 方法 1.1 基础 1.2 SwiftBrus…...

【WPF.NET开发】将路由事件标记为已处理和类处理

本文内容 先决条件何时将路由事件标记为已处理预览和浮升路由事件对实例和类路由事件处理程序复合控件中的输入事件禁止 尽管对于何时将路由事件标记为已处理没有绝对规则&#xff0c;但如果代码以重要方式响应事件&#xff0c;请考虑将事件标记为已处理。 标记为已处理的路由…...

2023年03月18日_微软office365 copilot相关介绍

文章目录 Copilot In WordCopilot In PowerpointCopilot In ExcelCopilot In OutlookCopilot In TeamsBusiness Chat1 - copilot in word2 - copilot in excel3 - copilot in powerpoint4 - copilot in outlook5 - copilot in teams6 - business chat word 1、起草草稿 2、自动…...

GBASE南大通用携手宇信科技打造“一表通”全链路解决方案

什么是“一表通”&#xff1f; “一表通”是国家金融监督管理总局为发挥统计监督效能、完善银行保险监管统计制度、推进监管数据标准化建设、打破数据壁垒&#xff0c;而制定的新型监管数据统计规范。相较于以往的报送接口&#xff0c;“一表通”提高了对报送时效性、校验准确…...

Python 内置高阶函数练习(Leetcode500.键盘行)

Python 内置高阶函数练习&#xff08;Leetcode500.键盘行&#xff09; 【一】试题 &#xff08;1&#xff09;地址&#xff1a; 500. 键盘行 - 力扣&#xff08;LeetCode&#xff09; &#xff08;2&#xff09;题目 给你一个字符串数组 words &#xff0c;只返回可以使用在…...

【JavaWeb】day01-HTMLCSS

day01-HTML&CSS HTML 图片标签&#xff1a;<img> src&#xff1a;指定图像URL&#xff08;绝对路径/相对路径&#xff09;width&#xff1a;图像宽度&#xff08;像素/相对于父元素的百分比&#xff09;height&#xff1a;图像高度&#xff08;像素/相对于父元素的百…...

【工具】windeployqt 在windows + vscode环境下打包

目录 0.背景简介 1.windeployqt简介 2.打包具体过程 1&#xff09;用vscode编译&#xff0c;生成Release文件夹&#xff08;也有Debug文件夹&#xff0c;但是发布版本一般都是用Release&#xff09; 2&#xff09;此时可以看下Release文件夹内&#xff0c;一般是.exe可执行…...

跟着LearnOpenGL学习12--光照贴图

文章目录 一、前言二、漫反射贴图三、镜面光贴图3.1、采样镜面光贴图 一、前言 在跟着LearnOpenGL学习11–材质中&#xff0c;我们讨论了让每个物体都拥有自己独特的材质从而对光照做出不同的反应的方法。这样子能够很容易在一个光照的场景中给每个物体一个独特的外观&#xf…...

DotNet 命令行开发

DotNet 命令行开发 下载安装下载 SDK安装 SDK绿色版下载绿化脚本 常用命令创建 dotnet new运行 dotnet run发布应用 dotnet publish更多命令 VSCode 调试所需插件调试 CS 配置项目.csproj排除依赖关系 launch.jsontasks.json 参考资料 下载安装 下载 SDK 我们就下最新的好&am…...

如何创建自己网站/交换链接名词解释

当把java项目打包成jar后&#xff0c;如何运行main函数呢&#xff1f; 第一种:指定运行类: 1 java -cp test.jar com.ming.test.Test 第二种&#xff1a;在MANIFEST.MF里配置了Main-Class&#xff0c;可以直接执行jar文件 Main-Class: com.ming.test.Test 然后打包执行以下命令…...

上海网站备案/爱站网 关键词挖掘工具站

Android开发&#xff1a;如何实现TCP和UDP传输 http://bbs.starandroid.com/showtopic-10667.html   Android平台值得关注的开源项目 http://bbs.starandroid.com/showtopic-10668.html   Android电源管理相关应用技巧分享 http://bbs.starandroid.com/showtopic-10670…...

app界面设计欣赏网站/推广普通话绘画

The information in this article applies to:- Microsoft SQL Server 7.0,2000数据库日志文件丢失时的恢复步骤Revision History:VersionDateCreatorDescription1.0.0.12003-3-25郑昀草稿 Implementation Scope&#xff1a;本文是用于向Microsoft SQL Server维护人员描述我误删…...

做的比较炫的网站/域名免费注册0元注册

转载于:https://blog.51cto.com/13956693/2173332...

emlog怎么转wordpress/自动点击器免费下载

称号:仿微型一个源共享 微酷WeiKuCMS管家微信升级2.0版本号&#xff08;免费&#xff09;资源主题: 、 资源描叙: 微酷WeiKuCMS。让微信营销如此简单。微酷WeiKuCMS是打造的一个专门针对微信公众账号提供营销推广服务的第三方平台。主要功能是针对微信商家公众号提供与众不同的…...

广州机械网站建设/营销app

工作窃取在本系列的第一部分中&#xff0c;您学习了足够JavaScript和CSS来使动画角色在浏览器中移动。 在本文中&#xff0c;我将探讨一些计算机游戏技术&#xff0c;这些技术将使我们能够对多个精灵进行动画处理&#xff0c;并使它们彼此交互。 如果您想在家中试用此代码&…...