Teilen Sie 18 Grundkonzepte in HTML

1.HTML:

Hpyer Text Markup Language

Hyer Text: Hypertext-Sprache (Text, Bilder, Links, Audio, Video usw.) )

Unterscheidung: Gewöhnlicher Text – Word-Text (Text, Tabelle, Bild)

Markup: Tag

efefeaf8f79f80cb82caa6098d6c09f4< ;/Label>

Eine Beschriftung kann mehrere Attribute haben, und ein Attribut kann mehrere Werte haben. Die Attribute und Attribute und die Werte werden durch Leerzeichen getrennt

Sprache: Sprache

HTML verwendet verschiedene Tags, um Hypertextinhalte zu umschließen, und schreibt sie dann der Reihe nach

2. Dokumentenflusssequenz:

wird Das Browserfenster wird geteilt von oben nach unten in Reihen aufteilen. Ordnen Sie die Elemente in jeder Zeile von links nach rechts an

Teilen Sie das Browserfenster von oben nach unten in Zeilen und Zeilen. Dies wird als Dokumentenflussreihenfolge bezeichnet

3. HTML-Struktur-Tags

HTML: allgemeines Tag, teilt dem Browser mit, dass es sich um ein HTML-Dokument handelt und eine Seite nur ein

head: head-Tag haben kann, Enthält das Dokument. Die relevanten Informationen werden nicht im Browserfenster angezeigt. Eine Seite kann nur einen Body-Tag enthalten, der den gesamten Hypertext enthält ein

Meta: Stellt relevante Informationen über die Seite bereit. Eine Seite kann mehrere haben. b2f0d49c16306e60b5f5bbc3a6018943Spezielle Abschlussmethode

Titel: Beschreibt den relevanten Inhalt der Seite. Auf einer Seite kann es nur einen

geben! DOCTYPE: Deklarations-Tag, teilt dem Browser die W3C-Spezifikation des im Dokument verwendeten Spezifikationssymbols mit. Es gibt kein End-Tag und die Seite wird nicht innerhalb der W3C-Spezifikation geschrieben:

(1) Tag-Buchstaben müssen Kleinbuchstaben sein

(2) Wenn es ein Start-Tag gibt, muss es ein End-Tag geben. Es gibt zwei Möglichkeiten, Tags zu schließen.

2e1cf0710519d5598b1f0f14c36ba6748c1ecd4bb896b2264e0711597d40766c

bfdf57554631c62e63917d588904f58a

(3) Der Wert des Labels muss in doppelten Anführungszeichen stehen, z. B. { < ;Tag attribute="value">baa3ea5ae7414741617ff7b18b3fb09e}

(4) Alle angezeigten Symbole müssen englische Symbole sein

(5) Tag + Inhalt = Element

Drei CSS-Stile:

CSS (Cascading Style Sheets) Cascading Style Sheets

Funktion: Wird verwendet, um die Anzeige von HTML-Inhalten im Browser-Stil zu definieren

(1) Inline-CSS-Stil:

f8366f7d437b4764385859ae85556fbcDer Text hier ist rotf62a06bf453779ee1df69d2191ed1623531ac245ce3e4fe3d50054a55f265927 geschrieben werden.

(3) Externer CSS-Stil (.css ist die Erweiterung)

Externes CSS wird in 93f0f5c25f18dab9d176bd4f6de5d30e geschrieben.

Verwenden Sie das 2cdf5bf648cf2f33323966d7f58a7f3f-Tag Die Stildatei ist mit der HTML-Datei verbunden

Der CSS-Stil folgt einem wichtigen Prinzip – dem Proximity-Prinzip (aber die Größe des Gewichts muss beurteilt werden)

6 . Klassenauswahl

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

. Klassenselektorname {CSS-Stilcode;🎜>

z. B.:

7 🎜>

Dem ID-Selektor wird das „#“-Symbol anstelle des „.“ vor dem Klassennamen vorangestellt

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

8. Der Unterschied zwischen Klassen- (.) und ID-Selektoren (#). :

(1) Der ID-Selektor kann nur einmal im Dokument verwendet werden, und der Klassenselektor kann mehrmals verwendet werden

(2) Die Unterlistenmethode des Klassenselektors kann sein Wird für ein Element verwendet. Legen Sie mehrere Stile gleichzeitig fest. ID-Selektoren funktionieren nicht.

Beispiel:

Die Funktion des obigen Codes besteht darin, die Textfarbe der drei Wörter „dritte Klasse“ auf Rot und die Schriftgröße auf 25 Pixel zu setzen

9 .Untergeordneter Selektor

ist das Größer-als-Symbol „>“, mit dem das untergeordnete Element der ersten Generation des angegebenen Beschriftungselements ausgewählt wird

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

z. B.:

Fügen Sie dem li-Element der Klasse aa einen 1 Pixel großen roten festen Rahmen hinzu

10. Der Nachkommenselektor

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

ist mit Rot gefüllt

11. Der Unterschied zwischen untergeordneten Selektoren und Nachkommenselektoren:

(1) Untergeordneter Selektor: direkter Nachkomme – „>“

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

(2 ) Nachkommenselektor: alle Nachkommen - Leerzeichen

12. Universeller Selektor (*)

entspricht allen Tag-Elementen von HTML

13. Gruppenselektor (,)

h1,span{color:red;}

14. Vererbung (CSS-Stil)

Gilt nicht nur auf ein bestimmtes HTML-Tag-Element, sondern auch auf dessen Nachkommen.

zB:

Als ich ein Kind war, war ich schüchtern wie eine Maus, und die Schriftarten waren alle in Rot, einschließlich der schüchternen Wörter. (Erbverhältnis)

15. Besonderheit:

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

zB:

Anmerkung:

p , .Zuerst stimmen alle mit dem CSS-Attribut des p-Tags überein, und der Browser bestimmt anhand der Gewichtung, welcher CSS-Stil

verwendet werden soll (die Gewichtung des Tags beträgt 1; die Gewichtung des Klassenselektors beträgt 10; die ID-Auswahl Das Gewicht des Geräts beträgt 100)

z. B.:

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

16. Wichtigkeit

CSS-Stil, der das höchste Gewicht einstellt – wichtig

zB:

代码                                                                                                      权值
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

Die Schriftart ist rot

Hinweis:

Stilpriorität:

Browser-Standardstilcc30ded0696d34306b15b490ae0e81e5,d5fd7aea971a85678ba271703566ebfd

和其他元素都在一行上

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

18.

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

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

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

【相关推荐】

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

2. 免费html在线视频教程

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

Das obige ist der detaillierte Inhalt vonTeilen Sie 18 Grundkonzepte in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!