HTML coding suggestions and how to better encode

Sorting out some of the HTML encoding, since this thing has been said by a lot of people, I am a summary here, the latter part will add some of the things you want to say.

1, <! DOCTYPE html>
Let the browser choose the standard to render the page, and in order to embrace the future

2, <meta charset= "Utf-8"/>
Define page character encoding, streamlined code, same effect

3, style file put the head, and minimize the number of files introduced

4, the script file is placed at the bottom, when the project is published as far as possible to compress merge
< Body >     <!-- JS Code  -     <  src= "Xxx.min.js"></script>< /body>
5. Add comments to the page
 <!--Head Header -<Header></Header><!--Head Header -     <Divclass= "Content"></content><!--Bottom Footer -<Footer></Footer>
6. Indent and line feed
Using 4 spaces as an indent level, most of the time, the development tools help us with this content.
//Not recommended<ul><Li><ahref="#"></a></Li><Li><ahref="#"></a></Li></ul>//Suggestion<ul>        <Li><ahref="#"></a></Li>        <Li><ahref="#"></a></Li></ul>
7. Label closing
//Not recommended<BR><P>xxxx<P>xxxx//Suggestion<BR/><P>Xxx</P><P>Xxx</P>
8. Tag name lowercase, tag attribute value add double quotation mark
//Not recommended <  data-id=p1></P>     //suggestion <  data-id = "P1" ></p > 
9. Use CSS to add pictures to the page
Of course the dynamic content on the page still must use the  Tag

10, add alt and Title attribute for picture label, the src attribute of picture cannot be empty
<alt= "" "  title=" "  src=" # "/>
11. Add blank lines to the bottom of the block structure in the page
<Header>        <H1>W3cfuns</H1></Header><Divclass= "Content">//Something</Div><Footer>        <Pclass= "CopyRight"></P></Footer>
12. Remove the type attribute from the style reference and script reference

13. Label semantics

 
 

  
  
 
   

   
  structural elements:  
         p: Represents a paragraph that can contain only inline elements and cannot contain block-level elements 
          Div: The special meaning of the dance itself, can be used for layout, can contain almost any element 
         br: line break 
         &NBSP;HR: Represents the horizontal separator 
         h1-h6: Represents a caption. Where H1 is used to represent the title of the most important content of the current page, it is recommended that each page have only one H1 label 
         blockquote: Represents a reference and can contain multiple paragraphs. Do not use blockquote purely for shrinking, most browsers render blockquote as default with left and right indents 
         pre: Represents a well-formatted text 
 
   

   
Head element:
Title: Each page must have only one TITLE element
Base: Available Scenarios--home, channel, etc. most links are open pages for new windows
Link: For introducing CSS resources, you can omit the media and type attributes
Style:type default to Text/css, you can save
The Script:type attribute can be omitted; The lang attribute is deprecated; Do not use the ancient <!-//--> hack script, which prevents the first generation of browsers from displaying scripts as text;
 
   

   
List elements:
UL: No list required
OL: Indicates that there is a sequence table, can be used for leaderboards, etc.;
Li: Represents a list item and must be a child of ol/ul
DL: Indicates the association list, DD is the interpretation of DT, DT and DD correspondence relationship is random: a dt corresponding to a plurality of DD, multiple DT corresponding to a DD, multiple DT corresponding to multiple dd, are legal; can be used for name word interpretation, schedule list, site directory;
 
   

   
Text elements:
A: The presence of an HREF attribute indicates a link, without an href attribute but with the name attribute representing the anchor point
Em,strong,i,b: It is emphasized that adding and not adding will cause semantic changes, which can be used to express different moods or intonation; Strong the importance of emphasis, can be used for local or global, strong emphasizes the importance, will not change the meaning of the sentence;
ABBR: Denotes abbreviations
Sub,sup: Mainly used in mathematical and chemical formulations, SUP can also be used for footnotes
Span: The special meaning of the dance itself
Ins,del: Means to add (insert) and delete from the document, respectively
 
   

   
Form elements:
Using a button instead of input is recommended, but you must declare the Type property
Recommended use of Fieldset,legend organization form
The name of the form cannot be set to Action,enctype,method,novalidate,target,submit will cause the form to commit confusion
 
  
 
 

 
  
 

above said are some basic things, in the development process pay more attention to the habit of good, on the one hand is to optimize the performance of the Web page, on the other hand is for the maintenance of the team. The following is in the HTML development process of my own ideas, share out for everyone reference. The first is to memorize HTML tags and relative to each label's meaning and additional properties, only in the grasp of the meaning of each HTML tag, we can be more reasonable to apply them to our page, towering high-rise flat, these look is very basic things, sometimes we will crash, It is really important to understand these things clearly, although not all of them are still capable of daily work, but if you want to go on this road for a long time, it is recommended that they be cooked, it should not take much longer. then read the source code of other people's website, imitate the beginning, take a look at the source code of those excellent websites, and understand if they write the structure code for the components on the page. For example: Dropdown box, tab, Landscape picture carousel, waterfall flow, message board, product selection, commodity list and commodity details and so on, and then compare the difference between them, where, the same point where, their digestion can be used for me, of course, this part of the work is usually not to do, When we get the designer to do well, then we should be more motivated to understand. the next is to build the framework of the page, I strongly protest, in a page of HTML structure code is not finished, before you start to write CSS style, be sure to first define the entire HTML code structure of the page, then write your CSS style sheet. Before you start writing a CSS stylesheet, you can open it in a browser and see if there is no style sheet that can be read like an article, where is the title, where is the list, where is the paragraph, and where is the repeating content. The following can start to write CSS style sheet, find the pages of those can be reused parts, define the class name, step by step, the end of the project almost finished, optimize the CSS style file, extract reusable parts, to streamline. Some ideas about the front-end project file structure directory, the next opportunity to say, if you have a good way to work, beautiful project document structure scheme can also share under! 
Resources:
Https://github.com/fex-team/styleguide/blob/master/html.md
Http://docs.kissyui.com/1.3/docs/html/tutorials/style-guide/html-coding-style.html
Http://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
Transferred from: http://www.w3cfuns.com/blog-5435321-5402088.html
HTML coding suggestions and how to better encode