Let’s start with a section of vscode to generate html5 code

<! DOCTYPEhtml>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
</head>
<body>
  <header>
     <div>
       <div<p>* 111 * 2222 *</p></div>
        <ul>
          <li>yi</li>
          <li>2</li>
          <li>3</li>
        </ul>
     </div>
  </header>
</body>
</html>
Copy the code

1. What is the meaning of DOCTYPE?

  • Let the browser render in standard mode
  • Let the browser know the validity of the element

2. Differences between HTML, XHTML and HTML5 (Will anyone ask that in 2021)

  • HTML belongs to SGML. HTML was released between 1994 and 1997, with four versions, 1.0-4.0. After 4.0, THE W3C committee decided that the syntax was not strict enough and switched to XML
  • XHTML belongs to XML, and its syntax is more strict than HTML4.0. It requires that all elements and attributes must use lowercase letters, attribute values must be quoted, and each tag must have a corresponding closing tag
  • HTML5 is part of the latest HTML specification and is less stringent than XHTML

3. What are the new features of HTML5

  • New semantic elements. For example, the header, footer, section, value, the article
  • Form to enhance

Input attribute enhancement

 <input placeholder="Default prompt when there is no input" autocomplete="on"/> <! -- Auto complete -->
  <input autofocus value="Automatic focus capture"/>
  <input list="names" placeholder="Predefined options" /> 
  <datalist id=names>
    <option value="zhangsan" >
    <option value="lisi" >
    <option value="wangwu" >
  </datalist>
Copy the code

Input enhancement

<input type="url" /> <input type="color" /> <input type="date" /> <! --datetime,month,week,time--> <input type="email" /> <input type="number" /> <input type="range" />Copy the code

  • The new API local storage, graphics, audio, video, sessionStorage, SVG, canvas, audio, and video.

4. What is the meaning of semantics

  • Make it easier to understand
  • Let the machine better understanding (search engine) | creeper SEO optimization

5. Which elements can be self-closed

  • The input tag
  • meta link
  • br hr
  • img

6. Relationship between Html and Dom

  • The Dom is parsed from Html
  • JS maintains the DOM

7. The function of the form element

  • Submit the form directly
  • Easy form validation
  • Third-party libraries can directly extract the value of the form