HTML Notes for Beginners

Who invented HTML

HTML Hyper Text Marked Language was created in 1990 by Tim Berners Lee, inventor of the World Wilde Web (WWW).

Two, HTML should start how to write

Here is an initial HTML framework, where:

  • <! DOCTYPE html>: Document type that tells the browser to parse in HTML format
  • <html lang="zh-CN">: HTML tag, indicating that the site is In Chinese
  • <head></head>The head of the site, it’s all hidden properties
  • <meta charset="UTF-8">The character encoding of the file
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">Tell IE to use the latest kernel
  • < meta name = "viewport" content = "width = device - width, initial - scale = 1.0" >Disable zoom, compatible with mobile phones
  • <title>Document</title>The title of the website
  • <body></body>Can understand the body of the site, all the content is in it
<! 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

Three, commonly used table chapter labels

  • <h1></h1>Title, level 1 title, H1 ~ H6 and so on
  • <section></section>Chapters,
  • <article></article>Articles. A website may contain multiple articles
  • <p></p>The paragraph
  • <header></header>The head
  • <footer></footer>The foot
  • <main></main>The main content
  • <aside></aside>lateral
  • <div></div>division

What are the global attributes

  • classThe category of the tag is equivalent to giving the tag a name
  • contenteditableIndicates that the contents of this tag can be modified
  • hiddenSet the label to hide
  • idAlso equivalent to the name of the tag, generally not, when using JS, if the content of the ID in the system some global variable name will cause to obtain the ID
  • styleTag styles. If a tag is edited in CSS, tag properties, and JS at the same time, they call js> Tag > CSS in priority
  • tabindexBefore the mouse is used, the selected content can be switched by keys on the keyboard. The priority of switching is set by numbers, where -1 indicates that the selected content is not selected, and 0 indicates that the selected content is selected last
  • titleWhen the content of a TAB is too long, the part of the page that is out of the page is represented by an ellipsis. After setting the TAB, when the mouse moves over the omitted content, all the content in the title will be displayed

Five, commonly used content labels

  • ol+li(ordered list + list item)An ordered list
  • Ul +li (Unordered list + List item)Unordered list
  • Dl + DT + DD (Description list+term+data)inddIn the facedtThe contents are explained
  • preShort for Preview, the Pre keeps everything, including Spaces, carriage returns, tabs…
  • hrThe divider
  • brA newline
  • aThe link label
  • emHighlight content that needs to be read by the user
  • strongPresentation text is very important and is usually shown in bold
  • codePresent a piece of computer code. By default, it is displayed in the browser’s default monospaced font.
  • qRepresents a closed and short inline reference text. This tag is used to refer to short text
  • blockquoteThe text that represents it is quoted. This part of the content is usually indented when rendering