Shulou(Shulou.com)06/01 Report--

This article mainly explains "what are the basic specifications of HTML code". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn what are the basic specifications of HTML code.

(1) the basic specification of HTML code

1. Naming and format of HTML

Any code confusion starts with confusion in naming and formatting, so there must be a unified and standardized naming and formatting. Here are some basic specifications.

All markup signatures and attributes in HTML code should be lowercase, although HTML code is case-insensitive, the W3C specification recommends lowercase; attribute values should be enclosed in double quotes.

Define the id and class of all the key elements to facilitate interaction with CSS,JavaScript; the keywords in the id name are connected with an underscore (_), and the keywords in the class are connected with an underscore (-), and the appropriate names are defined according to the actual meaning and the hierarchical relationship of the Dom tree.

The level of HTML code is indented to four spaces; an element definition with an empty value should occupy a separate line; and the starting and closing tags of an element that contains child elements occupy a separate line.

Example:

...

2 separation of CSS code and HTML code

Styles can be written directly in the style attribute of the tag or in the style tag in the head area of the page, both of which are bad ways, especially the first way. Styles should be written separately in css style files to facilitate code reuse and maintenance.

3. Write standard HTML code

All HTML tags should be closed correctly; all element definitions should have start and close tags, even if the value of the element is empty, except for the following tags, the following tags can be self-closing:

Wait.

For tags that are not supported by the stop specification, the following tag specifications are no longer recommended, although browsers can resolve them correctly: etc.

Stop using attributes that are not supported by the specification, and the following attributes are no longer recommended: the background attribute of body, the align attribute of some tags, the nowrap attribute on td and th, the width and height attribute of some tags, and so on. In fact, the tags and attributes that are not recommended by these specifications are tags and attributes that affect the appearance, which can be set through the CSS style.

You should always verify the standard of your code, using the verification tool provided by W3C: Unicorn.

(2) highly readable HTML code

1. Use the right label in the right place

HTML code is not purely for the browser to show, but also needs good readability to facilitate code inspection and maintenance, more importantly, a variety of search engines can better identify page content, so write semantic HTML code, that is, often mentioned HTML tag semantics.

Div and span are two typical tags without any semantics, so make sure that you can replace them with more semantic tags before using them.

~

H2 to H7 are used as headings, H2 is the highest-level title, and these title tags should be used where the title is displayed on the web page.

And

The semantics of these two tags are emphasized and emphasized, instead of tags and without any semantics.

Table tag is the first often used for layout, so far there are a large number of pages are laid out by table, table layout has been unanimously spurned by front-end engineers, so that many novices dare not use this tag, here to emphasize that the semantics of table is a table, if you need to list some statistics, etc., table tag is the first choice.

It is an unordered list and an ordered list, so the navigation menu of the web page is most suitable for ul, while some ordered lists, such as chapter lists, should use the ol tag.

Bad examples:

Article title

The content of the text, which needs to be emphasized.

Navigation 1

Navigation 2

Navigation 3

Examples of specifications:

Article title

The content of the text, which needs to be emphasized.

Navigation 1

Navigation 2

Navigation 3

two。 Add the necessary meta to the page

The meta information describes the information about the page and is placed in the head section of the page for more friendly identification by search engines. Here are some commonly used definitions:

3. Do not omit the attributes of some tags

The alt attribute of the tag is used to replace the text when the picture does not display properly, the title attribute of the tag can be used as an explanatory message, and it is displayed as a prompt when the mouse hover.

(3) High performance HMTL code

1. The CSS file comes before the JavaScript file, and the JavaScript code is placed at the bottom of the page.

The download and parsing of the JavaScript file will block the loading of the page, so in the head section, the reference to the CSS is written first, while the reference to the JavaScript file is written at the end.

In addition, the script tag has two attributes async and defer,defer set to true, which means that the JavaScript file lags behind and does not affect the rendering of the page HTML. Async is a new attribute introduced in HTML5 and has been supported by most modern browsers. Setting this attribute to true means that the file is loaded and executed asynchronously. The difference between the two properties is that the async will be executed after the download is complete, while the defer will be executed in the order in which it is on the page, so the download and execution are not necessarily continuous. You can set these two properties according to the actual project situation to improve the speed of page loading.

two。 Simplify the HTML code

The more concise the HTML code, the shorter the transfer time of the page, the faster the rendering time of the page, and the better the corresponding user experience, so it is necessary to simplify the HTML code loaded on the page.

The simplification of the page mainly starts from the following areas:

Delete redundant tags

Most of the extra tags are added to facilitate layout, such as the following code:

Item1

Item2

Item3

In most cases, the outermost div tag in the code is unnecessary, and the ul tag in the inner layer can fully play its role. You can delete this tag directly and adjust the style of ul appropriately.

Dynamically load and render non-critical areas

Some areas of the page are not the areas that users focus on, such as page advertisements, some statistics, and so on. Such content can be loaded and displayed dynamically by javascript code after waiting for the key areas of the page to be loaded.

3. Use iframe cautiously

Iframe has two disadvantages: 1 the Onload event of the main page is blocked by the recorder iframe, and the connection pool is shared with the main page, while the browser has restrictions on the connections in the same domain, so it will affect the parallel loading of the page. You need to consider these two disadvantages before using iframe.

If you need to use iframe, it is best to dynamically add the src attribute value to the iframe through javascript, so that you can get around the above two problems.

Thank you for your reading, these are the contents of "what are the basic specifications of HTML code". After the study of this article, I believe you have a deeper understanding of what the basic specifications of HTML code are, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.