Wondershare EdrawMind
Galleria mappe mentale HTML5
- 8
HTML5
Mappa mentale HTML5, inclusi nuovi tag, nuovi attributi dei moduli, soluzioni di compatibilità H5, layout reattivo e preprocessori CSS.
Modificato alle 2023-05-27 23:45:56
- Consigliato per te
- Profilo
Processo di sviluppo del prodotto del ventilatore per aria fresca e informazioni correlate
- 6
HTML5
Tela
Trascinamento degli elementi
audio video
Aggiungi nuova etichetta
Tag strutturali semantici
intestazione
intestazione
piè di pagina
piè di pagina
nav
Navigazione principale
principale
Il contenuto principale del documento (whatwg non ha semantica e non è supportato da IE)
sezione
Una sezione di una pagina o una sezione di un articolo, solitamente con un titolo
articolo
Definire articoli, blog, post, commenti, ecc.
a parte
Definire la barra laterale
hgroup
Racchiudi titoli consecutivi, come la combinazione del titolo principale e del sottotitolo dell'articolo (w3c lo eliminerà)
Altri nuovi tag
stato
metro
Senso
Indica lo stato, la batteria, la temperatura
Attributi
valore
valore, il valore massimo predefinito è 1
massimo
valore più alto
min
valore più basso
alto
Soglia di allarme più alta
Basso
Soglia di allarme inferiore
ottimale
Il valore ottimale, il valore predefinito è medio, il valore ottimale è verde, il valore vicino al valore ottimale è giallo e il valore lontano dal valore ottimale è rosso.
stile
metro{<br> larghezza:400px;<br> altezza:30px;<br>}
meter::-webkit-meter-bar{<br> /* È possibile impostare il bordo generale, lo sfondo dell'area vuota, ecc. */<br> backgroud:#fff;<br> border:1px solid #ccc;<br >}
meter::-webkit-meter-optimum-value{<br> /* Imposta lo stile all'interno dell'intervallo di valori ottimale */<br>}
meter::-webkit-meter-suboptimum-value{<br> /* Accontentati degli stili compresi nell'intervallo */<br>}
meter::-webkit-meter-even-less-good-value{<br> /* stile intervallo errato */<br>}
progresso
Senso
barra di avanzamento
Attributi
valore
valore, il valore massimo predefinito è 1
massimo
valore massimo
stile
avanzamento{<br> larghezza:400px;<br> altezza:30px;<br> bordo:1px solido #ccc;<br>}
progresso::-webkit-progress-bar{<br> background: #fff;<br>}
progress::-webkit-progress-value{<br> sfondo: verde;<br>}
elenco
datalist
Casella di ricerca Baidu, richiesta di input di seguito
<input type="text" list="searchOption"><br><datalist id="searchOption"><br> <option value="a"></option><br> <option value="ab"> </option><br> <option value="abc"></option><br> <option value="abcd"></option><br> <option value="aaa"></option>< br> <valore opzione="acc"></option><br> <valore opzione="bcc"></option><br> <valore opzione="cdd"></option><br></datalist >
dettagli
Espandi il contenuto
<dettagli aperti><br> <summary>Grande front-end</summary><br> <p>HTML5</p><br> <p>CSS3</p><br> <p>JavaScript</p> <br></dettagli>
Attributi
aprire
Commento
rubino
Testo con pinyin
<ruby>魑 <rt>chi</rt></ruby><br> <ruby>incantesimo <rt>mei</rt></ruby>
segno
segno
Colorazione del testo, risultati di ricerca contrassegnati con parole chiave
Lorem ipsum <mark>dolor sit</mark> amet,
stile
Colore di sfondo, carattere
segna {<br> sfondo: rosso;<br> }
Immagine
figura
Illustrazioni all'interno dell'articolo, contenuti indipendenti<br>
<figure> <!--Illustrazione--><br> <img src="immagini/trump.jpg" alt=""><br> <figcaption>Presidente degli Stati Uniti</figcaption> <!--Picture descrizione- -><br> </figure>
Nuove proprietà del modulo
controlli del modulo (input, textarea, selezione...)
segnaposto
Visualizzazione rapida
necessario
Obbligatorio, non è necessario impostare il valore
autofocus
Casella di input con focus lampeggiante, non è necessario impostare il valore
completamento automatico
Completamento automatico, richiede il contenuto inserito in precedenza, il valore può essere impostato su off/on
modello
Scrivere espressioni regolari, convalida dei moduli
elemento del modulo
novalidate
Nessuna verifica, nessuna necessità di inserire il valore
Nuovo valore per il tipo di input
Deve contenere @ e deve esserci contenuto prima e dopo @
URL
Deve iniziare con http
numero
parametro
min
Valore minimo, intervallo chiuso
massimo
Valore massimo, intervallo chiuso
fare un passo
dimensione del passo
ricerca
Casella di ricerca, nessuna funzione speciale
tel
Numero di telefono, la versione PC non ha funzioni speciali, la versione mobile visualizzerà una tastiera numerica
allineare
Intervallo, predefinito 0-100
parametro
min
massimo
fare un passo
colore
Colore, formato bgr
data
data
mese
anni
settimana
Settimana, settimana: 2019-W25
tempo
Orario: 23:20
datetime-locale
appuntamento
Soluzione di compatibilità H5
Imposta meta
<!--Imposta IE per utilizzare sempre la modalità documento più recente per il rendering--><br> <meta http-equiv="X-UA-Compatible" content="IE=Edge"><br> <!--Priority Utilizza il kernel webkit (Chromium) per il rendering, per 360 e altri browser shell--><br> <meta name="renderer" content="webkit">
Crea elementi
<script><br> (funzione () {<br> document.createElement('header');<br> document.createElement('footer');<br> document.createElement('nav');<br> document.createElement('articolo');<br> document.createElement('aside');<br> document.createElement('sezione');<br> document.createElement('main');<br> documento. createElement('figura');<br><br> })();<br> </script>
js davanti
intestazione, piè di pagina, navigazione, articolo, parte, sezione, principale {<br> display: blocco;<br> }
Chiama direttamente html5shiv.js
<!--[if lt IE 9]><br> <script src="js/html5shiv.min.js"></script><br> <![endif]--><br>
Disposizione reattiva
definizione
Ethan Marcotte ha proposto per primo il termine responsive web design (RWD) nel 2010. In uno dei suoi articoli, "Responsive Web Design · An A List Apart Article", ha integrato tre tecniche di sviluppo esistenti (immagini elastiche, layout a griglia elastica, media e media query) e lo ha chiamato Web Design responsivo. <br><br>Cos'è allora il vero responsive design? Marcotte ha affermato che il vero metodo di responsive design non consiste solo nel modificare il layout della pagina web in base alla dimensione dell'area visibile, ma nel sovvertire l'attuale metodo di web design nel suo complesso, ed è un layout perfetto per i contenuti web su qualsiasi dispositivo.
Vantaggio
- Vantaggi in termini di costi di sviluppo, manutenzione e funzionamento: è disponibile una sola pagina, ma vengono realizzati progetti diversi per risoluzioni diverse e ambienti di apparecchiature diversi. Pertanto, in termini di sviluppo, manutenzione e funzionamento, è possibile risparmiare sui costi rispetto a più versioni . <br>- Vantaggi in termini di compatibilità: Nuove dimensioni di dispositivi mobili emergono una dopo l'altra. Le versioni personalizzate sono generalmente adatte solo per dispositivi con determinate specifiche. Se la risoluzione del nuovo dispositivo cambia in modo significativo, spesso è incompatibile e ciò richiede tempo sviluppare una nuova versione, l'accesso durante questo periodo è un problema, ma il web design reattivo può prevenire questo problema in anticipo. <br>- Funzionamento flessibile: il design responsivo è specifico per la pagina. È possibile modificare solo le pagine necessarie e le altre pagine non verranno interessate. <br>
Domande dei media
tipo di supporto
contenuto principale
Tutto
Tutti i dispositivi
schermo
Utilizzato per schermi di computer, tablet, telefoni cellulari, ecc.
stampa
Per stampanti e anteprima di stampa
Metodo di scrittura
/*La query multimediale soddisfa determinate condizioni*/<br> @media print {<br> h1 {<br> dimensione carattere: 100px;<br> colore: rosso;<br> }<br> }
proprietà multimediali
contenuto principale
orientamento
Direzione d'uso dell'attrezzatura
paesaggio
direzione orizzontale
ritratto
direzione verticale
larghezza
larghezza della finestra
/*Specificare una determinata larghezza*/<br> /*La larghezza del viewport è 800px pixel*/<br> @media (width:800px) {<br> h1 {<br> color: red;<br> background: # 54ABD4;<br> </br> </br>
/*Imposta l'intervallo, imposta meno di 600px*/<br> /* La larghezza massima è 600px, inferiore o uguale a 600px*/<br> @media (larghezza massima: 600px) {<br> h1 {< br> dimensione carattere: 100px ;<br> colore: rosso;<br> }<br> }
/*L'intervallo di impostazione è maggiore o uguale a 1000px*/<br> @media (larghezza minima: 1000px) {<br> h1 {<br> dimensione carattere: 200px;<br> colore: giallo;<br ><br> }
operatore
E
E
/* Maggiore o uguale a 600 e inferiore o uguale a 1000px*/<br> @media (larghezza minima: 600px) e (larghezza massima:1000px) {<br> h1 {<br> dimensione carattere: 100px;<br> colore: rosso;<br> sfondo: #333333;<br> }<br> }<br>
O
,
/*Inferiore o uguale a 400 o maggiore o uguale a 1100*/<br> @media (larghezza massima: 400px),(larghezza minima: 1100px) {<br> corpo {<br> sfondo: rosa; <br> }<br > h1 {<br><br> }<br> ul {<br><br> }<br> }
NO
non
/*non corrisponde al tipo di supporto*/<br> /*non schermo*/<br> @media non schermo {<br><br> }
Utilizzo delle query multimediali
<!-- Il primo collegamento di utilizzo può specificare l'attributo media e caricare diversi CSS--><br> <link rel="stylesheet" href="normal.css"><br> <link rel="stylesheet" href = "mobile.css" media="(larghezza massima:640px)">
<style><br> /*Il secondo metodo di importazione di css in imort seguito dal tipo di supporto non è consigliato*/<br> /*import url('style.css') print;*/<br><br> <br> /*Consiglia il terzo tipo @media*/<br> @media screen e (larghezza massima: 640px) {<br><br> }<br><br> </style>
Impostazioni del punto di interruzione
Impostazioni comunemente utilizzate uno, tre punti di interruzione
768px
Meno di 768px, schermo ultra piccolo, telefono cellulare
992px
Maggiore di 768 e inferiore a 992px, schermo piccolo, tablet
1200px
Maggiore di 992px e inferiore a 1200px, schermo medio
Schermo più grande di 1200px
Impostazioni comunemente utilizzate due, quattro punti di interruzione
576px
Meno di 572, schermo ultra piccolo
768px
577-768, piccolo schermo
992px
769-992, schermo medio
1200px
993-1200, grande schermo
>1200, schermo super grande
Si consiglia di impostare tre e due punti di interruzione
640px
<=640px, schermo piccolo
1024px
641-1024, schermo medio
>1024, grande schermo
finire prima
prima il cellulare
* {<br> margine:0;<br> riempimento:0;<br> }<br> /*Lo stile predefinito è lo stile mobile*/<br> .container {<br> margine: 0 auto;< br > larghezza: 100%; /*La larghezza del dispositivo mobile è 100% < 768px*/<br> altezza: 300px;<br> sfondo: #54ABD4;<br> }<br><br> /*Quando larghezza>= Quando 768px*/<br> /*L'intervallo F è 768~991*/<br> @media screen e (larghezza minima: 768px){<br> .container {<br> larghezza: 750px;<br> } <br > }<br><br> /*Quando larghezza>=992*/<br> /* 992 ~ 1199*/<br> @schermo multimediale e (larghezza minima: 992px) {<br> contenitore {<br > larghezza: 970px;<br> }<br> }<br><br> /*Quando lo schermo》= 1200px*/<br> /*Ambito: >= 1200*/<br> @schermo multimediale e (min -larghezza: 1200px) {<br> .container {<br> larghezza: 1170px;<br> }<br> }
Innanzitutto il computer
* {<br> margine:0;<br> riempimento:0;<br> }<br> /*Demo della larghezza massima del viewport silenzioso> 1200*/<br> .container {<br> margine: 0 auto ;< br> larghezza: 1170px;<br> altezza: 300px;<br> sfondo: #54ABD4;<br> }<br><br> /*Quando larghezza <= 1200*/<br> /* Funzione a 993 ~ 1200 */<br> @media screen and (max-width: 1200px) {<br> .container {<br> width: 970px;<br> }<br> }<br><br><br > /*When larghezza <= 992*/<br> /* 769 ~ 992 */<br> @media screen e (larghezza massima: 992px) {<br> .container {<br> larghezza: 750px <br> }<br > }<br><br><br> /*Quando larghezza <= 768*/<br> @media screen e (larghezza massima: 768px) {<br> .container {< br> larghezza: 100%;< br> <br> }
Preprocessore CSS
Perché usarlo?
La sintassi CSS non è abbastanza potente e non può essere annidata, con la conseguente necessità di scrivere molti selettori ripetuti nello sviluppo modulare.
Senza variabili e un ragionevole meccanismo di riutilizzo dello stile, i valori degli attributi logicamente correlati devono essere ripetutamente emessi sotto forma di valori letterali, il che è difficile da mantenere.
Il preprocessore CSS fornisce il meccanismo di riutilizzo del livello di stile mancante nei CSS, riducendo il codice ridondante e migliorando la manutenibilità del codice di stile.
Preprocessori CSS tradizionali
Meno
compilare
compilazione js
<style type="text/less"><br> // Definisci variabili<br> @width: 400px;<br> @height: 300px;<br> @color: #888;<br><br> #box {<br> posizione: assoluta;<br> sinistra: 50%;<br> superiore: 50%;<br> larghezza: @larghezza;<br> altezza: @altezza;<br> margine sinistro: -@larghezza /2;<br> margin-top: -@height/2;<br> bordo: 2px solido @colore;<br> }<br><br> </style><br> <script src="js/ less.js"></script>
Compilazione di koala koala
scrittura senza indice
// Definisci le variabili<br>@width: 500px;<br>@height: 300px;<br>@color: #f90;<br><br><br>#box {<br> posizione: assoluta;<br > sinistra: 50%;<br> superiore: 50%;<br> larghezza: @larghezza;<br> altezza: @altezza;<br> margine-sinistra: -@larghezza/2;<br> margine-superiore: -@altezza/2;<br> bordo: 2px pieni @colore;<br>}
Compilazione della riga di comando
Installare
npm installa meno -g
utilizzo
lessc bootstrap.less bootstrap.css
Commento
/*Quando il commento CSS viene convertito in CSS, questo commento è ancora lì*/
// I commenti di less scompaiono una volta compilati in CSS.
variabile
utilizzo
Quando il valore della proprietà CSS
//Tratta la variabile less come il valore dell'attributo css<br> width: @len;
Quando il nome dell'attributo
// Quando la variabile less viene utilizzata come nome di attributo @{nome variabile<br> @{bg}: @basecolor;
Quando selezionatore
// Quando la variabile less viene utilizzata come selettore @{variable}<br>#@{activeclass} {<br> larghezza: 100px;<br> altezza: 100px;<br>}
ambito variabile
/*<br>meno ambito della variabile<br>Passaggio 1: utilizza la variabile, cerca in questo ambito, trovala, utilizza l'ultima definizione<br>Passaggio 2: impossibile trovarla in questo ambito, vai a Trova ambito superiore <br>*/
// L'ambito di less<br>@var: 100px;<br>#box {<br> @var:20px;<br><br> .inner {<br> @var: 50px;<br> larghezza: @var; /*60*/<br> colore di sfondo: #ccc;<br> @var: 60px;<br><br> li {<br> sfondo: rosso;<br> }<br> }< br><br> larghezza: @var; /*20*/<br>}<br><br>.list {<br> altezza: @var;
Mescolare i mixin
definizione
Una funzione simile a JavaScript che può essere chiamata ripetutamente
categoria
Miscela normale
// La fusione normale è la stessa del selettore di classe<br>.center-box01 {<br> posizione: assoluta;<br> sinistra: 50%;<br> superiore: 50%;<br> larghezza: 400px;<br > altezza: 300px;<br> margine sinistro: -200px;<br> margine superiore: -150px;<br> colore sfondo: #ccc;<br><br><br>.box01 {<br > bordo: 1px solido #999;<br> text-align:center;<br><br> // Chiama fusione<br> .center-box01();<br>}<br>
Miscelazione senza uscita
//Dopo la compilazione mista senza output, il css non verrà restituito<br>.center-box02() {<br> posizione: assoluta;<br> sinistra: 50%;<br> superiore: 50%;<br> larghezza: 400px;<br> altezza: 300px;<br> margine sinistro: -200px;<br> margine superiore: -150px;<br> colore sfondo: #ccc;<br><br>.box02 {<br> // Chiama mix<br> .center-box02();<br><br> border:1px solid #ccc;<br><br>.list {<br> // Chiama senza parametri For fusione, () può essere omesso<br> .center-box02;<br>}
Miscelazione con parametri
// Miscelazione con parametri<br>.center-box03(@width, @height, @bgcolor) {<br> posizione: assoluta;<br> sinistra: 50%;<br> superiore: 50%;<br> larghezza : @larghezza;<br> altezza: @altezza;<br> margine-sinistra: -@larghezza/2;<br> margine-top: -@altezza/2;<br> colore-sfondo: @bgcolor;< br >}<br><br>.box03 {<br> //.center-box03(600px, 200px, rosso);<br> .center-box03(1000px, 500px, #369);<br>}
Mixare con i valori dei parametri predefiniti
//Valori predefiniti dei parametri di miscelazione. I parametri con valori predefiniti vengono posizionati sul retro<br>.center-box04(@width, @height:100px, @bgcolor: grey) {<br> posizione: assoluta; <br> sinistra: 50% ;<br> superiore: 50%;<br> larghezza: @larghezza;<br> altezza: @altezza;<br> margine-sinistra: -@larghezza/2;<br> margine- in alto: -@height/2 ;<br> background-color: @bgcolor;<br><br><br>.box04 {<br> .center-box04(200px, 100px);<br> //. center-box04(200px, 100px , rosso);<br> //.center-box04(800px);<br>}
//Valore del parametro predefinito,<br>.center-box05(@width:1000px, @height, @bgcolor) {<br> posizione: assoluta;<br> sinistra: 50%;<br> superiore: 50%;< br> larghezza: @larghezza;<br> altezza: @altezza;<br> margine sinistro: -@larghezza/2;<br> margine-top: -@altezza/2;<br> colore sfondo: @bgcolor ;<br>}<br><br>.box05 {<br> //.center-box05(400px, 300px, green);<br><br> // Quando si chiama il mix, specificare quale valore è assegnato a quale parametro Non ha importanza l'ordine, basta specificarlo tutto<br> //.center-box05(@height:500px, @bgcolor:red);<br> .center-box05(@bgcolor:blue, @height :500px, @larghezza:400px) ;<br>}
@arguments Ottieni tutti i parametri effettivi
/*<br>transizione: larghezza 1s, altezza lineare 1s<br>*/<br>// @arguments Ottieni tutti i parametri effettivi<br>.transition(@duration, @property:all, @timing-function:linear , @delay:0s) {<br> -webkit-transition: @arguments;<br> -moz-transition: @arguments;<br> transizione: @arguments;<br>}<br><br>.box06 { < br> //.transition(2s);<br> //.transition(2s, larghezza);<br> .transition(2s, larghezza, facilità, 1s);<br><br>.box06 {< br > // Oltre alle virgole, è possibile utilizzare anche il punto e virgola per separare i parametri<br> // Generalmente vengono utilizzate le virgole Se il valore di un parametro contiene una virgola, viene utilizzato il punto e virgola per separare i parametri<br> .transition(. 2s; larghezza, altezza; 1s);<br>}
Giudizio condizionale
Utilizzare con i mixin
// Giudizio condizionale<br><br>.arrow-set(@width:5px) {<br> larghezza: 0;<br> altezza: 0;<br> overflow: nascosto;<br> stile bordo: solido ;<br> larghezza del bordo: @larghezza;<br><br><br>.arrow(@direzione, @larghezza:5px, @color:#000) quando (@direzione=su){<br> . arrow-set(@width);<br> border-color: trasparente trasparente @color trasparente;<br><br><br>.arrow(@direzione, @larghezza:5px, @color:#000) quando ( @direzione=giù){<br> .arrow-set(@larghezza);<br> border-color:@colore trasparente trasparente trasparente;<br><br><br>.arrow(@direzione, @larghezza: 5px, @colore:#000) quando (@direzione=sinistra){<br> .arrow-set(@larghezza);<br> border-color:trasparente @colore trasparente trasparente;<br><br><br >.arrow(@direzione, @larghezza:5px, @color:#000) quando (@direzione=destra){<br> .arrow-set(@larghezza);<br> border-color:trasparente trasparente trasparente @color ;<br>}<br><br><br>// Chiama mix<br>.box {<br> //.arrow(su, 100px);<br> //.arrow(giù, 100px); <br> //.arrow(sinistra, 100px);<br> .arrow(destra, 100px, rosso);<br>}
importare
// Importa mix. Se stai importando un file di meno, puoi omettere il suffisso<br>@import "mixins/mixins";<br>@import "variables";<br>@import "base";
// sintassi css, output direttamente in css<br>@import "style.css";
Nidificato
Operatore
funzione meno integrata
carta geografica
Sass
Stilo