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

< ;/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. Mé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.

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

(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 :

Le texte ici est rouge

(2) Style CSS intégré

Le style CSS intégré doit être écrit entre .

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

Le CSS externe est écrit en

Utilisez la balise 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 navigateur< maker style < Style défini par l'utilisateur

17. Classification des éléments

Les éléments de balise en HTML sont généralement divisés en trois types différents :

( 1) Éléments de niveau bloc : - utilisés pour construire le framework

每个块级元素都从新的一行开始，并且其后的元素另起一行。（独占一行）

元素的高度，宽度，行高以及顶和底边距都可设置。

元素宽度在不设置的情况下，是它本身父容器的100%，除非设定一个宽度。

eg:

<p>   <p>   <h1>...<h6>   <ol>   <ul>   <dl>   <table>   <address>   <blockquote>   <form>

（2）内联元素：——修饰细节

自左向右排列，直到排不下自动换行。宽高无效，随内容而定。

eg:

<a>   <span>   <br>   <i>   <em>   <strong>   <label>   <q>   <var>   <cite>   <code>

（3）内联块级元素——,

和其他元素都在一行上

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

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!