Style and structure separation
- HTML page link a CSS (optimal), improve loading speed
- HTML inline CSS (single page best, reduces the number of requests to load CSS style files and speeds up loading
- Inline CSS style, you can use JS dynamic to unify the modification, rarely used, in JQ use it to achieve animation effect
- referencing CSS files in CSS style files, avoiding the use of
Add JS disable prompt message
- Using NOSCRPT,HTML4 only works in body, HTML5 can appear in head, support HTML, do not support XHTML
- It is best to use noscript, with progressive enhanced mode for smooth downgrade
Add the necessary meta tags
- Meta Properties: Name,http-equiv,content,charset
- Combination of name and content attributes, which form the names/value pairs
- Name in Keywords,description most commonly used
- HTTP-EQUIV and the content attribute combine to form an HTTP command
- CharSet Setting the encoding
HTML semantics
- Semantics make it easier for search engines and third-party crawlers to read code
- get rid of CSS and maintain a good look
- Div,span use as little as possible
- To remove extraneous elements from the HTML
- Add some hidden text
- Best Practices for building page titles:
- Using H1~H6 tags
- The page just uses a H1
- Do not skip during use
- Do not use H1~H6 to set styles
- Design a form:
- Use the label label and set the for property of the label label
- To set the appropriate watermark hint for an input control
- Input Control Setting tab order
- Using form controls introduced in HTML5
Thin HTML code
- Remove Excess div,span containers
- Decorative elements are implemented using CSS styles
- Avoid using table layouts
- HTML4.01 in transitional and strict two modes (eg: inline elements are not able to contain block-level elements), HTML5 can contain each other
HTML5 new features use
- Use a simplified definition in HTML5
- Defining document Type declarations (Standard mode)
- Define page encoding
- References to styles and script files
- Async and Defer properties
- Not used inside the inline
- Defer: Download scripts in parallel instead of blocking, and after the script is loaded, the browser will run JS in the order of reference before the DOM triggers, setting the "defer" property in the tag when the script does not need to run immediately. (The script is not included in a function block immediately, so it is executed during the loading process.) After setting the "defer" property, ie does not have to wait for the script to load and execute. This will make the page load faster. In general, this also indicates that the immediate script is best placed in a function block and processed in the onload handle of the document or Body object. Using this property is useful when there are scripts that need to rely on user action, such as clicking a button or moving the mouse to an area. However, when there are scripts that need to be executed during page loading or after loading, the benefits of using the Defer property are not very large.
- Async: Asynchronously downloads the script and executes the code immediately after the download, without waiting for the page parsing to end
- When setting up async, it is recommended to set the Defer property at the same time to improve the performance of script load execution
Web front-end development Best Practices (2)
