HTML Learning Notes-common elements and their attributes (i)

1.img Tag--Represent HTML image

• The img tag appears separately ,
• Grammar:

  <src= "URI"  alt= "AltText"  title= " TitleText "/>

• Property:
  • Common--General properties (public properties) Eg:class ID title (the hint text of the picture, when the mouse pauses to the picture, will prompt related text) onclick style ...
  • Alt-Represents alternate text for an image (Alt attribute--for images that cannot be displayed, forms, applets user agents (browsers), display alternate text. The language of the alternate text is specified using the lang attribute)
  • src--Represents an image source (that is, the location of the image)
  • height--Represents the height of an image
  • width--Represents the width of an image
• img, which is an abbreviation for image (images)

2. HTML list--display content sequentially

Commonly used lists are divided into 3 types, unordered tables (using <ul> tags), sequential tables (with tags) <ol> , and custom lists (using <dl> tags).-- Note: The various lists can be nested between the use

(1) UL tag--representing HTML unordered list

• The UL tag is in pairs appearing to <ul> start and </ul> end
• Each column uses <li> a label definition, and each column starts with a point
• Property:
  • Common--General properties
• ul, is the abbreviation of unordered lists, the Chinese "unordered list" means

  Example:<ul>    <Li>Www</Li>    <Li>Dreamdu</Li>    <Li>Com</Li></ul>displaying results:www dreamdu com 

(2) Ol label--representing the HTML sequence list

• ol label is in pairs appear to <ol> start, </ol> end
• Each column <li> is defined with a label (the same as an unordered list), with each column starting with a number or letter .
• Property:
  • Common--General properties
• ol, is the abbreviation of ordered lists, the meaning of "ordered list" in Chinese

  Example:<ol>    <Li>Www</Li>    <Li>Dreamdu</Li>    <Li>Com</Li></ol>displaying results:1.www2.dreamdu3.com 

(3) DL Tag--represents HTML custom list

• DL tags are paired up to <dl> start, </dl> end
• The custom list starts with a <dl> label, and the title of each element in the list is defined using (definition term <dt> ), followed by <dd> (definition description) to describe the contents of the elements in the list.
• Property:
  • Common--General properties
• DLis the acronym for definition lists, meaning "definition list" in Chinese.

  Example:<DL>    <DT>Www</DT>        <DD>World Wide abbreviation for the web.</DD>    <DT>Dreamdu</DT>        <DD>The capital of Dreams.</DD>        <DD>www:).</DD>    <DT>Com</DT>    <DT>com.cn</DT>    <DT>cn</DT>        <DD>This is the suffix of the domain name.</DD></DL>display result: www world Wide The abbreviation of the web. Dreamdu Dream Capital. www:). Comcom.cncn This is the suffix of the domain name .

  Note: It is not necessary for each DT label to correspond to a DD, can be one to many or more pair.

(4) NL tag--represents the HTML navigation list

• NL Tags are paired up to <nl> start, </nl> end
• Property:
• Common--General properties
• nl, is navigation lists's English abbreviation, Chinese "navigation list" meaning

• Navigation lists are typically used where navigation is required, such as menus, navigation buttons , etc.
• Content that uses the NL navigation, you can use the label to describe the content

3, HTML table-put the data in the table (as far as possible with CSS implementation)

1 <Tablewidth= "80%"Border= "1">2     <TR>3         <th>First Row first list header</th>4         <th>First row, second list header</th>5     </TR>6     <TR>7         <th>Second row first list header</th>8         <TD>Second row second column cell contents</TD>9     </TR>Ten     <TR> One         <th>Third row first list header</th> A         <TD>Third row, second column, cell contents</TD> -     </TR> -  the </Table>    

• TR --Represents a row
• th --Represents the table header (column)
• TD --Represents a cell (column)
• Table--Table frame

• tableThere can be a lot of lines, and each row uses a tr representation
• Each row tr can have many columns, and each column uses a td representation
  • You can put several pairs of labels in each row of the table td , each pair of td labels represents a cell

(1) Table tag-- represents HTML table

• The Table label is paired up to start to <table> </table> end
• Property
  • Common--General properties
  • Summary--Summary description of the representative table
  • width--representing the width of the table
  • Border--Represents the table border (this property should be implemented using CSS)
  • CellSpacing-Represents the distance between the table border and the contents of the table, and also the distance between content fills (this property should be implemented using CSS)
  • CellPadding--Represents the width of the content fill (this property should be implemented using CSS)
• table, meaning of "table" in Chinese

(2) TR tag-- represents a row in an HTML table

• TR label is in pairs appear to <tr> start, </tr> end
• Property
  • Common--General properties
  • Align-Represents the horizontal alignment of the row (left-aligned) | Center (Center-aligned) |right (right-aligned) | justify) (this property should be implemented using CSS)
  • Valign-Represents the vertical alignment of the row (top alignment) | Middle (middle alignment) | bottom (bottom alignment) | baseline (Baseline alignment)) (this property should be implemented using CSS)
• TR, the abbreviation for table row, Chinese table row

(3) th tag-- represents a header in an HTML table

• th tags are paired up to <th> start, </th> end
• Property
  • Common--General properties
  • ABBR--shorthand for representing the table header
  • axis--to classify cells conceptually
  • Colspan--one row across multiple columns
  • Headers--Data and table header for connecting tables
  • RowSpan--A column spanning multiple lines
  • Scope--Defines the header of a row or column
  • Align-Represents the horizontal alignment (left (aligned) | Center (center Alignment) | Right (justified) | justify) (this property should be implemented using CSS)
  • Valign-Represents the vertical alignment (top alignment) | Middle (middle alignment) | bottom (bottom alignment) | baseline (Baseline alignment)) (this property should be implemented using CSS)
• th, is the abbreviation for "Table header cell", Chinese "header cell"

(4) TD label- represents a cell in an HTML table

• TD label is in pairs appear to <td> start, </td> end
• Property
  • Common--General properties
  • ABBR--shorthand for representing the table header
  • axis--to classify cells conceptually
  • Colspan--one row across multiple columns
  • Headers--Data and table header for connecting tables
  • RowSpan--A column spanning multiple lines
  • Scope--Defines the header of a row or column
  • Align-Represents the horizontal alignment (left (aligned) | Center (center Alignment) | Right (justified) | justify) (this property should be implemented using CSS)
  • Valign-Represents the vertical alignment (top alignment) | Middle (middle alignment) | bottom (bottom alignment) | baseline (Baseline alignment)) (this property should be implemented using CSS)
• TD, is the abbreviation for "Table data Cell", Chinese "table"

Supplemental: HTML Table Properties Introduction

(1) Filling and spacing of tables ( cellspacing与 cellpadding属性 )

• Cell--the contents of the table
• Cell padding (table fill)-- a distance representing the cellpadding of a cell to separate cells from cell space
• Cell spacing (table spacing) (cellspacing)-- represents the distance between the table border and the cell filter, and also the distance between the cell filters

Describes several properties of the table, where the black part is the cell (cell), the white area is the cell margin (table fill), and the gray area is the cell spacing (table spacing).

(2)rowspan Property-- can implement a column in an HTML table that spans multiple lines

• RowSpan are commonly used in TD and TH tags
• Row: Rows, span: Spans, spans, ranges

(3)colspan Property-- can implement a row across multiple columns in an HTML table

• Colspan are commonly used in TD and TH tags
• Col: columns, span: Spans, spans, ranges

(4) Colgroup tag-represents a structured partition of an HTML table that can be used to col define the style of each column table in this partition

• colgroup tags are paired up to <colgroup> start to </colgroup> end
• Property
  • Common--General properties
  • Span-Defines the number of columns that a colgroup spans, with a default value of 1

(5) Col Tag--you can use the same style row for one or several areas of an HTML table after it is structured

• The Col tag is a separate occurrence,<col />
• Property
  • Common--General properties
  • Span-Defines the number of columns that a col spans, with a default value of 1

Supplemental: HTML Table Torso

• HTML Header (thead)-The header of the table THEAD, you can define the header using a separate style, and you can print the header at the top of the page when you print.
• HTML table Body (TBODY)-When a browser displays a table, it is usually completely downloaded and then fully displayed, so when the table is long, you can use the TBODY segment display.
• HTML table foot (TFOOT)-the table's foot TFOOT, you can define a table foot using a separate style, and you can print the foot in the lower part of the page when you print.

HTML Learning Notes-common elements and their attributes (i)