1. The block elements and inline elements
HTML tags can be divided into two categories, block-level element associated with the element.
Block-level features (block) element:
- the content displayed within the tag begins on a new line.
- margins and bottom margins and padding block can be controlled (box model) by attributes or CSS style.
- the block width default is 100% of its container unless a set width.
- block may receive inline block elements and other elements, for example, may be inserted into <p> tag <code> tag and the like.
Block-level labels:
- section: Section Documents
- nav: Navigation
- header: Header
- article: Article
- aside: Articles sidebar
- footer: footer
- details: details of the elements
- summary: details visible element of the title
- dialog: the dialog window
- h1, h2, h3, h4, h5, h6: title
- p: paragraph
- ul: unordered list
- ol: an ordered list
- dir: directory listing
- li: project
- dl: List
- dt: list of items
- dd: Project Description
- menu: a menu command, a list of
- menuitem: Menu Item
- command: Command Button
- form: Form
- fieldset: border around the element (the element may be used to form the packet)
- legend: a title on the border
- select: selection list (inline element)
- optgroup: portfolio selection list options
- option: Select from list (also do datalist option)
- datalist: drop-down list (id you want to bind the attribute value input in the list)
- table: Table
- caption: Table title
- thead: a combination of header contents (th)
- tbody: body composition Content (TD)
- tfoot: Note combination table contents (tf)
- tr: table row
- th: header cell
- td: table cells
- col: attribute table column; (empty tag)
- colgroup: Table Format column groups;
- iframe: inline frames
- figure: media content grouping
- figcaption: figure title
- map: image map
- area: image area
- canvas: Graphic container (script to draw graphics)
- video: video
- source: media source
- track: Text Track
- audio: sound content
- br: Wrap (empty tag)
- hr: horizontal dividing line (empty tag)
- pre: text format
- blockquote: blockquote
- address: Contact Information
- center: center text (deprecated)
- spacer: insertion space (empty element) in the horizontal and vertical directions
Inline (inline) element features:
- Contents of the label does not wrap display.
- High, high line and margins and padding can not be changed.
- Its width is the width of the text or pictures, can not be changed.
- Inline elements can only receive text or other inline elements.
Inline tags are:
- span: Inline container
- abbr: Abbreviations
- em: stressed
- strong: Bold stressed
- The highlighted text: mark
- b: bold
- i: italic
- bdi: Text direction
- bdo: character direction
- big: large print
- small: small fonts
- sup: superscript
- sub: subscript
- del: deleted text
- strike: Strike
- s: Delete line
- ins: the inserted text
- u: Underline
- nobr: Prohibition Wrap
- wbr: word wrap timing (empty tag)
- tt: typewriter text
- kbd: keyboard text
- time: Date / Time
- cite: references
- q: Short reference ( "")
- font: font set (not used)
- acronym: abbreviations (html5 not supported)
- dfn: field (not used)
- a: anchor
- img: Pictures
- embed: Embedded (empty tag)
- label: input tag (click on the text trigger controls)
- input: the input box
- button: Button
- keygen: generating a secret key (empty tag)
- textarea: multi-line text input box
- output: output
- ruby: Chinese phonetic
- rt: phonetic
- rp: browser does not support content elements displayed ruby
- progress: the progress bar
- meter: Measurement
- var: variable definitions
- code: computer code text
- samp: computer code sample
- select: drop-down list
2. <div> tag
<Div> is a block-level element that contains the content for display in the new row. In fact, the new line is the <div> inherent only format performance. By <div> The CSS style class or id application, which is a huge part of the CSS style scenario (selector).
<Div> generally used as the container in combination with other HTML element.
Another common use <div> element is the document layout. It replaced the old method of using tables to define the layout. Use <table> elements in the correct use of the document layout is not a table. Effect <table> elements is a tabular data.
3. <span> element
HTML <span> element is an inline elements, used as a container of text. <Span> elements are also no specific meaning. Its only effect is used with CSS, <span> element can be used as part of the text style attributes set. Application may span id or class attribute, both to increase the proper semantic, and easy to apply styles span.