Summary of 27 April 2020 (II)

1. Supplement of element A

1.1. Anchor links

  • Jump to a specific location on a web page
  • a href=”#id”

1.2. The pseudo links

  • A link that does not specify a specific link address
  • What exactly do I need to do when I click on the link that I need to write the corresponding JavaScript code
  • Links can sometimes be used as buttons

1.3. The A element is combined with the IMG element

  • Jump to a new page
  • Download resources

Second, the URL – > input

  • The process of the browser to access https://www.baidu.com/img/bdlogo.gif

  • Domain name: www.baidu.com for easy memorization

  • Host address: 183.232.231.173

  • DNS: Resolves a domain name into a host address

  • Uniform Resource Locactor(URL)

  • A URL is the address and location of a resource. Every resource on the Internet has a unique URL

  • Through a URL, you can find a unique resource on the Internet

  • The basic URL format = protocol://hostname/path = Protocol ://host address /path

  • Protocol: Different protocols represent different resource search and transfer modes

  • Host address: IP address (domain name) of the host hosting the resource

  • Path: The location of the resource on the host

  • URL Common protocols:

    • HTTP: hypertext transfer protocol for accessing remote network resources in the format of http://
    • HTTPS: the secure version of HTTP
    • File: Accesses resources on the local computer in the format of file://
    • Mailto: Accesses an email address in the format mailto:
    • FTP: Accesses file resources on a shared host in the format of ftp://
  • More specifically, the URL format is:

    • protocol://hostname[:port]/path/; parameters? query#fragment
    • Port: indicates the port number. The value ranges from 0 to 65535. The default HTTP port number is 80 and the default FTP port number is 21
    • Query: Request parameters, data submitted to the server
    • Fragment: position of anchor point

3. Know about the CSS

3.1. What is CSS?

  • The role of CSS is: you can set the style of every element in the web page, make the web page more beautiful
  • A web page without CSS is just a bunch of text and images stacked side by side from top to bottom and left to right
  • CSS stands for Cascading Style Sheets

3.2. CSS brief history

  • CSS1 ->CSS2 -> CSS2.1->CSS2.2
  • CSS3: refers to the name of some CSS modules upgraded by CSS2.x. There is no complete CSS3

3.3. Common CSS properties

3.4. Official documents of the CSS

  • mdn
  • Caniuse.com Queries whether the CSS properties are available

3.5. Writing format of CSS styles

  • color: red
  • Colon: the style name is on the left, and the style value is on the right

4. CSS writing method

4.1.CSS provides three ways to apply CSS styles to elements

  • Inline style
    • Word-wrap: break-word! Important; “> < span style=” max-width: 100%; Attribute name: attribute value;” Directly inside the element tag
  • Document Style Sheet, Embed Style Sheet
    • You need to add a style element to the head element to write CSS attributes
  • External Style Sheets
    • Develop web features: structure and style separation
    • Link Introduce styles: rel=”stylesheet” href=”.. /css/style.css”
    • Style: @import url(./ CSS /style.css);
    • Both the link and style files need to be introduced after the important CSS file, because it will overwrite the same properties of the previous CSS file
    • Import other CSS files from CSS files: @import URL (./base.css);
    • The CSS file must specify the encoding set: @charset “UTF-8 “;

CSS base selectors

5.1. What is a CSS selector?

  • Follow certain rules to select the elements that meet the criteria and add CSS styles to them

5.2. Universal Selector

  • All elements *
  • Generally all elements do some general Settings, such as inside margins, margins
  • Low efficiency, try not to use

5.3. Type Selector

  • Label selector

5.4. Class selector

  • . Class name selection
  • An element can have multiple classes, separated by Spaces
  • Class name specification:
    • Try to know everything by name
    • When there are multiple words, what are used to connect them:
      • -connection: large-font
      • _ Connection: large_font
      • Hump connection: largeFont

5.5.ID selector

  • #ID
  • Emphasis: ID names should not be repeated on a page (code specification)

6. Common CSS properties

  • Color: foreground color (text color)
  • Font-size: text size
  • Background-color: indicates the background color
  • Width: the width of the
  • Height: height
  • div{outline: 2px solid green ! important}

Seven, color space RGB

RGB: 7.1.

The decimal system:

  • red: 0-255
  • green: 0-255
  • blue: 0-255
  • alpha: 0-1
    • 1 opaque
    • 0 transparent
  • A color is represented by one byte, so the maximum value is 255
  • Transparent: indicates that RGB and alpha are 0

Hexadecimal:

  • #FF0000
  • #00FF00
  • #0000FF

Eight, shortcut key supplement

8.1. Select multiple contents at a time:

  • Alt + mouse click
  • Alt + Shift + drag

Nine, label semantic

9.1. What is semantic tag?

  • When selecting tags, try to make sure that each tag has the correct semantics
  • Although many tags can also be used interchangeably, it is important to observe “tag semantics”
  • For example, use strong to achieve the functions of A and IMG

9.2. Benefits of semantic tags

  • Easy code maintenance
  • Reduce communication costs between developers
  • Enables speech synthesizers to correctly identify the purpose of web elements so that they can react correctly
  • Enable search engines to correctly identify important information

Conclusion: Use the most appropriate labels to do the most appropriate things