Home > Developer > Web Develop
First, the layout of understanding misunderstanding
The network of popular tube new layout mode called "Div+css", is actually a wrong understanding, resulting in a lot of people over-reliance and misuse of DIV tags, HTML provides us with a total of seventy or eighty tags, which are commonly used in 30 or so, DIV is just a relative empty label, in many cases, We can replace it with other more appropriate and concise tags.
Second, the difference of the label
Commonality: is a container in which content can be placed
Difference: divided into the line and block level two large categories, and different notes have corresponding meanings on the preset, such as: H-Title, p-paragraph, a-link, and so on
Third, the benefits of labeling semantics
A, make the structure more concise, make the search engine more friendly
B. Reduce unnecessary CSS naming by multiple combinations
Iv. Use of semantic tags
A, LIST: UL, OL, Li, DL, DT, DD
B, Title: H1~h6
C, paragraph: p
D, emphasis: strong
E, table: Table, TR, TD, and other members of the table th, THEAD, tbody, Tfood
Appendix: Common HTML Tag tables
Red: Structure tag black: inline element Blue: block-level element green: Table element Gray: Other labels
| <!--...--> | Defines a comment. |
|---|---|
| <body> | Define the body of the document, with margins on the default, and note clear. |
| Defines the information for the page. | |
| Defines an HTML document. | |
| <meta> | Define the description information of the page for easy search optimization. |
| <title> | Defines the title of the document . |
| <link/> | Defines a reference to an external file, such as an inline CSS style sheet. |
| <style> | Defines the inline CSS style information. |
| <script> | Define inline or external client script, such as JS. |
| <a> | Define anchor link or other links, inline elements. |
| Defines the introduction of a picture, in-line elements. | |
| <strong> | Defines the accent text, the style is bold, and the inline element. |
| <span> | An empty box that defines an inline element. |
| <div> | An empty box that defines a block-level element. |
| Defines the title section, which has margin, block-level elements by default. | |
| <ul> | Defines unordered lists, with margins and padding, and block-level elements by default. |
| <ol> | Defines a sequence table, a list of numbers, with the default internal and external margins, and block-level elements. |
| <li> | Items that define lists are generally nested within <ul> and <ol>, block-level elements. |
| <dl> | Custom list of items, default with margins and padding, block-level elements. |
| <dt> | The title of the custom list, nested within <dl>, differs from <dd>, block-level elements. |
| <dd> | Customize the contents of the list, nested within <dl>, with <dt> difference, block-level elements. |
| <p> | Defines a paragraph that has a row height margin by default. |
| <table> | Define the table. |
| <tr> | Defines the rows in the table. |
| <td> | Define the cells in the table. |
| <th> | Defines the header cells in the table. |
| <thead> | Defines the header content in a table. |
| <tbody> | Defines the body content in the table. |
| <tfoot> | Define the table notes (footnotes) in the table. |
| <br/> | Defines a carriage return line break. |
| <map> | Defines the image map, which is the mouse hot zone. |
| <area> | Defines the area inside the image map. |
| <form> | Defines the form in which the input is submitted. |
| <button> | Defines a button (push button) in the form. |
| <input> | Defines the input controls in the form. |
| <select> | Define a selection list (drop-down list) in the form. |
| <frame> | A window or frame that defines the frameset. |
This article was reproduced in: http://www.th7.cn/web/html-css/201401/17358.shtml
HTML Semantic Tags
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
