Write high-quality code--html, CSS

"Writing high-quality code"
1, the necessity of annotation: increase the readability of the code.
2, Web standards: A series of standards, the core idea is to separate the structure of the Web page, style, behavior, so he can be divided into: Structural standards, style standards and behavior standards.
3, a standards-compliant web page, label names should all be lowercase, attributes to parentheses, style and behavior should not be mixed in the label, but should be stored separately in the style files and script files. Ideally, the Web page source code has three components:. html files,. css files,. js files.
4, the so-called high-quality code, under the guidance of web standards, in the implementation of the structure, style and behavior on the basis of separation, but also to achieve three points: streamlined, reusable, orderly.
5. Chat native JavaScript, JavaScript libraries and Ajax:
native JavaScript is the scripting language that the browser supports by default, and Ajax is a technique that uses JavaScript and XMLHttpRequest objects to pass data on the client and server side, Because XMLHttpRequest objects are also objects created with JavaScript, Ajax is, in a sense, a subset of JavaScript.

"High-quality HTML"
label Semantics: The reason is that the search engine can not see the visual effect, see only the code, only through the label to determine the semantics of the content.
the Table layout page has the following features:
Large code volume, structure confusion;
tag semantics are ambiguous and unfriendly to search engines.

The correct way to do this is: first determine the HTML, determine the semantic label, and then choose the appropriate CSS.
Div and span are added to aid implementation when the on-page label does not meet the design requirements

some issues to be aware of in semantic tagging:
use less semantic tag div and span as little as possible;
in the semantic is not obvious, you can also use the div in the place, try to use p. Because P has the upper and lower spacing by default, it is better to be readable after the style, which is advantageous for compatibility with special terminal.
do not use plain style labels, such as: B, Font, u, etc. The CSS style is used.

"High-quality CSS"
quirks Models and DTDs: Sometimes patterns that do not conform to the standard model; a DTD refers to the document type definition, as well as to the documentation types, which is an effective way to ensure that the HTML document is properly formatted, and that a DTD document contains the definition rules for the elements, The definition rules for the relationship of elements, the attributes used by the element class, the entity or symbol rules that can be used.

How to organize CSS:
people recommend the Organization method: base, Common, page, three levels are said: Base is the lowest layer, will be referenced by all pages, this layer is not related to UI design, no matter the design of any style can refer to him; common layer, is the csspage layer that the build level CSS can reuse, is the highest level, each page is different.

What is CSS reset?
HTML tags in the browser has its own default style, by redefining the style of the label, "overwrite" the browser's default style, is called CSS Reset. For example: *{margin:0;padding:0;} is the first CSS reset, some people like to write many styles in the wildcard "*", but this is very bad, because many styles of CSS are inherited, but the inheritance of the weight is very low, the weight of the tag selector is lower, This way of writing will break the inheritance of CSS, and set the style will add a lot of extra code.

CSS Naming--The concept of namespaces
first of all, the CSS name is recommended to use English, do not use Hanyu Pinyin, we can choose the appropriate English words according to the content of the name of the CSS, we can be named by the Camel name method and the name of the line, camel nomenclature used to distinguish between different words, dashes used to distinguish between different subordination. The idea of object-oriented programming is also introduced in CSS to name CSS and to name it according to the dependencies of different boxes.

When defining styles for several of the same boxes: multi-use combinations, less inheritance.

margin Processing: If the adjacent modules with Margin-top and Margin-bottom, the margin will overlap to bring unnecessary trouble, so it is best to use a uniform different margin-top or margin-bottom, do not mix. (Summary: If you are not sure that the module up and down margin is particularly stable, it is best not to write it into the module class, but to use a combination of classes, separate for the top and bottom margin of the atomic class, the module is best not to mix, unified use. )

Low weight principle--avoid abusing child selectors
When the settings of different selectors conflict, the style is set with a high-weight selector. The weight of the rule is this: the weight of the HTML tag for the 1,class weight of 10,id is the weight of the 100,p is 1 and so on. If the CSS selector has the same weight, then the style follows the nearest principle, and the selector is last defined, using the style defined by that selector.
using a sub-selector increases the weight of the CSS selector, and the higher the weight of the CSS. The less likely the style is to be overwritten, the easier it will be to influence other selectors, in order to ensure that the style is easily overwritten and improved maintainability, the CSS selector needs to ensure that the weights are as low as possible. In contrast, the new class is better for maintenance.

CSS Sprite
CSS Sprite will be the background image of the site merged on a large piece of paper, the loading of the picture will send an HTTP request, a map requires an HTTP request, more than one HTTP request, more HTTP requests, the more times the server access, the server pressure is greater, In this way, multiple graphs are merged on one sheet, which greatly reduces the HTTP request of the Web page and reduces the pressure on the server. But he will also "reduce development efficiency" and "increase maintenance difficulty". Therefore, whether to use CSS Sprite depends mainly on the traffic of the website.

Display:inline-block: It is a block-level element in the row, he has the characteristics of block-level elements, can be set width, length, but he can not exclusive one line his width does not occupy the parent element, but as the inline element, and other inline elements can be arranged in the same row.

Document Flow: The Web page appears to be a two-dimensional structure, but in fact he has a z-axis, the size of the z-axis is controlled by Z-index, by default, all elements are in z-index:0, this layer, the elements according to their own display type, length and other properties arranged in the z-index:0 layer, This is the document flow.

Both Position:relative and Position:absolute can change the position of elements in the document flow, and setting position:relative and Position:absolute activates left, top, right, Bottom and Z-index properties, (in default, these properties are not activated and are ineffective). When the page is set position:relative and Position:absolute is, the z axis of the webpage is activated, then the position:relative and Position:absolute are set above z-index:0; In contrast, the position:relative will remain in the z-index:0; the original position (space) of the layer, just relative to the z-index:0; the layer is one layer higher, and position:absolute is completely out of the document stream, no longer z-index:0 The layer retains the placeholder. The positioning is relative to his own recent set of position:relative and Position:absolute ancestor elements or body elements. Based on the different positioning concepts of the elements, we can make some relevant styles for them.

Write high-quality code--html, CSS