[Specification] Front-end encoding specification-html specification, standard front-end encoding html
Document Type
Html5 document type statement is recommended:
<!DOCTYPE html>Language attributes
According to html5 specifications:
We strongly recommend that you
htmlSpecify the root elementlangAttribute 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.
The language code table is listed here.
Character encodingBy 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">IE compatibility modeIE supports
metaLabel to determine the IE version used to draw the current page. Unless there are strong special requirements, it is best to setEdge modeTo notify IE to adopt the latest supported mode.<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">Omitting the diagonal line of an auto-closed ElementDo not explicitly describe this option by adding a diagonal line to the end of the self-closing element-html5 specification.
Not recommended
<input type="text"/>Recommendation
<input type="text">Do not omit the end tagDo not omit the optional ending tag ).
Not recommended
<ul> <li></ul>Recommendation
<ul> <li></li></ul>Omitting the type attributeOmit css and js
SemantictypeAttribute. Given the defaulttypeThe value istext/cssAndtext/javascript, SotypeAttributes can be ignored. This is safe and reliable even in older browsers.Use semantic tags, such
h1,pAnd so on.<! DOCTYPE html> Practical kingFollow 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.
Not recommended
<span class="avatar"> </span>Recommendation
Structure, representation and behavior SeparationA complete page consists of three parts: structure (html), presentation (css), and behavior (js ). To make them maintained clean and tidy code, we should try to separate them as much as possible.
Strictly ensure the separation of structure, performance, and behavior, and try to avoid too many interactions and connections between the three. That is to say, try to include only structured html in the document and template, move all the presentation code into the style sheet, and move all the action behaviors into the script. In addition, style and script files should be introduced as little as possible in documents and templates to minimize the connections between them.
Clear layering means:
<style>.no-good {}</style>)<Hr> lower caseHtml tags and attributes (including Custom Attributes) are lowercase letters. Do not use uppercase letters.
Bind dataTo bind some data to tags, use the Custom Attributes of html5.data-*To bind relevant data.
<H1 data-age = "20"> JOHN Boolean attributeBoolean attributes can be declared without value assignment. The xhtml specification must be assigned a value, but the html5 specification is not required.
<input type="text" disabled><input type="checkbox" value="1" checked><select> <option value="1" selected>1</option> <option value="2"></option></select>
Html quotation marksUse double quotation marks instead of single quotation marks for the html attribute.
References
- Web Styleguide-Style guide to harmonize HTML, Javascript and CSS/Sass coding style
- Http://www.css88.com/archives/5364
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
