Html
Syntax:
1. Use two spaces to replace tabs-this is the only one that ensures consistent display in all environments.
2. The nested element should be indented once (that is, two spaces ).
3. For the attribute definition, make sure that all double quotation marks are used. Do not use single quotation marks.
4. Do not add a slash ( rather than ) at the end of the Self-closed element. HTML5 specifications.
5. Do not omit the optional end tag (</LI> ).
HTML5 doctype
1. Add standard mode Declaration on the first line of each page <! Doctype HTML>
Language attributes
According to HTML5 specifications: we strongly recommend that you specify the lang attribute for the HTML root element to set the correct language for the document. This will help the speech synthesis tool determine the pronunciation it should adopt and help the translation tool determine the rules it should follow during translation.
<HTML lang = "ZH-CN">
Character encoding
By explicitly declaring the character encoding, the browser can quickly and easily determine the rendering method of the page content. The benefit of doing so is to avoid using character entity tags (character entity) in HTML, so that all are consistent with document encoding (typically using UTF-8 encoding ). <Meta charset = "UTF-8">
Introduce CSS and JavaScript filesAccording to HTML5 specifications, when introducing CSS and JavaScript files, you do not need to specifytypeAttribute, becausetext/cssAndtext/javascriptThey are their default values. <SCRIPT src = "Js. js"> </SCRIPT> <link href = "stylesheet href =" style.css ">
Follow HTML standards and semantics as much as possible, but do not sacrifice practicality. Try to use the least tag at any time and maintain the minimum complexity.
Attribute order
HTML attributes should be arranged in sequence as follows to ensure the code is easy to understand.
1. Class 2.id, name 3. Data-* 4.src, for, type, href 5. Title, ALT 6. Aria-*, role
Class is used to identify highly reusable components, so it should be placed first. ID is used to identify a specific component and should be used with caution (for example, bookmarks in the page), so it is placed in the second place.
Reduce the number of labels
Avoid unnecessary parent elements when writing HTML code. Most of the time, this requires iteration and refactoring. See the following case:
<! -- Not so great -->
<SPAN class = "Avatar">
</Span>
<! -- Better -->
JavaScript to generate tags
Labels generated by JS are not easy to search, edit, and have low performance. Avoid using them whenever possible.
CSS
Syntax
1.:Insert a space.
2. The last statement ';' is not followed by errors.
3. For the attribute value or color value, omit the first 0 decimal places, for example, 0.5px, and write it as. 5px.
4. hexadecimal values should all be in lower case, for example,#fff.
5. Add double quotation marks to attributes in the selector. For example,input[type="text"]
6. Avoid specifying the unit for the value 0. For example, usemargin: 0;Replacemargin: 0px;
CSS writing Sequence
1. Position attributes (Position, top, right, Z-index, display, float, etc)
2. Size (width, height, padding, margin)
3. Text series (font, line-height, letter-spacing, color-text-align, etc)
4. Background (background, border, etc)
5. Others (animation, transition, etc)
CSS selector naming rules
1. Long names or phrases can be named by a hyphen.
2. the CSS selector cannot be named with the underscore "_". Why?
Some browsers do not allow the use of underscores to name CSS selectors (that is, incompatible );
Well differentiate JavaScript variable naming.
Common CSS naming rules
Header: Header
Content: content/Container
End: footer
Navigation: nav
Sidebar: sidebar
Column: Column
Page peripheral control overall Board Width: wrapper
Left right center
Logon entry: loginbar
Logo: logo
Advertisement: banner
Page subject: Main
Hotspot: hot
News: News
Download: Download
Subnavigation: subnav
Menu: Menu
Sub menu: submenu
Search: Search
Link: friendlink
Footer: footer
Copyright: Copyright
Scroll: Scroll
Content: Content
Tags: tags
Article list: List
Message: msg
TIPS: Tips
Topic title: Title
Join: joinus
Guide: Guild
Service: Service
Registration: regsiter
Status: Status
Vote: Vote
Partner: Partner
ID:
1)Page Structure
Container: Container
Header: Header
Content: content/Container
Page subject: Main
Footer: footer
Navigation: nav
Sidebar: sidebar
Column: Column
Page peripheral control overall Board Width: wrapper
Left right center
(2)Navigation
Navigation: nav
Main navigation: mainbav
Subnavigation: subnav
Top navigation: topnav
Side navigation: sidebar
Left Navigation: leftsidebar
Right navigation: rightsidebar
Menu: Menu
Sub menu: submenu
Title: Title
Abstract: Summary
(3)Function
Logo: logo
Advertisement: banner
Login: Login
Logon entry: loginbar
Registration: regsiter
Search: Search
Functional Area: Shop
Title: Title
Join: joinus
Status: Status
Button: BTN
Scroll: Scroll
Tab
Article list: List
Message: msg
Current: Current
TIPS: Tips
Icon: icon
Note: Note
Guide: Guild
Service: Service
Hotspot: hot
News: News
Download: Download
Vote: Vote
Partner: Partner
Link
Copyright: Copyright
Main master.css
Module module.css
Basic shared base.css
Layout.css
Themes.css
Columns.css
Text font.css
Form forms.css
Patch mend.css
Print print.css
Front-end 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
