The father of the HTML

HTML was invented in 1990 by Tim Berners-Lee, who was made A Commander of the Order of the British Empire (CBE) by the Queen in 2004 and received the Turing Award in 2017.

Sir Lee wrote the world’s first browser and server, inventing the WWW, HTML, HTTP and URL, in order to surf the web so that everyone could type in a URL and see a web page.

HTML hands type

Create a new index.html file in VScode and type it in English. , press TAB to quickly generate

   <! 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>
  </body>
  </html>
Copy the code
  • ! DOCTYPE HTML: tells the browser to write HTML. The browser supports more than HTML
  • HTML lang=”en” : indicates the HTML label. En is English and can be changed to zh-cn
  • The contents of the head are elements that are invisible to the user
  • The first line meta must not change, easy to garble. Utf-8 stands for file character encoding and is supported by all languages of mankind.
  • The second line meta tells IE the latest kernel
  • The third line of meta prevents interface zooming and is compatible with mobile phones
  • Title is the title of the page

Common table section labels

Represents a hierarchy of articles/books

  • h1~h6Headings, the larger the number, the smaller the font
  • sectionTopic content usually has a title, and if there is no title, section is not recommended. Typical application scenarios include document outline, document chapters, and numbered parts of papers.
  • p The paragraph
  • headerHead, such as article top and advertisement
  • footerFoot, such as adding a declaration at the bottom of the article, input in the code<footer>&copy; Copyright 2015 </footer> all Rights ReservedCopyright ©. All rights Reserved
  • articleIt’s a special section tag. When a piece of content is out of context and still stands on its own, it should be in the typical context of an article: forum posts, news or magazine articles, blog posts, user-submitted comments.
  • mainThe main content
  • asideSecondary content, common scenarios: Reference, navigation
  • divUsed only as styling or scripting tags

Global properties

Attributes that all tags have

  • classCategorize labels, for example<div class="middle bordered">In theheadTag matches class
<style>
   .middle{
      background: black;
      color:white;
   }
   .bordered{
      border:10px solid red;
   }
</style>
Copy the code
  • contenteditableAllows any element to be edited for use as your own editor. Such as<div class="middle bordered"contenteditable>
  • hiddenHidden content, you can use CSS to redisplay hidden content
  • idFunction similar to class, at the same time JS can obtain id, do not use id,id is the same does not report error, will be misleading, and in JS directly with the same global attribute name window element method, do not use ID
  • styleImplement style editor, priority is higher than CSS, you can use JS to set, if style,CSS, JS are written the same, the final effect is JS prevail, inline style priority
  • tabindexNo mouse, use the keyboard, use the number to control the TAB key selection order. Positive means order direction, 0 means last access, -1 means never find me
  • titleThe complete content is displayed at the cursor position

Tip: part of the content is displayed. If not, use ellipsis instead

style{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
Copy the code

Common content tags

  • ol+li: Ordered list
  • ul+li: Unordered list.
  • dl+dt+dd: Describes the list. Shortcut dl+ TAB. Dl is the list, DT is the described object, and DD is the description
  • pre: Preserves Spaces, carriage returns, and tabs in code.
  • code: change the font format, if the font has been set in VScode, the font is equal width.

Tip: Wrap the code with pre and list the code blocks individually

  • hr: Horizontal dividing line
  • br: a newline
  • a: Hyperlink to go to the page
  • emEmphasis emphasis on content, tone
  • strong: Highlight the importance of the content, indicating the importance of the content itself
  • quote: inline reference
  • blockquote: block reference, with newline effect