Introduction of HTML

  • HTML (Hypertext Markup Language)
  • Responsible for the structure of the three elements of the page
  • HTML uses tags to identify different parts of a web page
  • Hypertext refers to hyperlinks, which allow us to jump from one page to another

Computer base

  • Decimal (everyday use), the full 10 into 1

  • Binary (the base system of the computer), all data will be stored in binary form at the bottom of the computer

  • Octal (rarely used), 8 into 1

  • Hexadecimal (generally display a binary number, will be converted to hexadecimal), full 16-1

    0 12 3 4 5 6 7 8 9 A B C D E F 10 11 12… 1a 1b 1c 1d 1e 1f 20 …

A character encoding

All data is stored in binary form on a computer, and words are no exception

  • Encoding: The process of converting characters into binary code is called encoding
  • Decoding: The process of converting a binary into a character is called decoding
  • Character set: The rules used for encoding and decoding are called character sets
  • Garbled problems: Garbled problems can occur if the encoding and decoding character sets are different
  • Common character set
    1. ASCII (US)
    2. ISO88591 (Europe)
    3. GB2312 (China)
    4. GBK (Chinese GB extension)
    5. Utf-8 (universal code, common)

HTML tags

<! - content - >Comment tags

Used to explain the code, simple and clear

Shortcut keys: Ctrl+/ Command +/

<! Doctype html>

HTML5 document declaration

meta

Mainly used to set some metadata in the page

metaThe properties of the
  • charest: Specifies the character set for the page
  • name: Specifies the name of the data
  • content: Specifies the data content
  • http-equiv: defines a compile directive
nameThe properties of the
  • keywords: Indicates the keyword of a web page. You can specify multiple keywords at the same time
  • description: Specifies the description of the web site

head

The head of a web page, the contents of which do not appear directly on the web page, is used to help the browser or search engine parse the web page

title

Will be displayed as text on the hyperlink of the search results

body

Body is a child element of HTML that represents the body of the page, where all visible content in the page should be written

Special symbols

  • When you write multiple Spaces in a web page, the browser automatically resolves them to a single space by default
  • You can’t write special symbols directly
  • &nbsp;Spaces,&lt;Less than the number,&gt;Is greater than the number,&copy;Copyright symbol,<br>A newline

Semantic tag

In a page, HTML is specifically responsible for the structure of the page, so when using HTML tags, you should focus on the semantics of the tag, not its style

  • h1~h6: Title tag, six level headings, fromh1~h6Diminishing importance
  • hgroup: is used to group headings
  • p: a paragraph
  • em: Used to indicate an emphasis on the intonation of speech
  • strongImportant, important, important, important
  • blockquote: indicates a long reference
  • q: short reference

Benefits of semantics: 1. It is easy for other developers to read the code and understand the function difference of each module through different tags; 2. A page with a clear structure and clear semantics can have a better user experience. There is a clear structure in THE CSS style without loading money. 3. It is good for SEO, semantic is easy for search engine crawler to understand, and establishes good communication with error search engine, enabling crawler to crawl out more key and effective information; 4. Easy to read on other devices (such as screen readers, blind devices and mobile devices, etc.)

Regional labels

  • header: Page header
  • main: The body of the page
  • footer: Bottom of the page
  • navNavigation:
  • aside: Content related to the body (sidebar)
  • article: Independent articles
  • section: independent block
  • div: Indicates a block
  • span: Used to select text on a web page
List
  • ul: Unordered list
  • liItem list:
  • ol: Ordered list
  • Define a list
<dl>
  <dt></dt>
  <dd></dd>
</dl>
<! -- dl creates a list of definitions dt to represent the contents of the definition dd to explain the contents
Copy the code

ahyperlinks

  • Jump from one page to another page or to another location on the current page
  • You can nest any element except itself
<a href = "https://www.baidu.com">hyperlinks</a>
Copy the code
aThe properties of the
  • herf: Specifies the target path to jump to
    • The value can be the address of an external web site or write the address of an internal web site
    • When we need to jump to a page within a server, we usually use relative paths
    • Relative paths are generally used. /or../At the beginning
    • . /Indicates the directory where the current file resides, which can be omitted
    • ../Indicates the upper directory of the current file directory
    • #: as aherfProperty to bring the page back to the top
    • javascript:;As ahrefProperties when clicking on a hyperlink nothing happens
    • willherfAttribute set # Target element id attribute value, can jump to the specified location of the page
  • id: An ID attribute can be added to each tag, but no duplicate ID attribute can occur
  • target: Specifies where the hyperlink will be opened
    • _self: Default value, open on the current page
    • _blank: Opens on a new page

imgImage label

Use to introduce an external image to the current page

imgThe properties of the
  • src: Specifies the external image path
  • alt: Description of the image, which will be displayed if the image cannot be loadedaltTo identify the picture
  • width,height: Width and height, in pixels (px). If you change only one width and height, the other one will be scaled equally
Image format
  • Jpeg (JPG) : support rich colors, do not support transparent effects, do not support dynamic graphics
  • GIF: a single color image, a GIF
  • PNG: a complex transparent image with rich colors
  • Webp: Google’s new format for representing images on a page. It has all the advantages of other image formats, and it has very small files, but it’s not compatible
  • Base64: The image using Base63 encoding, the image can be converted to characters, through the form of characters to introduce the image, generally is some need to load together with the web page of the image will be used

iframeAn inline frame

  • Use to introduce another page to the current page
  • src: Specifies the path to the page to be imported
  • frameborder: Specifies the border of the inline frame

audioAudio files,videoVideo file

  • Use to introduce an external audio and video file to the page

  • Controls: Allows the user to control playback

  • Autoplay: Indicates whether toplay automatically

  • Loop: indicates a loop

  • In addition to specifying the path to external files via SRC, you can also specify files via source