首页 > 其他分享 >0基础学习HTML(十一)列表

0基础学习HTML(十一)列表

时间:2024-09-22 20:49:28浏览次数:10  
标签:十一 序列表 自定义 标签 无序 列表 HTML

HTML 列表


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

HTML 列表

有序列表

  1. 第一个列表项
  2. 第二个列表项
  3. 第三个列表项

无序列表

  • 列表项
  • 列表项
  • 列表项

HTML无序列表

无序列表是一个项目的列表,此列项目使用粗体圆点(典型的小黑圆圈)进行标记。

无序列表使用 <ul> 标签

<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>

浏览器显示如下:

  • Coffee
  • Milk

HTML 有序列表

同样,有序列表也是一列项目,列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。

列表项使用数字来标记。

<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>

浏览器中显示如下:

  1. Coffee
  2. Milk

HTML 自定义列表

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

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

<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>

浏览器显示如下:

Coffee

- black hot drink

Milk

- white cold drink


HTML 列表标签

标签描述
<ol>定义有序列表
<ul>定义无序列表
<li>定义列表项
<dl>定义列表
<dt>自定义列表项目
<dd>定义自定列表项的描述

标签:十一,序列表,自定义,标签,无序,列表,HTML
From: https://blog.csdn.net/L08130421/article/details/142390179

相关文章

  • 0基础学习HTML(十)表格
    HTML 表格HTML表格由 <table> 标签来定义。HTML表格是一种用于展示结构化数据的标记语言元素。每个表格均有若干行(由 <tr> 标签定义),每行被分割为若干单元格(由 <td> 标签定义),表格可以包含标题行(<th>)用于定义列的标题。tr:tr是tablerow的缩写,表示表格的一行。td......
  • 长列表加载性能优化
    一、长列表优化概述        列表是应用开发中最常见的一类开发场景,它可以将杂乱的信息整理成有规律、易于理解和操作的形式,便于用户查找和获取所需要的信息。应用程序中常见的列表场景有新闻列表、购物车列表、各类排行榜等。随着信息数据的累积,特别是一些新闻应用、......
  • 大学生HTML期末大作业——HTML+CSS+JavaScript培训机构(画室)
    HTML+CSS+JS【培训机构】网页设计期末课程大作业web前端开发技术web课程设计网页规划与设计......
  • 如何使用 HTML 和 CSS 使图像在悬停时旋转
    图像上的悬停旋转效果可以使您的内容更具吸引力和互动性。在本教程中,我们将引导您了解如何仅使用html和css创建简单但引人注目的悬停旋转效果。如何创造效果html:首先,添加以下html代码:<figureclass="hover-rotate">@@##@@</figure>登录后复制您可以添加任何......
  • 增强 React 列表渲染:干净且可重用的模式
    作为react开发人员,我们都遇到过需要渲染数据列表的场景。虽然.map()方法效果很好,但每次渲染列表时重复相同的逻辑可能会让人筋疲力尽,并导致代码重复。幸运的是,有一种更干净、可扩展的方法来处理这个问题,使用可重用组件、高阶组件或自定义挂钩。在本文中,我将分享一种改进react......
  • 反思我的旅程:构建初学者房地产列表全栈应用程序
    当我第一次开始学习python时,我不知道这段旅程会带我走向何方。我记得深入研究python教程,努力学习循环、函数和面向对象编程等基本概念。快进到今天,我使用flask后端和react前端的组合构建了一个全栈房地产列表应用程序。这个项目不仅是一个挑战,也是一次令人难以置信的学习......
  • 使用可重用列表组件扩展 React 应用程序
    在react中构建可扩展的应用程序需要的不仅仅是可靠的业务逻辑。随着应用程序的发展,组件的架构对于其可维护性、性能和灵活性起着重要作用。许多web应用程序中的基本任务之一是处理数据列表。无论是渲染产品列表、表格还是仪表板,您经常会遇到需要可重复和可重用的列表结构的场......
  • 使用所见即所得 HTML 编辑器简化大学内容管理
    华雷斯城自治大学(UACJ)是墨西哥一所备受尊敬的公立大学,最近解决了一些常见的内容管理挑战。他们的解决方案?实施Froala,一个强大的企业级WYSIWYGHTML编辑器。让我们看看这个选择如何影响他们的数字工作流程。简介与许多大型机构一样,UACJ正在处理不一致的格式、集成问......
  • 九宫格(html css实现)---初识flex布局
    记录flex属性并实现一个九宫格flex属性Flex容器:需要注意的是:当时设置flex布局之后,子元素的float、clear、vertical-align的属性将会失效.container{display:flex;}//块状元素.container{inline-flex;}//行内元素块状元素1.***独占一行:块元素会自动......
  • 【油猴脚本】00011 案例 Tampermonkey油猴脚本,动态渲染表格-实现页面动态-添加提取数
    前言:哈喽,大家好,今天给大家分享一篇文章!并提供具体代码帮助大家深入理解,彻底掌握!创作不易,如果能帮助到大家或者给大家一些灵感和启发,欢迎收藏+关注哦......