Why standardize?
1. Reduce the threshold cost of each team member involved in the project;
2. Improve work efficiency and the convenience of collaborative development;
3. Highly unified code style;
4. Provide a complete set of HTML and CSS solutions to help developers quickly make high-quality pages that meet the requirements;
css general conventions
(1) Separation
Separation of structure (HTML), presentation (CSS), and behavior (JavaScript) Separating structure from presentation and behavior to ensure minimal coupling between them, which is crucial for both early-stage development and post-maintenance (2) Use tabs for
indentation (
4 spaces width) for indentation, which can be set in the IDE
(3) The encoding
is UTF-8 without BOM encoding as the page format;
it is used in the HTML document to specify the encoding; there
is no need to define encoding for CSS display, because It defaults to utf-8;
(4) lowercase
all HTML tags must be lowercase
All HTML attributes must be lowercase
All style names and rules must be lowercase
(5) Comments
Write comments for your code as much as possible. Explain why it's written this way, whether it's a fresh solution or what problem it solves.
(6) Space at the end of the line
Remove end-of-line spaces, which are not necessary
HTML specification
(1)
The standard document type of HTML5 is uniformly used for the document type: <!doctype html> The HTML5 document type has the characteristics of forward and backward compatibility, and it is easy to remember and write
before the document doctype declaration, and any non-blank characters are not allowed to appear in the doctype The characters before the declaration will make your HTML document enter non-standard mode. It is
not allowed to add attributes to force the change of the document mode to avoid uncontrollable problems.
(2) Omit the type attribute
When calling CSS and JavaScript, you can omit the type attribute and not write it is not recommended:<link type="text/css" rel="stylesheet" href="base.css"> <script type="text/javascript" src="base.js"></script>recommend:
<link rel="stylesheet" href="base.css"> <script src="base.js"></script>(3) The attribute value is omitted. The non-essential attribute value can be omitted.
Not recommended: <input type="text" readonly="readonly"> <input type="text" disabled="disabled">
recommend: <input type="text" readonly> <input type="text" disabled>(4) Use the alt attribute of img to add the alt attribute to the img element
Not recommended: <img src="banner.jpg"> recommend: <img src="banner.jpg" alt="520 is coming, say love out loud">(5) The format puts each block element, list element or table element on a new line. The
Inline element wraps according to the situation, and the length should not exceed one screen of the editor.
Each child element needs to be indented relative to its parent.
Not recommended: <div><h1>asdas</h1><p>dff<em>asd</em>asda<span>sds</span>dasdasd</p></div> recommend: <div> <h1>asdas</h1> <p>dff<em>asd</em>asda<span>sds</span>dasdasd</p> </div>