前端祖传三件套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>

    在这个例子中,两个

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


    目录
    相关文章
    |
    28天前
    |
    前端开发 JavaScript 搜索推荐
    HTML与CSS在Web组件化中的核心作用及前端技术趋势
    本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
    36 6
    HTML 速查列表4
    本示例包含两个部分:表格和框架。表格部分展示了带有两个列标题和一行数据的简单表格;框架部分通过 `&lt;iframe&gt;` 标签嵌入了一个外部页面 `demo_iframe.htm`。
    |
    1月前
    |
    数据安全/隐私保护
    HTML 速查列表5
    表单示例包括文本输入、密码框、复选框、单选按钮、提交和重置按钮、隐藏输入、下拉菜单及多行文本区。实体表示特殊字符,如 &lt; (&lt;)、&gt; (&gt;) 和 &#169; (©)。
    HTML 列表3
    HTML 自定义列表 (&lt;dl&gt;) 用于描述术语或名称的定义。每个术语由 &lt;dt&gt; 标签表示,其定义或描述由 &lt;dd&gt; 标签表示。
    HTML 速查列表3
    文档排版元素简介:包括图片、替换文本、样式/区块、块级和内联元素、无序列表、有序列表及定义列表等,帮助清晰组织和展示内容。
    HTML 速查列表3
    本示例展示了HTML中常用的元素:图片、样式与区块、块级与内联元素、以及三种列表(无序、有序和定义列表)的使用方法。通过这些基本标签,可以构建网页的基本结构。
    HTML 速查列表2
    文本格式化包括多种标签
    HTML 速查列表1
    HTML速查列表包含基本文档结构、标题、文本、换行和水平线等常用标签,方便日常打印使用。例如:`&lt;html&gt;`, `&lt;head&gt;`, `&lt;title&gt;`, `&lt;body&gt;`, `&lt;h1&gt;`至`&lt;h6&gt;`,`&lt;p&gt;`,`&lt;br&gt;`和`&lt;hr&gt;`。
    HTML 列表4
    HTML 列表标签用于创建不同类型的列表。`&lt;ol&gt;` 和 `&lt;ul&gt;` 分别定义有序和无序列表,`&lt;li&gt;` 定义列表项。`&lt;dl&gt;` 用于定义描述列表,其中 `&lt;dt&gt;` 定义术语,`&lt;dd&gt;` 定义术语的描述。
    HTML 列表2
    HTML 有序列表使用数字标记列表项,以 `&lt;ol&gt;` 开始,每个项目用 `&lt;li&gt;` 标签表示。

    热门文章

    最新文章