Home > Developer > Web Develop
(1) The file name is English-based, you can use underscores (such as active.html), compress the package in the form of project name + date.
(2) Uniform use of utf-8 encoding.
(3) CSS, JS published to the online need to compress.
(4) in the pursuit of highly optimized site, the image needs to be lossless compression.
(1) The element ID must ensure that the page is unique. (Explanation: In the same page, different elements contain the same ID, which does not conform to the ID's attribute meaning.) And the use of document.getElementById can lead to problems that are difficult to track down. ）
(2) The ID suggests that the words are all lowercase, separated by "_" between the words. The project must be consistent in style.
(3) class must have the word full letter lowercase, between the words with "_" separated.
(4) class naming best represents the content or function of the corresponding module or part.
(5) ID, class name, as short as possible to avoid conflicts and describe clearly the premise.
(6) On the same page, avoid using the same name and ID. (Explanation: IE will confuse the ID of the element and the name attribute, document.getElementById may get undesirable elements.) So it takes great care to name the element's ID and name attribute. )
Example:
<inputname= "Foo"><DivID= "Foo"></Div><Script>//IE6 will display the INPUTalert (document.getElementById ('Foo'). TagName);</Script>2.2 Tags
(1) The label name must use lowercase letters.
(2) Label use must conform to the tag nesting rules. (Explanation: block-level elements <div>, (3) The use of HTML tags should follow the semantics of the tags.
The following are common tag semantics:
P-Paragraph
H1,h2,h3,h4,h5,h6-Hierarchy Title
Strong,em-Emphasis
INS-inserting
Del-Delete
ABBR-Abbreviation
Code-ID
Cite-Quote the title of the source work
Q-Reference
BLOCKQUOTE-A paragraph or lengthy reference
UL-unordered list
OL-Ordered list
DL,DT,DD-Definition List
(4) The use of the label should be as concise as possible, reduce unnecessary labels.
Example:
<!--Good -<imgclass= "Avatar"src= "Image.png"><!-- Bad -<spanclass= "Avatar"> <imgsrc= "Image.png"></span>2.3 Properties
(1) attribute names must use lowercase letters.
(2) attribute values must be enclosed in double quotation marks.
(3) HTML attributes should be arranged in the order given below to ensure legibility of the code (CLASS,ID, NAME,DATA-*,SRC, for, type, Href,title, alt,aria-*, role. Explanation: Class is used to identify highly reusable components and should therefore be ranked first. ID is used to identify specific components and should be used with caution (for example, bookmarks within a page), so it is ranked second. )
(4) Properties of Boolean type (such as disabled, checked, selected, etc.), we recommend not adding property values.
Example:
<inputtype= "text"Disabled><inputtype= "checkbox"value= "1"checked><Select> <optionvalue= "1"selected>1</option></Select>
(4) Custom attributes are recommended to be prefixed with xxx-, it is recommended to use data-(explanation: Using prefixes helps distinguish between custom attributes and standard-defined properties. ）
(1) using HTML5 's DOCTYPE to enable standard mode, it is recommended to use uppercase DOCTYPE.
Example:
<! DOCTYPE HTML >
(2) Set the correct lang attribute on the HTML tag. (Explanation: Helps improve the accessibility of the page, such as: Let the speech synthesis tool determine the pronunciation it should use, so that the translation tool determines its translation language, and so on.) ）
3.2 Encoding(1) The page must use a condensed form to explicitly specify the character encoding. The meta of the specified character encoding must be the first direct child of the head.
Example:
<HTML> <Head> <MetaCharSet= "Utf-8"> ...... </Head> <Body> ...... </Body></HTML>3.3 CSS and JavaScript Introduction
(1) When introducing CSS, the rel= "stylesheet" must be specified.
(2) There is no need to specify the type attribute when introducing CSS and JavaScript. (Explanation: Text/css and text/javascript are the default values for type.) ）
(3) The presentation definition is placed in an external CSS, and the behavior definition is placed in the external JavaScript. (Explanation: Code separation of structure-style-behavior is good for improving the readability and maintainability of code.) ）
(4) All CSS resources required for the page to be introduced in the head. (Explanation: During page rendering, the new CSS may cause the element's style to be recalculated and drawn, and the page will blink.) ）
(5) JavaScript should be placed at the end of the page, or asynchronously loaded. (Explanation: Placing a script in the middle of a page blocks rendering of the page.) For performance reasons, if not necessary, follow this recommendation. ）
(1) The page must contain the title of the title Tag declaration.
(2) The title must act as a direct child of the head and immediately after the CharSet declaration. (Explanation: If a character other than ASCII is included in the title, the browser needs to know the character encoding type to decode it, otherwise it may cause garbled characters.) ）
Example:
4.2 Favicon< Head > < charset= "Utf-8"> <title> page title </ title > </ Head >
(1) Ensure that Favicon is accessible.
(Explanation: When Favicon is not specified, most browsers request Favicon.ico under the Web Server root.) To ensure that the favicon is accessible and avoid 404, you must follow one of the following two methods: 1. Place the Favicon.ico file in the Web Server root directory; 2. Use link to specify the Favicon. ）
Example:
4.3 viewport<rel= "shortcut icon" href= "Path/to/favicon.ico">
If the page is to be mobile-friendly, specify the viewport of the page.
(Explanation: Viewport meta tag allows you to set the width and initial zoom size of the viewable area to prevent page display from appearing unhealthy on mobile devices.) For example, if you need IOS device-friendly When the page width is less than 980px, you should set the viewport width value to fit your page width. Also, because different mobile device resolutions are different, the device-width and device-height variables should be used when setting up. ）
(1) The SRC value of the prohibit IMG is null. Delayed loading of the picture also has to add the default src. (Explanation: The value of SRC is null, which causes some browsers to reload the current page.) ）
(2) Avoid adding unnecessary title attributes to IMG. (Explanation: The excess title affects the viewing experience and increases the page size.) ）
(3) Add the width and Height properties to avoid page jitter.
(4) There are download requirements of the image using the IMG tag implementation, no download requirements of the picture using CSS background map. (Explanation: 1. Product logo, user avatar, user-generated images and other potential download needs of the picture, in the form of IMG, can be easily downloaded by users. 2. No download requirements of the picture, such as: icon, background, the use of code images, as far as possible, using CSS background map. ）
(5) In principle, the IMG tag must indicate the ALT attribute.
(6) When the <a> tag is nested outside the IMG tag, the title attribute must be specified.
(1) A control with a text caption must use a label label to associate it with its caption. (Explanation: There are two ways: 1. Place the control inside a label; The for property of 2.label points to the ID of the control. It is recommended to use the first one to reduce unnecessary IDs. If the DOM structure does not allow direct nesting, then the second type should be used. ）
Example:
<label><inputtype= "checkbox"name= "Confirm"value= "On">I have confirmed the above terms</label><label for= "username">User name:</label> <inputtype= "TextBox"name= "username"ID= "username">
(2) must be nested outside the form
HTML Encoding 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
