Résumé d'apprentissage HTML

Résumé d'apprentissage HTML

1. Concept:

Langage de balisage hypertexte Langage de balisage hypertexte
1. Hypertexte: non seulement du texte, mais combinant des étiquettes et d'autres informations. L'hypertexte est un texte de type Web qui utilise des hyperliens pour organiser les informations textuelles dans divers espaces.
2. Balisage Langue: C'est
un encodage de texte informatique qui combine du texte et d'autres informations liées au texte pour afficher les détails de la structure du document et du traitement des données. D'autres informations relatives au texte (y compris la structure et les informations de présentation du texte, etc.) sont combinées avec le texte d'origine, mais sont marquées d'une marque.

2. Premiers pas:

Syntaxe:
1. Le suffixe du document html est .html ou .htm
2. Les balises sont divisées en
1. Balises de confinement: il existe des balises de début et de fin. Tels que
2. Fermeture automatique et étiquetage: étiquette de début et étiquette de fin ensemble. Tels que

3. Les balises peuvent être imbriquées: elles
doivent être correctement imbriquées, vous ne pouvez pas avoir de moi en vous et vous en moi
Erreur:
correct:
4. Les attributs peuvent être définis dans la balise de début. Les attributs sont composés de paires clé-valeur. Les valeurs doivent être entre guillemets (simples et doubles).
5. Les balises HTML ne sont pas sensibles à la casse, mais les minuscules sont recommandées.

* 代码:
			<!DOCTYPE html>
			<html lang="en">
			<head>
			    <meta charset="UTF-8">
			    <title>Title</title>
			</head>
			<body>

			</body>
			</html>

3. Étiquette:

  1. Balise de fichier: la balise la plus basique qui constitue html
    * html: la balise racine du document html
    * head: la balise head. Utilisé pour spécifier certains attributs du document html. Introduisez les ressources externes
    * title: balise de titre.
    * body: balise body
    *: le document est défini en html5 comme un document html
    2. Balise texte: balise liée au texte
    * Remarque:
    * <h1> à <h6>: balise title
    * h1 ~ h6: la taille de la police diminue progressivement
    * < p>: Balise de paragraphe
    * <br>: Balise de saut de ligne
    * <hr>: Affiche une ligne horizontale
    * Attributs:
    * couleur: couleur
    * largeur: largeur
    * taille: hauteur
    * align: alignement
    * centre: centré
    * gauche: aligné à gauche
    * droite: alignement à droite
    * <b>: police gras
    * <i>: police italique
    * <font>: police tag
    * <center>: texte centré
    * attributs:
    * couleur: couleur
    * taille: taille
    * face: police
    * Définition de l'attribut:
    * couleur:
    1. Mots anglais: rouge, vert, bleu
    2. rgb (valeur 1, valeur 2, valeur 3): plage de valeurs: 0 ~ 255 telle que rgb (0,0,255)
    3. # valeur1 valeur2 valeur3 : plage de valeurs: entre 00 ~ FF. Tels que: # FF00FF
    * width:
    1. Value: width = '20 ', l'unité de la valeur, la valeur par défaut est px (pixel)
    2. Value%: le rapport de la proportion à l'élément parent
    3. Image tag:
    * img: afficher l'image
    * Attribut:
    * src: Spécifiez l'emplacement de l'image

    • Code:
     		    <img src="image/jingxuan_2.jpg" align="right" alt="古镇" width="500" height="500"/>
     		
     		    <!--
     		        相对路径
     		            * 以.开头的路径
     		                * ./:代表当前目录  ./image/1.jpg
     		                * ../:代表上一级目录
     		     -->
     		
     		    <img src="./image/jiangwai_1.jpg">
     		
     		    <img src="../image/jiangwai_1.jpg">
    
  2. Balises de liste:
    * Liste ordonnée:
    * ol:
    * li:
    * Liste non ordonnée:
    * ul:
    * li:

  3. Libellé du lien:
    * a: Définir un lien hypertexte
    * Attributs:
    * href: spécifier l'URL (Uniform Resource Locator) pour accéder à la ressource
    * target: spécifier la manière d'ouvrir la ressource
    * _self: valeur par défaut, ouvrir sur la page courante
    * _blank: vide La page s'ouvre

    • Code:

        		 \<!--超链接  a-->
        	    <a href="http://www.itcast.cn">点我</a>
        	    <br>
        	
        	    <a href="http://www.itcast.cn" target="_self">点我</a>
        	    <br>
        	    <a href="http://www.itcast.cn" target="_blank">点我</a>
        	
        	    <br>
        	
        	    <a href="./5_列表标签.html">列表标签</a><br>
        	    <a href="mailto:[email protected]">联系我们</a>
        	
        	    <br>
        	    <a href="http://www.itcast.cn"><img src="image/jiangwai_1.jpg"></a>
      
  4. div et span:
    div: chaque div occupe une ligne entière. Étendue des balises au niveau du bloc
    : les informations textuelles sont affichées sur une seule ligne, les balises en ligne sont des balises en ligne

  5. Balises sémantiques: Afin d'améliorer la lisibilité du programme, html5 fournit quelques balises.
    1. <header>: en-tête
    2. <footer>: pied de page

  6. Balises du tableau:
    * table: définissez le tableau
    * width: width
    * border: border
    * cellpadding: définissez la distance entre le contenu et les cellules
    * cellspacing: définissez la distance entre les cellules. S'il est spécifié comme 0, les lignes de cellules fusionneront en une seule,
    * bgcolor: couleur d'arrière-plan
    * align: alignement
    * tr: définir la ligne
    * bgcolor: couleur d'arrière-plan
    * align: alignement
    * td: définir la cellule
    * colspan: fusionner la colonne
    * rowspan: fusionner les lignes
    * th: définir la cellule d'en-tête du tableau
    * <caption>: titre du tableau
    * <thead>: indiquer la partie en-tête du tableau
    * <tbody>: indiquer la partie corps du tableau
    * <tfoot>: indiquer la partie pied du tableau

Je suppose que tu aimes

Origine blog.csdn.net/weixin_43337081/article/details/100996771
conseillé
Classement