Record de croissance front-end dès le premier jour

Cet article a principalement écrit les aspects suivants:
1. Le contenu du front-end
2. Les navigateurs communs et leurs noyaux
3. La structure de base et les balises de html
4. L'utilisation des balises image img
5. Plusieurs chemins relatifs communs en html

1. Introduction

Le frontal comprend principalement les trois contenus suivants:
1. html: le texte, les images, les zones de saisie, les boutons, l'audio et la vidéo qui existent réellement dans la page Web appartiennent à la catégorie html
2. css: est le contenu qui décore le HTML
3. javaScript (appelé js): le contenu de l'interaction dans la page Web est généralement js
Navigateurs courants et leurs noyaux:
1. IE: noyau trident
2. Firefox: noyau gecko
3. safari: noyau webkit
4. Chrome: le noyau clignotant de la branche de Webkit
Normes
Web Les normes Web sont un ensemble de normes formulées par le World Wide Web Consortium (W3C) pour normaliser l'écriture Web. Il comprend principalement les contenus suivants:
1. Structure: html
2. Performance: css
3. Comportement: javascript

Deux, HTML

Introduction au
HTML HTML (Hyper Text Markup Language): Hypertext Markup Language, qui est principalement utilisé pour décrire le texte, les images, les boutons et tout autre contenu dans les pages Web via des balises HTML.
Apprendre le HTML, c'est apprendre les différentes balises / balises / éléments qu'il contient。

balises de base html

	    <!DOCTYPE html>  
	    <html lang="en">
	    <head>
	        <meta charset="UTF-8">
	        <title></title>
	    </head>
	    <body>     
	    </body>
	    </html>

Explication des balises HTML de base
1. <! DOCTYPE html>: Déclaration du type de version, indiquant au navigateur dans quelle version de la langue vous écrivez
2. <html> </html>: la balise racine de la page Web, y compris la balise head <head> </head> et la balise body <body> </body>
3. <head> </head>: Balise Head, à propos des informations de configuration de la page Web, le contenu de cette balise ne peut pas être directement reflété dans la page Web
4. <meta>: Utilisé pour configurer certaines informations d'en-tête, telles que le jeu de caractères du jeu de caractères, etc. Les jeux de caractères courants sont les suivants:
  1. utf-8: actuellement les caractères les plus courants qui contiennent tous les pays du monde.
  2. gb2312: Chinois simple, dont 6763 hommes
  3. BIG5: Chinois traditionnel, utilisé à Hong Kong, Macao, Taiwan et d'autres endroits
  4. GBK: contient tous les caractères chinois, est une extension de GB2312, prend en charge les caractères traditionnels et est compatible avec gb2312
5. <title> </title>: Balise de titre, le contenu de la balise est affiché dans l'onglet du navigateur
6. <body> </body>: La balise body, tout le contenu directement affiché sur la page Web doit être écrit sous cette balise.
Balises communes HTML
1. <h1> </h1>: balise de titre, un total de 6 niveaux
2. <hr>: étiquette de ligne horizontale
3. <p> </p>: Balise de paragraphe
4. <font> </font>: étiquette de texte
5. <br>: balise de nouvelle ligne
6. <! - Commentaire–>
7. <img>: balise d'image
Type d'étiquette
1. Balises doubles: balises avec début et fin, telles que: balise <body> </body>, balise <p> </p>, balise <h1> </h1>
2. Balise unique (balise à fermeture automatique): une seule balise de début, par exemple: balise <hr>, balise <br>, balise <img>
Relation entre les balises
1. Nesting / Inclusion / La relation entre ancêtres et descendants, par exemple: la relation entre <html><body></body> </html>
2. Relation parallèle / frère / sœur, par exemple: la relation entre la balise <head> </head> et la balise <body> </body>

Balises d'image et leurs attributs Les
images d'insertion sont marquées avec des balises <img>, la syntaxe est la suivante:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img src="图片的路径" 
         width="设置图片的宽度，默认单位px,当单独分别设置宽度或者高度时,宽高会跟着等比例缩放" 
         height="设置图片的高度，默认单位px,当单独分别设置宽度或者高度时,宽高会跟着等比例缩放" 
         border="设置图片的边框" 
         title="用于设置鼠标悬停时的提示文字" 
         alt="当图片加载不出来时，出现的提醒文字">
    </body>
    </html>

chemin

Chemin: la relation d'emplacement entre les pages Web et d'autres fichiers
Le chemin est insensible à la casse

chemin relatif

Chemin relatif au même niveau

Il existe deux façons d'écrire des pages Web et d'autres fichiers dans le même dossier:

    <!DOCTYPE html>  
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>   
          <!--第一种  -->
          <img src="mm.jpg">
          <!-- 第二种 ./表示当前文件所在目录-->
          <img src="./mm/jpg">
    </body>
    </html>

Chemin relatif de niveau suivant

Lorsque d'autres fichiers sont dans un autre répertoire, vous devez écrire le nom du répertoire avec précision, et en écrire quelques-uns s'il y en a plusieurs;

Nom de répertoire / nom de répertoire /.../ nom de fichier équivaut à double-cliquer avec la souris

    <!DOCTYPE html>  
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>   
          <img src="wc/1/mm.jpg">
    </body>
    </html>

Chemin relatif

Lorsque la page Web se trouve dans d'autres dossiers, vous devez revenir au niveau précédent et revenir à plusieurs niveaux
… /… /… / Nom du fichier, qui est l'action renvoyée par un clic de souris

	                <!DOCTYPE html>  
	                <html lang="en">
	                <head>
	                    <meta charset="UTF-8">
	                    <title></title>
	                </head>
	
	                <body>   
	                      <img src="../../../mm.jpg">
	                </body>
	                </html>

S'il y a une erreur, n'hésitez pas à la corriger; si vous avez des questions, veuillez laisser un message pour discussion.

Record de croissance front-end dès le premier jour

Je suppose que tu aimes