Separation of structure, style and behavior

Try to ensure that documents and templates contain only HTML structure. Styles are in the style sheet, custom styles are introduced in the entry file, and third-party styles are introduced in the Link tag. The behavior is all in the script. Exception: When the third package is introduced directly through HTML, it is recommended that the related scripts and styles be placed in the same template so as not to get lost in the changes.

<script src="https://frontend-alioss.learnta.com/lib/redactor/lib/eruda/1.9.0/eruda.min.js" defer></script>
<script>
  window.addEventListener('DOMContentLoaded'.function(event) {
    var UA = navigator.userAgent;
    var isMobile = /(android|iphone|ipad|ipod)/i.test(UA);
    if(isMobile) { eruda.init(); }});</script>
Copy the code

The indentation

Unified four space indent. Define indent in.EditorConfig. Format automatically by prettier.

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

[*]
charset = utf-8
end_of_line = lf
insert_final_newline = true
indent_style = space
indent_size = 4

[*.md]
trim_trailing_whitespace = false

[Makefile]
indent_style = tab
Copy the code

File coding

Use utf-8. And the specified character encoding meta must be the first direct child of head;

<meta charset="utf-8"> ；
Copy the code

Language Settings

The value of the lang attribute should follow BCP 47 – Tags for Identifying Languages.

The main problem is that zh is not a language code now, but macrolang, can be used as language code is CMN (Mandarin), Yue (Cantonese), wuu (Wu), etc.

<! -- Simplified Chinese -->
<html lang="zh-cmn-Hans">
<! -- Traditional Chinese -->
<html lang="zh-cmn-Hant">
<! - English - >
<html lang="en">
Copy the code

External link resource references

The resource type

Style files are imported with the link tag (rel=”stylesheet” is required) and script files are imported with the script tag, without the type attribute

<link rel="stylesheet" src="index.css" />
<script src="index.js" />
Copy the code

Resources agreement

Static resources that reference HTTP are prohibited. Since most websites are developed based on HTTPS at present, mixed content security problems may occur when HTTPS websites reference HTTP resources:

  1. Passive mixed content: Content that does not interact with the rest of the page, limiting what a man-in-the-middle attack can do to intercept or change that content. Passive mixed content includes image, video, and audio content, as well as other resources that cannot interact with the rest of the page. A warning message is displayed in the browser, but it does not affect normal loading.

  1. Actively mix content: Interacts with the page as a whole and allows an attacker to do almost anything with the page. Active mixed content includes scripts that browsers can download and execute, style sheets, iframes, Flash resources, and other code. This type of content is blocked in the browser to protect the user, as shown below:

Therefore, we must refer to resources using HTTPS or relative addresses rather than directly referring to HTTP.

<! -- recommended -->
<script src="/ / cdn.bootcss.com/jquery/3.4.1/core.js"></script>

<! -- not recommended -->
<script src="http://cdn.bootcss.com/jquery/3.4.1/core.js"></script>
Copy the code

Unified annotation

  1. Single-line comments
<h1>HTML comment tags in detail</h1><! -- Article title -->
Copy the code
  1. Multiline comment
<! </p> </p> </p>
Copy the code

Label closing

  1. Non-closed labels must have start and end labels
<a href="demo.html">simple</a>
Copy the code
  1. The self-closing label must have no end label
<img src="demo.png" alt="demo"/>
Copy the code

Tags nested

Tag nesting in general, as long as you close and match the start and end tags correctly, this shouldn’t be a problem (just not conforming to the specification, but not causing rendering errors), but there are some situations we should be aware of.

  1. Interactive elements (A, button, select, etc.) cannot be nested within a element
<a>
  <a>aaa</a>
</a>
Copy the code

  1. Div, H1-H6, P, ul, OL, LI, DL, DT, DD, and form cannot be nested.

<p>
  <div>aaa</div>
</p>
Copy the code

Meta set

SEO optimization

Page keywords

<meta name="keywords" content="your tags" />
Copy the code

Page description

<meta name="description" content="150 words" />
Copy the code

Search engine indexing

All is adopted for external users. None is used for internal users.

<! -- all: Files will be retrieved and links on the page can be queried; None: Files will not be retrieved, and links on pages cannot be queried; Index: The file will be retrieved; Follow: Links on the page can be queried; Noindex: Files will not be retrieved; Nofollow: Links on pages cannot be queried. -->
<meta name="robots" content="all" />
Copy the code

IE Compatible Mode

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
Copy the code

This line of code can be found on almost every website, but what does it mean? Here’s a quick explanation. First, this TAB only works with Internet Explorer.

  • Ie = Edge refers to the latest version of rendering supported by this client. For example, IE9 renders in 9 mode, even if the user has set the compatibility mode of other versions of IE on the browser.
  • Chrome =1 is almost useless because it’s based on Internet Explorer users who download Chrome Frame, but people who download Chrome Frame don’t use Internet Explorer at all and Chrome Frame is not supported after 14 years. But it’s better to add.

Browser kernel

At present, many browsers in China use dual cores or even multiple cores. At this point it is best to specify which kernel we prefer to use.

<meta name="renderer" content="webkit">
Copy the code

Block Baidu transcoding

In baidu mobile search engine, PC web pages and mobile web pages are provided to users at the same time in order to better meet the needs of users. However, due to the influence of interaction, compatibility and traffic, the direct browsing experience of PC pages in mobile terminals is poor. Therefore, Baidu mobile search transcodes PC pages that lack alternative mobile resources to convert them into mobile pages suitable for mobile browsing, so that they can have a better browsing experience in mobile terminal browsers. In order to maximize the browsing experience of PC pages on mobile phones, transcoding removes the contents of PC pages that cannot be viewed on mobile browsers and improves interaction functions that are not applicable to mobile phones. This is the official statement, but in fact Baidu is very likely to transcode your page style lost, or give you an AD and so on. So what if you don’t want your site to be transcoded but still want mobile users to view PC pages? The no-transform protocol can be used. The no-transform protocol has the following two forms:

<! -- Old grammar -->
<meta http-equiv="Cache-Control" content="no-transform"/>
<! -- The new syntax, said to be more reliable, but in fact, even if all used, also not 100% transcoding -->
<meta http-equiv="Cache-Control" content="no-siteapp">
<! Tell Baidu when your page ADAPTS to mobile phone and PC, do not need him to help turn -->
<meta name="applicable-device" content="pc,mobile"/> 
Copy the code

Disable automatic translation

Disable Chrome automatic translation.

<meta name="google" value="notranslate">
Copy the code

Mobile Settings

viewport
<! -- width: width (value/device-width) (range: 200 to 10,000, default: 980 pixels) Initial scaling scale (ranging from >0 to 10) minimum-scale: indicates the minimum scaling allowed to the user. Maximum-scale: indicates the maximum scaling allowed to the user. User-scalable: Indicates whether the user can manually scale (no,yes) -->
<meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"/>
Copy the code

Ignore numbers automatically identified as phone numbers
<meta content="telephone=no" name="format-detection" />
Copy the code

Ignore identifying mailbox
<meta content="email=no" name="format-detection" />
Copy the code

other

It is not used in the project for various reasons, so it is placed in the column of “Other”, which does not mean that it is not important, but according to the project needs.

  • Mandatory portrait (not supported by all browsers, so afraid to use it in projects)
<! -- UC forced portrait -->
<meta name="screen-orientation" content="portrait">
<! -- QQ forced portrait screen -->
<meta name="x5-orientation" content="portrait">
<! -- UC mandatory full screen -->
<meta name="full-screen" content="yes">
<! -- QQ mandatory full screen -->
<meta name="x5-fullscreen" content="true">
Copy the code
  • WebApp Full-screen mode (offline application)
<! -- Enable WebApp full-screen mode -->
<meta name="apple-mobile-web-app-capable" content="yes" /> 
Copy the code
  • Hide the status bar/Set the status bar color (this only works when WebApp is in full screen mode)
<! - the value of the content for the default | black | black - translucent -- -- >
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Copy the code
  • Title added to the home screen (only available when WebApp full screen mode is enabled)
<meta name="apple-mobile-web-app-title" content="Title">
Copy the code
  • Disallow browser access to page content from local computer cache (disallow access to page content when not connected to the Internet)
<meta http-equiv="Pragma" content="no-cache">
Copy the code

conclusion

The above specifications are based on project usage scenarios. Here is a general template that can be used by most projects.


      
<html lang="zh-cmn-Hans">
  <head>
    <! -- Encoding format -->
    <meta charset="UTF-8" />
    <! -- SEO page keywords -->
    <meta name="keywords" content="your tags" />
    <! -- Seo page description -->
    <meta name="description" content="150 words" />
    <! -- Mobile display -->
    <meta name="viewport" content="Width = device - width, initial - scale = 1.0, the maximum - scale = 1.0, user - scalable = no"/>    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <! Render using the latest version of IE, or Chrome if the plugin is installed -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <! Multi-core browsers with limited use of WebKit kernel rendering -->
    <meta name="renderer" content="webkit" />
    <! -- Prohibit identifying phone number on mobile terminal -->
    <meta content="telephone=no" name="format-detection" />
    <! -- Disable mailbox recognition on mobile -->
    <meta content="email=no" name="format-detection" />
    <! -- Disable Chrome auto translation -->
    <meta name="google" value="notranslate">
    <! -- Prohibit baidu transcoding old version of grammar -->
    <meta http-equiv="Cache-Control" content="no-transform"/>
    <! -- Prohibit Baidu transcoding new syntax, it is said to be more reliable, but in fact even if all used, also may not 100% transcoding -->
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <! Tell Baidu when your page ADAPTS to mobile phone and PC, do not need him to help turn -->
    <meta name="applicable-device" content="pc,mobile"/>
    <! Search engine files will be retrieved, and links on the page can be queried.
    <meta name="robots" content="all" />
    <title>Document</title>
    <link rel="stylesheet" src="//xxx.com/index.css" />
  </head>
  <body>
    <h1>hello world</h1>
    
    <script src="//xxx.com.index.js"></script>
  </body>
</html>

Copy the code