Home > Developer > Web Develop
We know that the front-end engineers are easy to get started with, learning the basic HTML and CSS to see the actual effect on the browser, but to write good HTML, it is not so easy. Here will share with you the HTML specification, I hope you can have a harvest after reading. This article will be mainly in the following three parts of the expansion:
Http://bootstrap.cn/p/codeguide.html The standard here is also good, have time to see.
The first part: HTML overall structure1.HTML Infrastructure
(1) The document shall be <! Doctype.....> first line shelf Start, this sentence tells the browser this is a what file, we recommend the use of <! DOCTYPE html>.
(2) the character encoding charset of the document must be declared within the META tag inside the head element, such as: <meta charset= "UTF-8", and this code tells the browser what character set the HTML file should use, If you do not add this line of code, it may appear garbled in the browser.
(3) the title of the page is an indispensable item of great importance.
When we enter in the sublime text editor! and press the TAB key to get:
| 12345678910 | <!DOCTYPEhtml><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> </body></html> |
2.HTML code structure and visual order are basically consistent
(1). Writes the HTML structure in visual order from left to right, from top to bottom.
(2). Sometimes in order to facilitate the search engine crawl, we will also be important content in the HTML structure of the order in advance, thinking that the Search engine crawl page content is top-down, so the important content in the HTML structure of the order in advance can easily crawl important content.
(3). Do not use the table layout, now basically eliminated, and should be replaced by Div to layout, easy to control.
3. The structure, performance, behavior of the three categories, to avoid the inline.
(1). Use link to introduce an external CSS file into the head. Note: Generally we do not apply @import to introduce external CSS files. the difference between the two can be seen in my other post, "How to add CSS: The difference between link and @import."
(2). Using script to introduce the JS file, and placed at the bottom of the body, when the JS file will be loaded last, the HTML will be loaded first, the user experience will be better. (Note: Not all JS files are placed at the bottom of the body, such as when we need to dynamically modify the content of META elements using JS file, we need to introduce the JS file into the head tag, you can see my blog "Explore Mobile development" in the introduction of Flexible.js file).
4. Maintain a good tree-shaped structure
(1). Each block-level element has a different row, and each row is aligned with the tab indent. if it's not a block-level element, like a few inline elements, we can write it in one line. Note: The 1th level label (that is, the immediate child element) under the HTML, head, body, and body is not indented, and the others are indented normally. As shown in the following:
(2). Of course, we can also use empty lines between large modules, and do not use extra blank lines within the module.
5. Other issues to be aware of
(1). A label does not refer to the classname too much, the less the better.
(2). For a semantically internal tag, you should try to avoid using classname.
Part Two: HTML code format1. Explanatory notes to the Copywriting method
(1) start comment:<!--Note---
(2) end note:<!--/notes
(3) Allow only the start comment.
2. Strict nesting
(1). The most stringent XHTML strict standards should be nested, as inline elements cannot contain block-level elements, and so on.
(2). Close the label correctly and must be closed.
3. Strict attributes
(1). Properties and values are all lowercase, each attribute must have a value, and each value must be double-quoted.
(2). Attributes that do not have values must use their own names as values (checked, disabled, ReadOnly, selected, and so on).
(3). You can omit the Type property of the style label and the script tag.
Part III: HTML content semantics1. Enhance accessibility and availability of resource-based content.
For example, add ALT attribute in IMG tag, add copy and link in audio, etc.
2. Enhance accessibility of invisible content
For example, the text of the background image should be unloaded in the HTML, and use CSS to make it invisible, conducive to the search engine to crawl your content, but also in the case of CSS failure to see the content.
3. Appropriate use of entities
Avoid browser parsing errors by substituting entities with the same characters as HTML syntax.
Common HTML character entities ( recommended for use with entities ):
Commonly used character entities (not recommended for use with entities):
More HTML, CSS specifications click here.
HTML code Specification
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
