1. Liens connexes
1.1 Lien de téléchargement de Visual Studio Code:
https://code.visualstudio.com/
1.2 Tutoriel d'installation de Visual Studio Code:
https://blog.csdn.net/weixin_37590454/article/details/89436577
1.3 Lien de téléchargement de Google Chrome:
https://www.google.cn/chrome/index.html
1.4 Lien de saisie en ligne:
https://dazi.kukuw.com/typing.html?t=4b95b76db503e973ae572f69ac1036d9
2. Fichier de création de code VS
2.1 Création directe
Créez un dossier et faites glisser l'icône de code directement pour ouvrir le fichier directement dans le code.
Le dossier est affiché dans l'Explorateur. (Explorateur: ctrl + shift + E)
2.2 Raccourci
Comme le montre la figure, les quatre étiquettes sont: nouveau fichier, nouveau dossier, actualiser le gestionnaire de ressources et réduire le dossier dans le gestionnaire de ressources.
Créez un nom de dossier pour .htmlterminer. <!--注释-->Format des notes :.
Le dossier créé se termine par .css. /*注释*/Format des notes :.
3. Éléments et étiquettes
3.1 Éléments
1. Éléments au niveau du bloc: vous pouvez définir la largeur et la hauteur, occuper une ligne et organiser verticalement (la largeur par défaut est de 100% et la hauteur par défaut est la hauteur du contenu).
2. Eléments en ligne: la largeur et la hauteur ne peuvent pas être définies, et ils sont disposés horizontalement (la largeur et la hauteur par défaut sont la largeur et la hauteur du contenu).
3. Éléments de bloc en ligne: la largeur et la hauteur peuvent être disposées horizontalement.
3.2 Les trois éléments peuvent être transformés l'un en l'autre
转块级 display：black
转行内级 display：inline
//转行内级必须有内容，因为行内级元素宽高为内容宽高，默认值为零看不见效果。//
转行内块级 display： inline-block
3.2.1 Exemple de transfert en bloc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 100px;
background-color: chocolate;
display: inline;
font-size: 50px;
}
.box1{
width: 200px;
height: 100px;
background-color: cyan;
display: inline;
font-size: 20px;
}
</style>
</head>
<body>
<div class="box">
块转行内内容不能为空
</div>
<div class="box1">
因为行内不能设置宽高，默认为零。
</div>
</body>
</html>
3.2.2 La différence entre au sein du transfert et au sein du transfert (le premier transfert est rapide, le deuxième transfert est à l'intérieur du bloc)
3.3 Balises communes
<body>
<div>自定义标签</div>
<h1>标题标签1</h1>
<h2>b标题标签2</h2>
<p>段落标签</p>
<br><!--可实现行内换行-->
<span>行内标签</span>
</body>
Exemple:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div>第一个块</div>
<div>第二个块</div>
<div>第三个块</div>
<span>第一个行内</span>
<span>第二个行内</span>
<span>第三个行内</span>
</body>
</html>
3.4 Étiquettes et styles
(Priorité: style plus en ligne> style plus en ligne)
3.4.1 Styles en ligne
<body>
<div style="front-size: 30px;width: 100px; height: 200px;">
</body>
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div style="font-size: large;color: blue;height: 100px;width: 200px;background-color: burlywood;">第一个块</div>
<div>第二个块</div>
<div>第三个块</div>
<span>第一个行内</span>
<span>第二个行内</span>
<span>第三个行内</span>
<p style="font-size: 50px;color:black;width: 300px;height: 400px;background-color: chocolate">这个是P标签</p>
</body>
</html>
3.4.2 Style plus en ligne
(Priorité: sélecteur d'id> sélecteur de classe> sélecteur de balises> sélecteur de lien)
1. Sélecteur de balises plus style
<head>
<style>
ddd{
width: 15px;}
/<style>
</head>
2. Sélecteur de classe plus style
<head>
<style>
.ddd{
width: 15px}
</style>
</head>
3. sélecteur d'identifiant (unique) plus style
<head>
<style>
#ddd{
width: 15px}
</style>
</head>
Exemple
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.aaa{
color: red;font-size: 20px;width: 200px;height: 60px;background-color: green;}
#ggg{
color: wheat;font-size: 30px;width: 400px;height: 40px;background-color: blue;}
div{
color: orchid;font-size: 50px;width: 400px;height: 80px;background-color: brown;}
</style>
</head>
<body>
<div class="aaa">第一个块</div>
<div class="sss">第二个块</div>
<div class="ddd">第三个块</div>
<span class="fff">第一个行内</span>
<span class="ggg">第二个行内</span>
<span class="aaa">第三个行内</span>
<p>这个是P标签</p>
</body>
</html>
4. sélecteur de lien plus style
1. Créez d'abord un .cssdossier à l'emplacement actuel et headutilisez l'emplacement relatif du fichier link语句importé .cssdans le fichier (chemin d'emplacement relatif: l'emplacement ./au-dessus de l'emplacement actuel ../)
<head>
<link rel="stylesheet" href="./1--waibu.css">
</head>
2. .cssModifiez le style dans le dossier créé
.sss
{
color: red;font-size: 70px;
width: 700px;height: 500px;background-color: black;
}
3.5 Exemple de réduction de hauteur (flottant à gauche et à droite)
flotter:
dsfds{
float：right}
wada{
float：left}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.aaa{
color: red;font-size: 20px;width: 100px;height: 60px;background-color: green;}
#ggg{
color: wheat;font-size: 30px;width: 100px;height: 40px;background-color: blue;}
div{
color: orchid;font-size: 50px;width: 100px;height: 80px;background-color: brown;}
.ddd{
float: right;}
.sss{
float: right;}
</style>
<link rel="stylesheet" href="./1--waibu.css">
</head>
<body>
<div class="aaa">第一个块</div>
<div class="sss">第二个块</div>
<div class="ddd">第三个块</div>
<span class="fff">第一个行内</span>
<span class="ggg">第二个行内</span>
<span class="aaa">第三个行内</span>
<p>这个是P标签</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 200px;
height: 100px;
background-color: chocolate;
display: inline;
text-align: center;
font-size: 50px;
}
.box1{
width: 200px;
height: 100px;
background-color: cyan;
display: inline;
}
</style>
</head>
<body>
<div class="box">
123456
</div>
<div class="box1">
</div>
</body>
</html>