HTML and CSS Coding specifications for "Bootstrap basic Learning" bootstrap

Source: Internet
Author: User
Tags closing tag

Html

  • Use two spaces instead of tabs (tab)-This is the only way to ensure consistent presentation in all environments.
  • Nested elements should be indented once (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> ).
  • lang="ZH-CN"> strongly recommends that you specify the lang attribute for the HTML root element. This sets 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.
  • <meta charset = > by explicitly declaring character encoding, it ensures that the browser can quickly and easily determine how the page content is rendered.
  • <meta Span class= "ATN" >http-equiv = "x-ua-compatible" < Span style= "color: #ff0000;" >content = > IE supports through 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 &NBSP, edge mode , which informs IE to use the latest mode it supports.
  • according to the HTML5 specification, it is generally not necessary to specify properties when introducing CSS and JavaScript files type , because text/css and text/javascript respectively, they are their default values.
    <!--referencing CSS -<Linkrel= "stylesheet"href= "Code-guide.css"><!--inline Style -<style>  /* ... */</style><!--JavaScript -<Scriptsrc= "Code-guide.js"></Script>
  • HTML attributes should be arranged in the order given below to ensure readability of the code. Class is used to identify highly reusable components and should therefore be ranked first. IDs are used to identify specific components and should be used with caution (for example, bookmarks within a page), so the second position
    • Class
    • Id,name
    • data-*
    • Src,for,type,href
    • Title,alt
    • Aria-*,role

Css

  • Use two spaces instead of tabs (tab)-This is the only way to ensure consistent presentation in all environments.
  • When grouping selectors, separate selectors are placed on a single line.
  • For readability of the code, add a space before the left curly brace of each declaration block.
  • The closing curly brackets of the declaration block should be taken separately.
  • :a space should be inserted after each declaration statement.
  • For a more accurate error report, each statement should be exclusive to one line.
  • All declaration statements should end with a semicolon. The semicolon after the last declaration statement is optional, but if you omit the semicolon, your code may be more prone to errors.
  • For comma-separated property values, you should insert a space after each comma (for example, box-shadow ).
  • Do not rgb() rgba() insert spaces After the,,,, or the hsl() hsla() rect() comma inside the value. This makes it easy to distinguish multiple color values (with commas and no spaces) from multiple attribute values (plus commas and spaces).
  • For attribute values or color parameters, omit 0 (for example, instead of a decimal .5 0.5 -.5px -0.5px ) that is less than 1.
  • Hexadecimal values should all be lowercase, for example, #fff . When you scan a document, lowercase characters are easy to distinguish because their form is easier to distinguish.
  • Try using a shorthand hexadecimal value, for example, #fff instead #ffffff .
  • Add double quotation marks to the properties in the selector, for example, input[type="text"] . Only in some cases is optional, but for code consistency, it is recommended that you add double quotes.
  • Avoid specifying units for 0 values, for example, withmargin: 0;Replacemargin: 0px;
    /*CSS that does not conform to the specification*/. Selector,. Selector-secondary,. Selector[type=text]{padding:15px;margin:0px 0px 15px;Background-color:rgba (0, 0, 0, 0.5);Box-shadow:0px 1px 2px #CCC, inset 0 1px 0 #FFFFFF}/*code-compliant CSS*/. Selector,.selector-secondary,.selector[type= "text"]{padding:15px;Margin-bottom:15px;Background-color:Rgba (0,0,0,.5);Box-shadow:0 1px 2px #ccc, inset 0 1px 0 #fff;}
  • The related attribute declarations should be grouped into groups and arranged in the following order:

    Because positioning (positioning) removes elements from the normal flow of documents and also overrides the box model-related styles, it is ranked first. The box model is ranked second because it determines the size and position of the component.

    Other properties only affect the interior of the component (inside) or do not affect the first two sets of properties, so it is followed.

    1. Positioning
    2. Box model
    3. Typesetting
    4. Borders and backgrounds
    5. Transparency
    6. Example:
      . Declaration-order{/*positioning*/position:Absolute;Top:0; Right:0;Bottom:0; Left:0;Z-index: -;/*Box Model*/Display:Block;float: Right;width:100px;Height:100px;/*Typesetting*/Font:normal 13px "Helvetica Neue", Sans-serif;Line-height:1.5;Color:#333;text-align:Center;/*borders and Backgrounds*/Background-color:#f5f5f5;Border:1px solid #e5e5e5;Border-radius:3px;/*Transparency*/Opacity:1;}

A matter of opinion, the so-called norm is everyone agreed how to write code.

This is all on the internet, and I watched it all over again. Do not know whether to declare reprint, some or reproduced reprint, too troublesome, anyway are some of the basic things, just forget it.

HTML and CSS Coding specifications for "Bootstrap basic Learning" bootstrap

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.