HyperText Markup Language (HyperText Markup Language), the full name of HTML, was invented by Tim Berners-Lee, the father of the World Wide Web, in the 1990s. It is a Markup Language used to structure Web pages and their content. When a browser visits a web page, it downloads HTML code from a server and renders the page.

HTML hands type

Create a new HTML file in the editor and type! By pressing Tab, Emmet automatically completes the basic structure of the HTML as follows:

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta <title>Document</title> </head> <body> </body> </body> </ HTML >Copy the code

represents a document type declaration that tells the browser how to parse the page.

The < HTML > tag is the root element of the page, and all other elements are its children. A web page can have only one < HTML > tag. The label lang indicates the default language of the web page. To display Chinese by default, set en to zh-cn.

Some meta information placed on a web page that does not normally appear on a web page.

  • <meta>To set up some metadata for the web page,<meta charset="UTF-8">Understand the character encoding of the current document (the character encoding declaration should be consistent with the actual character encoding used in the document, otherwise garbled characters will appear).
  • <meta http-equiv="X-UA-Compatible" content="IE=edge">The display tells IE to use the latest browser kernel.
  • < meta name = "viewport" content = "width = device - width, initial - scale = 1.0" >Disable zoom, compatible with mobile phones.user-scalable=nothiscontentTo disable scaling,name=viewport 的 metaThe label is used for viewport Settings.

*

is the title of the web page, which is displayed in the title bar of the browser window.

Common labels

Table chapter labels

To represent the page hierarchy, here are some common table chapter tags:

  1. ~

    defines headings from large to small.

  2. represents a separate section that contains a topic, usually a chapter of a web page.

  3. represents a separate structure within a document, page, application, or website.

  4. is used to represent the header of a web page or an article or block. A page can contain multiple

    , but a specific scene can contain only one

    .


  5. represents the end of a web page or article.


  6. represents the body of a web page. Only one page can be created.

  7. represents a paragraph in the text.

  9. is used for partitioning and does not semantically represent anything specific.

Labels for table contents

  1. <ol> 和 <li>

Ordered list, two tags to use nested

< ol > < li > list 1 < / li > < li > list 2 < / li > < li > list 3 < / li > < / ol >Copy the code

Render as follows

  1. <ul> 和 <li>

Unordered list, two tags to use nested

< ol > < li > list 1 < / li > < li > list 2 < / li > < li > list 3 < / li > < / ol >Copy the code

Render as follows

  1. <dl>, <dt>, <dd>

The < DL > tag is a list of descriptions, with terms defined by < DL > and terms defined by < DD >.

< dl > < dt > CPU < / dt > < / dd > < dd > the CPU < dt > < / dt > Memory Memory < / dd > < dd > < dt > Hard Disk < / dt > < / dd > < dd > Hard drive < / dl >Copy the code

Render as follows

  1. <pre>

HTML reduces successive Spaces or carriage returns to a single space. If you want to keep these Spaces, place them inside 

.
  1. <code>

Used to display computer code, the default isometric font display. If you want to show more than one line of code, put it inside 

.

  1. represents the dividing line.


  2. is used to wrap a line

  3. The tag is used to indicate a jump link.

  4. < em > and < strong >

  1. <quote> 和 <blockquote>


is an inline reference, and < blockQuote > is a block-level reference.

Global properties

Global attributes are attributes that any tag has. Here are some common global attributes:

  1. classAttribute is used to classify tags. A tag can have multiple tagsclass, separated by a space.
  2. contenteditableProperty allows the user to modify the content of an HTML page (the content of an HTML page is not editable by default).
  3. hiddenIf an element sets this property, it will not be displayed.
  4. idProperty defines a unique identifier for the entire document. It can be used to add styles to CSS and to get elements in JS.
  5. styleProperty to specify the CSS style of the current element. It has a higher priority than CSS, but is overwritten by JS.
  6. tabindexProperty allows the user to TAB through web elements. The property is a positive integer and will be executed in terms of 1, 2, 3… In order to traverse; Property value is 0, indicating the last access; If the value of the property is a negative integer, it indicates no access.
  7. titleAttribute is used to add additional description to an element that is displayed when the mouse hovers over the elementtitleProperty value of.