Partagez 18 concepts de base en HTML

1.HTML :

Langage de balisage de texte HPyer

Texte HPyer : langage hypertexte (texte, images, liens, audio, vidéo, etc. )

Distinction : Texte ordinaire - Texte mot (texte, tableau, image)

Marquage : Balise

ca6393f461a38cb8dcc63c84f73c8e81< ;/Label>

Une étiquette peut avoir plusieurs attributs, et un attribut peut avoir plusieurs valeurs. Les attributs et attributs, et les valeurs​​sont séparés par des espaces

Langage : Langue.

HTML utilise diverses balises pour envelopper le contenu hypertexte, puis l'écrit dans l'ordre

2. Séquence du flux de documents :

La fenêtre du navigateur est divisé en rangées de haut en bas. Disposez les éléments dans chaque ligne de gauche à droite

Divisez la fenêtre du navigateur de haut en bas en lignes et lignes. Disposez les éléments dans chaque ligne de gauche à droite. C'est ce qu'on appelle l'ordre du flux des documents

. 3. Balises de structure HTML

HTML : balise générale, indique au navigateur qu'il s'agit d'un document HTML, et qu'une page ne peut avoir qu'une seule

head : balise head, contient le document Les informations pertinentes ne sont pas affichées dans la fenêtre du navigateur. Une page ne peut avoir qu'une seule balise

body: body, qui contient tout le contenu hypertexte. une

méta : fournit des informations pertinentes sur la page. Une page peut en avoir plusieurs. b2f0d49c16306e60b5f5bbc3a6018943Méthode de fermeture spéciale

titre : Décrit le contenu pertinent de la page. Il ne peut y en avoir qu'un seul

sur une page ! DOCTYPE : balise de déclaration, indique au navigateur la spécification W3C du symbole de spécification utilisé dans le document. Il n'y a pas de balise de fin et la page n'est pas écrite dans la spécification HTML

4. 🎜>

(1) Les lettres des balises doivent être en minuscules

(2) S'il y a une balise de début, il doit y avoir une balise de fin. Il existe deux façons de fermer les balises.

8bf259f5a6144433b921fb8b7de94970baa3ea5ae7414741617ff7b18b3fb09e

c5732311c9bc8f9578856d5c0fe1f791

(3) La valeur de la balise doit être entre guillemets doubles, par exemple { < ;Tagattribut="valeur">baa3ea5ae7414741617ff7b18b3fb09e}

(4) Tous les symboles apparaissant doivent être des symboles anglais

(5) Balise + contenu = élément

5. Trois styles CSS :

Feuilles de style en cascade CSS (cascading style sheet)

Fonction : permet de définir l'affichage du contenu HTML dans le style du navigateur

(1) Style CSS en ligne :

f8366f7d437b4764385859ae85556fbcLe texte ici est rougecb4774491040fbf41ccb095d3c2faf78531ac245ce3e4fe3d50054a55f265927.

(3) Style CSS externe (.css est l'extension)

Le CSS externe est écrit en 93f0f5c25f18dab9d176bd4f6de5d30e

Utilisez la balise 2cdf5bf648cf2f33323966d7f58a7f3f Le fichier de style est connecté au fichier HTML

<link herf="   .css" rel="stylesheet" type="text/css"/>

Le style CSS suit un principe important - le principe de proximité (mais la taille du poids doit être jugée)

6 . Sélection de classe

Nom du sélecteur de classe {code de style CSS ;>

par exemple :

<span>胆小如鼠</span>
<span class="stress">胆小如鼠</stress>
.stress{color:red;}

7. 🎜>Le sélecteur d'ID est précédé du symbole "#" au lieu du "." avant le nom de la classe

8. La différence entre les sélecteurs de classe (.) et d'ID (#). :

(1) Le sélecteur d'ID ne peut être utilisé qu'une seule fois dans le document, et le sélecteur de classe peut être utilisé plusieurs fois

(2) La méthode de sous-liste du sélecteur de classe peut être utilisé pour un élément Définir plusieurs styles en même temps. Les sélecteurs d'ID ne fonctionnent pas.

par exemple :

La fonction du code ci-dessus est de définir la couleur du texte des trois mots "troisième année" sur rouge et la taille de la police sur 25px

.stress{color:red;}
.size{font-size:25px;}
<p>到了<span class="stress size">三年级</span>下学期。。。</p>

9 .Le sélecteur d'enfant

est le symbole supérieur à ">", utilisé pour sélectionner l'élément enfant de première génération de l'élément d'étiquette spécifié

par exemple :

Ajoutez une bordure rouge unie de 1px à l'élément li de la classe aa

.aa > li {border:1px solid red;}

10. Le sélecteur de descendant

est rempli de rouge

.first span {color:red;}
<p class="first">.......<span>胆小如鼠</span></p>

11. La différence entre les sélecteurs enfants et les sélecteurs descendants :

(1) Sélecteur enfant : descendant direct - ">"

(2 ) Sélecteur descendant : tous les descendants - espaces

12. Sélecteur universel (*)

correspond à tous les éléments de balise HTML

13. Sélecteur de groupe (,)

h1,span{color:red;}

14 Héritage (style CSS)

Ne s'applique pas. uniquement à un élément de balise HTML spécifique, mais également à ses descendants.

par exemple :

Quand j'étais enfant, j'étais aussi timide qu'une souris, et les polices étaient toutes en rouge, y compris les mots timides. (Relation successorale)

p{color:red;}
<p>我小时候<span>胆小如鼠</span></p>

15. Particularité :

ex :

Remarque :

p{color:red;}
.first{color:green;}
<p class="first">我小时候<span>胆小如鼠</span></p>

p , .first correspondent tous à l'attribut CSS de la balise p, et le navigateur détermine quel style CSS utiliser

en fonction du poids (le poids de la balise est 1 ; le poids du sélecteur de classe est 10 ; le Sélection de l'ID Le poids de l'appareil est de 100)

par exemple :

16 Importance

代码                                                                                                      权值
p{color:red;}                                                                                             1
p span{ color:green;}                                                                             1+1=2
.warning{ color:white;}                                                                           10
p span .warning { color:purple;}                                                             1+1+10=12
#footer .note p { color:yellow;}                                                               100+10+1=111

Style CSS définissant le poids le plus élevé - important.

Par exemple :

La police est rouge

p { color:red !important;}
p { color:green;}

Remarque :

Priorité de style :

Style par défaut du navigateurfa24dbce2032961908c49674d3486501,d5fd7aea971a85678ba271703566ebfd

和其他元素都在一行上

元素的高度、宽度、行高及顶和底边距都不可设置

18.

转换成块级元素：   a { display:block;}

转换成内联元素：   a { display:inline;}

转换成内联块级元素：   a { display:inline-block;}

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 免费html在线视频教程

3. php.cn原创html5视频教程

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!