如何在 HTML 中创建一个有序列表和无序列表,它们的语义有何不同?

大白话如何在 HTML 中创建一个有序列表和无序列表,它们的语义有何不同?

1. HTML 中有序列表和无序列表的基本概念

在 HTML 里,列表是一种用来组织信息的方式。有序列表就是带有编号的列表,它可以让内容按照一定的顺序呈现;无序列表则是用符号(像圆点、方块等)来标记每一项内容,重点在于展示并列的信息,不强调顺序。

2. 创建无序列表

无序列表使用

    标签来创建,每一项内容用
  • 标签包裹。下面是具体的代码示例,代码里有详细注释:

    DOCTYPE html> 
    <html lang="en"> 
    
    <head>
        <meta charset="UTF-8"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>无序列表示例title> 
    head>
    
    <body>
        
        <ul>
            
            <li>苹果li>
            
            <li>香蕉li>
            
            <li>橙子li>
        ul>
    body>
    
    html>
    

    在这个示例中,

      标签就像是一个容器,把所有的列表项都装在里面。每个
    • 标签代表列表中的一项,浏览器会默认用圆点来标记这些项。

      3. 创建有序列表

      有序列表使用

        标签来创建,同样每一项内容用
      1. 标签包裹。以下是带有注释的代码示例:

        DOCTYPE html> 
        <html lang="en"> 
        
        <head>
            <meta charset="UTF-8"> 
            <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
            <title>有序列表示例title> 
        head>
        
        <body>
            
            <ol>
                
                <li>起床li>
                
                <li>刷牙洗脸li>
                
                <li>吃早餐li>
            ol>
        body>
        
        html>
        

        这里的

          标签也是一个容器,不过浏览器会自动给每个
        1. 标签内的内容加上编号,从 1 开始依次递增。

          4. 有序列表和无序列表的语义差异

          • 无序列表:适合用来展示那些没有先后顺序关系的内容,比如水果的种类、书籍的清单等。它主要是把相关的信息并列在一起,不强调顺序。
          • 有序列表:适合用来展示有先后顺序或者步骤性的内容,像任务的执行步骤、事件的发生顺序等。它能让读者清晰地知道每个步骤的先后关系。

          总结来说,有序列表和无序列表虽然都是用来组织信息的,但根据内容的特点和需要表达的逻辑,要选择合适的列表类型。

          如何在网页中嵌套有序列表和无序列表?

          在网页中嵌套有序列表和无序列表可以让内容的层次更加清晰。下面为你展示具体的操作方法以及示例代码。

          嵌套规则

          在 HTML 里,你能够在

            (无序列表)或者
              (有序列表)标签里嵌套另一种列表标签,也就是在无序列表中嵌套有序列表,或者在有序列表中嵌套无序列表。要保证每一个嵌套的列表都处于一个
            1. (列表项)标签内部,这样就能确保列表结构的正确性。

              示例代码

              DOCTYPE html> 
              <html lang="en"> 
              
              <head>
                  <meta charset="UTF-8"> 
                  <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
                  <title>嵌套列表示例title> 
              head>
              
              <body>
                  
                  <ol>
                      
                      <li>学习编程的步骤
                          
                          <ul>
                              
                              <li>选择编程语言li>
                              
                              <li>学习基础语法li>
                              
                              <li>做一些小项目练习li>
                          ul>
                      li>
                      
                      <li>选择编程语言的考虑因素
                          
                          <ul>
                              
                              <li>应用场景li>
                              
                              <li>学习难度li>
                              
                              <li>就业前景li>
                          ul>
                      li>
                  ol>
                  
                  <ul>
                      
                      <li>水果
                          
                          <ol>
                              
                              <li>苹果li>
                              
                              <li>香蕉li>
                              
                              <li>橙子li>
                          ol>
                      li>
                      
                      <li>蔬菜
                          
                          <ol>
                              
                              <li>胡萝卜li>
                              
                              <li>西兰花li>
                              
                              <li>菠菜li>
                          ol>
                      li>
                  ul>
              body>
              
              html>    
              

              如何在 HTML 中创建一个有序列表和无序列表,它们的语义有何不同?_第1张图片

              代码解释

              • 有序列表嵌套无序列表:在第一个
                  标签创建的有序列表里,每个
                1. 标签代表一个步骤。在部分
                2. 标签内,又嵌套了
                    标签来列出与该步骤相关的具体内容。
                  • 无序列表嵌套有序列表:在
                      标签创建的无序列表中,每个
                    • 标签代表一个类别。在部分
                    • 标签内,嵌套了
                        标签来按顺序列出该类别下的具体内容。

                    通过这样的嵌套操作,能够让网页上的信息层次更加清晰,便于用户理解内容之间的关系。

你可能感兴趣的:(大白话前端八股,前端,html)