What's in a list in html5

There are three types of lists in html5: 1. Unordered list, defined using "

" and "
• " tags; 2. Ordered list, defined using "
  " and "
  1. " tags to define; 3. Define the list, use "

     ", "

     " and "

     " tags to define.

The operating environment of this tutorial: Windows 7 system, HTML5 version, Dell G3 computer.

Unordered list

Function: Add unordered list semantics to a bunch of content (a whole without sequential order), the items in the list are in no particular order

Format:

li English is list item, translated as list item

<h4>选择居住城市(CN)</h4>
<ul>
  <li>北京</li>
  <li>上海</li>
  <li>广州</li>
  <li>铁岭</li>
</ul>

ul Application scenario:

• Navigation Article

• Product list, etc.

• News list
  

Notes :

• The disorder here means that there is no order of content for the subject. For example, the topic is "Choose a city of residence (CN)". Beijing and Shanghai are all cities in China. , no matter who is placed first, it is still a Chinese city. If the title is changed to "China's Smog Ranking", then there must be a strict ranking, and Beijing must be written first

• The browser will automatically add a leading symbol to the unordered list, but you must remember that the function of ul is not to add small dots to the text, but to increase the semantics of the unordered list.

  • In fact, ul also has a type attribute, which can modify the style of the leading symbol. The values ​​include disc, square, and circle.

  • But Since the style will be completed through CSS in the future, I won’t introduce it to you here

• ul is a group tag, which must appear one after another. , that is to say, the li tag cannot exist alone and must be wrapped in ul

• Since ul and li are a whole, it is not recommended to wrap other tags in ul. Always remember that the most important tag in ul is It is best to only write li tags

• Although it is recommended to only write li tags in ul, the li tag is a container tag. You can add any tag to the li tag, and even add the ul tag

<ul>
  <li>
      好吃的
      <ul>
          <li>牛奶</li>
          <li>面包</li>
      </ul>
  </li>
  <li>
      日用的
      <ul>
          <li>毛巾</li>
          <li>牙膏</li>
      </ul>
  </li>
</ul>

Ordered list(ordered list)

Function: Add ordered list semantics (an ordered whole) to a bunch of content, and the items in the list are arranged in order

• Format:

  <h4>中国房价排行</h4>
  <ol>
      <li>北京</li>
      <li>上海</li>
      <li>广州</li>
      <li>铁岭</li>
  </ol>

ol Application scenario:

• xxx Ranking

• In fact, there are not many application scenarios for ol, because everything that can be done with ol can be done with ul

Notes:

• ol and ul have different semantics, how to use them are the same and the points to note are the same

• In fact, there are two more uls Common attributes start and type attributes can modify the style and serial number of the leading symbol

• But since the style will be completed through CSS in the future, I will not introduce it to you here

definition list

Function: Add list semantics to a bunch of content, list the items in the list through dt, and then give corresponding descriptions to each item through dd

Format:

• dt English definition title, translated as definition title

• dd English definition description, translated as definition description information

<dl>
  <dt>北京</dt>
  <dd>国家的首都, 看升国旗的地方</dd>
  <dt>上海</dt>
  <dd>魔都, 遍地是黄金的地方</dd>
</dl>

dl application scenario:

• Related information at the bottom of the website

• Every time you see a bunch of content, it is used to describe something When creating a piece of content, you should think of dl

Notes:

- dl is a `group tag`, it must be a The appearance of lumps means that the dt and dd tags cannot exist alone and must be wrapped in dl

• Since dl, dt and dd are a whole, wrapping them in dl is not recommended Other tags

• dd and dt are container tags like the li tag. You can add any tag inside them

• The definition list is very flexible and you can configure multiple dt tags. dd, but it is best not to have multiple dts corresponding to one dd. The semantics of dd is to describe the dt closest to it, so other dts are equivalent to no descriptions, and the meaning of the definition list is that each item can be listed and Each entry can be described

• The definition list is very flexible, and multiple dt dd combinations can be split into multiple dl

Related recommendations:《 html video tutorial》

The above is the detailed content of What's in a list in html5. For more information, please follow other related articles on the PHP Chinese website!