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

Today, the editor will share with you the relevant knowledge points of HTML code optimization skills, which are detailed and logical. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look at it.

Development and design principles

Structure separation to use HTML to add structure, rather than style content

Keep your code clean, add code validation tools to your workflow, and use tools or style wizards to maintain code structure and formatting

Learn a new language and acquire semantic tags and element structures.

For normal access, you can use the ARIA property and the Fallback property, etc.

Code testing enables the site to run well on a variety of devices, using emulators and performance tools.

The relationship among HTML, CSS and JavaScript

HTML is used to build the page structure and content of the markup language, HTML can not be used to modify the style of content, nor can you enter text content in the opening tag will make the code complex and lengthy, on the contrary, we use CSS to modify the page layout and appearance is more appropriate.

The default appearance of the HTML element is defined through a browser stylesheet, for example, in Google, the tag is rendered as bold in 32px.

Three general design rules:

Use HTML to build the page structure, CSS to modify the page style, JavaScript to achieve the page dynamic function.

You can implement it with CSS or JavaScript and use less HTML code.

Separating CSS and JavaScript files from HTML helps with caching and debugging.

Optimization of document structure

Use HTML5 document types

Recipes: pesto Pesto

Pesto is good!

The document start position refers to the CSS file

My pesto recipe

Using the above two methods, the browser prepares the HTML code before parsing it. This helps to improve page loading performance.

Enter the JavaScript code before the body closing tag at the bottom of the page, which helps speed up the page loading, because the browser loads the page before parsing the JavaScript code, and using JavaScript has a positive impact on the page elements.

...

You can use the Defer and async attributes, and the script element with the async attribute is not guaranteed to be executed sequentially.

You can add Handlers to your JavaScript code. Never add it to HTML inline code. For example, the following code can easily lead to errors and is not easy to maintain:

Index.html:

... Foo...

The following is a better way to write:

Index.html:

...... Foo...

Js/local.js:

Init (); var fooButton = document.querySelector ('# foo'); fooButton.onclick = handleFoo (); Verification effect

One way to optimize web pages is for browsers to handle illegal HTML code. Legitimate HTML code is easy to debug, takes up less memory, consumes less resources, and is easier to parse and render faster. Illegal HTML code makes it extremely difficult to implement responsive design.

When using templates, legitimate HTML code is extremely important. Templates often run well alone, and various errors are reported when integrated with other modules, so be sure to ensure the quality of HTML code, you can take the following measures:

Add validation to your workflow: use validation plug-ins such as HTMLHint or SublineLinter to help you detect code errors.

Use HTML5 document types

Make sure that the HTML hierarchy is easy to maintain and avoid left-open element nesting.

Be sure to add the closing tag for each element.

Remove unnecessary code; there is no need to add closing tags to self-closing elements; the Boolean attribute does not need to be assigned, or True if it exists

Code format

Format consistency makes HTML code easy to read, understand, optimize, and debug.

Semantic marker

Semantics refers to things related to meaning, and HTML can see semantics from the content of the page: the naming of elements and attributes expresses the role and function of the content to a certain extent. HTML5 introduces new semantic elements, such as, and.

Choosing the right element to write the code ensures that the code is readable:

Use (,...) Represents the title, or implementation list

Note that tags should be added before using them.

Select the appropriate HTML5 semantic elements, such as

Use

To describe Body text, HTML5 semantic elements can form content, and vice versa.

Use and tags instead of and tags.

Use elements, input types, placeholders, and other attributes to force validation.

Mixing text with an element as a child of another element can lead to layout errors

For example:

Name:

It would be better to write it another way:

Name: page layout

To improve the performance of HTML code, follow the HTML code to achieve functionality and not style.

Use

Element decorates the text, not the layout; default

Edges are provided automatically, and other styles are provided by default by the browser.

Avoid using

Branches, which can be replaced by block elements or CSS display attributes.

Avoid using to add horizontal lines and use CSS's border-bottom instead.

Do not use the div tag until the critical moment.

Try to use less Tables for layout.

You can use Flex Box more often.

Use CSS to adjust the margins and so on.

CSS

Although this article is about how to optimize HTML, here are some basic skills for using CSS:

Avoid excessive use of inline CSS styles

Use the ID class at most once

When multiple elements are involved, you can use Class to do so.

These are all the contents of this article entitled "what are the techniques for HTML code optimization?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

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.