1. Introduction to HTML

The full English name of HTML is Hyper Text Markup Language, which is a Markup Language. It includes a series of tags. These tags unify the format of documents on the network and connect scattered Internet resources into a logical whole. HTML text is descriptive text composed of HTML commands that describe text, graphics, animations, sounds, tables, links, etc.

HTML is a markup language created by Web inventor _Tim berners-lee_ and colleague _Daniel w. Connolly_ in 1990. A web page is made up of elements that are described using HTML tags and then displayed to the user through browser parsing.

2. Start code

<! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, /> <title> This is my first page title </title> </head>Copy the code

Brief description:

  • <! DOCTYPE html>Indicates the document type description.

At the top of the document, before the < HTML > tag.

  • <html lang="en">Used to define the language in which the current document is displayed.

En stands for English and zh-CN stands for Chinese.

  • <meta charset="UTF-8" /> Representation character encoding

To process various characters accurately, the computer needs to carry out character coding so that the computer can recognize and store various characters. The actual encoding method should be the same as the encoding method specified in the HTML file; otherwise, garbled characters may occur.

Utf-8 basically contains all the characters needed by all countries in the world, generally using the “UTF-8” encoding.

  • < meta name = "viewport" content = "width = device - width, initial - scale = 1.0" >

Width =device-width specifies the size of the viewport to be the width of the device. Initial-scale =1.0 specifies that the page should not zoom in the initial state and take up the entire screen.

  • <html>

The < HTML > tag tells the browser that this is an HTML document. The < HTML > tag is the outermost element in an HTML document. The < HTML > tag is all other HTML elements (except
tag).

  • <head>

The element is a container for all the header elements.

The element must contain

, which can contain scripts, styles, meta information, and much more.

Content placed inside does not appear on the web page and is usually prepared for rendering.

  • **<title>**Title of document.
  • **<body>**Define the body of the document. The element contains all the content of the document. The page content is basically put inside the body

3. Commonly used chapter labels

  • H1 ~ h6 title

Short for head, the title of a web page. The importance decreased from H1 to H6.

The default format is bold, h1 is the largest, H6 is the smallest, and each H tag is on its own line.

  • Section section

defines an area of the document, indicating that the content is a whole.

  • The article articles

defines independent content, which can be used to represent a single article, and can be used to contain multiple < sections >.

  • P paragraphs

represents a Paragraph of text. P is short for Paragraph, which has a gap between paragraphs. It is a block-level element.

  • Header Header

The

tag defines the header of a document or a section of the document, usually used as an introduction or navigation link bar.

Within a single document, you can define more than one

  • Footer footer

The

tag defines the footer of a document or part of a document. In a typical case, this element would contain the name of the document author, copyright information about the document, links to terms of use, contact information, and so on.

  • Main Contents

The


tag is used to specify the body content of the document.

  • aside Lateral content

  • Div division

The

tag defines a single area in an HTML document. Often used with CSS to lay out web pages.

4. Global properties

Attributes that are common to all tags in HTML are called global attributes.

  • class

The class attribute defines the class name of the element. A label can have multiple class names, separated by Spaces.

  • Contenteditable: editable

You can specify whether the element content is editable.

Tip: You can edit styles and tweak code directly on a web page using the Contenteditable and style tags and display attributes.

The following is an example:

<body> <style contenteditable> style { display: block; } .a { color: blue; } ul{ color:red; } < / style > < h1 > a brief personal introduction < / h1 > < h2 class = "a" > television works < / h2 > < ul > < li > xianjian wonder pass 1 < / li > < li > xianjian wonder pass 3 < / li > < / ul > < / body >Copy the code

Effect:

  • Hidden hidden:

Can be used to hide a page element, which can be displayed by display:block

  • id

Defines a unique identifier for the entire document. But HTML allows execution without error even if the same ID is present. You are not advised to use the ID attribute unless necessary.

  • Tabindex: indicates the label index

The TabIndex property controls the order in which you switch between sections of a web page using the TAB key.

The value can be set to a positive integer, toggle access in ascending order, or it can be discontinuous.

Note:

There are two special values, 0 to indicate that the last element to be accessed by Tab.

If the value is set to -1, the element is inaccessible to tabs

  • Style Inline style

The style attribute specifies the inline style of the element. The priority is the highest.

  • The title title

The title attribute specifies additional information about the element. Information is displayed when you hover over the element.

5. Content labels

  • Ol + Li ordered list

Ol is the abbreviation of ordered list, which is combined with

  • . Ordered list is a list with an ordered order, and its items are defined in a certain order.
    • Ul + LI does not require a list
      is an abbreviation of unordered list. It is used in combination with

    • . There is no order level between the items of the list.
    • dl + dt + dd Define a list

    Definition lists are often used to explain and describe terms or nouns, dl for description lists, DT for description objects, and DD for description content

    (Discrition list + Description term + data)

    • Pre Pre formatted text

    The 

     tag defines pre-formatted text. Pre stands for Preview.

    The text enclosed in the 

     tag element retains Spaces and carriage returns.
    • code

    The font inside code is equal in width

    • Hr: Horizontal line

    Horizontal, short for horizontal, displayed as a horizontal line on a web page.

    • Br: a newline

    Newline tag, short for break.

    • Em: emphasis on

    Define the text to be emphasized. An abbreviation of emphasis. The default style is italic.

    • Strong: emphasis on

    Define important text to indicate the importance of the content itself. The default style is bold.

    • Q: Inline reference

    Inline reference. Browsers often insert quotation marks, short for quote, around such references.

    • Blockquote: block-level reference

    Block-level references, browsers typically indent < blockQuote > elements.

    • A hyperlink

    Short for anchar, it has two main properties.

    <a href=" target "target=" target "> text or image </a>

    Href: The URL used to specify the target of the link

    Target: How the link page is opened.

    _self is the default value, indicating that the link is opened in the current interface.

    __blank means to open the link in a new window.