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

< ;/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. Spezielle 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.

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

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

Der Text hier ist rot

(2) Eingebetteter CSS-Stil

Eingebetteter CSS-Stil muss zwischen geschrieben werden.

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

Externes CSS wird in geschrieben.

Verwenden Sie das -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-Standardstil< Maker-Stil < Vom Benutzer festgelegter Stil

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

17. Elementklassifizierung

Tag-Elemente in HTML werden im Allgemeinen in drei verschiedene Typen unterteilt:

( 1) Elemente auf Blockebene: – werden zum Aufbau des Frameworks verwendet

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

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

元素宽度在不设置的情况下，是它本身父容器的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视频教程

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!