The relationship between HTML, CSS and Javascript

HTML is a markup language used to adjust the structure and content of the page. HTML cannot be used to modify the style content, nor can you enter text content in the head tag, which makes the code lengthy and complicated. On the contrary, it is more appropriate to use CSS to modify the layout elements and appearance.

The default appearance of HTML elements is defined by the browser’s default style sheet. For example, in Chrome, the h1 tag element will be rendered as 32px Times bold.

Three general design rules:

1. Use HTML to construct page structure, CSS to modify page rendering, Javascript Realize page function. CSS ZenGarden is a good example of behavior separation.

2. Use less HTML code if you can do it with CSS or Javascript.

3. Keep CSS and Javascript files separate from HTML. This can help with caching and debugging.

Document structure can also be optimized, as follows:

Use HTML5 document type, the following is an empty file:

 




   
Pesto

   
Pesto is good!


 

Refer to the CSS file at the beginning of the document, as follows:

Using these two methods, the browser will prepare the CSS information before parsing the HTML code. Thus helping to improve page load performance.

Enter the Javascript code before the end of the body tag at the bottom of the page, which helps to increase the speed of page loading, because the browser completes the page loading before parsing the Javascript code, and the use of Javascript will positively affect the page elements Influence.

   ...

  
  

 

Using Defer and async attributes, script elements with async attributes are not guaranteed to be executed in order.

Handlers can be added in Javascript code. Do not add it to the HTML inline code. For example, the following code is easy to cause errors and is not easy to maintain:

index.html:

  
   ...

  





   ...

   Foo

   ...

 

The following is better:

index.html:

   ...





   ...

   Foo

   ...

  

 

js/local.js:

init();
 var fooButton =
     document.querySelector('#foo');
 fooButton.Onclick= handleFoo();

Validation

One way to optimize a page is for the browser to handle invalid HTML code. Legitimate HTML code is easy to debug, takes up less memory, consumes less resources, is easy to parse and render, and runs faster. Invalid HTML code makes implementing responsive design extremely difficult.

When using templates, legal HTML codes are extremely important. It often happens that templates run well alone, but when they are integrated with other modules, various errors are reported. Therefore, it is necessary to ensure that HTML codes are Quality, you can take the following measures:

• Add validation functions in the workflow: use validation plug-ins such as HTMLHint or SublineLinter to help you detect The code is wrong.

• Use the HTML5 document type

• Ensure that the HTML hierarchy is easy to maintain, and avoid element nesting in the left-open state.

• Make sure to add the closing tag of each element.

• Delete unnecessary code; there is no need to add closing tags to self-closing elements; Boolean attributes do not need to be assigned, if they exist, they are True;

Code Format

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

Semantic markup

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