Character Encoding
All data is stored in binary when stored in the computer, and text is no exception. Convert to binary when saving, convert to character when reading
character set
The rules used for encoding and decoding. For example, let a correspond to 1, and b correspond to 2. Common character sets: ASCII, GB2312, UTF-8 (the character sets used in development are all UTF-8), etc.
<head> head
Help browsers or search engines to parse web pages
< meta>
The <meta> tag is used to set the original data (underlying data) of the webpage, the metadata is not for users to see
- charset: Specify the character set of the web page
- name: the name of the specified data
- content: the content of the specified data
// name中的keywords指的是搜索网站的关键字，也就是可以用content中的abc在浏览器中搜索的关键词
<meta name="keywords" content="abc">
// name中的description指的是这个网站的描述，对应的内容在content中。网站的描述会显示在搜索引擎的搜索结果中
<meta name="description" content="这是一个...的网站">
// 将页面重定向到另一个网站
// content 中的内容指的是3s之后跳转到另一个网站
<meta http-equiv="refresh" content="3; url=https://www.baidu.com/">
// title标签的内容是作为搜索结果的超链接上的文字显示
<title> ddddd </title>
-
Block elements
In web pages, block elements are generally used for layout -
Elements in the line
- Inline elements are mainly used to wrap text. In general, inline elements will be placed in block elements, but block elements will not be placed in inline elements
- Basically anything can be put in the block element
- No block elements can be placed in the P element
-
When the browser parses the webpage, it will automatically correct the non-compliant content in the webpage:
- The label is written outside the root element
- The block element is nested in the p element
- Child elements other than head and body appear in the root element
-
Hyperlinks
- Set the href attribute of the hyperlink to # and click to return to the top
- You can jump to the specified position of the page, just set the attribute value of href to
#目标元素的id属性
<a href="#" Top>
// 跳转到id为bottom的内容处
<a href="#bottom" Top>
Introverted frame ifream
Used to introduce another page to the current page
<iframe width="800" src="https://www.qq.com"></iframe>
Selector
Common selectors
Element selector
class selector
id selector
Compound selector
- Intersection selector
Select elements that meet multiple conditions at the same time, such as in the code below divand red
⚠️ If there is an element selector in the intersection selector, it must start with the element selector (it must div.rednot be red.div)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.red{
color: red;
}
div.red{
font-size: 30px;
}
</style>
</head>
<body>
<div class="red">div</div>
<p class="red">p</p>
</body>
</html>
- Union selector
Select elements corresponding to multiple selectors at the same time
h1, div{
color: red;
}
#red, p{
color: red;
}
Relationship selector
- Child element selector
Select the specified child element of the specified parent element
div > p{
color: red;
}
- Descendant element selector
Select the specified descendant element within the specified element
div span{
color: red;
}
In contrast, the descendant element selector has a larger range than the child element selector
- Sibling element selector
// 选择p标签后面的那个span
div + span{
color: red;
}
// 选择p标签后面的所有span
div ～ span{
color: red;
}
Attribute selector
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div[title]{
color: red;
}
p[title="dddd"]{
color: aquamarine;
font-size: 30px;
}
h3[title ^= "hhhh"]{
/* 选择以指定值开头的属性，这里包括hhhh和hhhhii */
color: coral;
}
h5[title $= "jjjj"]{
/* 选择以指定值结尾的属性，这里包括jjjj和kkjjjj */
color: crimson;
}
h2[title *= "mmmm"]{
color: teal;
}
</style>
</head>
<body>
<div title="aaaa">div</div>
<div title="bbbb">div</div>
<div title="cccc">div</div>
<p title="dddd">p</p>
<p title="eeee">p</p>
<p title="ffff">p</p>
<h3 title="gggg">span</h3>
<h3 title="hhhh">span</h3>
<h3 title="hhhhii">span</h3>
<h5 title="jjjj">span</h5>
<h5 title="kkjjjj">span</h5>
<h5 title="llll">span</h5>
<h2 title="mmmm">span</h2>
<h2 title="nmmmmn">span</h2>
<h2 title="oooo">span</h2>
</body>
</html>
Pseudo-class selector
Pseudo-classes are non-existent classes or special classes, used to describe the special state of an element (such as: the first child element, the element being clicked, the element moved by the mouse), the pseudo-class generally uses the :beginning
ul>li:first-child {
color: aquamarine;
}
ul>li:first-child {
color: aquamarine;
}
/* 选中偶数位 */
ul>li:nth-child(2n){
color: tomato;
}
/* 选中偶数位 */
ul>li:nth-child(even){
color: tomato;
}
/* 选中奇数位 */
ul>li:nth-child(2n+1){
color: tomato;
}
/* 选中奇数位 */
ul>li:nth-child(odd){
color: tomato;
}
以上所有的伪类都是根据所有的元素进行排序的
Of course, there are the following, which are sorted in the same type of elements :
- first-of-type
- last-of-type
- nth-of-type
- …
:not
// 选中ul下面所有的li，除了第三个
ul>li:not(:nth-child(3)) {
color: red;
}
Hyperlink pseudo-class
The status of the hyperlink:
- Visited
- Never visited
/* link代表没访问过的链接 */
a:link{
color: burlywood;
}
/* visited代表访问过的链接 ，由于保护隐私的原因，visited这个伪类只能设置链接的颜色，大小等其他的都不能设置*/
a:visited{
color: violet;
}
/* 鼠标移入的状态 */
a:hover{
color: teal;
}
/* 鼠标点击的状态 */
a:active{
color: steelblue;
}
Pseudo element selector
Pseudo-elements represent some special elements (special locations) that do not exist on the page.
Use the ::beginning
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/* 表示第一个字母 */
p::first-letter{
font-size: 30px;
}
/* 表示第一行 */
p::first-line{
background-color: thistle;
}
/* 表示选中的元素 */
p::selection{
background-color: teal;
}
/* 通过 ::before 和 ::after添加的内容在页面是不能用鼠标来选中的，因为这些是通过css添加的*/
/* 必须结合content来使用 */
/* 元素的开始 */
div::before{
content: "abc";
color: aquamarine;
}
/* 元素的结束 */
div::after{
content: "def";
color: cadetblue;
}
</style>
</head>
<body>
<div>
Hooray! It's snowing
</div>
<p>
Hooray! It's snowing! It's time to make a snowman.James runs out. He makes a big pile of snow. He puts a big snowball on top. He adds a scarf and a hat. He adds an orange for the nose. He adds coal for the eyes and buttons.In the evening, James opens the door. What does he see? The snowman is moving! James invites him in. The snowman has never been inside a house. He says hello to the cat. He plays with paper towels.A moment later, the snowman takes James's hand and goes out.They go up, up, up into the air! They are flying! What a wonderful night!The next morning, James jumps out of bed. He runs to the door.He wants to thank the snowman. But he's gone
</p>
</body>
</html>