Web grundlegende Einführung

Web grundlegende Einführung

1 web 就是 world wide web 的缩写,称之为全球广域网,俗称 WWW。 

2 我们可以将 web 理解为就是当前的一种互联网。对于我们来说更多的就是网站服务。 

3 网站我们可以认是由多个网页组合在一起而形成一种服务。 

4 web 前端就是来负责一个网站当中前台网页里的内容。 

5 网页就是由前端工程师使用 HTML 语言编写而成的一种文件,它里面会包含 文字 图片超链接 声音 视频......( 网页本质就是一个 html 文件 ) 

1.3 Grundlegende Einführung in HTML

1. Definition

HyperText-Markup-Sprache Hypertext-Markup-Sprache, was bedeutet, dass sie nicht nur ausdrücken kann

Nur Text.

2. Geschichte der HTML-Sprachentwicklung

1.在互联网最初的时候是没有 HTML 的,我们只能通过网络传输最简单的文字内容 

2.随着用户的要求越来越多,同时也是我们的技术的不断发展,就出了一种可以表达文字 

内容之外的语言---HTML1.0 

3.在最初的时候就是 html1.0----xhtml1.0( 过渡 )----xhtml2.0( 放弃 )------html5 

1.4 HTML-Seitenskelett

1 Die Webseite ist von uns in HTML geschrieben.

2 Da wir zum Schreiben von Webseiten die HTML-Sprache verwenden müssen, muss der entsprechende Schreibcode funktionieren.

(Hbuilder)

3 Beim Schreiben von Webseiten in HTML-Sprache müssen einige Strukturen standardmäßig vorhanden sein.

Diese Struktur wird als Webseiten-Skelett (HTML) bezeichnet

Hinweis:

1. DocType html : 向浏览器声明当前的文档是 Html 类型。 
2. html : 它是网页当中最大的一个标签,我们称之为根标签 
3. head : 网页头的部,它里面的内容是写给浏览器看的。 
4. meta : 如果有 charset 那就表示在设置当前网页的显示编码 
5. title: 网页的标题,它里面的内容会在浏览器的标签页上显示 
6. body: 网页主体,它里面的内容会显示在浏览器的空白区域内。 

1.5 Verwendung des Builder-Tools

(Kürzung)

1.6 Grundlegende Einführung in die HTML-Syntax und -Tags

1. HTML-Tags

Die sogenannten Tags sind einige "Wörter", die vom Erfinder der HTML-Sprache künstlich definiert wurden und unserem Chinesisch entsprechen

Das Wort.

2. Grammatik

Die Grammatik wird verwendet, um die Regeln zu definieren, wie diese "Wörter" analysiert oder geschrieben werden sollen.

3. Allgemeine Tags und grundlegende Syntax in HTML-Tags

1. Wir unterteilen HTML-Tags künstlich in Einzel- und Doppel-Tags

<标签名称></标签名称> 

<标签名 /> 

2. Allgemeine Tags:

(1)标题标签 :在 html 当中人为定义了六种标题分别 h1-h6,它们都是双标签。在一个网页当中,我们只允许出现一个 h1。 

(2)段落标签:p 双标签 

(3)换行标签: br 单标签 

(4)空格: & nbsp;

3. Etikettenschreibgrammatik

(1) Mehrere Tags dürfen in HTML ineinander verschachtelt sein, Cross-Nesting ist jedoch nicht zulässig.

1.7 Bild-Tags

1. Grammatik

<img src="地址" />

Hinweis:

1. img 是一个单标签,它的作用是可以在网页当中插入图片。 
2. src 是 img 标签的属性,它里面的值称之为属性值,具体用来表示想要加载的图片存 在哪里。 
3. 标签的身上可以有属性,属性名与标签名之间用空格隔开。 
4. 属性值与属性名之间用 单等号 连接 
5. 一个标签的身上可以有多个属性,之间都用空格隔开。 

2. Gemeinsame Eigenschaften von Bildern

1. Src 设置图片所在位置 
2. Alt 当图片加载失败的时候会显示它里面的文字 
3. Width/height 分别用来设置图片宽和 高,如果只设置了宽度或者高度,那么另外一边会自动缩放。 
4. Title 当鼠标悬停在图片上的时候会显示它里面的文字

1.8 Linketikett

1. Grammatik

<a href="目标地址"> 内容 </a> 

Zweitens die Rolle

Kann auf der aktuellen Seite zur neuen Seite realisiert werdenSpringenBetrieb

Drei Attribute

1. Target 这个属性可以设置新页面在哪个窗口打开,当值为_blank 的时候可以在新窗口打开
2. Href 的属性值设置为 # 的时候,可以设置为空链接,它的作用就是当用户点的时候不会发生跳转。 

1.9 Pfad

Der sogenannte Pfad kann als der Pfad angesehen werden, der im Programmcode "zurückgelegt" wird, um eine bestimmte Ressource zu finden. Z.B:

​		C:/Users/Administrator/Desktop/_book\img\2.png. 

Ein absoluter Weg

绝 对 路 径 一 般 是 以 盘 符 为 起 点 来 进 行 查 找 , 或 者 就 是 一 个 绝 对 URL 地 址 。 
https://www.baidu.com/img/bd_logo1.png ,
但是在实际的工作中,我们不建议大家使用绝对路径。 

Zweitens der relative Pfad

Der relative Pfad bezieht sich auf die Suche nach Ressourcen relativ zu einer bestimmten bekannten Datei als Ausgangspunkt.

1.10 Relative Pfadverwendung

Der Pfad ist eine universelle Existenz. Wir sollten das Suchbild als Beispiel verwenden, um die Verwendung des Pfads zu erklären. In der tatsächlichen Arbeit ist die vom relativen Pfad verwendete Frequenz am höchsten. Wir unterteilen relative Pfade künstlich in drei Typen: Pfade gleicher Ebene, Pfade niedrigerer Ebene und Pfade oberer Ebene. (Die Suche nach Bildern als Beispiel bedeutet, dass wir ein Bild außerhalb der HTML-Datei in eine HTML-Webseite einfügen möchten, während wir einen relativen Pfad verwenden. Der relative Ausgangspunkt hier ist also die HTML-Webseite.)

  1. Gleicher Ebenenpfad: Dieselbe Ebene bedeutet, dass sich die HTML-Seite und das Zielbild im selben Ebenenverzeichnis befinden. Für die Verwendung des gleichen Ebenenpfads

Wir müssen nur den Namen des Zielbildes in src schreiben.

  1. Untergeordneter Pfad: Untergeordnet bezieht sich auf das Bild im untergeordneten Verzeichnis der HTML-Datei. Zu diesem Zeitpunkt müssen wir ein / bis verwenden

Gehe nach unten, um zu suchen. ( Unten )

  1. Pfad der oberen Ebene: Wenn sich das Bild im Verzeichnis der oberen Ebene der HTML-Datei befindet, müssen wir ... / verwenden, um erneut nach oben zu suchen. diese

Hinweis:

1. 上述的路径规则虽然都是以查找图片为例,但是总结的规律适用于其它类型资源的 

查找。 

2. / 表示向下级查找,可以无限级穿透。 
3. ../ 表示向上级返回,同样可以无限级返回。 

1.11 Grundlegende Einführung in Formulare

Ein Formular ist eine Struktur zum Sammeln von Benutzerinformationen im Internet. Dazu wird im Voraus ein Tag in HTML definiert. Der Labelname ist Formular, es ist ein doppeltes Etikett, wir nennen es ein Formularfeld.

<form action="" method=""></form>

Hinweis:

1. form 标签就是 HTML 当中定义好的一个用来表示整个表单结构的双标签,我们称之 为表单域。 
2. form 默认就相当于一张"白纸",如果想让它收集用户的相关信息,HTML 里又准备 了很多的表单标签。这些标签里 使用最多的一个叫 input 。 
3. action 属性值表示将当前表单中的数据提交到哪些。 
4. method 属性值表示以 什么样试来提交当前表单中的数据。最常见的就是 get,post 。其中 get 方式就是指将数据在 URL 中进行提交,这种方式是明文。所以相对不安全。而 POST 方式就是指将数据写在 HTTP 请求的 请求体当中( )。 

1.12 Gemeinsame Formularelemente

Das From-Tag ist nur für die Definition des spezifischen Formulars als Ganzes verantwortlich. Wenn Sie Benutzerdaten darin erfassen möchten, müssen Sie über einige weitere Funktionen verfügen.

Ein Modul, mit dem Benutzer Eingaben vornehmen und ausfüllen können. Derzeit definiert HTML viele Formular-Tags, damit Benutzer Eingaben abschließen können

In. Das am häufigsten verwendete Formular-Tag ist Eingabe, da der Tag-Name als Eingabe bezeichnet wird und der HTML-Code so festgelegt ist, dass er übergeben wird

Das type-Attribut wird zur Unterscheidung verwendet.

1. 文本输入框: <input type="text" /> 
2. 密码输入框: <input type="password " /> 
3. 提交按钮: <input type="submit" /> 
4. 单选框: <input type="radio" /> 
5. 复选框: <input type="checkbox" /> 
6. 文本域: <textarea rows="行数" cols="列数"></textarea> 
7. 下拉框: <select><option value="">选项 1</option> </select>
8. 重置按钮: <input type="reset" /> 
9. 普通按钮: <input type="button" value="按钮" /> 

1.13 Achten Sie auf Details der Formularelemente

  1. Namensattribut: Das Formular sammelt Daten über verschiedene Formularelemente. In diesem Prozess werden viele Formularelementnamen als Eingabe bezeichnet. Wenn diese Daten direkt in den Hintergrund gestellt werden, besteht das Problem, dass diese Daten nicht unterschieden werden können Welche Nummer gehört zu welchem ​​Formularelement? Wir setzen das Namensattribut künstlich auf Eingabe. Auf diese Weise erhalten die Daten nach Erreichen des Backends das folgende Format:

    username="syy" 
    
     pwd="123"
    
     gender="男".... 
    
  2. value: Seine Funktion besteht darin, den Standardanzeigeinhalt einiger Formularelemente (Texteingabefeld, Senden-Schaltfläche, Zurücksetzen) zu definieren

Taste, normale Taste)

  1. markiert: Dies ist ein Attribut und sein Attributwert entspricht dem Attributnamen. Dient zum Einstellen einiger Radio- und Kontrollkästchen, die standardmäßig aktiviert sind.
  2. Ausgewählt: Dies ist auch ein Attribut, dessen Attributwert dem Attributnamen entspricht. Fügen Sie es der Dropdown-Option hinzu, um zu erkennen, dass eine Option stumm ist

Akzeptieren Sie ausgewählt.

1.14 Grundlegende Einführung in CSS

Erstens Webstandards

Der sogenannte Webstandard bezieht sich auf die Anforderungen an ein System zur Standardisierung des Schreibens von Webseiten. Er wird von der W3C-Organisation formuliert.

Es erfordert die Trennung von Struktur, Stil und Verhalten der Webseite.

Zweitens Nomenerklärung

1.结构:就是通过 HTML 标签搭建的网页的结构。 

2.样式:就是通过 CSS 对当前的网页结构进行修饰和美化 

3.行为:通过 JS 让网页可以理解用户的一些操作。从而用户与网页之间产生交互。 

1.15 Grundlegende Verwendung von CSS

1. Definition

CSS wird in China als Cascading Style Sheet, Cascading Style Sheet und Style Sheet bezeichnet. Seine Funktion besteht darin, die aktuelle Webseite zu ändern

HTML-Elemente.

2. Grundlegende Schritte

  1. CSS und HTML können als zwei unabhängige Sprachen betrachtet werden. Wenn Sie CSS zum Bearbeiten von HTML verwenden möchten, dann ist dies

Sie müssen zuerst eine Beziehung zwischen den beiden herstellen.

  1. Zu diesem Zeitpunkt wird im HTML ein Tag namens style (es ist ein Doppel-Tag) vorbereitet.

Mit der Zeit können Sie unseren CSS-Code schreiben. Der gemeinsame Speicherort kann sich unter dem Titel-Tag im Head-Tag befinden.

  1. Suchen Sie das Element, das Sie bearbeiten möchten, über den CSS-Selektor und formatieren Sie es (geschrieben im style-Tag).

1.16 CSS erleben

  1. Allgemeine CSS-Elementattribute:

width definiert die Elementbreiteneinheit ist px,

Höhe definiert die Höhe,

Hintergrundfarbe Stellen Sie die Hintergrundfarbe ein.

  1. Die feste Syntax für das Schreiben von CSS-Code:

    Selektor {CSS-Code}

  2. Es wird empfohlen, dass Sie die CSS-Stile während der Entwicklungsphase in separate Zeilen schreiben und jede Zeile mit ==; == beenden.

1.17 CSS-Auswahl

1. Definition

Der sogenannte CSS-Selektor ist eine feste Syntax, die in CSS zur Auswahl bestimmter Elemente definiert wurde. Die Rolle davon

Wählen Sie einfach das Element aus, das Sie stylen möchten.

Zweitens die Klassifizierung von CSS-Selektoren

Es gibt viele Arten von Selektoren in CSS. Wir unterteilen sie künstlich in zwei Kategorien: einfache Selektoren + zusammengesetzte Selektoren.

Drei, einfache Auswahl:

  1. Tag-Namensauswahl: Wählen Sie Elemente über bestimmte HTML-Tag-Namen aus. 【Es werden alle Namen auf der aktuellen Webseite aufgerufen

Alle Tags des Wortes sind ausgewählt]

  1. Klassennamenauswahl: Wählen Sie Elemente anhand des Namens der Tag-Klasse aus
  2. ID-Auswahl: Wählen Sie Elemente anhand des ID-Namens aus.

1.18 Auswahl des Klassennamens

1. Warum benötigen Sie eine Klassennamenauswahl?

Für eine vollständige Webseite müssen viele Tags zum Schreiben und Implementieren miteinander kombiniert werden, da die Arten von HTML-Tags begrenzt sind.

Daher kann ein Tag mit demselben Namen auf einer Webseite mehrmals angezeigt werden. Wenn Sie diese Beschriftungen mit demselben Namen festlegen möchten

Stellen Sie verschiedene Stile ein. Dann gibt es keine Möglichkeit, den Tag-Namen-Selektor direkt zu verwenden. In diesem Fall können wir verwenden

Klassennamenauswahl.

Zweitens die grundlegenden Schritte zur Verwendung der Klassennamenauswahl

  1. Definieren Sie die Struktur der HTML-Seite und legen Sie dann das Klassenattribut für das Element fest, das Sie auswählen möchten.
  2. Legen Sie für die Elemente, die wir zusammen auswählen möchten, denselben Klassenattributwert (Klassennamen) fest
  3. Zu diesem Zeitpunkt müssen wir unseren Klassennamen nur gemäß der festen Syntax im Style-Tag aufrufen: .class name

1.19Id-Selektor

1. Warum brauche ich einen ID-Selektor?

Wenn wir nur ein Element aus einer Reihe von Elementen auswählen möchten, können wir den ID-Selektor verwenden. Diese

Eine ID entspricht der ID-Nummer einer Person.

Zwei, ID-Auswahl verwenden

  1. Legen Sie ein ID-Attribut für das Element fest, das Sie auswählen möchten.
  2. Legen Sie einen Wert für dieses ID-Attribut fest, ich nenne ihn ID-Name.
  3. Stilvolles Aufrufen über eine feste Syntax: #id 名 {}
  4. Hinweis: Es ist erforderlich, dass der gleichnamige ID-Wert nicht auf einer Webseite angezeigt werden kann. [Obwohl er effektiv ist, kann er nicht ausgeführt werden.]

1.20 Zusammenfassung einfacher Selektoren

  1. Standardmäßig können der Tag-Name-Selektor und der Klassenname-Selektor mehrere Elemente gleichzeitig auswählen, und der ID-Name-Selektor kann jeweils nur eines auswählen.

Elemente.

  1. Ein Tag kann sowohl einen Klassennamen als auch einen ID-Namen haben, und die beiden Attributwerte können identisch sein.
  2. Es dürfen mehrere Klassennamen gleichzeitig auf einem Etikett festgelegt werden, und mehrere Klassennamen müssen durch Leerzeichen getrennt werden.
  3. In Bezug auf die ID-Auswahl kann derselbe ID-Name nur einmal auf einer Seite angezeigt werden.

1.21 Namensregeln für ID-Namen und Klassennamen

  1. Der Name kann keine reine Zahl sein oder mit einer Zahl beginnen (aber wir enden oft mit einer Zahl)
  2. Der Name kann nicht auf Chinesisch sein
  3. Namenspaket-Sonderzeichen (-_)
  4. Achten Sie bei der Benennung auf den Namen

1.22 Elementanzeigetyp

Im HTML selbst sind viele Elemente definiert, und diese Elemente sind vorhanden, wenn sie standardmäßig auf der Webseite angezeigt werden.

Im Standardzustand haben beispielsweise einige Elemente standardmäßig keine Auswirkung auf die Attribute width und height, und einige Elemente haben standardmäßig eine eigene Linie

Anzeige. Dieses Phänomen wird als Elementanzeigetyp bezeichnet. Um sich zu erinnern, teilen wir den Elementanzeigetyp künstlich in drei Typen ein: Blockelement, Inlineelement und Inlineblockelement.

  1. Blockelement: Wenn mehrere Blockelemente gleichzeitig vorhanden sind, wird jedes Blockelement standardmäßig in einer eigenen Zeile angezeigt

Seine Eigenschaften für Breite und Höhe können funktionieren.

  1. Inline-Elemente: Wenn mehrere Inline-Elemente gleichzeitig vorhanden sind, werden diese Elemente in einer Zeile angezeigt.

Nicht weniger als das automatische Falten von Linien. Standardmäßig funktionieren die Eigenschaften für Breite und Höhe nicht

  1. Inline-Blockelemente: Wenn mehrere Inline-Blockelemente gleichzeitig gespeichert werden, werden diese Elemente standardmäßig in einer Zeile angezeigt

Die Attribute für Breite und Höhe funktionieren.

  1. Hinweis: Es ist nicht erforderlich, sich zu merken, welche Elemente Inline-Blöcke, welche Blöcke und welche Inline-Blöcke sind.

1.23 Ergänzung zum Layoutetikett

  1. div-Tag, es ist ein in HTML definiertes Doppel-Tag (DIV + CSS). Wir denken künstlich, dass es ein Körper ist

Das Etikett mit dem größten Produkt.

  1. Das span-Tag, es ist auch ein doppeltes Tag, das hauptsächlich zum Einfügen von Text verwendet wird. Wir denken künstlich, dass dies sehr klein ist.
  2. Der Titel kann nicht in das Absatz-Tag eingeschlossen werden, da der Browser ihn nicht normal analysieren kann.

1.24 Konvertierung des Elementanzeigetyps

Beim Layout der Webseite stoßen wir häufig auf einige "spezielle Module". Für diese Art von Modul ist unser vorheriges

Einige gängige Tags zeigen "semantisch" an, wenn sie verwendet werden, andere stimmen nicht überein, sodass wir die entsprechenden Tags verwenden können

Erzwungene Typkonvertierung, damit sie als Entwurfsentwurf angezeigt werden kann. In CSS gibt es ein Anzeigeattribut

Sie können verschiedene Werte festlegen, um die Elementtypkonvertierung abzuschließen.

  1. In Blockelemente verwandeln: display: block;
  2. In Inline-Block konvertieren: Anzeige: Inline-Block
  3. In Inline-Elemente konvertiert: Anzeige: Inline; Keine

1,25 einfaches Wählgewicht

Gewicht: Wir können verstehen, dass verschiedene Arten von CSS-Selektoren unterschiedliche Steuerungsfähigkeiten haben, wenn Sie den Stil desselben Elements festlegen.
Für einfache Selektoren: ID-Selektor "Klassenname-Selektor" Tag-Name-Selektor

1.26 CSS-Funktionen

  1. Bei gleicher Gewichtung überschreibt der nach demselben Element geschriebene CSS-Stil den zuerst geschriebenen CSS-Stil. 【Abdeckung】

  2. Die Definition von CSS hat die Eigenschaft der Vererbung, und das untergeordnete Element erbt einige Stile des übergeordneten Elements [Vererbung].

    (1) Nicht alle CSS-Eigenschaften können vererbt werden.

    (2) Nicht alle Arten von Elementen erben den Stil von Ahnenelementen (die Vererbung erfolgt im Allgemeinen bei Blockelementen).

    (3) Vererbung bezieht sich auf die Stile von Ahnenelementen, die von untergeordneten Elementen verwendet werden können

  3. Die CSS-Steuerungsfähigkeit desselben Selektors für dasselbe Element hat Stärken und Schwächen. 【Priorität】

1.27 Verbindungswähler

1. Warum brauchen Sie einen zusammengesetzten Selektor?

Im eigentlichen Nettoproduktionsprozess sind viele strukturelle Hierarchien und dieses Strukturmodul oft tief verschachtelt

Viele Leute verwenden den gleichen Markennamen. Zu diesem Zeitpunkt können wir den zusammengesetzten Selektor verwenden, um diese einfachen Auswahlmöglichkeiten zu kombinieren

Das Gerät ist kombiniert. Dies erleichtert uns die Auswahl von Elementen.

2. Gemeinsame Verbindungsselektoren:

1. Nachkommen-Selektor: Dieser Selektortyp beginnt mit einem bestimmten Element, verwendet es als Vorfahr und setzt sich dann nach unten fort

Gehen Sie die Suche durch, um die Nachkommenelemente darunter auszuwählen.

Startelement Nachkommeelement ... {set style}

Hinweis:

1. 后代选择器当中的每个部分都可以采用任意的简单选择器代替。 
2. 不同的部分之间要用空格隔开。 
3. ...... 就表示可以不停的向下层查找。 

2. Parallele Auswahl: Dies bedeutet, mehrere Selektoren mit Kommas zu verbinden, dh diese Elemente gleichzeitig auszuwählen und dann denselben Stil festzulegen. Der Selektor jedes Teils kann aus einem beliebigen Selektortyp bestehen.

1.28 Zusammenfassung der Auswahlgewichte

  1. Einfache Auswahl: ID-Name "Klassenname" Elementname
  2. Zusammengesetzter Selektor: Was Sie verstehen müssen, ist, dass ein zusammengesetzter Selektor aus mehreren anderen Selektortypen besteht.

Zum Vergleich definieren wir künstlich einen Wert für jeden einfachen Selektor, nämlich: Id (100) Klasse (10)

ele (1) werden diese drei Werte auch als Gewichtswerte bezeichnet, nachdem sie nur die Gewichtswerte haben, die im aktuellen Selektor erscheinen

Führen Sie die Addition durch und das Endergebnis ist das Gewicht des Selektors. Je größer der Wert, desto größer das Gewicht

  1. Denken Sie daran, dass das Gewichtsverhältnis der Vergleich der Steuerleistung verschiedener Selektoren auf dasselbe Element ist (um den Einfluss der Vererbung zu unterscheiden).

1.29 Speicherort für CSS-Dateien

CSS-Code kann von uns an vielen Stellen platziert werden. Es gibt drei übliche Schreibweisen: Inline-CSS, externes Link-CSS und Inline-CSS.

  1. Eingebettetes CSS bezieht sich auf das Schreiben von CSS-Code in HTML-Seiten.
  2. Externes CSS bezieht sich auf das Schreiben des CSS-Codes in eine externe unabhängige CSS-Datei.
  3. Inline-CSS bezieht sich auf das Schreiben von CSS-Code auf bestimmte HTML-Tags.

Hinweis:

  1. Nach dem Prinzip des Browsers, der die Seite rendert, schreiben wir den CSS-Code an die vordere Position der HTML-Datei.
  2. Bei Verwendung der externen CSS-Schreibmethode müssen keine Stil-Tags gleichzeitig in die externe unabhängige CSS-Datei geschrieben werden

Eine CSS-Datei muss über das Link-Tag in eine bestimmte HTML-Datei eingefügt werden. Lassen Sie das rel-Attribut nicht weg

[]

  1. Für die oben genannten drei Speicherorte für CSS-Dateien ist das Gewicht des CSS in der Zeile am höchsten, jedoch der externe und der interne Link

Es gibt keine Möglichkeit, wer größer sein muss als wer eingebettet ist (Gewicht), und seine Steuerungsfähigkeit hängt vollständig von der von jedem verwendeten Auswahlleistung ab

Gewicht.

  1. Wenn Sie die Leistung eines bestimmten Stils direkt auf den höchsten Wert erhöhen möchten, müssen Sie nur am Ende des CSS-Codes festlegen

einstellen

P{ color:pink!important; } 

1.9 Audio-Tag

<audio autoplay controls loop> 
降级的说明性文字 
<source src="格式 1 路径" /> 
....... 
</audio> 

Hinweis:

  1. Audio ist ein Doppel-Tag, mit dem ein Sound-Ressourcenmodul definiert wird.
  2. Autoplay wird verwendet, um die automatische Wiedergabe einzustellen.
  3. Steuerelemente rufen die Wiedergabesteuerung des aktuellen Geräts auf.
  4. Schleife Stellen Sie die aktuelle Audio-Schleife ein, die abgespielt werden soll.
  5. Der Text in Audio wird standardmäßig nicht angezeigt, und der Text wird nur angezeigt, wenn der aktuelle Browser dieses Tag nicht unterstützt

Wort.

1.30 Allgemeine Textstile

  1. Zeilenhöhe: Zeilenhöhe: Wenn wir die Größe der Zeilenhöhe auf die Höhe des aktuellen Elements einstellen, kann eine einzelne Textzeile verwendet werden

Der Effekt der Zentrierung des aktuellen Elements in vertikaler Richtung.

  1. Horizontale Ausrichtung: Textausrichtung: links | Mitte | rechts, die jeweils die horizontale Ausrichtung des Texts im aktuellen Feld angibt.
  2. Schriftgröße: Schriftgröße, das Gerät ist px, unter normalen Umständen hat der Browser eine minimale Anzeigeschrift.
  3. Schriftgröße: Mit der Schriftgröße können Sie ein Schlüsselwort oder einen Wert (100-900) festlegen. Das Schlüsselwort ist normal für normal und fett für fett.
  4. Schriftname: Schriftfamilie, die am häufigsten verwendeten sind "Microsoft Yahei" und "Heidi"
  5. Schriftfarbe: Farbe, Sie können Farbwörter oder Hexadezimalzahlen festlegen.

1.31 Textschatten

1. Abkürzung für Schrift

Schriftart: Schriftname der Textstärke / Zeilenhöhe;

Schriftart: fett 20px / 200px'Microsoft Yahei ';

2. Textschatten in CSS3

Textschatten: xyr Farbe;

Textschatten: 0px 0px 0px rot;

Hinweis:

  1. x stellt den Versatz des Schattens in horizontaler Richtung dar, der auf einen negativen Wert eingestellt werden kann. Positiv und negativ geben nicht die Größe an, sondern nur die Richtung.

Horizontal nach rechts ist positiv, nach links ist negativ, die Einheit ist px

  1. y repräsentiert den Versatz des Schattens in vertikaler Richtung, vertikal nach oben ist negativ, nach unten ist positiv
  2. r stellt den Unschärfegrad des Schattens dar. Je größer der Wert, desto unschärfer der Schatten, desto größer ist die Einheit px
  3. Farbe repräsentiert die Farbe des Schattens
  4. Mit C3 kann ein Textabschnitt mehrere durch Kommas getrennte Schattenebenen aufweisen und in jeder Ebene Leerzeichen zwischen verschiedenen Parametern verwenden

Gitter getrennt.

1.32 Übergangsattribute

Die Rolle des Übergangsattributs besteht darin, einen Prozess zwischen dem Standardstil des Elements und der endgültigen Stiländerung zu erstellen. In C3 wurde eine neue Eigenschaft namens Übergang hinzugefügt

Transition: all 1s linear 0s; 

Hinweis:

1. 第一个参数的作用是设置元素身上的哪些属性产生过渡,一般用 all 表示所有的属 

性都过渡。 

2. 第二个参数的作用设置过渡需要时长,单位是 s 不要省略 
3. 第三个参数的作用设置过渡的动画形式,linear 表示匀速 
4. 第四个参数设置当前过渡等待多久之后才会执行( 延时 )。即使为 0 ,单位也不能 

省。 

5. :hover 选择某个元素被鼠标移上时的状态。 
6. transition 这个属性既可以添加在元素默认状态,也可以添加在鼠标移上状态,区别 

就是第二种做法在鼠标离开的时候不会在有过渡变化。

Ich denke du magst

Origin blog.csdn.net/weixin_45650998/article/details/113002287
Empfohlen
Rangfolge