Front-end development specifications: html coding specifications; front-end specifications: html coding

Front-end development specifications: html coding specifications; front-end specifications: html coding
Front-end development whqet, csdn, Wang haiqing, whqet, front-end development expert

For more information about front-end development standards, see the section "front-end development specifications. As html5 is becoming increasingly popular, the opposite attitude of html5 and xhtml has caused confusion for front-end developers. How to maintain the compatibility, simplicity, and future applicability of html code, this is the main purpose of our article. Refer to a series of html development specifications (such as mdo, github, doyoe, globant, and LFeh) to find the best solution from the many standards.

------------------------------------------------------------

-- I participated in the blog Star Selection. If you like my blog, please vote. Your support is the source of my motivation. Let's get started!

Bytes -----------------------------------------------------------------------------------------

Principles

1. Specification. Ensure that your code specifications, html5 and remote xhtml, and ensure that the structure behavior is separated from each other.

2. concise. Ensure that the Code is the most simplified, avoid unnecessary spaces and blank lines, and maintain the semantic nature of the Code. Try to use semantic elements to avoid the use of style attributes and behavior attributes. At any time, the problem should be solved with elements as simple as possible and as few as possible.

3. Practical. Follow the standards, but cannot at the cost of practicality.

4. Loyalty. Select a set of specifications and follow them all the time. No matter how many people participate in the code, it should look like a person writing.

Syntax

1. lower case. Html tags and html attributes are all in lower case.

2. nesting. All elements must be correctly nested.

3. Close. Double tags must be closed, and single tags (self-closing tags) cannot be closed.

<!--bad--><br/>Note
1. detailed comments. Explain the code to solve the problem, solve the problem, and determine whether the solution is a new one.
2. Module comments. Github recommends that you do not end comments with modules.
<! -- News list module --> <div class = "news">... <! --/News list module --> <! -- There are many standards that do not use comments from the end module, because this is too ugly and increases the file load. -->
3. To-Do comment.
<! -- TODO: To-Do items -->...
Document
1. The document type uses the html5 standard document type. No non-null characters are allowed before the document type is declared. <Meta> force change of document mode is not allowed.
Specify the lang attribute on the 2.html element. The display page language helps the Language Synthesis tool determine the pronunciation and the rules that the translation tool determines.
3. Specify a specific character encoding. Allows the browser to easily and quickly determine the rendering method suitable for webpage content.
4. IE compatibility mode. Internet Explorer supports using the compatibility <meta> label to specify the version of IE used to render the page. Edge mode is usually used to notify IE to use the latest compatibility mode if it is not required.
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
5. the sequence of the head part:. <meta> element, B. js file (eg. moddernizr or HTML5 Shiv), c. <title> element, d. style sheet.
6. You can use IE conditional annotations to ensure compatibility with IE, but do not add additional style sheets.
<!--bad--><!--[if IE8]><link rel="stylesheet" href="/Assets/styles/IE8.css" ><![endif]--><!--[if IE7]><link rel="stylesheet" href="/Assets/styles/IE7.css" ><![endif]--><!--good--><!--[if IE8]>Attribute
1. Double quotation mark attribute values. Do not use single quotation marks.
2. the type attribute is omitted. You do not need to specify the type attribute when using style, link, and script, because text/css and text/javascript are their default values.
3. the Boolean attribute value is omitted. You do not need to add values, such as disabled, checked, and selected to the Boolean attribute.
4. the url-type attribute resource protocol header is omitted.
5. attribute order. Html attributes should appear in a specific order to ensure ease of authorization. Class-> id, name-> data-*-> src, for, type, href-> title, alt-> aria-*, role.
6. Add alternative attributes for multimedia elements. The alt attribute is added to the image, and the alternative text is added to the audio and video.
7. Do not manually set the tabindex attribute so that the browser can automatically set it.
Element
1. Avoid redundant labels.
2. Avoid generating tags in JS.
3. Use <p> to avoid using <br>.
4. Place <ul>, <ol>, and <dl> In the list items. Do not use a series of <div> or <p>
5. <input> bind with the for Attribute <label>.
6. Use the <label> label to package radio or checkbox and their text, and no longer use the for attribute.
7. Select one option and select multiple options to replace the drop-down menu. (Radio or checkbox instead of select menu)
8. type should be specified for form buttons, and type = "submit", type = "reset", or type = "button" should be used ".
9. The first form button appears first (in the DOM), especially when multiple submit buttons are used. The Order displayed in the view can be modified using css.
10. Use the <thead>, <tfoot>, <tbody>, and <th> scope attributes effectively ). You can increase the loading speed before <tfoot> <tbody>.

<table summary="This is a chart of invoices for 2011.">  <thead>    <tr>      <th scope="col">Table header 1</th>      <th scope="col">Table header 2</th>    </tr>  </thead>  <tfoot>    <tr>      <td>Table footer 1</td>      <td>Table footer 2</td>    </tr>  </tfoot>  <tbody>    <tr>      <td>Table data 1</td>      <td>Table data 2</td>    </tr>  </tbody></table>
Format
1. soft tab.
2. nested indentation.
3. Delete spaces at the end of a row.
4. Block elements, list elements, and table elements are all placed on the new row.
5. line feed of the inline element as needed.
6. Try to keep the length of each line smaller than 80 columns. If it is too long, you can wrap it.
<!--bad--><!--good-->
Thank you for your patience. If you have any help, please support me!
----------------------------------------------------------

Front-end development whqet, pay attention to web Front-end development, share related resources, welcome to likes, welcome to shoot bricks.
Bytes ---------------------------------------------------------------------------------------------------------