HTML thorough analysis (6) List mark

Source: Internet
Author: User
Tags arabic numbers define definition compact end i18n include use definition

Manifest markup

  <OL> <LI>
  <UL>
  <MENU> <DIR>
  <DL> <DT> <DD>

To understand this "HTML thorough analysis" of the mark classification, please see " Mark List ".
Please also understand the distinction between containment and empty tags, see "HTML concept ."

<OL> <LI>: ▲top

<LI>...</LI>
Usage: Define one of the items in a list
Start/End ID: must/optional
Properties:%coreattrs,%i18n,%events
Type= "..." (1,a,a,i,i), or changing unordered list bullets (disc, square, circle)
Value= "..." sets the value of the contents of the list already given in the current list
Null: Not Allowed

<OL>...</OL>
Usage: Create an ordered list
Start/End Identification: must/must
Properties:%coreattrs,%i18n,%events
Type= "..." Set the style of the number (1,a,a,i,i)
The compact is objected to. Make the list appear compact
Start= "..." Setting the integer value when the option starts to be selected
Null: Not Allowed
Note: must contain at least one list of contents

<OL> called sequential list tags. <LI> is used to indicate the list item.
The so-called order list is to add 1,2,3 before each item ... such as numbers, also known as numbered lists.

<OL> parameter setting (commonly used):
Example: <ol type= "I" start= "4" ></ol>

  • type = "I"
    Set the number of styles, with a value of five, refer to the right table, the default is type = "1 ". The
  • start = "4"
    Sets the starting number, regardless of the number of variants set, the value can only be 1,2,3 ... the default is start= "1 ".
Type numbering style
1 1, 2, 3, ...
lower Alpha a, B, C, ...
upper Alpha a, B, C, ...
lower Roman i, II, III, ...
upper Roman i, II, III, ...

<LI> parameter setting (commonly used):
Example: <li type= "Square" value= "4" >

    • type= "Square"
      Only applies to the Type= list , set the symbol style, its value has three kinds, as follows, defaults to "disc":
      A symbol is a column-entry symbol when type= "disc".
      Symbol 0 is a column-entry symbol when type= "Circle".
      A symbol is a column-entry symbol when type= "square".
    • Value= "4"
      Only applies to the sequential list , set the number of that item, and thereafter the items will be incremented as the starting number, but the preceding items are unaffected and the value can only be 1,2,3. Equal integers, no default values.

Example:

HTML source Code (original) Browser Display Results
My best friends:
<ol>
<li>michelle Wei
<li>michael Wan
<li>gloria Lam
</ol>
My best friends:
  1. Michelle Wei
  2. Michael Wan
  3. Gloria Lam

 
<UL>: ▲top

Usage: Create an unordered list
Start/End Identification: must/must
Properties:%coreattrs,%i18n,%events
Type= "..." to set the style of bullets (disc, square, circle)
The compact is objected to. Make the list appear compact
Null: Not Allowed
Note: must contain at least one list of contents

<UL> called unordered list tags.
The so-called unordered list is in front of each item plus,, and so on symbols, so called symbol list.

<UL> parameter setting (commonly used):
Example: <ul type= "Square" >

    • type= "Square"
      The set symbol style, its value has three kinds, like below, the default value is Type= "disc":
      A symbol is a column-entry symbol when type= "disc".
      Symbol 0 is a column-entry symbol when type= "Circle".
      A symbol is a column-entry symbol when type= "square".

Note: Since both <UL> and <LI> have type this parameter, choose one of the two as much as possible.

Example:

HTML source Code (original) Browser Display Results
My homepages:
<ul>
<li>penpals Garden
<li>icq Garden
<li>software City
<li>creation of webpage
</ul>
My homepages:
  • Penpals Garden
  • ICQ Garden
  • Software City
  • Creation of webpage

 
<MENU> <DIR>: ▲top

<MENU>...</MENU>
Usage: Create a single-column list of menus
Start/End Identification: must/must
Properties:%coreattrs,%i18n,%events
The compact is objected to. Make the list appear compact
Null: Not Allowed
Note: must contain at least one content, the function of this element can be completed by UL (no sequence list), so advocate use UL element, oppose to use it.

<DIR>...</DIR>
Usage: Create a multiple-column list of directories
Start/End Identification: must/must
Properties:%coreattrs,%i18n,%events
The compact is objected to. Make the list appear compact
Null: Not Allowed
Note: must contain at least one content, the function of this element can be completed by UL (no sequence list), so advocate use UL element, oppose to use it.

" are not endorsed by the consortium, and they are expected to be replaced with <ul> and <ol>.
<MENU> and <dir>, basically it is the same as <ul>, in some special browsers may show <ol> effect, in the older version of IE or NC Mark <DIR> does not display symbols or numbers. The use of two marks is exactly the same as <ul>.

Example:

html Source C Ode (original code) browser display results
my homepages:
<dir>
<li>penpals Garden
<li>icq Garde N
<li>software City
<li>creation of webpage
</dir>
my homepages:
  • penpals Garden
  • ICQ Garden
  • Software City
  • creation of webpage
  •  
    <DL> <DT> <DD>: ▲top

    <DL>...</DL>
    Use: To mark the creation of an explicit list
    Start/End Identification: must/must
    Properties:%coreattrs,%i18n,%events
    The compact is objected to. Make the list appear compact
    Null: Not Allowed
    Note: Include at least one of the <DT> or <DD> elements, but do not consider the order

    <DT>...</DT>
    Usage: Used to indicate a defined word (or label) used in a DL element
    Start/End ID: must/optional
    Properties:%coreattrs,%i18n,%events
    Null: Not Allowed
    Note: You must include the text in it (these texts can be modified with text markup elements)

    <DD>...</DD>
    Usage: Explicitly describe what is used in a DL element (used to define a list)
    Start/End Identification: must/must
    Properties:%coreattrs,%i18n,%events
    Null: Not Allowed
    Comments: can contain blocks and (block-level) content, such as <P> elements

    <DL> is called defining a manifest tag. <DT> to mark the definition entry,<dd> is used to mark the definition content.
    The so-called definition list is a two-tier list of items with no symbols or numbers.

    Three tags have no common parameters. And <DT> <DD> can be used independently, just some old browsers do not support, such as IE 3.0. Commonly used tags such as <DD> can be used to make a blank before the first word in a paragraph.

    Example:

    original code < Font color= "#d700d7" ><dl>
    <DT> how to use Definition List
    Font color= "#d700d7" ><dd> A, you should is not place paragraph tag right after or before a list structure or Between the items of a list. In Cerntain contexts, the use of extra paragraph tags should always to be avoided, when you realize this concept, it are quit easy To write a HTML.
    <dt> other things to know
    <DD> Usually put only one definition tag following the definition Term tag, and more than one DD tag isn't recommanded. Besides, unlike definition List is a nonempty tag, both definition Term and definition Description are tags.
    </dl>
    Show results
    How to use Definition List
    A list of the items of a list structure or between should not place paragraph tag right after or before. In Cerntain contexts, the use of extra paragraph tags should always to be avoided, when you realize this concept, it are quit easy To write a HTML.
    Other things to know
    We usually put only one definition tag following the definition Term tag, and more than one DD tag isn't recommanded. Besides, unlike definition List is a nonempty tag, both definition Term and definition Description are tags.



    Contact Us

    The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

    If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

    A Free Trial That Lets You Build Big!

    Start building with 50+ products and up to 12 months usage for Elastic Compute Service

    • Sales Support

      1 on 1 presale consultation

    • After-Sales Support

      24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.