Home > Web Front-end > CSS Tutorial > HTML list type

HTML list type

王林
Release: 2023-08-30 18:21:04
forward
1297 people have browsed it

There are three types of lists in HTML -

  • Unordered list

      This list has bulleted list items and no bulleted list items. specific order.

    • Ordered list

        This list is used for ordered list items

      1. Definition list

        This list is used to display the definitions of terms.

      We can nest these lists and style them as needed. The CSS property list-style helps us style list items.

      Syntax

      The syntax of HTML list is as follows-

      <type of list>
      <li></li>
      </type of list>
      Copy after login

      The following example illustrates HTML list-

      Example

      Live demonstration

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      ul {
         background-color: papayawhip;
         list-style-type: square;
         font-style: italic;
      }
      ol {
         background-color: azure;
      }
      </style>
      </head>
      <body>
      <ol>
      <li>demo1</li>
      <li>
      demo 2
      <ul>
      <li>demo a</li>
      <li>demo b</li>
      </ul>
      </li>
      <li>demo 3</li>
      </ol>
      </body>
      </html>
      Copy after login

      Output

      This will give the following output−

      HTML 列表的类型

      Example

      Live Demonstration

      <!DOCTYPE html>
      <html>
      <head>
      <style>
      dt {
         font-weight: bold;
         font-style: italic;
      }
      dd {
         border: thin dotted;
      }
      </style>
      </head>
      <body>
      <h2>Programming Languages and Databases</h2>
      <dl>
      <dt>Java</dt>
      <dd>A programming language developed by James Gosling.</dd>
      <dt>C++</dt>
      <dd>A programming language developed by Bjarne Stroustrup.</dd>
      <dt>MySQL</dt>
      <dd>MySQL is an open-source relational database management system.</dd>
      </dl>
      </body>
      </html>
      Copy after login

      Output

      This gives the following output-

      HTML 列表的类型

      The above is the detailed content of HTML list type. For more information, please follow other related articles on the PHP Chinese website!

      source:tutorialspoint.com
      Statement of this Website
      The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
      Popular Tutorials
      More>
      Latest Downloads
      More>
      Web Effects
      Website Source Code
      Website Materials
      Front End Template