前端祖传三件套HTML的常用标签之列表

简介: 列表是网页中常见的元素之一,它可以将内容分组,并且使得页面更加易于理解和阅读。在HTML中,我们使用<ul>、<ol>和<li>标签来定义列表。

HTML常用标签之列表


    标签
    标签用于定义无序列表,其中每个列表项使用
  • 标签来定义。例如:
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

这个例子中,使用

    标签定义了一个无序列表,其中包含三个列表项。
    标签
    标签用于定义有序列表,其中每个列表项使用
  1. 标签来定义。例如:
<ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

这个例子中,使用

    标签定义了一个有序列表,其中包含三个列表项。
  • 标签
  • 标签用于定义列表项,它需要包含在
        标签内部。例如:
  • <ul>
      <li>Item 1</li>
      <li>Item 2</li>
      <li>Item 3</li>
    </ul>

    这个例子中,使用

  • 标签定义了三个列表项。
      1. 标签的属性

    这些标签除了具有默认样式外,还可以使用如下属性来修改其样式和行为:

    1. id:表示标识符,可用于JavaScript操作和CSS样式设置等。
    2. class:表示类名,可用于CSS样式设置和JavaScript操作等。
    3. style:表示内联样式,可用于指定元素的CSS样式。
    4. start:表示有序列表的起始编号。
      1. 标签的语义化

    这些标签在语义化方面也非常重要,它们可以为搜索引擎提供有用的信息,并且可以使得代码更加易于理解和维护。例如:

    <body>
      <header>
        <h1>My Website</h1>
        <nav>
          <ul>
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact</a></li>
          </ul>
        </nav>
      </header>
      <main>
        <article>
          <header>
            <h2>Article Title</h2>
            <p>By John Doe</p>
          </header>
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
          </ul>
          <footer>
            <small>Published on January 1, 2022</small>
          </footer>
        </article>
      </main>
      <footer>
        <p>&copy; 2022 My Website. All rights reserved.</p>
      </footer>
    </body>

    在这个例子中,两个

      标签分别表示站点内的导航菜单和文章中的列表。使用这些标签可以使得代码更加具有层次性和可读性。


    目录
    相关文章
    |
    5天前
    |
    Dart 前端开发 Android开发
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    24 4
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    |
    4月前
    |
    移动开发 HTML5
    HTML5标签的类型
    HTML5标签的类型。
    96 5
    |
    27天前
    |
    移动开发 前端开发 搜索推荐
    《前端技术基础》第01章 HTML基础【合集】
    超文本标记语言(HyperText Markup Language,简称 HTML)是构建网页结构的基础标记语言。它与 CSS、JavaScript 协同,负责搭建网页“骨架”,用标签组织内容,像标题、段落、图片等元素,通过起始与结束标签(部分可单用,如`<img>`)界定层级与布局,将信息有序整合。标签含特定语义,向浏览器传达展示方式,为网页准确呈现及后续美化、交互筑牢根基。
    78 25
    |
    2月前
    |
    人工智能 前端开发 JavaScript
    前端基础之HTML
    Web1.0、Web2.0 和 Web3.0 标志着互联网发展的三个阶段。Web1.0(静态互联网,1990年代初至2000年代初)以静态内容和单向信息流为主,用户仅能浏览。Web2.0(互动互联网,2000年代初至2010年代初)引入了用户生成内容和社交网络,内容动态且互动性强。Web3.0(语义互联网,2010年代至今)强调语义化、个性化、智能化及去中心化,结合AI、区块链等技术,提供沉浸式体验。HTTP和HTML作为互联网基础协议和技术,在各阶段不断演进,共同推动了现代互联网的发展。
    前端基础之HTML
    |
    3月前
    |
    移动开发 搜索推荐 UED
    HTML5的新语义化标签
    HTML5引入的这些新语义化标签,通过明确标识内容的结构和意义,使得网页结构更加清晰,易于理解和维护。使用这些标签不仅提升了网页的可读性和可访问性,还增强了搜索引擎和辅助技术对网页内容的解析能力。在实际开发中,合理使用这些语义化标签,能够显著提升网页的质量和用户体验。
    107 49
    |
    3月前
    |
    前端开发 JavaScript 搜索推荐
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
    本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
    62 6
    |
    3月前
    |
    存储 移动开发 前端开发
    高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
    本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
    79 5
    |
    3月前
    |
    移动开发 编解码 UED
    除了 `<audio>` 和 `<video>` 标签,HTML5 还支持哪些多媒体格式?
    【10月更文挑战第19天】HTML5对多种多媒体格式的支持,为网页开发者提供了丰富的选择,能够更好地满足不同类型多媒体内容在网页中的展示和交互需求,提升了网页的用户体验和多媒体应用的多样性。
    |
    4月前
    |
    XML 前端开发 JavaScript
    前端开发进阶:从HTML到React.js
    【10月更文挑战第9天】前端开发进阶:从HTML到React.js
    |
    3月前
    |
    存储 移动开发 前端开发

    热门文章

    最新文章