HTMLHypertext Markup Language EnglishHyperText Markup Language, hereinafter referred to as:HTMLInvented by Sir Tim Berners-Lee around 1990, it is a markup language for creating web pages, similar to Markdown.

First, grammar overview

1. <! DOCTYPE html>

  • Is a document type that tells the browser: Please parse me as you parse HTML

2.<tag attr=value> Contents </tag>

  • Attribute values need to be quoted as follows:
  1. It is a common character without quotation marks.
  2. The attribute name containsSpecial characters, for example, space, use quotation marks, for example<div id="a c fun">hello world</div>

3. <tag attr> Contents </tag>

  • Code examples:<input type="checkbox" checked>
  • Debugging result:

Note: Whenever chekced is present, the check box will be checked, even if checked=”false” or checked=” XXXXX”

4. <tag attr=value>

  • The label is automatically closed without further writing</tag>And you don’t need to add a slash<tag attr=value />

Problem of 5.

  • Does the label case differ?

    • A: There is no difference in function, but it is best to use lowercase

  • Where can I query HTML information?

    • A: Google MDN + tag

Two, HTML hand – up

  • Set the web language to Chinese<html lang="ch-ZN">; English<html lang="en">
  • File not saved:
  • Document type:<! DOCTYPE html>
  • File character encoding:<meta charset="UTF-8">(UTF-8Support all human languages)
  • Using the latest IE kernel: <meta http-equiv="X-UA-Compatible" content="IE=edge">
  • To disable zooming on the phone:< meta name = "viewport" content = "width = device - width, initial - scale = 1.0" >
  • Page title:<title>Document</title>

Chapter labels

  1. Headings H1 ~ H6

  2. Chapter section

  3. This article article

  4. Paragraph p

  5. The head the header

  6. Foot footer

  7. Main contents

  8. Side branch aside

  9. Divide the div

<! DOCTYPEhtml>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
      <header>This is the AD at the top</header>
    <div>
        <main>
            <h1>The title</h1>
            <section>
                <h2>The first chapter</h2>
                 <p>Today you learned the basics of HTML and the use of some common tags</p>
            </section>
            <section>
                <h2>The second chapter</h2>
              <p>Today you learned the basics of HTML and the use of some common tags</p>
            </section>
            <section>
                <h2>The third chapter</h2>
               <p>Today you learned the basics of HTML and the use of some common tags</p>
                <section>
                    <h2>1.1</h2>
                    <p>Today you learned the basics of HTML and the use of some common tags</p>
                </section>
            </section>
        </main>
        <aside>Reference materials</aside>
    </div>
    <footer> &copy;Copyright tylyf all Rights Reserved</footer>
</body>
</html>
Copy the code

Global properties

Attributes that all tags have

  • classTo classify elements, usually to set a class of the same style. There can be more than one
   <div class="name1 name2"></div>
Copy the code

  • Id specifies the name of an element. It is used in conjunction with js

  • Contenteditable allows elements to be edited

  • Hidden makes the element disappear, precedence over display None

  • The style of the style element

  • Tabindex Controls the order in which the TAB key is used to switch elements, with the special value 0 indicating that the last element is selected. -1 indicates that the switch will not be switched.

  • The title of the title element is visible over the mouse

5. Labels that represent content

  • Ol + Li The default serial number is 1, 2, 3, 4…… Ol Attribute: type Indicates the serial number. Five attribute values are as follows: 1 A A(common) I I

              <ol type="A" start="3">      <! -- Ordered list serial number type uppercase letter starting with the third C -->
                  <li>Have a meal</li>
                  <li>Go to bed</li>
                  <li>Play doug</li>
                  <li>Drink lots of water</li>
              </ol>
Copy the code

  • Ul + LI unordered list

       <ul>    <! -- Unordered list -->
              <li>Have a meal</li>
              <li>Go to bed</li>
              <li>Play doug</li>
              <li>Drink lots of water</li>
           </ul>
Copy the code
  • dl + dt + ddDescribe the list
          <dl>
                 <dt>Small European</dt>    <! -- The term described -->
                 <dd>Grow handsome</dd>   <! -- Description -->
                 <dd>Sing good to listen</dd>
                 <dd>rich</dd>
                 <dd>Good code</dd>
          </dl>
Copy the code

  • Pre – wrapped content Spaces, carriage returns and tabs can be retained on the page

     <pre>This is a bunch of space TAB carriage returns</pre>
Copy the code

  • Hr horizontal separation line

  • Br Newline label

  • A Hyperlink to the url

<a href="http://www.baidu.com" target="_blank">The baidu</a>
Copy the code

  • Em emphasizes content subjectively and has italics

  • Strong Important Content

  • Code writes code, where the code letters are the same width

     <code>console.log("hello world!")</code>
Copy the code

  • Quote Inline quote

  • Blockquote Block-level reference