Some tips for writing HTML and CSS

HTML code optimization

• form fields are wrapped in fieldset and used legend to illustrate their purpose (note that when CSS is initialized, the border of FieldSet is set to 0, and the legend display is set to none).

• Each input label labels the text with a label and sets an ID for each input with a for association.
• To improve search engine friendliness, reduce the use of table labels. But for the presentation of the two-dimensional data, table is preferred, of course, our optimization method is the title of the table with <caption></caption> parcel, the head with <thead></thead>, subject < Tbody></tbody>, tail with <tfoot></tfoot>, table header cell with <th>, normal cell <td>
• The problem of semantic tag attention

1. To improve the friendliness of search engines, use less semantic div and span as little as possible, and use <strong>, <em> plus CSS for accent or special formats
2. Where the semantics are not obvious, try to use <p> two without <div>
3. Do not use plain style labels such as <b><font><u>, instead of CSS

CSS code optimization

• Reasonable site CSS framework: Base layer: atomicity, initialization; common layer: Common style; page layer: Private style.
• Recommend a good base layer:

  /*css reset*/body,div,dl.dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{ margin:0;padding:0;} table{border-collapse:collapse;border-spacing:0;} fieldset,img{border:0;} Address,caption,city,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;} Ol,ul{list-style:none;} Caption,th{text-align:left;} H1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;} Q:before,q:after{content: ';} abbr,acronym{border:0;} /* text typesetting */.f12{font-size:12px;}. f13{font-size:13px;}. f14{font-size:14px;}. f16{font-size:16px;}. f20{font-size:20px;}. Fb{font-weight:bold;}. Fn{font-weight:normal;}. T2{text-indent:2em;}. lh150{line-height:150%;}. lh180{line-height:180%;}. lh200{line-height:200%;}. Unl{text-decoration:underline;}. No_unl{text-decoration:none;} /* locate */.t1{text-align:left;}. Tc{text-align:center;}. Tr{text-align:right;}. Bc{margin-left:auto;margin-right:auto;}. Fl{float:left;display:inline;}. Fr{float:right;display:inline;}. Cb{clear:both;}. Cl{clear:left;}.cr{clear:right;}. Clearfix:after{content: '. '; Display:block;height:0;clear:both;visibility:hidden;}. Clearfix{display:inline-block;} * html.clearfix{height:1%;}. Clearfix{display:block;}. Vm{vertical-align:middle;}. Pr{position:relative;}. Pa{position:absolute;}. Abs-right{position:absolute;right:0}.zoom{zoom:1;}. Hidden{visibility:hidden;}. None{display:none;} /* length height */.w10{width:10px;}. w20{width:20px;}. w30{width:30px;}. w40{width:40px;}. w50{width:50px;}. w60{width:60px;}. w70{width:70px;}. w80{width:80px;}. w90{width:90px;}. w100{width:100px;}. w200{width:200px;}. W250{WIDTH:250XP;}. w300{width:300px;}. w400{width:400px;}. w500{width:500px;}. w600{width:600px;}. w700{width:700px;}. w800{width:800px;}. w{width:100%;}. h50{height:50px;}. h80{height:80px;}. h100{height:100px;}. h200{height:200px;}. h{height:100%;}/* margin */.m10{margin:10px;}. m15{margin:15px;}. m30{margin:30px;}. mt5{margin-top:5px;}. mt15{margin-top:15px;}. mt20{margin-top:20px;}. mt30{margin-top:30px;}. mt50{margin-top:50px;}. Mt100{margin-top:100px;}. mb5{margin-bottom::5px;}. mb15{margin-bottom:15px;}. mb20{margin-bottom:20px;}. mb30{margin-bottom:30px;}. mb50{margin-bottom:50px;}. mb100{margin-bottom:100px;}. ml5{margin-left:5px;}. ml15{margin-left:15px;}. ml20{margin-left:20px;}. ml30{margin-left:30px;}. ml50{margin-left:50px;}. ml100{margin-left:100px;}. mr5{margin-right:5px;}. mr15{margin-right:15px;}. mr20{margin-right:20px;}. mr30{margin-right:30px;}. mr50{margin-right:50px;}. mr100{margin-right:100px;}. p10{padding:10px;}. p15{padding:15px;}. p30{padding:30px;}. pt5{padding-top:5px;}. pt10{padding-top:10px;}. pt15{padding-top:15px;}. pt20{padding-top:20px;}. pt30{padding-top:30px;}. pt50{padding-top:50px;}. pb5{padding-bottom:5px;}. pb10{padding-bottom:10px;}. pb15{padding-bottom:15px;}. pb20{padding-bottom:20px;}. pb30{padding-bottom:30px;}. pb50{padding-bottom:50px;}. pl5{padding-left:5px;}. pl10{padding-left:10px;}. pl15{padding-left:15px;}. pl20{padding-left:20px;}. pl30{padding-left:30px;}. pl50{padding-left:50px;}. pr5{padding-right:5px;}. Pr10{padding-right:10px;}. pr15{padding-right:15px;}. pr20{padding-right:20px;}. pr30{padding-right:30px;}. pr50{padding-right:50px;}

  　　

• It is recommended to use class selectors, with fewer or even no ID selectors (the page structure and style are used with the class selector, the ID selector is used for tags that need to add JS functionality)
• For class selectors: small items. Fewer pages can be used "inherit", when for large projects, multi-page site, in order to prevent the explosion of CSS code growth, recommended "combination." (-_-If you do not understand what is "combination", "inheritance" of the proposed Google, I do not explain here)
• Selector naming habits: Add prefixes, the author is accustomed to the style is: Class style C_main_news,id style j_main_news. Do not skimp on characters, a good naming method is helpful to improve the readability and maintainability of the code.
• The margin is only used one, such as only with margin-top to layout, do not suddenly introduce a margin-bottom, because different browsers will overlap.
• Prioritize selectors, pay attention to style overrides, which is one reason to define a style with a class selector without an ID selector, and the ID selector is too high-priority, and style overrides and reuse are cumbersome. The class selector is recommended for easy modification and maintenance.