Chapter 5 create a list
On the HTML page, the rational use of list tags can be used to sort files in outlines and formats.
The list can be divided into two categories: unordered list, ordered list, And unordered list, that is, there is no sequential relationship between the columns of the project, simply using the column to present the data, this unordered tag, each column is separated by a symbol. An ordered column indicates that each column is ordered, for example, from 1, 2, 3... Continue to extend.
Main tags in the list
| Tag | Description |
| <Ul> | Unordered list |
| <Ol> | Ordered list |
<Dir> |
Directory List |
| <DL> | Definition list |
| <Menu> | Menu list |
| <DL>/<DT>/<DD> | Define the tag of the List |
| <Li> | Mark a list item |
5-1 unordered list <ul>
The unordered list uses <ul> </ul> label. The unordered list indicates a list without serial numbers. <li> is used before each list item. The attribute type of <li> has three options, both of which must be in lowercase:
Disc solid Garden
Circle hollow Garden
Square
<Ul> if you do not use the <li> attribute value of your project, <ul> adds "solid Garden" by default ".
Format 1:
<Ul>
<Li> Item 1
<Li> Item 2
<Li> Item 3
</Ul>
Format 2
<Ul>
<Li type = disc> Item 1
<Li type = circle> Item 2
<Li type = square> Item 3
</Ul>
Example 5-1.html
<HTML>
<Head>
<Title> unordered list </title>
</Head>
<Body>
<Ul>
<Li> Add "solid Garden" to the default unordered list"
<Li> default unordered list "solid Garden"
<Li> default unordered list "solid Garden"
</Ul>
<Ul>
<Li type = square> unordered list square squares
<Li type = square> unordered list square squares
<Li type = square> unordered list square squares
</Ul>
<Ul>
<Li type = circle> unordered list of circle and hollow Garden
<Li type = circle> unordered list of circle and hollow Garden
<Li type = circle> unordered list of circle and hollow Garden
</Ul>
</Body>
</Html>
5-2 ordered list <ol>
The format of the ordered list is basically the same as that of the unordered list. It uses the tag <ol> </OL> and <li> before each list item. <Ol> the result of the List contains numbers in the forward and backward order. If you insert or delete a list item, the number is automatically adjusted.
The sequence number is set by the two attribute types and start of <ol>. Start = number starting from the number. For example, start = 2 indicates that the number starts from 2. If it starts from 1, it can be omitted, or set value = "n" in the <li> label to change the specific number of the project in the list line, for example, <li value = "7">. Type = The number or letter used for the serial number. For example, if type = A, the serial number must be in English letters. To use these attributes, place them in the <ol> or <li> initial tag.
Ordered list type attributes
| Type | Description |
| Type = 1 | Indicates the number (1, 2, 3...) of the list project ...) |
| Type = | Indicates that the list items are marked with uppercase letters (a, B, c ...) |
| Type = | Indicates that the list items are marked with lowercase letters (a, B, c ...) |
| Type = I | Indicates that the list items are labeled in upper case with Roman numerals (I, II, III ...) |
| Type = I | Indicates that the list items are labeled with lower-case roman numerals (I, II, III ...) |
Format 1
<Ol type = Number Type start = value>
<Li> 1st items
<Li> 2nd items
<Li> 3rd items
</OL>
Format 2
<Ol>
<Li> 1st items
<Li> 2nd items
<Li> 3rd items
</OL>
Example: 5-2.html
<HTML>
<Head>
<Title> ordered list </title>
</Head>
<Body>
<Ol>
<Li> default ordered list
<Li> default ordered list
<Li> default ordered list
</OL>
<Ol type = A Start = 5>
<Li> 1st items
<Li> 2nd items
<Li> 3rd items
<Li value = 20> item 4th
</OL>
<Ol type = I start = 2>
<Li> 1st items
<Li> 2nd items
<Li> 3rd items
</OL>
</Body>
</Html>
5-3 nested list
Embedding a list into another list as part of another list is called a nested list. Whether it is an ordered list or an unordered list nested, the browser can be automatically divided into arrays.
Real column: 5-3.html
<HTML>
<Head>
<Title> nested list </title>
</Head>
<Body>
<H3> directory <Ol type = A>
<Li> This is the first line of content starting with serial number type A </LI>
<Li> This is the content of the second line starting with sequence number type A </LI>
<Ol type = A Start = 3>
<Li> This is the first line of content starting with serial number A-type C </LI>
<Li> This is the content of the second line starting with serial number A-type C </LI>
<Ol type = 1 Start = 51>
<Li> This is the first line starting with the serial number 51 </LI>
<Li> This is the content of the second line starting with the serial number 51 </LI>
<Li> This is the content of the third line starting with the serial number 51 </LI>
</OL>
<Li> This is the content of the third line starting with serial number A-type C </LI>
</OL>
<Li> This is the content of the third line starting with sequence number type A </LI>
</OL>
<HR>
</Body>
</Html>
5-4 define the tag of the List <DL>/<DT>/<DD>
The label of the definition list is also called a descriptive list. The definition list has two levels by default. The first layer is the list item label <DT>, and the second layer is the annotation item label <DD>. The <DT> and <DD> labels are usually used in pairs. A list item can also correspond to several explanatory items, which is rarely used. <DD> the default comment is displayed in another row. When <DL compact = "Compact"> is used, the Comment item and list item are displayed in the same row. The format is:
<DL>
<DT> 1st <DD> Note 1
<DT> 2nd <DD> Note 2
<DT> 3rd <DD> Note 3
</Dl>
Example: 5-4.html
<HTML>
<Head>
<Title> definition list </title>
</Head>
<Body>
Definition list <p>
<DL>
<DT> www: <DD> WWW is short for (World Wide Web). It can also be abbreviated as web;
<DT> www: <DD> WWW is also called the World Wide Web;
<DT> www: <DD> the most common service provided by the Internet is www;
</Dl>
</Body>
</Html>
5-5 directory list <dir> and menu list <menu>
<Dir> is the directory list label and <menu> is the menu list label. Their format is the same as that of the unordered list <ul>, for example:
Format 1:
<Dir>
<Li> Item 1
<Li> Item 2
<Li> Item 3
</Dir>
Format 2
<Menu>
<Li type = disc> Item 1
<Li type = circle> Item 2
<Li type = square> Item 3
</Menu>
Example: 5-5.html
<HTML>
<Head>
<Title> unordered list </title>
</Head>
<Body>
<Ul>
<Li> Add "solid Garden" to the default unordered list"
<Li> default unordered list "solid Garden"
<Li> default unordered list "solid Garden"
</Ul>
<Dir>
<Li> Add "solid Garden" to the default directory list"
<Li> default directory list "solid Garden"
<Li> default directory list "solid Garden"
</Dir>
<Menu>
<Li> Add "solid Garden" to the default menu list"
<Li> default menu list "solid Garden"
<Li> default menu list "solid Garden"
</Menu>
<Dir>
<Li type = square> Add square to the directory list
<Li type = square> Add square to the directory list
<Li type = square> Add square to the directory list
</Dir>
<Menu>
<Li type = circle> menu list circle and hollow Garden
<Li type = circle> menu list circle and hollow Garden
<Li type = circle> menu list circle and hollow Garden
</Menu>
</Body>
</Html>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
