Learn HTML list

In a sense, any content is not descriptive text can be considered a list. Census, the solar system, restaurant menus and so can be represented as a list or a list of lists. List is divided into unordered lists, ordered lists and definition lists three kinds

Unordered list

Unordered list (unorder list) abbreviated ul, i.e., no sorting items set values, and their order in the list is meaningless. Typically, the head unordered list items may be several forms, such as a point, a circle or square. Style head is not defined in the HTML page description, but it may be related to the CSS list-style-type property

[] Default style

//IE7-浏览器margin-left: 30pt;
ul{
    margin: 16px 0;
    padding-left: 40px;
    list-style-type: disc;
}</pre>

<pre style="-webkit-tap-highlight-color: transparent; font-family: Courier, &quot;Courier New&quot;, monospace; display: block; padding: 1em; border: 2px solid rgb(221, 221, 221); border-radius: 4px; overflow-x: auto; line-height: 1.6; background: rgb(248, 248, 248);"><ul>
    <li>Coffee</li>
    <li>Milk</li>
</ul>
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

Ordered list

Ordered list (order list) abbreviated ol, represents more than an ordered list of items. Normally, the ordered list displayed in the front of the item number (a preceding numbering), may be in any form, such as numbers, letters, or even simple point Roman numerals. In the HTML page's description does not define the number of styles, but you can use the associated CSS definitions, using list-style-type property

[] Default style

//IE7-浏览器margin-left: 30pt;
ol{
    margin: 16px 0;
    padding-left: 40px;
    list-style-type: decimal;
}

<ol>
    <li>Coffee</li>
    <li>Milk</li>
</ol>

【Attributes】

HTML5 adds two attributes ol: reversed and start

1、reversed

Descending (IE and safari not supported)

2、start

Ordered items starting (no start attribute CSS alternative) list

<ol reversed start="2">
  <li>咖啡</li>
  <li>牛奶</li>
  <li>茶</li>
  <li>可乐</li>
  <li>酒</li>    
</ol>

marker

marker represents ol or ul li list items in signs, although list-style pattern can only be applied to display value list-item elements, but because of the style inheritable, so even apply it in ol or ul, then by inheritance, so that all will get li list-style style settings. If set to one li list-style style overrides its inherited from the parent list-style style

list-style(列表项标志复合样式):list-style-type list-style-image list-style-position

1, list-style-type: the type of list item markers

2, list-style-image: the logo image list item

3, list-style-position: list item flag

Note: When the list-style-image is not none, list-style-type value will be overwritten; usually provided as a "posterior" type of sign, to cope with unexpected situations that failed to load image

注意：IE7-浏览器不支持属性值 “decimal-leading-zero”、“lower-greek”、“lower-latin”、“upper-latin”、“armenian”、“georgian”

定义列表

定义列表(define list)简写是dl，是一个包含术语定义以及描述的列表，通常用于展示词汇表或者元数据(键-值对列表)

定义元素(define list title)用于在一个定义列表中声明一个术语。该元素仅能作为dl的子元素出现。通常在该元素后面会跟着dd元素

描述元素(define list describe)用来指明一个描述列表dl元素中一个术语的描述。这个元素只能作为描述列表元素的子元素出现，并且必须跟着一个dt元素

注意：一个dt可对应多个dd；

的display都是block

【默认样式】

dl{
    margin: 16px 0;
}
//IE7-浏览器margin-left: 30pt;    
dd{
    margin-left: 40px;
}
专门建立的学习Q-q-u-n： 731771211，分享学习方法和需要注意的小细节，不停更新最新的教程和学习技巧
（从零基础开始到前端项目实战教程，学习工具，全栈开发学习路线以及规划）

<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>