Summary
Excellent source project, even more than the development, but also look at the code as a one person's hands. Unified coding standard, make code easier to read, easy to understand, easy to maintain
HTML specification
indentation
Unified two spaces to indent
Naming conventions
- class features or content should be named, not named in the manifestation;
- class id and lowercase word, multiple words when using underlined - separated;
- Use a unique id as Javascript hook, while avoiding the creation class no style information;
DOCTYPE declaration
HTML file must be added the DOCTYPE declaration, and consistent use of HTML5 document declaration:
<!DOCTYPE html>
meta tags
- Unified use "UTF-8" encoding
<meta charset="utf-8">
- SEO optimization
<!-- 页面关键词 -->
<meta name ="keywords" content =""/>
<!-- 页面描述 -->
<meta name ="description" content ="">
<!-- 网页作者 -->
<meta name ="author" content ="">
- Priority use the latest version of IE and Chrome
<meta http-equiv ="X-UA-Compatible" content ="IE = edge，chrome = 1">
- A viewport for mobile devices
<!-- device-width 是指这个设备最理想的 viewport 宽度 -->
<!-- initial-scale=1.0 是指初始化的时候缩放大小是1，也就是不缩放 -->
<!-- user-scalable=0 是指禁止用户进行缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- Disable automatic identification page, there may be a digital telephone format
<meta name="format-detection" content="telephone=no">
Live web front-end development tutorial Qqun: 767273102, there are free development tools, zero-based, advanced video tutorials, I hope the novice detours
Team conventions:
pc end:
<meta charset="utf-8">
<meta name="keywords" content="your keywords">
<meta name="description" content="your description">
<meta name="author" content="author,email address">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
Mobile end:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
label
html tags into the following categories:
- Self-closing tag (self-closing), without closing. For example: area, base, br, col, command, embed, hr, img, input, keygen, link, meta, param, source, track, wbr etc.)
- Closing tag (closing tag), needs to be closed. For example: textarea, title, h, div, span, etc.
Team conventions:
- All elements that have start and end tags must be written on the beginning and ending tags, allows you to omit some of the start tag or label and beam elements also have to write on
- Self-closing tags do not add the closing tag
- Self-defined label name must contain a dash (-),
<x-tags>,<my-element>and<my-awesome-app>are the correct names while<tabs>and<foo_bar>is not correct. Such limitations make HTML parser can distinguish those are standard elements, which are custom element - Custom label must be written on the label and begin closing tag
- Minimize the number of labels
Element Properties
- Element attribute value syntax to use double quotes
recommend:
<input type="text">
复制代码Not recommended:
<input type=text>
<input type='text'>
Code nesting
- Inline block element may comprise an element or elements of some of the blocks, but can not contain inline elements block elements, it can contain other inline elements
- Headings and paragraphs not contain block, such as: h1, h2, h3, h4, h5, h6, p, dt
- It is not parallel with inline block, block-level elements in parallel and block-level elements, the elements in parallel with the embedded elements embedded
- Some tags nested rule is fixed, for example comprising ul li, ol comprising li, dl dt and comprising dd like.
Flexible use of pseudo-classes
Do not let the non-content information contaminate your HTML, HTML disrupted the structure. It can be used: before,: after pseudo-earth elements, etc.
recommend:
HTML code
<!-- That is clean markup! -->
<span class="text-box">
See the square next to me?
</span>
CSS code:
/* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
.text-box:before {
content: '';
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
Not recommended:
HTML code:
<!-- We should not introduce an additional element just to solve a design problem -->
<span class="text-box">
<span class="square"></span>
See the square next to me?
</span>
CSS code:
.text-box > .square {
display: inline-block;
width: 1rem;
height: 1rem;
background-color: red;
}
Special symbols must escape
| symbol | description | Escapes |
|---|---|---|
| Blank | |
|
| < | Less than | < |
| > | more than the | > |
| & | with | & |
| " | quotation marks | " |
Pure Digital input box
Use type = "tel" instead of type = "number"
<input type="tel">
Type Property
Do not need to CSS, JS specify the type attribute, HTML5 is included in default.
recommend:
<link rel="stylesheet" href="" >
<script src=""></script>
Not recommended:
<link rel="stylesheet" type="text/css" href="" >
<script type="text/javascript" src="" ></script>
Notes Specification
Single-line comments
- Generally used for simple description, as described in some states, and other properties described
- A space character before and after each annotation content, comments, located above the comment to the code itself on the line
recommend:
<!-- Comment Text -->
<div>...</div>
Not recommended:
<div>...</div><!-- Comment Text -->
<div><!-- Comment Text -->
...
</div>
Module Remark
- A note before and after each space character content
<!-- S Comment Text -->A block start<!-- E Comment Text -->A block end, separated by a line between the module and the module- Note the inner nested modules annotation module,
<!-- /Comment Text -->
recommend:
<!-- S Comment Text A -->
<div class="mod_a">
<div class="mod_b">
...
</div>
<!-- /mod_b -->
<div class="mod_c">
...
</div>
<!-- /mod_c -->
</div>
<!-- E Comment Text A -->
<!-- S Comment Text D -->
<div class="mod_d">
...
</div>
<!-- E Comment Text D -->
Semantic
- CSS, HTML is not a semantic system instead of the UI system
- Typically, each semantic label are all
- Semantic HTML structure, helps machine (search engine) to understand, when many people work together on the other hand, developers can quickly understand the intent
- Multi-page recommend using semantic tags, rather than the entire page with div constitute
Live web front-end development tutorial Qqun: 767273102, there are free development tools, zero-based, advanced video tutorials, I hope the novice detours
Common semantic tags:
| label | Semantic |
|---|---|
<p> |
paragraph |
<hn> |
Title (h1 ~ h6) |
<ul> |
Unordered list |
<ol> |
Ordered list |
<nav> |
Navigation marks, only documents an important link in the group use |
<main> |
The main content of the page, a page can only be used once. If a web application, it is surrounded by its main function |
<article> |
External definition content, the content is independent of the rest of the document |
<section> |
Defined in the document section (section, section). Such as other chapters, headers, footers, or document. |
<aside> |
Which define the content outside its contents. A set of links such as the sidebar, articles, ads, links, a list of related products |
<header> |
Header usually includes the site logo, main navigation, site-wide links and a search box |
<footer> |
Footer, only if the parent is a body, the entire page is the Footer |
<figure> |
The provisions of a separate stream content (images, diagrams, photos, code, etc.) (By default there are about 40px margin) |