What's in a list in html5

There are three types of lists in html5: 1. Unordered list, defined using "ff6d136ddc5fdfeffaf53ff6ee95f185" and "25edfb22a4f469ecb59f1190150159c6" tags; 2. Ordered list, defined using "c34106e0b4e09414b63b2ea253ff83d6 " and "25edfb22a4f469ecb59f1190150159c6" tags to define; 3. Define the list, use "5c69336ffbc20d23018e48b396cdd57a", "73de882deff7a050a357292d0a1fca94" and "67bc4f89d416b0b8236eaa5f43dee742" 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:

  3f7b3decd2dcafb07b84d2d3985d9f40中国房价排行0f6dfd1e3624ce5465eb402e300e01ae
  c34106e0b4e09414b63b2ea253ff83d6
      25edfb22a4f469ecb59f1190150159c6北京bed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6上海bed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6广州bed06894275b65c1ab86501b08a632eb
      25edfb22a4f469ecb59f1190150159c6铁岭bed06894275b65c1ab86501b08a632eb
  f6f112ef45f603be226bc581f9dd5e90

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

5c69336ffbc20d23018e48b396cdd57a
  73de882deff7a050a357292d0a1fca94北京c72c1af5e0e7f90179c047c5ef85885e
  67bc4f89d416b0b8236eaa5f43dee742国家的首都, 看升国旗的地方82e295699cff932a4d4dabba39074c35
  73de882deff7a050a357292d0a1fca94上海c72c1af5e0e7f90179c047c5ef85885e
  67bc4f89d416b0b8236eaa5f43dee742魔都, 遍地是黄金的地方82e295699cff932a4d4dabba39074c35
cd324b2387ec29e44e8e788c60648872

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!