HTML笔记-列表

最新推荐文章于 2024-09-11 21:45:27 发布
最新推荐文章于 2024-09-11 21:45:27 发布
阅读量1k 收藏 17
点赞数 27
文章标签： 笔记 html5 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73589012/article/details/135285669
版权
本文详细介绍了HTML中无序列表（如<ul>）、有序列表（<ol>）和自定义列表（<dl>）的用法，包括列表项的创建、不同类型列表的标记方法以及嵌套列表的实现。展示了如何使用数字、字母和符号标记项目，并提及了HTML4中的旧属性在HTML5中的变化。
摘要由CSDN通过智能技术生成

HTML 支持有序、无序和定义列表:

运行示例代码1：无序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>小白教程(json.cn)</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>

HTML无序列表：

1、无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。

2、无序列表适合成员之间无级别顺序关系的情况。

3、无序列表使用 <ul> 标签

HTML 有序列表：

同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。有序列表适合各项目之间存在顺序关系的情况。列表项使用数字来标记。

HTML 自定义列表：

1、自定义列表不仅仅是一列项目，而是项目及其注释的组合。

2、自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。

3、自定义列表中的一个术语名可以对应多重定义或者多个术语名对应同一个定义，如果只有也术语名或者只有定义也是可行的，也就是说 <dt> 与 <dd> 在其中数量不限、对应关系不限。

提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。

示例运行代码3：不同类型的有序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>

示例运行代码4：不同类型的无序列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</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>

示例运行代码5：嵌套列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

示例运行代码6：更复杂的嵌套列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</title> 
</head>
<body>

<h4>嵌套列表：</h4>
<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea
        <ul>
          <li>China</li>
          <li>Africa</li>
        </ul>
      </li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

</body>
</html>

示例运行代码7：自定义列表

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>小白教程(json.cn)</title> 
</head>
<body>

<h4>一个自定义列表：</h4>
<dl>
  <dt>Coffee</dt>
  <dd>- black hot drink</dd>
  <dt>Milk</dt>
  <dd>- white cold drink</dd>
</dl>

</body>
</html>

一只努力的爬虫呀
关注
html学习笔记-无序列表、有序列表和嵌套列表
蜗牛背着那重重的壳呀，一步一步地往上爬.......
01-11 2735
无序列表ul（unordered list） ul无序列表标签 li 列表项 <ul> <li>orange</li> <li>apple</li> <li>tree</li> </ul> 展示为： orange apple tree 不通类型形状的无序列表 <h4>实心圆点 l...
HTML5学习笔记
m0_61721166的博客
03-08 8994
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
印象笔记 - Markdown 入门指南
guoqx的专栏
02-29 1831
其常用的标记符号不超过十个，相对于更为复杂的 HTML 标记语言来说，Markdown 十分的轻量，学习成本也不需要太多，且一旦熟悉这种语法规则，会有沉浸式编辑的效果。而且Windows下不支持绝对路径，只支持相对路径。支持丰富的主流 Markdown 语法：支持文字相关样式、序号列表、任务列表、表格、TOC 目录、多种图表、数学公式、流程图、时序图、甘特图等；将本地图片文件嵌入到笔记中，笔记大小会随着嵌入和删除本地图片而改变，嵌入本地图片后，在笔记编辑模式下，显示成一个一长串字符的图片文件名。
HTML笔记（完结）
热门推荐
weixin_43872169的博客
07-24 1万+
HTML基础部分 基础元素（代码注释方法：ctrl+/ 文字注释方法：ctrl+shift+/） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body&...
HTML笔记（精简）
weixin_46160720的博客
03-08 1594
html 笔记 vscode 前端三大件
Web前端笔记-HTML加载SVG图片及简单修改
IT1995的博客
02-14 3687
加载的用img标签，就可以了，就把他当成普通图片即可，如： <img src="icon/cash-coin.svg" /> 图片是这样的： 在前端的效果就这样了。 简直无法看清，修改下。打开svg，从中看到几个参数： width为宽，height为高，fill为填充的颜色， 改成这样，同时图片也变了： 看看界面： 现在这个好看多了。 本笔记使用到的SVG为cash-coin.svg <svg xmlns="http://www.w3.org/2
前端面试笔记-HTML篇
qq_46354688的博客
03-04 2389
目录HTML行内元素、块级元素以及inline-blockHTML5webStoragewebsocketwebWorker HTML 行内元素、块级元素以及inline-block 行内元素和块级元素的具体区别是什么？inline-block是什么？（面试题目） 行内元素与块级元素区别 行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。 块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一致），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一
HTML5笔记-（常用元素）
hashcon
07-04 6244
基本元素<html>:根元素，允许省略 <head>:允许省略 <title>:标题 <body> <style>引入样式定义 <h1~h6> <p>段落 <br>换行 <hr>水平线 <div><span>换行与不换行的节文本格式化<b>加粗 <i>斜体 <em>强调 <small>小 <sup>上标 <sub>下标超链接和锚点<a href="scheme://host.domain:p
HTML5学习笔记-01-html语义化标签
欢迎访问我的主页：https://www.bookbook.cc
06-30 8739
一、URl 二、网页头部声明lang=”zh-cn”、lang=“zh”、lang=“zh-cmn-Hans”区别 2.1 声明英文网站 2.2 声明中文网站 三、meta 3.1 keyword 表示搜索关键字 3.2 description 网站摘要 3.3 Viewport 响应式声明 四、语义化标签 4.1 header 头部区域 4.2 footer 尾部区域 4.3 nav 导航区域 4.4 article(文章) 主内容区域 4.5 section(部分) 定义文档中相似的区域 4.6 asi
Web笔记-移动前端开发笔记
IT1995的博客
02-16 4916
因为最近有个移动端的小项目，在此稍微学习下移动端开发基础概念。免得用框架的时候莫名其妙。 px(CSS pixels)：逻辑像素，浏览器使用的抽象单位； dp,pt(device independent pixels)：设备无关像素； dpr(devicePixelRatio)：设备像素放缩比； 计算公式：1px = (dpr)^2 * dp 下面先解释下dp，为设备像...
学习笔记HTML-css-JS.zip
03-17
学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip 学习笔记HTML-css-JS.zip学习笔记HTML-css-JS.zip学习笔记...
HTML笔记-个人笔记
04-13
X-mind格式，个人笔记
CSS笔记-个人笔记-求权威绕
04-13
CSS笔记，个人笔记，X-mind格式
HTML学习笔记--xmind(传智播客)
03-29
根据黑马程序员html基础视频的知识点总结，在x-mind中打开
遇见狂神说笔记-全部内容,包含所有章节
06-12
狂神说笔记-全部内容,包含所有章节
STM32学习笔记（二、初识stm32单片机）
tommorrowwill的博客
09-10 767
首先stm32是意法半导体公司（ST）使用ARM公司的Cortex-M为核心生产的32位的单片机。其中，ST---意法半导体公司，即SOC厂商。M---为Microelectronics的缩写，即微型处理器。32---表示控制器为32位的。103---表示F系列的子系列。
C++学习笔记----6、内存管理（五）---- 智能指针（3）
weixin_71738303的博客
09-11 1137
与指向特定类型的原始指针可以转化为不同类型的指针一样，shared_ptr保存特定的类型可以转化为一个另一种类型的shared_ptr。转化shared_ptr的函数是const_pointer_cast()，dynamic_pointer_cast(),static_pointer_cast()和reinterpret_pointer_cast()。前面简要提过，当拥有共享属主的智能指针，例如shared_ptr不在活动范围或者被重置时，只有它是最后指向的智能指针时才能释放其指向的资源。
【学习笔记】手写Tomcat 二
最新发布
LearnTech_123的博客
09-11 1083
在昨天的基础上，再进一步优化，能够响应HTML文件，图片等静态资源。
UEFI学习笔记（五）：EDK II PCD的概念、类型、使用
qq_44189622的博客
09-11 811
如果在BIOS里面有一些模块是binary方式集成进来的而这些binary又需要用到PCD（用于Binary Release），那么这些Binary集成的要用到的PCD就必须要设置为。PCD的值存在memory里面，下次启动时，上次更改的值丢失了，每次启动都是从default值开始。是存在VPD空间的（在FLASH上，只读），一般是出厂配置。如果platform是从源码build出来的，没有binary在里面的时候，PCD用的都是。作用域在一个模块中（模块级的），可以在Binary Level进行修改。
前端入门：HTML课堂笔记-基础与文本、图片标签解析
"Day02 HTML课堂笔记记录了HTML的基本语法、标签使用、文本标签、图片处理以及路径知识，适合前端零基础入门学习者。" 在前端开发中，HTML（超文本标记语言）是构建网页的基础。这篇课堂笔记详细介绍了HTML的一些...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值