Home > Developer > Web Develop
Bootstrap HTML Encoding Specification
This article is reproduced from W3cschool.
Since Bootstrap is recognized by the world, this specification is persuasive for standardizing HTML code.
QQ Group: 164858883. Welcome to the program Ape sharing said, common progress, and jointly promote the development of the Internet.
Grammar
Use two spaces instead of tabs (tab)-This is the only way to ensure consistent presentation in all environments.
Nested elements should be indented one time (that is, two spaces).
For the definition of a property, make sure to use double quotes and never use single quotes.
Do not add a slash at the end of the self-closing (self-closing) element-The HTML5 specification explicitly describes this as optional.
Do not omit the optional end tag (closing tag) (for example,,</li> or </body>).
Instance:
<! DOCTYPE html>
<body>
<H1 class= "Hello-world" >hello, world!
</body>
HTML5 DOCTYPE
Adding a standard mode declaration to the first line of each HTML page ensures a consistent representation in every browser.
Instance:
<! DOCTYPE html>
Language properties
According to the HTML5 specification:
It is strongly recommended 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 use, and help the translation tool determine the rules it should follow when translating.
More knowledge about the Lang attribute can be learned from this specification.
The Language Code table is listed here.
<!--...-->
IE compatibility mode
IE supports the use of specific <meta> tags to determine which version of IE should be used to draw the current page. Unless there is a strong special need, it is best to set it to edge mode, which informs IE to use the latest mode it supports.
<meta http-equiv= "x-ua-compatible" content= "Ie=edge" >
Character encoding
By explicitly declaring character encodings, you can ensure that your browser is quick and easy to determine how the page content is rendered. The advantage of this is that you can avoid using character entity tags (character entity) in HTML, which is all consistent with the document encoding (UTF-8 encoding is generally used).
<meta charset= "UTF-8" >
Introducing CSS and JavaScript files
According to the HTML5 specification, it is generally not necessary to specify the type attribute when introducing CSS and JavaScript files, because Text/css and text/javascript are their default values, respectively.
HTML5 Spec Links
Using Link
Using style
Using Script
<!--External CSS--
<link rel= "stylesheet" href= "Code-guide.css" >
<!--in-document CSS--
<style>
/* ... */
</style>
<!--JavaScript--
<script src= "Code-guide.js" ></script>
Practical for the King
Try to follow HTML standards and semantics, but not at the expense of practicality. Try to use the fewest tags and keep the minimum complexity at all times.
Attribute Order
HTML attributes should be arranged in the order given below to ensure readability of the code.
Class
ID, name
data-*
SRC, for, type, href
Title, Alt
aria-*, role
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.
<a class= "..." id= "..." data-modal= "Toggle" href= "#" >
Example Link
</a>
<input class= "Form-control" type= "text" >
Boolean (Boolean) Type property
A Boolean property can be declared without assigning a value. The XHTML specification requires that it be assigned a value, but the HTML5 specification does not.
For more information, refer to WhatWG section on Boolean attributes:
The Boolean attribute of the element is true if it has a value, or false if there is no value.
If you must assign a value to it, refer to the WhatWG specification:
If the property exists, its value must be the canonical name of an empty string or [...] property, and do not wrap up the add whitespace.
Simply put, there is no need to assign a value.
<input type= "Text" disabled>
<input type= "checkbox" value= "1" checked>
<select>
<option value= "1" selected>1</option>
</select>
Reduce the number of labels
When writing HTML code, try to avoid unnecessary parent elements. Many times, this requires iterative and refactoring to implement. Take a look at the following example:
<!--not so great--
<span class= "Avatar" >
</span>
<!--Better--
JavaScript-Generated tags
Tags generated by JavaScript make content difficult to find, edit, and degrade performance. Avoid as much as you can avoid.
Web front-end code specification-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
