The understanding and summary of HTML (hypertext Markup Language)

First, the HTML infrastructure

The basic structure of HTML can be seen in slices:

Document declaration +

Document declaration: Http://www.cnblogs.com/Jm-jing/articles/6973877.html,

1. Basic information of the website

• Document title (text displayed in the browser tab):<title>深入了解 head 元素</title>
• Encoding format: <meta charset="utf-8"> (you may also see the gb2312 format, but not recommended), if your page is garbled, it is generally wrong encoding format
• Windows Settings:<meta name="viewport" content="width=device-width, initial-scale=1.0">
• Search engine Optimization Related content:<meta name="description" content=“帮助你深层次了解HTML文档结构”>
• IE browser version render settings:<meta http-equiv="X-UA-Compatible" content="ie=edge">

2. Other file links

• CSS file:<link rel="stylesheet" type="text/css" href="style.css">
• JavaScript files:<script src=“script.js"></script>

3. Manufacturer Customization

The analogy of opening a dual-core browser 360 browser to customize a default to use which kernel to render the page, can be set to WebKit kernel, ie standard, IE compatible with three modes. The code is:

<meta name="renderer" content="webkit"> <!-- 默认webkit内核 -->

<meta name="renderer" content="ie-stand"> <!-- 默认IE标准模式 -->

<meta name="renderer" content="ie-comp"> <!-- 默认IE兼容模式 -->

Related Reference Links:

Http://www.cnblogs.com/Jm-jing/articles/6986967.html

Http://www.cnblogs.com/Jm-jing/articles/6986998.html

Add:

In theory, the child elements of the,

HTML syntax rules in the HTML5 standard, if the </body> after the appearance of <script> or any element of the start tag, is the parse error, the browser will ignore the previous </body>, that is, the view is still inside the body. So there is no difference between the actual effect and the writing before </body>.

For more information, see: http://www.cnblogs.com/Jm-jing/articles/6974074.html

Second, HTML tree

The characteristics of the tree: the main trunk, while extending from the trunk of a lot of branches. Therefore, we can think of the HTML code as an HTML tree, so as to make it easier for us to understand.

Parent element: An element that contains another element is a parent element of a contained element (that is, a child element) "an element can have multiple child elements, but only one parent element"

Sibling elements: Several elements with the same parent element are mutually called sibling elements

Add some caveats to improving Web performance:

1, avoid too many layers of nesting:

The deeper the nodes are, the more memory they occupy when the initialization is built. The browser HTML parser stores the structure of the entire HTML document as a DOM tree structure. The deeper the nesting level of the nodes, the deeper the DOM book hierarchy is built. So, when we're writing HTML pages, we need to figure out how to write the code in such a way as to be concise and to show the structure of the entire HTML page.

2. Display the width and height of the setting picture

It is sometimes necessary to position the page layout before the page is finished loading. If the picture on the page does not specify a size, or the size does not match the actual image size, the browser will "backtrack" the image and display it again after the picture is downloaded, wasting time. So it's best to set the size of the page's picture

Third, HTML elements

The definition of an element: Two tags together with the contents of the elements.

Purpose of the element: A tool used to describe the contents of a document to a browser. The effect is reflected in the content

Features of the elements: 1. Different elements have different exact meanings. 2. Element names are not case sensitive. 3. Semantic elements can be used to describe the meaning of content and the relationship between different parts of the content.

Element type:

1. Metadata elements (metadata element)

Definition: The basic structure used to build an HTML document, providing information and instructions on how to handle the document's browser

Meta data elements:<tittle> <base> <meta> <link> <script> <noscript> et cetera

2. Flow element

Definition: A superset of phrase elements, that is, all phrase elements are flow elements, but not all flow elements are phrase elements

Flow elements have:<noscript> <a> etc.

3. Phrase elements (phrasing element)

Definition: Is the basic component of HTML

Phrase elements are:<script> <noscript> <a> <b> etc.

4. Other elements

Some elements cannot be grouped into these 3 types, which either have no special meaning or can only be used in very limited cases

Example:<li> element can only have 3 parent element (<ul>/<ol>/<menu>)

For more information, please refer to the authoritative guide of HTML5

Add

1. Empty elements

Definition: There is not necessarily content between the start and end tags of an element, and an element with no content becomes an empty element. (Some empty elements are empty when there is no meaning---<code>)

<p></p>

2. Self-closing label

An empty element can be used more succinctly to represent a label

<code/>

3. Virtual elements

Definition: Some elements can use only one label, and any content placed in it does not conform to the HTML specification.

Means: 1, use only start tag---->

2, on the basis of 1 plus a slash symbol, the form is consistent with the empty element

Virtual elements have:,

4. Inline elements and block-level elements

Block-level elements:

Features: Default occupies positive line width

Example:<p> <div>

Inline elements:

Features: Peer display, default width determined by content

Example:<a> <span> <i> <em>

Iv. Global Properties

Definitions: They are used to configure common behavior for all elements, and global attributes can be used on any element, but this does not necessarily lead to meaningful or useful behavioral changes.

For more information, please refer to: http://www.w3school.com.cn/tags/html_ref_standardattributes.asp

V. Summary

1, an HTML page first from the declaration, to the structure, then to the element, and finally to the property. That is, an HTML page will certainly contain 4 foundations for declaring + struct + element + attribute.

2, before writing a Web page structure, you must first think good page layout

3, as far as possible to achieve semantic (multi-use H5 elements), is also conducive to SEO

4, in order to improve performance, remember not to multi-layered nesting, as far as possible to make the best structure with minimal nesting

5, a good page, I would like to complete a good

The understanding and summary of HTML (hypertext Markup Language)