HTML
1. Elements
Other names: label, mark
Overall: element (element)
Element=begin tag + end tag + element content + element attributes
Attribute = attribute name + attribute value
Classification of attributes
1) Local attributes: unique attributes of certain elements
2) Global attributes: common to all elements
Elements cannot be nested within each other
The elements are: parent element, ancestor element, descendant element, sibling element (have the same parent element)
Standard document structure
HTML: pages, HTML documents
<!DOCTYPE html>Document declaration: Tell the browser that the HTML standard used by the current document is HTML5.
If you do not write a document declaration, the browser will enter the weird rendering mode.
<html lang="en">
</html>
<html></html>Root element, a page can only have one at most, and this element is the parent element or ancestor element of all other elements
. There is no mandatory requirement to write this element in HTML5.
lang attribute: language, a global attribute, indicating which natural language the text used inside the element is written in
en stands for English, if you want to use Chinese, you should change en to cmn-hans, the official Chinese language, simplified Chinese
<head></head>
The document header, the content inside the document header will not be displayed on the page
<meta charset="UTF-8">
meta : the metadata of the document: additional information.
charet : Specifies the page content encoding
UTF-8 is a version of Unicode encoding
<title>Document</title>`
Page title
The elements in the head are not displayed on the page
<body></body>
The document body, all elements on the page that need to participate in the display, should be placed in the document body.
2. Semantic
What is semantic
-
Each HTML element has a specific meaning. For
example: a element: hyperlink
p element: paragraph
h1 element: first-level heading -
All elements have nothing to do with the display effect. The effect of the
elements displayed on the page should be determined by css.
Because the browser has default css styles, each element has some default styles.
Important: Which element to choose depends on the meaning of the content, not the displayed effect
3. Text element
The elements supported in HTML5 refer to several common text elements in the HTML periodic table
- h
h1~h6: indicates the first level to the sixth level - P
paragraph: paragraphs - span [no semantic]
has no semantics, only used for style settings - pre
blank folding: continuous blank characters (spaces, line breaks, tabs) in the source code will be folded into a space
when displayed on the page. The content that appears inside the pre element will be displayed on the page according to the source code format .
4. a element
Hyperlink
text link
<a href="https://baidu.com">
百度
</a>
image link
<a href="http://www.baidu.com">
<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png">
</a>
Achieve results:
Two more commonly used attributes
href attribute
hyper reference (reference): usually indicates the jump address
1. Jump address
2. Jump to an anchor point, the anchor link is a different position of a page
id attribute: the global attribute represents the unique number of the element in the document
target attribute
Indicates the position of the jump window.
The value of target:
_self: means open in the current page window, the default value
_blank: open in a new window
_parent: open the document in the parent window frame
_top: open the document in the top window
The links are divided into:
1. Normal link
2. Anchor link
3. Function link When
clicked, a certain function is triggered.
Anchor link realization:
Function link:
execute JS code: javascript;
send mail: mailto;
require mail sending software installed on the user's computer: exchange
Dial-up: tel:
requires the user to install dial-up software on the computer, or use the mobile terminal access
function link to achieve:
5. How to write the path
On-site resources and off-site resources
Site resources: resources of the current website (own)
Off-site resources: non-current website resources (other people's)
The format of the absolute path:
url address:
Protocol name: //host name: port number/path
schema://host:port/path
For example https://www.baidu.com/s
http://127.0.0.1:5500/HTML (including IP address)
Protocol name https, http, file (representing local file)
Host name: domain name, IP address
Port number: If the protocol is http, the default port number is 80; if the protocol is https, the default port number is 443
When the jump target and the current page have the same protocol, the protocol can be omitted
The format of the relative path:
Start with ./, ./ indicates the directory where the current resource is located
Relative path: ./ can be omitted
Relative path implementation:
6. Several other elements
1) Picture elements
img element
image abbreviation, empty element
src attribute: (source) writing path (absolute path or relative path)
alt attribute: When the image resource becomes invalid, the text of this attribute will be used instead of the image.
If the image can be displayed, the content in the alt will not be displayed
Used in conjunction with the a element (hyperlink)
and map element in conjunction with the
figure element
Code:
2) Multimedia elements
video
ontrols: control the display of controls, the value can only be controls
Some attributes have only two states:
1. Not written
2. Value is the attribute name, this kind of attribute is called Boolean attribute
Boolean attribute: In HTML5, you don’t need to write attribute values
autoplay: Boolean attribute,
muted: Boolean attribute, muted playback
loop: Boolean attribute, loop
preload: video is played when the page is loaded
width: player width
height: player height
src: URL of the video to be played
audio
autoplay: Boolean attribute,
muted: Boolean attribute, muted playback
loop: Boolean attribute, loop
preload: audio is performed when the page is loaded
width: player width
height: player height
src: URL to play audio
Because not all browsers support all media formats, you can specify multiple different media sources. For this reason, instead of specifying the src attribute in the tag, use one or more source elements
compatibility
1. Old browsers do not support these two elements
. 2. The audio and video formats supported by different browsers may be inconsistent
Because not all browsers support audio and video tags, a better solution is to have alternative content
3) List elements
Unordered list (most used)
ul:unordered list
Unordered lists are usually used to make menus or news lists.
Ordered list
ol: ordered list (represents the entire list)
li: list item (sub-list)
Definition list
Usually used for the definition of some terms
dl : definition list
dt :definition title
dd :definition description
4) Container element
Container element: This element represents a block area and is used to place other elements inside
div element (division area)
No semantics
Semantic container elements
header: usually used to indicate the page header, can also be used to indicate the head of the article
footer: usually used to indicate the footer, can also be used to indicate the end of the article
article: usually used to represent the entire article
section: usually used to indicate the section of the article
aside: usually used to represent the sidebar
CSS
1. Common style declarations
- color text color inside the element
- background-color element of the background element
- font-size The size of the text inside the element
Unit:
1). px: pixel can be simply understood as how many pixels the height of the text occupies.
2). em: relative unit, relative to the font size of the parent element.
Each element must have a font size. If there is no declaration, the font size of the parent element is used directly, and if there is no parent element (html), the base font size is used.
4. The font-weight
indicates the thickness of the text, which can be a number, the default value is
> strong, and the default is bold
5. font-family
text type:
only the font type existing on the user's computer is valid
6. font-style
Font style, usually use it to set italic
7. text-decoration
text decoration, text plus line
8. text-indent
represents the first line of text indent
9. line-height the height of
each line of text, the greater the value, the greater the value of each line of text The greater the distance,
the height of the line is set to the height of the container, which allows the single line of text to be vertically centered
. The height of the line can be set to a pure number, which represents the font size relative to the current element.
10. width
11. height
12. letter-space text gap
13. The horizontal arrangement of text inside the text-align element
2. Selector
Selector
The role of the selector: to help you accurately select the elements you want
Simple selector
- ID selector
- Element selector
- Class selector
- Unified selector
- Attribute selector Select the selector
based on attribute name and attribute value
/* 选中所有具有href属性的元素 */
[href]{
color: aqua;
}
- Select all elements
* {
color: blueviolet;
}
*Select specific elements
[href="https://www.xinlang"]{
color: blue;
}
- Pseudo-class selector
Certain state of certain elements selected
1). link: the state when the hyperlink is not accessed
2). visited: the state after the hyperlink has been visited
3). hover: mouse hover state
* 选中鼠标悬停时的a元素 */
a:hover{
color: red;
}
4). active: active state, mouse down state
a:active{
color: aquamarine;
}
- Pseudo element selector
<p>
上随处可见是<span>html</span>当初你的实力农村
</p>
span::before{
content:"《";
}
span::after{
content:"》";
}
3. Box model
box: box, each element will generate a rectangular area (box) on the page
Box model:
- Line box, the element whose display is equal to inline
- Block box, display element equal to block
The line box does not wrap in the page, and the fast box occupies a line
The block box set by the browser's default style sheet: container element, h1~h6, p
Common line boxes: span, a, img, video, audio
Components of the box
Whether it is a line box or a block box, it consists of the following parts, from the inside to the outside:
- Content
width, height, set the width and height of the box content
The content part is usually called the content of the entire box
Content-box
- Padding
The distance from the box border to the box content
padding-left、padding-right、padding-top、padding-bottom
padding: shorthand attribute
padding: up, right, down, left
Filling area + content area = padding
- Border
Border = border style + border width + border color
Border style: border-style
Border color: border-width
Border color: border-color
Border + padding area + content area = border box
- Margin
The distance from the border to other boxes
margin-top、margin-left、margin-right、margin-bottom
div{
width: 100px;
height: 100px;
background: #008c8c;
border: 10px dashed red;
padding:30px;
}
Compare inline elements, block elements, and inline block elements
Features of block elements: a
single line.
Height, width, outer margin, and inner margin can be controlled. The
default width is 100%
of the parent's width. It is a container and box, which can be used for inline or block element
text elements such as p, h1, etc. No other elementsFeatures of inline elements:
adjacent inline elements are on one line, and multiple lines can be displayed.
Direct setting of width and height is invalid. The
default width is the width of its own content. It
can only accommodate text or other inline elementsThe characteristics of inline block elements
are on one line with adjacent inline elements, but there will be blank gaps between them. One line can display multiple. The
default width is the width of its own content. Width
and height, outer margin, inner margin can be controlled
Regular flow
Regular flow layout
Regular flow, document flow, regular document flow, regular document flow
All elements, by default, belong to the regular flow layout
General rule: block boxes occupy one row, row boxes are arranged horizontally
Containing block: Each box has its containing block, which determines the arrangement area of the box.
Most cases: Note: cassette containing block for the content of its parent element cassette
block boxes
- The total width of each block box must be exactly equal to the width of the containing block
The default value of width is auto
The value of margin can also be auto, the default value is 0
auto: absorb the remaining space
Width absorption capacity is stronger than margin
If the width, border, inner margin, and outer margin are calculated, there is still space left, which will be absorbed by marign-right
In the regular flow, the block box is centered in its containing block, and the width can be fixed, and then the left and right marign are set to auto
- The auto value in the vertical direction of each block box
height: auto, adapt to the width of the content
marign: auto, means 0
- Percentage value
padding, width, and marign can be taken as percentage
All percentages above are relative to the width of the containing block
Percentage of height:
1) The height of the containing block is auto, the height setting of the child element depends on the width of the containing block, and the percentage setting is invalid.
2) The height of the containing block does not depend on the height of the child element, and the percentage is relative to the width of the parent element
- Combination of top and bottom margins
Two conventional flow block boxes: the upper and lower margins are adjacent and will be merged.
If both margins are set, take the maximum value