HTML common list tag
Pay attention to me, do not get lost ~
Common list tag
When writing AN HTML document and encountering the same type of content, consider using lists (navigation, ranking, related articles, etc.),
There are three types of lists commonly used: ordered lists, unordered lists, and custom lists.
A, ordered list OL
Ordered list: having a certain time, order, order, etc., such as ranking, popularity,
Ol order list has only one child of type Li List item
Search hot <! - the default sorting style - > < ol > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > < / ol > <! , ordered by the capital letters - > < ol type = "A" > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > </ol> <! - sort by lowercase letters - > < ol type = "a" > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > </ol> <! , ordered in accordance with the capital Roman numeral - > < ol type = "I" > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > </ol> <! - sort by lower case Roman numerals - > < ol type = "I" > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > </ol>Copy the code
Unordered list ul
Unordered list: The same category, but no specific order, commonly used for navigation, related information,
Ul unorder list has only one type of child li List item
Related information <! The following words are generated randomly --> <! -- Just as without setting type, The default prefix symbol --> <ul type="disc"> <li>Temporibus asperiores incidunt laborum.</li> <li> </li> <li>Sit ipsam error consequatur.</li> <li>Deserunt beatae molestiae assumenda.</li> <li>Reiciendis aut deserunt soluta? </li> </ul> <! -- Clear the prefix --> <ul type="none"> <li>Lorem ipsum dolor sit.</li> <li>Illo Aliquid consequatur unde? </li> <li>Est sequi quia nulla.</li> <li>Voluptate enim officiis quas.</li> <li>Iusto, et. Eos, nam.</li> </ul> <! <ul type="circle"> <li>Maxime incidunt temporibus mollitia? </li> <li>Reprehenderit optio quibusdam ad.</li> <li>Natus labore impedit placeat? </li> <li>Tenetur rerum illum repellat! </li> <li>Ipsum officia laudantium distinctio! </li> </ul> <! <ul type="square"> <li>Veritatis id Voluptatem vitae.</li> </li> <li>Exercitationem voluptatibus alias quod.</li> <li>Aut cumque ipsa dignissimos.</li> <li>Distinctio commodi eaque soluta? </li> </ul>Copy the code
3, custom list DL
Custom lists: Generally used for noun explanations, but rarely used,
Dl, defined list dt, indicates the keyword (word) DD, which describes dt
< DL > < DT > Computer < DD >Lorem, Ipsum Dolor.</ DD > </dt> < DT >CPU < DD >Quasi, aut Beatae.</ DD > </dt> < DT > motherboard < DD >Quam, Assumenda fugit. < / dd > < / dt > < / dl > < dl > < dt > computer < / dt > < dd >, Lorem ipsum dolor. < / dd > < dt > CPU < / dt > < dd > Quasi, Aut Beatae.</ DD > < DT > < DD >Quam, Sumenda Fugit.</ DD > </dl>Copy the codeThey’re the same. I know them both
List nesting
Paragraphs, line breaks, images, links, and other lists can be used inside list items, whether ordered or custom.
Using other lists is list nesting
In the end the orderly set of disorder or disorder set of orderly, even set to set each other… Depends on what you like and what you need.
Coffee nested list < ul > < li > < / li > < ol type = "a" > < li > black tea < / li > < li > green tea < / li > < / ol > < li > tea < ol type = "a" > < li > black tea < / li > < li > green tea < / li > < / ol > < / li > < li > < ul milk type = "circle" > < li > yogurt < / li > < li > pure milk < / li > < / ul > < / li > < / ul > < / pre >Copy the code
Five, the summary
Basically, these three commonly used lists, as well as directory lists and the like, function repetition, gradually no longer needed. You can also change the symbol in front of the list to a small image of an icon, but with the help of CSS.
Ol or ul has only one child li, but when I nested it, I used an OL and li as the list’s child elements, and the browser recognized the result I wanted, which is not desirable.
In fact, if you write some other tags, it will also show up, although the browser will recognize it, but it’s best not to do that. It’s a matter of style, specification.
It’s like people are polite, but there are always some people who are not easy to get along with, ok? I don’t see why not. But it’s always good to be polite.
So it’s best to write in accordance with general specifications, rules, code write a lot, style and specification is very important, very important, very important.
HTML common list tag
Pay attention to me, do not get lost ~
Common list tag
When writing AN HTML document and encountering the same type of content, consider using lists (navigation, ranking, related articles, etc.),
There are three types of lists commonly used: ordered lists, unordered lists, and custom lists.
A, ordered list OL
Ordered list: having a certain time, order, order, etc., such as ranking, popularity,
Ol order list has only one child of type Li List item
Search hot <! - the default sorting style - > < ol > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > < / ol > <! , ordered by the capital letters - > < ol type = "A" > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > </ol> <! - sort by lowercase letters - > < ol type = "a" > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > </ol> <! , ordered in accordance with the capital Roman numeral - > < ol type = "I" > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > </ol> <! - sort by lower case Roman numerals - > < ol type = "I" > < li > block chain to HTC phones < / li > < li > military-transport will table the first < / li > < li > Chelsea 1-0 Newcastle < / li > < li > WeChat purse bank savings < / li > < li > pupils to steal the audi < / li > </ol>Copy the code
Unordered list ul
Unordered list: The same category, but no specific order, commonly used for navigation, related information,
Ul unorder list has only one type of child li List item
Related information <! The following words are generated randomly --> <! -- Just as without setting type, The default prefix symbol --> <ul type="disc"> <li>Temporibus asperiores incidunt laborum.</li> <li> </li> <li>Sit ipsam error consequatur.</li> <li>Deserunt beatae molestiae assumenda.</li> <li>Reiciendis aut deserunt soluta? </li> </ul> <! -- Clear the prefix --> <ul type="none"> <li>Lorem ipsum dolor sit.</li> <li>Illo Aliquid consequatur unde? </li> <li>Est sequi quia nulla.</li> <li>Voluptate enim officiis quas.</li> <li>Iusto, et. Eos, nam.</li> </ul> <! <ul type="circle"> <li>Maxime incidunt temporibus mollitia? </li> <li>Reprehenderit optio quibusdam ad.</li> <li>Natus labore impedit placeat? </li> <li>Tenetur rerum illum repellat! </li> <li>Ipsum officia laudantium distinctio! </li> </ul> <! <ul type="square"> <li>Veritatis id Voluptatem vitae.</li> </li> <li>Exercitationem voluptatibus alias quod.</li> <li>Aut cumque ipsa dignissimos.</li> <li>Distinctio commodi eaque soluta? </li> </ul>Copy the code
3, custom list DL
Custom lists: Generally used for noun explanations, but rarely used,
Dl, defined list dt, indicates the keyword (word) DD, which describes dt
< DL > < DT > Computer < DD >Lorem, Ipsum Dolor.</ DD > </dt> < DT >CPU < DD >Quasi, aut Beatae.</ DD > </dt> < DT > motherboard < DD >Quam, Assumenda fugit. < / dd > < / dt > < / dl > < dl > < dt > computer < / dt > < dd >, Lorem ipsum dolor. < / dd > < dt > CPU < / dt > < dd > Quasi, Aut Beatae.</ DD > < DT > < DD >Quam, Sumenda Fugit.</ DD > </dl>Copy the codeThey’re the same. I know them both
List nesting
Paragraphs, line breaks, images, links, and other lists can be used inside list items, whether ordered or custom.
Using other lists is list nesting
In the end the orderly set of disorder or disorder set of orderly, even set to set each other… Depends on what you like and what you need.
Coffee nested list < ul > < li > < / li > < ol type = "a" > < li > black tea < / li > < li > green tea < / li > < / ol > < li > tea < ol type = "a" > < li > black tea < / li > < li > green tea < / li > < / ol > < / li > < li > < ul milk type = "circle" > < li > yogurt < / li > < li > pure milk < / li > < / ul > < / li > < / ul > < / pre >Copy the code
Five, the summary
Basically, these three commonly used lists, as well as directory lists and the like, function repetition, gradually no longer needed. You can also change the symbol in front of the list to a small image of an icon, but with the help of CSS.
Ol or ul has only one child li, but when I nested it, I used an OL and li as the list’s child elements, and the browser recognized the result I wanted, which is not desirable.
In fact, if you write some other tags, it will also show up, although the browser will recognize it, but it’s best not to do that. It’s a matter of style, specification.
It’s like people are polite, but there are always some people who are not easy to get along with, ok? I don’t see why not. But it’s always good to be polite.
So it’s best to write in accordance with general specifications, rules, code write a lot, style and specification is very important, very important, very important.