How to use li in html

The li element is an element in HTML that defines a single list item in an unordered or ordered list. It is typically used with ul (unordered list) or ol (ordered list) elements and can also be nested within other li elements to create nested lists. It has no specific properties but inherits the properties of all common HTML elements. CSS styles let you modify the appearance of list items, such as font, size, color, borders, and padding.

Usage of li element in HTML

What is li element?

The li element (list item element) is used to define a single list item in an unordered or ordered list. It contains text or other content from the list.

li Syntax of the element

<code class="html"><li>内容</li></code>

li Attributes of the element

li The element has no specific attributes. However, it inherits the properties of all common HTML elements, for example:

• id - specifies a unique ID for the list item
• class - specifies one or more class names for the list item
• style - Set the inline style of the list items

Usage of li element

li element is usually used with ul (unordered list) or ol (ordered list) elements. In an unordered list, list items appear as dots (•). In an ordered list, list items appear as numbers or letters.

For example:

Unordered list:

<code class="html"><ul>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ul></code>

Ordered list:

<code class="html"><ol>
  <li>项目 1</li>
  <li>项目 2</li>
  <li>项目 3</li>
</ol></code>

Nested lists:

li elements can also be nested within other li elements to create nested lists.

For example:

<code class="html"><ul>
  <li>项目 1
    <ul>
      <li>嵌套项目 1</li>
      <li>嵌套项目 2</li>
    </ul>
  </li>
</ul></code>

Styles for li elements

li elements can be styled with CSS styles to change their appearance. For example, you can modify a list item's font, size, color, borders, and padding.

The above is the detailed content of How to use li in html. For more information, please follow other related articles on the PHP Chinese website!