Anmeldung
Anmelden

HTML5

HTML5-Mindmap, einschließlich neuer Tags, neuer Formularattribute, H5-Kompatibilitätslösungen, responsives Layout und CSS-Präprozessoren.

Bearbeitet um 2023-05-27 23:45:56

Deu-Martina

HTML5

Deu-Martina

Für Sie empfohlen
Gliederung

Intelligenter Hardware-Produktentwicklungsprozess auf Auftragsbasis
- 3
Deu-Martina
Produktentwicklungsprozess für Frischluftventilatoren und zugehörige Informationen
- 5
Deu-Martina
Entwicklungsprozess für neue Produkte
- 10
Deu-Martina
HTML
- 18
Deu-Martina
Agile Entwicklungsprozess
- 6
HudsonC

HTML5

Leinwand

Ziehen von Elementen

Audio, Video

Neues Tag hinzufügen

Semantische Struktur-Tags

Header

Fusszeile

Navigation

Hauptnavigation

hauptsächlich

Der Hauptinhalt des Dokuments (whatwg hat keine Semantik und wird vom IE nicht unterstützt)

Abschnitt

Ein Abschnitt einer Seite oder ein Abschnitt eines Artikels, normalerweise mit einem Titel

Artikel

Definieren Sie Artikel, Blogs, Beiträge, Kommentare usw.

beiseite

Seitenleiste definieren

hgroup

Umschließen Sie aufeinanderfolgende Titel, z. B. die Kombination aus Haupttitel und Untertitel des Artikels (w3c löscht ihn).

Weitere neue Tags

Zustand

Meter

Bedeutung

Zeigt Status, Batterie und Temperatur an

Attribute

Wert

Wert, der standardmäßige Maximalwert ist 1

max

Höchster Wert

Mindest

niedrigster Wert

hoch

Höhere Warnschwelle

niedrig

Untere Warnschwelle

Optimum

Der optimale Wert, der Standardwert ist die Mitte, der optimale Wert ist grün, der Wert nahe dem optimalen Wert ist gelb und der Wert, der weit vom optimalen Wert entfernt ist, ist rot.

Stil

Meter{ width:400px; height:30px; }

meter::-webkit-meter-bar{ /* Sie können den Gesamtrahmen, den Hintergrund des leeren Bereichs usw. festlegen. */ backgroud:#fff; border:1px solid #ccc; }

meter::-webkit-meter-optimum-value{ /* Legen Sie den Stil innerhalb des optimalen Wertebereichs fest */ }

meter::-webkit-meter-suboptimum-value{ /* Begnügen Sie sich mit Stilen innerhalb des Bereichs */ }

meter::-webkit-meter-even-less-good-value{ /* schlechter Bereichsstil */ }

Fortschritt

Bedeutung

Fortschrittsanzeige

Attribute

Wert

Wert, der standardmäßige Maximalwert ist 1

max

Maximalwert

Stil

Fortschritt{ width:400px; height:30px; border:1px solid #ccc; }

progress::-webkit-progress-bar{ Hintergrund: #fff; }

progress::-webkit-progress-value{ Hintergrund: grün; }

Liste

Datenliste

Baidu-Suchfeld, Eingabeaufforderung unten

Einzelheiten

Inhalte erweitern

<details open> <summary>Großes Frontend</summary> HTML5 CSS3 JavaScript </details>

Attribute

offen

Kommentar

Rubin

Text mit Pinyin

<ruby>魑 <rt>chi</rt></ruby> <ruby>enchantment <rt>mei</rt></ruby>

markieren

Textfärbung, Suchergebnisse mit Schlüsselwörtern markiert

Lorem ipsum dolor sit amet,

Stil

Hintergrundfarbe, Schriftart

markieren { Hintergrund: rot; }

Bild

Figur

Abbildungen innerhalb des Artikels, eigenständiger Inhalt

<figure>  <img src="images/trump.jpg" alt=""> <figcaption>Präsident der Vereinigten Staaten</figcaption> <!--Bild Beschreibung- -> </figure>

Neue Formulareigenschaften

Formularsteuerelemente (Eingabe, Textbereich, Auswahl ...)

Platzhalter

Prompte Anzeige

erforderlich

Erforderlich, Wert muss nicht festgelegt werden

Autofokus

Eingabefeld mit blinkendem Fokus, Wert muss nicht eingestellt werden

automatische Vervollständigung

Automatische Vervollständigung, fragt nach zuvor eingegebenen Inhalten, der Wert kann auf Aus/Ein eingestellt werden

Muster

Schreiben Sie reguläre Ausdrücke und Formularvalidierungen

Formularelement

Novalidat

Keine Überprüfung, keine Notwendigkeit, den Wert einzugeben

Neuer Wert für Eingabetyp

Muss @ enthalten und es muss Inhalt vor und nach @ vorhanden sein

URL

Muss mit http beginnen

Nummer

Parameter

Mindest

Minimalwert, geschlossenes Intervall

max

Maximalwert, geschlossenes Intervall

Schritt

Schrittlänge

suchen

Suchfeld, keine Sonderfunktionen

Tel

Telefonnummer, PC-Version hat keine spezielle Funktion, mobile Version zeigt eine numerische Tastatur an

Reichweite

Bereich, Standard 0-100

Parameter

Mindest

max

Schritt

Farbe

Farbe, BGR-Format

Datum

Monat

Jahre

Woche

Woche, Woche: 2019-W25

Zeit

Zeit: 23:20

datetime-local

Terminzeit

H5-Kompatibilitätslösung

Meta festlegen

<meta http-equiv="X-UA-Compatible" content="IE=Edge">  <meta name="renderer" content="webkit">

Elemente erstellen

js vorne

Kopfzeile, Fußzeile, Navigation, Artikel, nebenbei, Abschnitt, Hauptzeile { display: block; }

Rufen Sie html5shiv.js direkt auf

Responsives Layout

Definition

Ethan Marcotte schlug den Begriff Responsive Web Design (RWD) erstmals im Jahr 2010 vor. In einem seiner Artikel, „Responsive Web Design · An A List Apart Article“, integrierte er drei bestehende Entwicklungstechniken (elastische Bilder, elastisches Rasterlayout, Medien und Medienabfragen) und nannte es responsives Webdesign. Was ist also echtes responsives Design? Marcotte sagte, dass es bei der echten Responsive-Design-Methode nicht nur darum geht, das Layout der Webseite entsprechend der Größe des sichtbaren Bereichs zu ändern, sondern die aktuelle Webdesign-Methode als Ganzes zu untergraben und ein perfektes Layout für Webinhalte auf jedem zu bieten Gerät. Anzeigemechanismus.

Vorteil

- Kostenvorteile bei Entwicklung, Wartung und Betrieb: Es gibt nur eine Seite, aber einige unterschiedliche Designs werden für unterschiedliche Auflösungen und unterschiedliche Geräteumgebungen erstellt. Daher können im Hinblick auf Entwicklung, Wartung und Betrieb Kosten im Vergleich zu mehreren Versionen eingespart werden . - Kompatibilitätsvorteile: Es kommen nach und nach neue Größen von Mobilgeräten auf den Markt. Angepasste Versionen sind normalerweise nur für Geräte mit bestimmten Spezifikationen geeignet. Wenn sich die Auflösung des neuen Geräts stark ändert, ist es oft nicht kompatibel Wenn Sie eine neue Version entwickeln, stellt der Zugriff in dieser Zeit ein Problem dar, aber responsives Webdesign kann dieses Problem im Voraus verhindern. - Flexibler Betrieb: Responsive Design ist seitenspezifisch. Es können nur notwendige Seiten geändert werden, andere Seiten bleiben davon unberührt.

Medienanfragen

Medientyp

Hauptinhalt

alle

Alle Geräte

Bildschirm

Wird für Computerbildschirme, Tablets, Mobiltelefone usw. verwendet.

drucken

Für Drucker und Druckvorschau

Schreibmethode

/*Medienabfrage erfüllt bestimmte Bedingungen*/ @media print { h1 { font-size: 100px; color: red; } }

Medieneigenschaften

Hauptinhalt

Orientierung

Nutzungsrichtung der Ausrüstung

Landschaft

Horizontale Richtung

Porträt

vertikale Richtung

Breite

Breite des Ansichtsfensters

/*Geben Sie eine bestimmte Breite an*/ /*Die Breite des Ansichtsfensters beträgt 800 Pixel*/ @media (width:800px) { h1 { color: red; background: # 54ABD4;

/*Legen Sie den Bereich fest, legen Sie weniger als 600 Pixel fest*/ /* Die maximale Breite beträgt 600 Pixel, kleiner oder gleich 600 Pixel*/ @media (max-width: 600px) { h1 { Schriftgröße: 100px ; Farbe: rot; } }

/*Der Einstellungsbereich ist größer oder gleich 1000 Pixel*/ @media (min-width: 1000px) { h1 { Schriftgröße: 200 Pixel; Farbe: Gelb; }

Operator

Und

/* Größer als oder gleich 600 und kleiner als oder gleich 1000 Pixel*/ @media (min-width: 600px) und (max-width:1000px) { h1 { Schriftgröße: 100px; Farbe: rot; Hintergrund: #333333;

oder

/*Kleiner oder gleich 400 oder größer oder gleich 1100*/ @media (max-width: 400px),(min-width: 1100px) { body { background: pink; } h1 { } ul { } }

NEIN

nicht

/*entspricht nicht dem Medientyp*/ /*nicht screen*/ @media not screen { }

Verwendung von Medienabfragen

<link rel="stylesheet" href="normal.css"> <link rel="stylesheet" href = „mobile.css“ media="(max-width:640px)">

Haltepunkteinstellungen

Häufig verwendete Einstellungen sind eins und drei Haltepunkte

768px

Weniger als 768 Pixel, ultrakleiner Bildschirm, Mobiltelefon

992px

Größer als 768 und weniger als 992 Pixel, kleiner Bildschirm, Tablet

1200px

Größer als 992 Pixel und weniger als 1200 Pixel, mittlerer Bildschirm

Größer als 1200 Pixel Bildschirm

Häufig verwendete Einstellungen sind zwei und vier Haltepunkte

576px

Weniger als 572, ultrakleiner Bildschirm

768px

577-768, kleiner Bildschirm

992px

769-992, mittlerer Bildschirm

1200px

993-1200, großer Bildschirm

>1200, supergroßer Bildschirm

Es wird empfohlen, drei und zwei Haltepunkte zu setzen

640px

<=640px, kleiner Bildschirm

1024px

641-1024, mittlerer Bildschirm

>1024, großer Bildschirm

zuerst enden

Mobil zuerst

* { margin:0; padding:0; } /*Der Standardstil ist der mobile Stil*/ .container { margin: 0 auto; width: 100 %; /*Breite des Mobilgeräts beträgt 100 % < 768px*/ height: 300px; Hintergrund: #54ABD4; } /*When width>= When 768px*/ /*F-Bereich ist 768~991*/ @media screen and (min-width: 768px){ .container { width: 750px; } } /*When width>=992*/ /* 992 ~ 1199*/ @media screen and (min-width: 992px) { > Breite: 970 Pixel; /*Wenn der Bildschirm》= 1200 Pixel*/ /*Umfang: >= 1200*/ @media Bildschirm und (min -width: 1200px) { .container { width: 1170px; } }

PC zuerst

* { margin:0; padding:0; } /*Demo der stillen maximalen Ansichtsfensterbreite> 1200*/ .container { margin: 0 auto ; Breite: 1170px; Höhe: 300px; Hintergrund: #54ABD4; } /*Wenn Breite <= 1200*/ /* Funktion bei 993 ~ 1200 */ @media screen and (max-width: 1200px) { .container { width: 970px; } } /*When width <= 992*/ /* 769 ~ 992 */ @media screen and (max-width: 992px) { .container { width: 750px } } /*When width <= 768*/ @media screen and (max-width: 768px) { .container { width: 100%; }

CSS-Präprozessor

Warum es verwenden?

Die CSS-Syntax ist nicht leistungsfähig genug und kann nicht verschachtelt werden, was dazu führt, dass in der modularen Entwicklung viele wiederholte Selektoren geschrieben werden müssen.

Ohne Variablen und einen angemessenen Stilwiederverwendungsmechanismus müssen logisch verwandte Attributwerte wiederholt in Form von Literalen ausgegeben werden, was schwer zu pflegen ist.

Der CSS-Präprozessor stellt den Mechanismus zur Wiederverwendung von Stilebenen bereit, der in CSS fehlt, wodurch redundanter Code reduziert und die Wartbarkeit von Stilcode verbessert wird.

Mainstream-CSS-Präprozessoren

Weniger

kompilieren

js-Kompilierung

Koala-Koala-Zusammenstellung

Indexloses Schreiben

// Variablen definieren @width: 500px; @height: 300px; @color: #f90; #box { position: absolute; left: 50 %; top: 50 %; width: @width; height: @height; margin-left: -@width/2; margin-top: -@height/2; border: 2px solid @color; }

Befehlszeilenkompilierung

Installieren

npm install less -g

verwenden

lessc bootstrap.less bootstrap.css

Kommentar

/*Wenn der CSS-Kommentar in CSS konvertiert wird, ist dieser Kommentar immer noch da*/

// Die Kommentare von less sind beim Kompilieren in CSS verschwunden.

Variable

verwenden

Wenn der CSS-Eigenschaftswert

//Behandle die Less-Variable als Wert des CSS-Attributs width: @len;

Wenn der Attributname

// Wenn die Less-Variable als Attributname verwendet wird @{Variablenname} @{bg}: @basecolor;

wenn Selektor

// Wenn die Variable less als Selektor verwendet wird @{variable} #@{activeclass} { width: 100px; height: 100px; }

Variablenbereich

/* weniger Variablenbereich Schritt 1: Verwenden Sie die Variable, suchen Sie in diesem Bereich, finden Sie sie, verwenden Sie die letzte Definition Schritt 2: Kann sie in diesem Bereich nicht finden, gehen Sie zu „Übergeordneten Bereich suchen“. */

// Der Umfang von less @var: 100px; #box { @var:20px; .inner { @var: 50px; width: @var; /*60*/ Hintergrundfarbe: #ccc; @var: 60px; li { Hintergrund: rot; } } width: @var; /*20*/ } .list { height: @var; /*100*/ }

Mixins mischen

Definition

Eine JavaScript-ähnliche Funktion, die wiederholt aufgerufen werden kann

Kategorie

Normale Mischung

// Normales Mischen ist dasselbe wie Klassenselektor .center-box01 { position: absolute; left: 50%; top: 50%; width: 400px; Höhe: 300px; Rand links: -200px; Rand oben: -150px; Hintergrundfarbe: #ccc; } .box01 { border: 1px solid #999; text-align:center; // Blending aufrufen .center-box01(); }

Mischen ohne Ausgabe

//Nach der gemischten Kompilierung ohne Ausgabe wird das CSS nicht ausgegeben .center-box02() { position: absolute; left: 50%; top: 50%; Breite: 400px; Höhe: 300px; Rand links: -200px; Rand oben: -150px; Hintergrundfarbe: #ccc; } .box02 { // Mix aufrufen .center-box02(); border:1px solid #ccc; } .list { // Aufruf ohne Parameter For blending, () kann weggelassen werden .center-box02; }

Mischen mit Parametern

// Mischen mit Parametern .center-box03(@width, @height, @bgcolor) { position: absolute; left: 50%; top: 50%; width : @width; Höhe: @height; Rand links: -@width/2; Rand oben: -@height/2; Hintergrundfarbe: @bgcolor; } .box03 { //.center-box03(600px, 200px, red); .center-box03(1000px, 500px, #369); }

Mit Standardparameterwerten mischen

//Standardwerte der Mischparameter werden hinten platziert .center-box04(@width, @height:100px, @bgcolor: grey) { position: absolute; left: 50 % ; top: 50 %; width: @width; height: @height; margin-left: -@width/2; margin- top: -@height/2 ; Hintergrundfarbe: @bgcolor; } .box04 { .center-box04(200px, 100px); //. center-box04(200px, 100px, rot); //.center-box04(800px); }

//Standardparameterwert, .center-box05(@width:1000px, @height, @bgcolor) { position: absolute; left: 50%; top: 50%; Breite: @width; Höhe: @height; Rand links: -@width/2; Rand oben: -@height/2; Hintergrundfarbe: @bgcolor ; } .box05 { //.center-box05(400px, 300px, green); // Beim Aufruf des Mixes angeben, welcher Wert zugewiesen wird welcher Parameter Die Reihenfolge spielt keine Rolle, geben Sie einfach alles an //.center-box05(@height:500px, @bgcolor:red); .center-box05(@bgcolor:blue, @height :500px, @width:400px) ; }

@arguments Alle tatsächlichen Parameter abrufen

/* transition: 1s width,height linear 1s */ // @arguments Alle tatsächlichen Parameter abrufen .transition(@duration, @property:all, @timing-function:linear , @delay:0s) { -webkit-transition: @arguments; -moz-transition: @arguments; Transition: @arguments; } .box06 { //.transition(2s); //.transition(2s, width); .transition(2s, width, equal, 1s); } .box06 { // Zusätzlich zu Kommas können auch Semikolons zur Trennung von Parametern verwendet werden // Im Allgemeinen werden Kommas verwendet, wenn der Wert eines Parameters ein Komma enthält, werden Semikolons zur Trennung der Parameter verwendet .transition( 2s; Breite, Höhe; Leichtigkeit; }

Bedingtes Urteil

Zur Verwendung mit Mixins

// Bedingte Beurteilung .arrow-set(@width:5px) { width: 0; height: 0; overflow: versteckt; border-style: solid ; border-width: @width; } .arrow(@direction, @width:5px, @color:#000) when (@direction=up){ . arrow-set(@width); border-color: transparent transparent @color transparent; > .arrow(@direction, @width:5px, @color:#000) wenn ( @direction=down){ .arrow-set(@width); border-color:@color transparent transparent transparent; } .arrow(@direction, @width: 5px, @color:#000) when (@direction=left){ .arrow-set(@width); border-color:transparent @color transparent transparent; } .arrow(@direction, @width:5px, @color:#000) when (@direction=right){ .arrow-set(@width); border-color:transparent transparent transparent @color ; } // Call mix .box { //.arrow(up, 100px); //.arrow(down, 100px); //.arrow(left, 100px); .arrow(right, 100px, red); }

importieren

// Mischungen importieren. Wenn Sie eine Less-Datei importieren, können Sie das Suffix weglassen @import "mixins/mixins"; @import "variables"; @import "base";

//CSS-Syntax, direkt in CSS ausgeben @import "style.css";

Verschachtelt

Operator

weniger eingebaute Funktion

Karte

Sass

Stift