Acceso
Iniciar sesión

HTML

Diese Mindmap über HTML vermittelt das Wissen über Webseitenstile, Tags und Attribute. Wenn Sie interessiert sind, können Sie einen Blick darauf werfen.

Editado a las 2023-05-27 23:46:10,

Deu-Martina

HTML

Deu-Martina

Recomendados
Resumen

Intelligenter Hardware-Produktentwicklungsprozess auf Auftragsbasis
Deu-Martina
Produktentwicklungsprozess für Frischluftventilatoren und zugehörige Informationen
Deu-Martina
Entwicklungsprozess für neue Produkte
Deu-Martina
HTML5
- 1
Deu-Martina
Agile Entwicklungsprozess
- 2
HudsonC

HTML

Webstil

Wähler

Tag-Auswahl

Tag-Name {Attributname: Attribut; Attributname: Attribut

Klassenauswahl

.Tag-Name {Attributname: Attribut; Attributname: Attribut

ID-Auswahl

#id{Attributname: attribute; Attributname: attribute

<pre class="prettyprint Linenums Prettyprinted"><code class="sprache-html"><h1 style="font-size:18px">So verwenden Sie das Inline-Format</h1></code></pre>

Tag-Name, .class-Name, #ID｛Union-Selektor｝

Tag-Name.Klassenname {Kreuzungsauswahl

Externer Tag-NameInterner Tag-Name｛Nachkommenauswahl｝

So führen Sie CSS-Stile ein

Inline-Stile

Stile einbetten

<pre class="prettyprintlinenums Prettyprinted"><code class="sprache-html"><head><style type="test/css"> h1{Attribute name: attribute;}< /style></head></code></pre>

Stile importieren

Gibt die Beziehung zwischen dem aktuellen Dokument und dem verknüpften Dokument an. Nur das Stylesheet gilt für alle Browser

Unterthema

CSS-Eigenschaften

Typ

Schriftart: Schriftfamilie

Schriftwiedergabe: text-shadow

Schriftgröße: Schriftgröße

Schriftstil: Schriftstil

schräg leicht geneigt

kursivtilt

Schriftstärke: Schriftstärke

Schriftart in Großbuchstaben: Schriftart-Variante

Schriftartattribut: Schriftart

Schriftart{Stil, Gewicht, Größe, Typ}

Textdekorationsstil: Textdekoration

Unterstreichen: unterstreichen

Durchgestrichen: durchgestrichen

Farbe: Farbe

Hintergrund

Hintergrundfarbe: Hintergrundfarbe

Hintergrundbild: Hintergrundbild

Methode zur Wiederholung von Hintergrundbildern: Bakeground-Repeat

Hintergrundbild X- und Y-Achsen-Startposition: Hintergrundposition

Hintergrundzuordnung: background-attachment:fixed (der Hintergrund scrollt nicht mit dem Text)

Block

Wortabstand: Wortabstand

Buchstabenabstand: Buchstabenabstand

Vertikale Ausrichtung mit Text: Vertical-Align, Text-Align

Einzug der ersten Zeile: text-indent

Anzeigemodus: Anzeige

Zeilenhöhe: Zeilenhöhe

Boxmodell

Breite und Höhe definieren: width,height

Polsterung oben, unten, links und rechts: padding-top,right,bottom,left

Äußere Ränder oben, unten, links und rechts: margin-top,right,bottom,left

margin:0px auto;Webseite zentriert

Rand: Rand

Randstil: Stil; Randstärke: Breite; Randfarbe oben, unten, links und rechts

<pre>Rahmenstil: gepunktet, durchgezogen, doppelt, gestrichelt </pre>

Anzeige steuert das Anzeigen und Ausblenden von Elementen

display:block zeigt das Element als Element auf Blockebene mit Zeilenumbrüchen vor und nach an

display:inline zeigt Elemente als Spurelemente ohne Zeilenumbrüche an

display:none verbirgt das Element

schweben

klarklar float

Sowohl der linke als auch der rechte Schwimmer sind klar

Überlaufbox-Überlaufverarbeitung

Der sichtbare Inhalt wird zugeschnitten und der zugeschnittene Inhalt wird außerhalb des Rahmens angezeigt

Versteckte Inhalte werden abgeschnitten und der Rest ist unsichtbar

Position

velative relative Positionierung

wird dort angezeigt, wo es ist, sodass sich das Element „relativ“ zu seinem Ursprung bewegen kann

absolute Positionierung

Eine Elementbox, die auf absolute Positionierung eingestellt ist, wird vollständig aus dem Dokumentfluss entfernt und relativ zu ihrem enthaltenden Block positioniert, der ein anderes Element im Dokument oder der anfängliche enthaltende Block sein kann. Der zuvor vom Element im normalen Dokumentenfluss belegte Platz wird geschlossen, als ob das Element nicht vorhanden wäre. Das Element generiert nach der Positionierung eine Box auf Blockebene, unabhängig davon, welche Art von Box es ursprünglich im normalen Ablauf generiert hat.

Z-Index-Einstellungsebene

Liste

Artikelnummertyp: Listenstiltyp

Bild der Artikelnummer: list-style-image

Position der Elementmarkierung: list-style-position

Das Inside-Tag wird im Inneren angezeigt

Das Onside-Tag wird außen angezeigt

Hyperlink-Pseudoklasse

Hyperlink-Stil beim Zugriff ohne Klicken auf a:link

Hyperlink-Stil nach dem Klicken, um a:visited zu besuchen

Der Hyperlink-Stil, über den sich die Maus bewegt, a:hover

Hyperlink-Stil, der nicht per Mausklick freigegeben wird a:aktiv

Mausform festlegen: Cursor

Standardcursor: default

Hyperlink-Zeiger: Zeiger

span{cursor:pointer;}

Zeigt an, dass das Programm beschäftigt ist: warten

Zeigt verfügbare Hilfe an: help

Anweisungstext: Text

Tags und Attribute

Text zwischen <html> und </html>, der die Webseite beschreibt

Der Text zwischen <head> und </head> ist der sichtbare Inhalt am Kopf der Webseite

Der Text zwischen <title> und </title> ist der Titel der Webseite

Der Text zwischen <body> und </body> ist der sichtbare Seiteninhalt

Als Titel wird Text zwischen <h1> und </h6> angezeigt

Text zwischen und wird als Absatz angezeigt

Zeilenumbruch <hr/> Horizontale Linie

Text zwischen und und ist kursiv

Text zwischen und wird hervorgehoben

<img/>- und </img>HTML-Bilder werden über das <img>-Tag definiert.

<pre><img src="Bildadresse" width="width" height="length" <code>alt="</code><code>Wird verwendet, um eine Zeichenfolge mit vorbereitetem ersetzbarem Text für das Bild zu definieren"</-Code > title="Mouseover, um Text anzuzeigen"/></pre>

<a>- und </a>-HTML-Links werden mithilfe des <a>-Tags definiert.

·······

Ankerlink (zum angegebenen Tag springen): <a href="#name"></a>

spezielle Symbole

Raum

> Größer als Zeichen

< Kleiner-als-Zeichen

www.w3school.com.cn

UTF-8, GB2312, GBK

Liste

<ul><li> Mit </li></ul> Ungeordneter Liste

Attributtyp: Vollkreisscheibe, Quadratkasten, Kreishohlkreis

<ol><li> und </li></ol> geordnete Liste

Attributtyp: 1aAIi

<dl><dt><dd> und </dd>Bemerkungen</dt></dl> Definitionsliste

<table>- und </table>-Tabellen-Tags, Listen können darin verschachtelt werden

<th> und </th> definieren Header

<tr> und </tr> definieren Tabellenzeilen

<td> und </td> definieren die Zellen der Tabelle

<thead> und </thead> <tbody> und </tbody> <tfoot> und </tfoot>. . .

Eigenschaften (horizontale Ausrichtung: links, zentriert, rechts; absmiddle Bild-Mitte-Ausrichtung vertikale Ausrichtung valign: oben-oben-Ausrichtung, mittlere-Mitte-Ausrichtung, unten-unten-Ausrichtung, Grundlinienausrichtung)

Colspan horizontal zusammenführen, Rowspan-Liste zusammenführen

<frameset> und </frameset> (außerhalb des Körpers geschrieben)

Attribute (definieren Sie die horizontalen Sortierspalten des Rahmens = „200px,*,100px“, vertikale Sortierreihen)

<form>- und </form>-Formular-Tags, Formularelemente können darin verschachtelt werden

Wenn die Formularübermittlung passiv ist (z. B. eine Suchmaschinenabfrage) und keine vertraulichen Informationen enthält. Wenn Sie GET verwenden, werden Formulardaten in der Adressleiste der Seite angezeigtWenn das Formular Daten aktualisiert oder vertrauliche Informationen (z. B. ein Passwort) enthält. POST ist sicherer, da die in der Adressleiste der Seite übermittelten Daten unsichtbar sind.

<input type="text"> definiert ein einzeiliges Eingabefeld für die Texteingabe

<input type="password"> definiert das Passwortfeld.

<input type="radio"> definiert einen Optionsknopf.

<pre><input type="radio" name="sex" (die Namen derselben Optionsfelder müssen konsistent sein) value="female">Female</pre>

<input type="checkbox" name="Die Namen zwischen den Kontrollkästchen müssen konsistent sein"> Kontrollkästchen definieren.

<input type="submit"> definiert die Schaltfläche zum Senden des Formulars.

<input type="reset"> Definiert die Schaltfläche zum Zurücksetzen des Formulars.

<input type="button"> definiert eine normale Schaltfläche für das Formular .

<pre><button type="button" onclick="alert('Hello World!')">Klick mich!</button></pre>

<input type="file"> definiert das Dateiauswahlfeld.

<input type="hidden">verstecktes Feld

<select> Definieren Sie die Dropdown-Liste<option> Definieren Sie die auszuwählende Option</option></select>

<pre><select name="cars" size="Länge jedes Vorkommens"> <option value="volvo" selected = "selected" (standardmäßig ausgewählt)>Volvo</ option> <option value="saab">Saab</option> <option value="fiat">Fiat</option> <option value="audi">Audi</option> </select></pre>

Das Element <textarea> definiert ein mehrzeiliges Eingabefeld (textarea)</textarea>

<pre><textarea name="message" rows="10" cols="30"> Dies ist vordefinierter Textinhalt </textarea></pre>

Das Element <datalist> gibt eine vordefinierte Liste von Optionen an. <option value="Vordefinierter Inhalt"></datalist>

<fieldset field><legend field title>Semantische Form</legend></fieldset>

Verwandte Formulare

<pre id="line1"><label für="<a class="attribute -value">male</a>">Male</label> <Eingabe type="<a class="attribute -value">Radio</a>" name="<a class="attribute-value">Geschlecht</a>" id="<a class="attribute-value">männlich</a>"/></pre>