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