Wondershare EdrawMind
Galleria mappe mentale Programma di formazione del corso base HTML front-end CSS
- 7
Programma di formazione del corso base HTML front-end CSS
Programma di formazione del corso base HTML front-end CSS, una pagina web è composta da tre parti, la struttura è la struttura complessiva della pagina, dov'è il titolo, dov'è il paragrafo, dov'è l'immagine, la struttura è scritta in HTML e la performance è lo stile esterno della pagina, come carattere, dimensione del carattere, colore del carattere, sfondo.
Modificato alle 2022-11-08 10:53:34
- Microbiologia medica Infezione batterica e immunità
Microbiologia medica, Infezioni batteriche e immunità riassume e organizza i punti di conoscenza per aiutare gli studenti a comprendere e ricordare. Studia in modo più efficiente!
- teoria cinetica dei gas
La teoria cinetica dei gas rivela la natura microscopica dei fenomeni termici macroscopici e le leggi dei gas trovando la relazione tra quantità macroscopiche e quantità microscopiche. Dal punto di vista del movimento molecolare, vengono utilizzati metodi statistici per studiare le proprietà macroscopiche e modificare i modelli di movimento termico delle molecole di gas.
- Breve História do Tempo
Este é um mapa mental sobre uma breve história do tempo. "Uma Breve História do Tempo" é um trabalho científico popular com influência de longo alcance. Ele não apenas introduz os conceitos básicos da cosmologia e da relatividade, mas também discute os buracos negros e a expansão. Do universo. questões científicas de ponta, como inflação e teoria das cordas.
Programma di formazione del corso base HTML front-end CSS
- Microbiologia medica Infezione batterica e immunità
Microbiologia medica, Infezioni batteriche e immunità riassume e organizza i punti di conoscenza per aiutare gli studenti a comprendere e ricordare. Studia in modo più efficiente!
- teoria cinetica dei gas
La teoria cinetica dei gas rivela la natura microscopica dei fenomeni termici macroscopici e le leggi dei gas trovando la relazione tra quantità macroscopiche e quantità microscopiche. Dal punto di vista del movimento molecolare, vengono utilizzati metodi statistici per studiare le proprietà macroscopiche e modificare i modelli di movimento termico delle molecole di gas.
- Breve História do Tempo
Este é um mapa mental sobre uma breve história do tempo. "Uma Breve História do Tempo" é um trabalho científico popular com influência de longo alcance. Ele não apenas introduz os conceitos básicos da cosmologia e da relatividade, mas também discute os buracos negros e a expansão. Do universo. questões científicas de ponta, como inflação e teoria das cordas.
- Consigliato per te
- Profilo
Programma di formazione del corso base HTML front-end CSS
CSS
I CSS si chiamano Cascading Style Sheets e vengono utilizzati per definire lo stile degli elementi sulla pagina. Colore dello sfondo, colore del carattere, dimensione del carattere. . .
I CSS sono responsabili delle prestazioni nella struttura, nella presentazione e nel comportamento.
luogo scritto
1. Stili in linea
Scrivi lo stile nell'attributo style del tag
Questo stile funzionerà solo sul tag corrente e non può essere riutilizzato. È scomodo per la manutenzione successiva e non è consigliato.
2. Foglio di stile interno
Scrivi il foglio di stile nel tag style nella testa
Utilizza i fogli di stile interni per separare ulteriormente prestazioni e struttura. Puoi impostare stili per più elementi contemporaneamente per facilitare la manutenzione successiva.
3. Fogli di stile esterni
Scrivi il foglio di stile in un file CSS esterno, quindi introduci il file esterno tramite il tag link
Scrivere gli stili in un foglio di stile esterno È possibile utilizzare lo stesso foglio di stile in pagine diverse, separando completamente le prestazioni e la struttura, il che facilita la manutenzione successiva.
grammatica di base
Selettore
Utilizza i selettori per selezionare un gruppo di elementi sulla pagina e quindi impostarne gli stili
selettore di elementi
Seleziona l'elemento specificato nella pagina in base al nome del tag
Sintassi: nome del tag { }
esempio:
div{}
P{}
h1{}
selettore id
Seleziona un elemento univoco in base al valore dell'attributo id
Sintassi: #id {}
esempio:
#riquadro1{}
#Ciao{}
selettore di classe
Seleziona un gruppo di elementi in base al valore dell'attributo classe dell'elemento
Sintassi: .class{}
esempio:
.Ciao{}
.scatola{}
selettore di caratteri jolly
Seleziona tutti gli elementi della pagina
grammatica:*{}
Le prestazioni dei selettori di caratteri jolly sono relativamente scarse, quindi cerca di evitare di usarli.
Selettore dell'Unione
Gli elementi che corrispondono a più selettori possono essere selezionati contemporaneamente
Sintassi: selettore 1, selettore 2, selettore N{}
esempio:
div,p,#box,.ciao{}
Selettore dell'intersezione
È possibile selezionare elementi che soddisfano più condizioni
Sintassi: Selettore 1 Selettore 2 Selettore N{}
Esempio: p.ciao{}
Selettore dell'elemento discendente
Seleziona gli elementi discendenti specificati dell'elemento specificato
Sintassi: Elemento antenato Elemento discendente {}
esempio:
intervallo div {}
div p{}
Selettore dell'elemento figlio
Seleziona l'elemento figlio specificato dell'elemento specificato
Sintassi: elemento genitore > elemento figlio {}
esempio:
div > intervallo {}
div >p{}
blocco di dichiarazione
Il blocco di dichiarazione è in realtà una dichiarazione CSS
dichiarazione
Ogni dichiarazione CSS è uno stile, che in realtà è una struttura di coppie nome-valore.
Utilizzo: collegamento tra nome e valore
:Il lato sinistro è il nome dello stile
:Il lato destro è il valore dello stile
Ogni affermazione termina con;
esempio
colore rosso;
dimensione carattere: 20px;
relazione tra gli elementi
elemento genitore
Un elemento che contiene direttamente elementi figlio è chiamato elemento genitore.
elemento figlio
Gli elementi contenuti direttamente da un elemento genitore sono chiamati elementi figli.
Elementi antenati
Gli elementi che contengono direttamente o indirettamente elementi discendenti sono chiamati elementi antenato e anche l'elemento genitore è un elemento antenato.
Elementi discendenti
Gli elementi che sono contenuti direttamente o indirettamente da elementi antenati sono chiamati elementi discendenti e anche gli elementi figlio sono elementi discendenti.
elemento fratello
Gli elementi che hanno lo stesso elemento genitore sono chiamati fratelli.
Elementi di blocco ed elementi in linea
elemento di blocco
Un elemento blocco occupa la propria riga sulla pagina, indipendentemente dal suo contenuto.
Generalmente utilizza elementi blocco per impaginare la pagina
Elementi di blocco comuni
div
P
h1~h6
elementi in linea
Gli elementi in linea occupano solo la propria dimensione e non occuperanno una singola riga.
Gli elementi inline sono anche chiamati elementi inline (inline)
In genere, gli elementi in linea vengono utilizzati per impostare gli effetti per il testo.
In linea comune
arco
UN
imm
Regole del pacchetto
In genere, gli elementi di blocco vengono utilizzati per racchiudere gli elementi inline, ma gli elementi inline non vengono utilizzati per racchiudere gli elementi di blocco.
L'elemento a può contenere qualsiasi elemento tranne a stesso
L'elemento p non può contenere elementi blocco
Pseudo classi e pseudo elementi
Pseudoclassi e pseudoelementi vengono utilizzati per rappresentare uno stato speciale o una posizione speciale dell'elemento.
:collegamento
Rappresenta un collegamento normale (collegamento non visitato)
:visitato
Rappresenta i collegamenti visitati
: passa il mouse
I collegamenti su cui si sposta il mouse possono anche essere impostati per passare il mouse su altri elementi.
:attivo
Il collegamento cliccato può essere reso attivo anche per altri elementi.
:messa a fuoco
Indica lo stato dell'elemento che riceve il focus, generalmente utilizzato nelle caselle di testo.
::selezione
Indica che il contenuto è selezionato
In Firefox utilizzare invece ::-moz-selection
:prima lettera
Rappresenta il primo carattere
:prima linea
Rappresenta la prima riga di testo
:Prima
Seleziona la parte anteriore dell'elemento
Generalmente, questa pseudo-classe viene utilizzata insieme al contenuto, attraverso il quale è possibile aggiungere contenuto alla posizione specificata.
:Dopo
Seleziona l'ultimo bordo dell'elemento
Generalmente, questa pseudo-classe viene utilizzata insieme al contenuto, attraverso il quale è possibile aggiungere contenuto alla posizione specificata.
selettore di attributi
Seleziona l'elemento specificato in base ai suoi attributi
[nome attributo]
Seleziona gli elementi con gli attributi specificati
[nome attributo="valore attributo"]
Seleziona gli elementi il cui valore dell'attributo è uguale al valore specificato
[Nome attributo^="Valore attributo"]
Seleziona gli elementi il cui valore dell'attributo inizia con il contenuto specificato
[Nome attributo$="Valore attributo"]
Seleziona gli elementi il cui valore dell'attributo termina con il contenuto specificato
[Nome attributo*="Valore attributo"]
Seleziona gli elementi il cui valore di attributo contiene il contenuto specificato
Selettore dell'elemento fratello
Seleziona l'elemento fratello successivo
Precedente Successivo
Seleziona tutti i seguenti elementi fratelli
Precedente ~ Tutto successivo
Pseudo classe per elementi figlio
:Primogenito
Trova il primo elemento figlio dell'elemento genitore e ordina tra tutti gli elementi figli
:ultimo bambino
Trova l'ultimo elemento figlio dell'elemento genitore e ordina tra tutti gli elementi figli
:ennesimo bambino
Trova l'elemento figlio nella posizione specificata nell'elemento genitore e ordina tra tutti gli elementi figli
esempio
p:ennesimo-figlio(3)
Puoi usare anche per trovare elementi figlio con numeri pari
Puoi usare odd per trovare elementi figlio dispari
:primo di tipo
Trova il primo elemento figlio del tipo specificato
:ultimo del tipo
Trova l'ultimo elemento figlio del tipo specificato
:ennesimo tipo
Trova l'elemento figlio specificato del tipo specificato
negare la pseudo-classe
Eliminare gli elementi che soddisfano i requisiti da un insieme di elementi
grammatica:
:non(selettore)
esempio:
.abc:non(div)
Eredità di stile
L'impostazione degli stili per un elemento antenato verrà applicata anche ai suoi elementi discendenti. Questa funzionalità è chiamata ereditarietà dello stile.
Attraverso l'ereditarietà dello stile, alcuni stili possono essere impostati in modo uniforme sugli elementi antenati, in modo che a tutti i discendenti venga applicato lo stesso stile.
Ma non tutti gli stili verranno ereditati, ad esempio: legati allo sfondo, legati ai bordi, legati al posizionamento. Documenti di riferimento specifici
priorità del selettore
Quando si utilizzano i selettori per definire lo stile degli elementi, se gli stili sono in conflitto, la priorità del selettore determina quale stile viene utilizzato.
priorità
stili in linea
1000
selettore id
100
Selettori di classi e pseudo-classi
10
selettore di elementi
1
selettore di caratteri jolly
0
Stili ereditati
nessuna priorità
Quando gli stili sono in conflitto, le relative priorità del selettore devono essere sommate e calcolate. Quello con la priorità più alta verrà visualizzato per primo. Se le priorità sono le stesse, verrà visualizzato lo stile successivo.
Nel calcolo delle priorità, la dimensione totale non può superare il suo ordine di grandezza massimo.
Puoi aggiungere un !important dopo lo stile Se questo contenuto viene aggiunto allo stile, lo stile avrà la massima priorità e verrà visualizzato prima di tutti gli stili, inclusi gli stili in linea. Tuttavia, questo attributo deve essere utilizzato con cautela.
Prestazioni del selettore
Quando il browser analizza un gruppo di selettori, li analizza uno per uno dal retro in primo piano.
Se il selettore è troppo lungo, le prestazioni di analisi del browser saranno scarse, quindi quando si scrive il selettore, più corto è, meglio è.
*I selettori con caratteri jolly hanno prestazioni scarse. Evitare l'uso di selettori con caratteri jolly.
unità
unità di lunghezza
px
Pixel, il pixel è l'unità più piccola che compone un'immagine. Il nostro schermo è composto da pixel uno per uno.
Un pixel si riferisce a un pixel
A seconda dei display, la dimensione di un pixel è diversa. Più chiaro è lo schermo, più piccoli sono i pixel.
%
Puoi impostare il valore dello stile di un elemento su un valore percentuale, in modo che il browser calcolerà il valore corrispondente in base al valore dell'elemento genitore.
Quando il valore dell'elemento genitore cambia, il valore dell'elemento figlio cambierà insieme secondo una certa proporzione, che viene spesso utilizzata nelle pagine adattive.
em
em verrà calcolato in relazione alla dimensione del carattere dell'elemento corrente
1em = 1 dimensione del carattere
em viene spesso utilizzato per impostare alcuni stili relativi al testo, perché quando la dimensione del testo cambia, em cambierà di conseguenza.
unità di colore
parole di colore
Usa direttamente le parole inglesi per rappresentare i colori
rosso verde blu arancione
Valore RGB
Il cosiddetto valore RGB consiste nel far corrispondere vari colori attraverso diverse combinazioni dei tre colori primari rosso, verde e blu.
grammatica:
RGB (rosso, verde, blu)
Questi tre valori richiedono un valore compreso tra 0 e 255
0 significa nessuno
255 rappresenta il massimo
RGB(50.200.30)
Puoi anche utilizzare le percentuali per impostare i valori RGB, che richiedono un valore compreso tra 0% e 100%.
La percentuale viene infine convertita in 0-255
0% equivale a 0
100% equivale a 255
RGB(100%,0%,0%)
Valore RGB esadecimale
È anche un modo per esprimere valori RGB. La differenza è che utilizza numeri esadecimali anziché decimali.
grammatica:
#rossoverdeblu
Il colore qui necessita di un valore compreso tra 00 e ff
esempio:
#ff0000
Se il colore si ripete due a due, può essere abbreviato.
Ad esempio, #aabbcc può essere scritto come #abc
Ad esempio #bbffaa può essere scritto come #bfa
stile del testo
font
colore
colore del carattere
dimensione del font
dimensione del font
La dimensione predefinita del carattere nel browser è generalmente 16px e, quando sviluppiamo, viene solitamente unificata a 12px.
famiglia di font
Imposta il carattere del testo
stile carattere
Imposta il corsivo
peso del carattere
Imposta il grassetto del testo
variante del carattere
maiuscoletto
font
proprietà di abbreviazione del testo
Tutti gli stili relativi ai caratteri possono essere impostati contemporaneamente
grammatica:
carattere: [grassetto corsivo minuscolo] dimensione [/altezza linea] carattere
Grassetto, corsivo, minuscolo e maiuscolo, l'ordine non ha importanza, puoi scriverlo o meno, in caso contrario utilizzare il valore predefinito
È necessario scrivere la dimensione del testo e il carattere e la dimensione deve essere la penultima e il carattere deve essere l'ultimo
Dopo la dimensione è possibile impostare l'altezza della riga, che può essere scritta o meno. In caso contrario verrà utilizzato il valore predefinito.
stile del testo
altezza della linea
altezza della riga
Per impostazione predefinita, il testo è centrato verticalmente nella parte centrale superiore della riga.
L'altezza della linea può essere modificata tramite line-height
Interlinea = altezza della riga - dimensione del carattere
trasformazione del testo
Imposta maiuscole/minuscole
decorazione del testo
Imposta la decorazione del testo
allineamento del testo
Imposta l'allineamento del testo
indentatura del testo
Imposta il rientro della prima riga
Richiede un'unità di lunghezza. Se è un valore positivo, la prima riga si sposterà a destra. Se è un valore negativo, si sposterà a sinistra.
spaziatura del carattere
spaziatura dei caratteri
spaziatura delle parole
spaziatura delle parole
sfondo
colore di sfondo
colore di sfondo
immagine di sfondo
Immagine di sfondo
È richiesto un indirizzo URL come parametro
Esempio: background-image:url (percorso dell'immagine)
ripetizione dello sfondo
Imposta la modalità di ripetizione dell'immagine di sfondo
Valori facoltativi:
ripetere
Per impostazione predefinita, l'immagine di sfondo verrà visualizzata affiancata
Ripetere in entrambe le direzioni lungo l'asse x e l'asse y
nessuna ripetizione
L'immagine di sfondo non si ripete
ripeti-x
L'immagine di sfondo viene ripetuta orizzontalmente
ripeti-y
L'immagine di sfondo si ripete verticalmente
posizione dello sfondo
Imposta la posizione dell'immagine di sfondo
Metodo di impostazione uno
Puoi impostare direttamente la posizione dell'immagine attraverso diverse parole chiave di posizione
superiore
Sinistra
Giusto
metter il fondo a
centro
Puoi impostare l'immagine di sfondo su qualsiasi posizione dell'elemento combinando le parole chiave sopra in coppie.
Se viene specificato un solo valore, il secondo valore viene impostato automaticamente al centro
Metodo di impostazione due
È possibile specificare direttamente due valori per impostare l'offset dell'immagine di sfondo.
esempio:
posizione dello sfondo: offset dell'asse x offset dell'asse y;
Offset dell'asse x, utilizzato per specificare la posizione orizzontale dell'immagine
Se specifichi un valore positivo, l'immagine si sposta a destra
Se specifichi un valore negativo, l'immagine si sposta a sinistra
Offset dell'asse Y, utilizzato per specificare la posizione verticale dell'immagine
Se specifichi un valore positivo, l'immagine si sposta verso il basso
Se specifichi un valore negativo, l'immagine si sposta verso l'alto
allegato in background
Utilizzato per impostare se lo sfondo scorre con la pagina
Valore facoltativo
scorrere
Per impostazione predefinita, l'immagine di sfondo scorrerà con la pagina
fisso
L'immagine di sfondo non scorre con la pagina e verrà fissata nella posizione specificata sulla pagina.
Se imposti lo sfondo di questa proprietà, lo sfondo sarà sempre posizionato rispetto alla finestra del browser.
Generalmente questo sfondo verrà impostato sul corpo
sfondo
Attributo abbreviato per lo sfondo
Puoi usarlo per impostare tutti gli stili relativi allo sfondo
Non sono previsti requisiti di ordine o quantità per questo attributo abbreviato. Il valore predefinito viene utilizzato per gli attributi che non vengono scritti.
opacità
Utilizzato per impostare l'opacità dello sfondo
Valore facoltativo
0-1
0 significa completamente trasparente
1 significa completamente opaco
0,5 traslucido
I browser IE8 e versioni precedenti non supportano questo stile. Puoi invece utilizzare i filtri.
filtro:alfa(opacità=valore)
Il valore qui richiede un valore compreso tra 0 e 100
0 equivale alla piena trasparenza
100 completamente opaco
HTML
La struttura della pagina web
Una pagina web è composta da tre parti
struttura
La struttura è la struttura complessiva della pagina, dov'è il titolo, dov'è il paragrafo, dov'è l'immagine
La struttura è scritta utilizzando HTML
Prestazione
Le prestazioni sono lo stile esterno della pagina, ad esempio carattere, dimensione del carattere, colore del carattere e sfondo. . .
Usa i CSS per dare stile agli elementi sulla tua pagina
Comportamento
Interazione tra pagina e utente
Utilizza JavaScript per impostare il comportamento della pagina
Una pagina web ben progettata richiede la separazione tra struttura, presentazione e comportamento.
Nello sviluppo, affrontiamo sempre un problema, ovvero l'accoppiamento tra i programmi. La separazione dei tre serve per comprendere l'accoppiamento.
HTML, linguaggio di marcatura ipertestuale
Responsabile della struttura della pagina e della definizione dei vari componenti della pagina
L'HTML è scritto sotto forma di testo semplice e utilizza tag HTML per identificare diverse parti della pagina.
Etichetta
appaiono in coppia
etichetta a chiusura automatica
Attributi
È possibile impostare l'effetto dell'etichetta tramite gli attributi
Gli attributi devono essere definiti nel tag di apertura o nel tag di chiusura
Le proprietà sono in realtà un insieme di coppie nome-valore.
esempio:
Struttura di base della pagina HTML
Dichiarazione di documentazione
La versione html utilizzata per identificare la pagina corrente
Questa istruzione viene utilizzata per indicare al browser che la pagina corrente è scritta utilizzando lo standard HTML5.
Tag comuni
Il tag radice della pagina web
C'è solo un tag root in una pagina
Tutto il contenuto della pagina web deve essere scritto all'interno del tag html
Intestazione della pagina web
Il contenuto di questo tag non verrà visualizzato direttamente sulla pagina web
Questo tag viene utilizzato per aiutare il browser ad analizzare la pagina
sottotag
Utilizzato per impostare il titolo della pagina web
Per impostazione predefinita, verrà visualizzato nella barra del titolo del browser
Quando un motore di ricerca recupera una pagina web, recupererà principalmente il contenuto del titolo, il che influenzerà il posizionamento della pagina nel motore di ricerca.
Utilizzato per impostare i metadati delle pagine Web, come il set di caratteri utilizzato dalle pagine Web
Imposta parole chiave per le pagine web
Imposta la descrizione della pagina web
Reindirizzamento richiesto
Il corpo della pagina web
Tutte le parti visibili della pagina web devono essere scritte nel corpo
~
etichetta del titolo
Ci sono sei livelli di intestazioni in HTML
Tra i titoli a sei livelli, h1 è il più importante e h6 è il meno importante. Nelle pagine generali vengono utilizzati solo h1~h3.
L'importanza di h1 è seconda solo al titolo. Inoltre, il browser cercherà principalmente il contenuto in h1 per determinare il contenuto principale della pagina.
Generalmente su una pagina si può scrivere solo una h1.
tag di paragrafo
tag di nuova riga
etichetta con linea orizzontale
iFrame
Può introdurre altre pagine esterne in una pagina
Attributi
src
L'indirizzo della pagina esterna, è possibile utilizzare i percorsi relativi
larghezza e altezza
È possibile impostare la larghezza e l'altezza della cornice
nome
È possibile assegnare un nome a un frame in linea
Questo valore di attributo può essere impostato sul valore dell'attributo di destinazione del collegamento ipertestuale
In questo modo quando si clicca sul collegamento ipertestuale, la pagina si aprirà nel frame inline corrispondente
Il contenuto nei frame inline non verrà recuperato dai motori di ricerca, quindi cerca di non utilizzare frame inline durante lo sviluppo.
Collegamento ipertestuale
Può far passare la pagina corrente ad altre pagine
<a>Testo del collegamento</a>
Attributi
href
Punta all'indirizzo di destinazione del collegamento, che può essere un percorso relativo
Può anche essere il valore dell'attributo #id, in modo che quando si fa clic sul collegamento ipertestuale, salterà alla posizione specificata nella pagina corrente.
È possibile utilizzare mailto: per creare un collegamento ipertestuale che invia un'e-mail
bersaglio
Specificare la finestra in cui aprire il collegamento
Valore facoltativo
_se stesso
Valore predefinito, il collegamento verrà aperto nella finestra corrente per impostazione predefinita
_vuoto
Apri il collegamento in una nuova finestra
Il valore dell'attributo name di un frame in linea
Apre il collegamento nell'iframe specificato
Commento
grammatica
Il contenuto nei commenti non verrà visualizzato sulla pagina, ma verrà visualizzato nel codice sorgente. Possiamo utilizzare i commenti per spiegare il codice della pagina web.
Puoi anche nascondere alcuni contenuti che non desideri visualizzare sulla pagina tramite i commenti.
entità
Alcuni simboli speciali non possono essere utilizzati direttamente nelle pagine HTML e le entità devono essere utilizzate per sostituire questi simboli speciali.
Le entità possono anche essere chiamate caratteri di escape
sintassi dell'entità
&nome dell'entità;
Entità di uso comune
spazio
<
>
>
Simbolo del diritto d'autore
©
Tag immagine
<img/>
Utilizza il tag image per introdurre un'immagine esterna alla pagina
Attributi
src
Percorso che punta a un'immagine esterna, è possibile utilizzare percorsi relativi
alt
Specificare una descrizione per l'immagine se non può essere caricata
I motori di ricerca utilizzano principalmente questo attributo per identificare il contenuto dell'immagine.
Se questo attributo non viene scritto, il motore di ricerca includerà l'immagine.
larghezza
Imposta la larghezza dell'immagine
altezza
Imposta l'altezza dell'immagine
Formato immagine
JPEG
Immagini colorate, ad es
GIF
Colore singolo, semplici immagini trasparenti, grafica dinamica
PNG
Immagini colorate, complesse e trasparenti
Principi di selezione delle immagini
L'effetto è coerente, usa piccolo
L'effetto non è coerente, utilizzare quello con l'effetto migliore
percorso relativo
Un percorso relativo alla directory in cui si trova la risorsa corrente
È possibile utilizzare ../ per tornare alla directory di primo livello e, per tornare a più livelli, utilizzare diversi ../
Specifica della sintassi xHtml
1.HTML non fa distinzione tra maiuscole e minuscole, ma prova a utilizzare le lettere minuscole
2.I commenti HTML non possono essere nidificati
3. L'etichetta deve avere una struttura completa
O appaiono in coppia
o tag a chiusura automatica
4. I tag possono essere nidificati ma non incrociati.
5. L'attributo deve avere un valore e il valore deve essere racchiuso tra virgolette singole e doppie.
etichetta di testo
esprimere enfasi nel tono
Indica l'importanza del contenuto
significa corsivo semplice
significa semplicemente audace
Indica contenuti come i dettagli
Per indicare il contenuto di riferimento, citare può essere utilizzato per qualsiasi cosa abbia il titolo di un libro.
citazione breve, citazione in linea
riferimento lungo, riferimento a livello di blocco
apice
pedice
Contenuti eliminati
Contenuto inserito
I tag preformattati possono preservare la formattazione degli spazi e delle interruzioni di riga nel codice
rappresenta il codice del programma
elenco
lista non ordinata
Utilizza ul per creare un elenco non ordinato e utilizza li per rappresentare un elemento dell'elenco nell'elenco.
Elenco non ordinato che utilizza simboli come punti elenco
lista ordinata
Usa ol per creare un elenco non ordinato e usa li per rappresentare un elemento dell'elenco nell'elenco.
Utilizza i numeri sequenziali come punti elenco
elenco delle definizioni
Gli elementi correlati all'elenco sono tutti elementi di blocco e possono essere nidificati l'uno nell'altro.
Rimuovere i proiettili
stile elenco: nessuno
disposizione
galleggiante
Utilizzare float per impostare gli elementi su float
Valore facoltativo
nessuno
Valore predefinito, nessun float, elemento nel flusso di documenti
Sinistra
L'elemento fluttua a sinistra
Giusto
L'elemento fluttua a destra
Caratteristiche
1. Dopo che l'elemento è stato reso mobile, si separerà completamente dal flusso del documento.
2. Dopo lo spostamento, l'elemento si sposterà sempre in cima all'elemento genitore.
3. Si fermerà finché non incontrerà il bordo dell'elemento genitore o altri elementi fluttuanti.
4. Se l'elemento mobile si trova sopra un elemento blocco, l'elemento mobile non coprirà l'elemento blocco.
5. L'elemento mobile non supererà l'elemento fratello mobile sopra di esso e può essere allineato al massimo su un lato.
6. Gli elementi mobili non copriranno il testo. Il testo si avvolgerà automaticamente attorno agli elementi mobili. È possibile ottenere l'effetto di disposizione del testo fluttuando.
Caratteristiche degli elementi dopo il galleggiamento
Quando un elemento viene reso mobile, viene completamente rimosso dal flusso del documento.
elemento di blocco
Dopo che l'elemento blocco lascia il flusso del documento
1. Non occuperà una linea
2. Sia la larghezza che l'altezza vengono allungate dal contenuto
elementi in linea
Gli elementi in linea diventano elementi blocco dopo aver lasciato il flusso del documento.
altamente crollato
Per impostazione predefinita, l'altezza dell'elemento genitore nel flusso di documenti viene espansa dagli elementi figli. Quando l'elemento figlio si allontana dal flusso di documenti, non sarà in grado di supportare l'altezza dell'elemento genitore, il che causerà l'altezza di. l'elemento genitore da comprimere.
Una volta che l'altezza dell'elemento genitore crolla, le posizioni di tutti gli elementi si sposteranno verso l'alto, rendendo caotico il layout dell'intera pagina.
metodo uno
Attiva BFC o hasLayout dell'elemento genitore
BFC
Blocca il contesto di formattazione
ambiente di formattazione a livello di blocco
BFC è un attributo implicito dell'elemento ed è disattivato per impostazione predefinita.
BFC può essere attivato tramite alcuni stili speciali
Dopo aver attivato BFC gli elementi avranno le seguenti caratteristiche:
1. I margini verticali dell'elemento genitore non si sovrapporranno agli elementi figlio.
2. Gli elementi con BFC attivato non verranno coperti da elementi mobili.
3. Gli elementi con BFC abilitato possono contenere elementi figlio mobili.
Come abilitare BFC
1. Imposta l'elemento su mobile
2. Impostare il posizionamento assoluto degli elementi
3. Imposta il tipo di elemento su blocco in linea
4. Impostare l'overflow su un valore non predefinito
In genere, overflow:hidden viene utilizzato per abilitare BFC.
hasLayout
Non esiste un BFC in IE6, ma esiste un hasLayout simile a BFC
In IE6, puoi risolvere il problema del collasso dell'altezza attivando hasLayout.
Il modo più semplice per aprire con effetti collaterali minimi
zoom:1
Quando si imposta una larghezza non predefinita per un elemento, hasLayout verrà attivato automaticamente.
Metodo due
Aggiungi un div vuoto alla fine dell'elemento principale compresso, quindi rendi mobile il div
L'utilizzo di questo approccio aggiunge una struttura non necessaria alla pagina
Metodo tre
Utilizza la pseudo-classe after per aggiungere un elemento block dopo l'elemento genitore e cancellarne il float
Il principio di questo metodo è lo stesso del metodo 2, ma non è necessario aggiungere la struttura corrispondente alla pagina.
posizione
Attraverso il posizionamento, gli elementi della pagina possono essere posizionati in qualsiasi punto della pagina.
Utilizzare posizione per impostare il posizionamento degli elementi
Valore facoltativo
statico
Valore predefinito, il posizionamento degli elementi non è abilitato
parente
Attiva il posizionamento relativo degli elementi
assoluto
Attiva il posizionamento assoluto degli elementi
fisso
Attiva il posizionamento fisso degli elementi
posizionamento relativo
1. Dopo aver attivato il posizionamento relativo dell'elemento, l'elemento non cambierà in alcun modo se l'offset non è impostato.
2. Gli elementi posizionati relativi vengono posizionati rispetto alla propria posizione nel flusso di documenti.
3. Gli elementi posizionati in modo relativo non si staccano dal flusso del documento
4. Il posizionamento relativo non cambia la natura dell'elemento, che si tratti di un elemento di blocco o di un elemento di blocco, oppure di un elemento in linea o di un elemento in linea.
5. Gli elementi posizionati relativi verranno elevati a un livello superiore
posizionamento assoluto
1. Dopo che l'elemento è stato impostato sul posizionamento assoluto, se l'offset non è impostato, la posizione dell'elemento non cambierà.
2. Un elemento con posizionamento assoluto viene posizionato rispetto all'elemento antenato più vicino per il quale il posizionamento è abilitato. Se per tutti gli elementi antenato non è abilitato il posizionamento, viene posizionato rispetto alla finestra del browser.
3. Gli elementi posizionati in modo assoluto si separeranno completamente dal flusso dei documenti.
4. Il posizionamento assoluto cambierà la natura dell'elemento. Blocco variabile in linea, l'altezza e la larghezza del blocco vengono allungate dal contenuto e non occupano una linea esclusiva
5. Il posizionamento assoluto eleverà l'elemento a un livello superiore
Posizionamento fisso
Il posizionamento fisso è un tipo speciale di posizionamento assoluto. La maggior parte delle sue caratteristiche sono le stesse del posizionamento assoluto.
La differenza è che gli elementi posizionati in modo fisso sono sempre posizionati rispetto alla finestra del browser. E non scorrerà con la barra di scorrimento
IE6 non supporta il posizionamento fisso
Gerarchia
Elementi posizionati > Elementi mobili > Elementi nel flusso di documenti
Quando il posizionamento è attivato per un elemento, il livello dell'elemento può essere impostato tramite z-index.
Maggiore è il valore dell'indice z, maggiore sarà il numero di elementi prioritari visualizzati.
Se i valori dell'indice z sono gli stessi o non è presente alcun indice z, l'elemento inferiore verrà visualizzato per primo.
Gli elementi genitore non coprono mai gli elementi figlio
Compensare
Quando il posizionamento è attivato per un elemento, la posizione dell'elemento può essere impostata tramite offset.
Sinistra
La distanza a sinistra dell'elemento dalla posizione di posizionamento
superiore
La distanza dalla parte superiore dell'elemento alla posizione di posizionamento
Giusto
La distanza a destra dell'elemento dalla posizione di posizionamento
metter il fondo a
La distanza inferiore dell'elemento dalla posizione di posizionamento
In genere, vengono utilizzati solo due valori per definire la posizione di un elemento.
Introduzione al corso
architettura del software
C/S, cliente/server
1. Generalmente, il software che utilizziamo è un'architettura C/S
2. Ad esempio, software nel sistema QQ, 360, Office, XMind
3.C rappresenta il client. Gli utenti utilizzano il software tramite il client.
4.S rappresenta il server responsabile dell'elaborazione della logica aziendale del software.
Caratteristiche
1. Il software deve essere installato prima dell'uso
2. Quando il software viene aggiornato, il server e il client devono essere aggiornati contemporaneamente.
Il software di architettura 3.C/S non può essere utilizzato su più piattaforme
4. Il client e il server del software dell'architettura C/S comunicano utilizzando i propri protocolli, il che è relativamente sicuro.
B/S, browser/server
1.B/S è essenzialmente C/S, ma il software dell'architettura B/S utilizza il browser come client del software.
2. Il software di architettura B/S utilizza il software utilizzando un browser per accedere alla pagina web.
3. Ad esempio: JD.com Taobao 12306 Zhihu Sina Weibo
Caratteristiche
1. Non è necessario installare il software, basta utilizzare il browser per accedere all'URL specificato.
2. Quando il software viene aggiornato, non è necessario aggiornare il client.
3. Il software può essere multipiattaforma e può essere utilizzato purché sia presente un browser nel sistema.
4. Il software di architettura B/S utilizza il comune protocollo HTTP per la comunicazione tra il client e il server, che è relativamente pericoloso.
base
Il sistema decimale consiste nell'aggiungere uno al numero completo.
binario
01
10 11 100 101 110 111
decimale
0 1 2 3 4 5 6 7 8 9
10 11 12 13 14. . .
esadecimale
Inserisci 1 se hai più di 16 anni
0 1 2 3 4 5 6. . . 9 a b c d e f
10 11 12 ... 19 1a 1b 1c 1d 1e 1f
Poiché l'esadecimale è pieno di 16, è necessario impostare diversi caratteri speciali per rappresentare 10 11 12 13 14 15
Usa a b c d e f per rappresentare rispettivamente 10 11 12 13 14 15
Ottale
Inserisci 1 se 8 o più
0 1 2 3 4 5 6 7
10 11 12 13 14 15 16 17 20 21 22
Problema di codice confuso
Ragioni per i personaggi confusi
Il computer è una macchina molto stupida. Conosce solo due cose 0 1
Qualsiasi contenuto salvato nel computer dovrà eventualmente essere convertito in una codifica binaria 0 1 per essere salvato, incluso il contenuto delle pagine Web.
Ad esempio: potrebbe essere necessario convertire la Cina, nella parte inferiore del computer, in 1010001001010101011010
Durante la lettura del contenuto, è necessario codificare il codice binario e convertirlo nel contenuto corretto.
codifica
Il processo di conversione dei caratteri in codifica binaria secondo determinate regole
decodifica
Il processo di conversione della codifica binaria in caratteri secondo determinate regole
set di caratteri
Le regole utilizzate per la codifica e la decodifica sono chiamate set di caratteri
Set di caratteri comuni
ASCII
ISO-8859-1
GBK
GB2312
Codifica predefinita per i sistemi cinesi
UTF-8
Codice universale, supporta tutti i testi sulla terra
ANSI
Salva automaticamente i file nella codifica predefinita del sistema
La causa principale dei caratteri confusi è che la codifica e la decodifica utilizzano set di caratteri diversi.
Nei browser di sistema cinesi, GB2312 viene utilizzato per la decodifica per impostazione predefinita.
modello a scatola
I CSS imposta ogni elemento su una casella rettangolare
Imposta tutti gli elementi come caselle per facilitare il layout della pagina
Quando questi elementi sono tutti riquadri, il nostro layout diventa il posizionamento di riquadri sulla pagina.
modello a scatola
Ogni scatola è composta dalle seguenti parti
area del contenuto
L'area del contenuto equivale allo spazio in cui la scatola conserva gli oggetti
L'area del contenuto si trova nella parte più interna della scatola
Tutti gli elementi figli di un elemento vengono inseriti nell'area del contenuto dell'elemento genitore
Impostazioni dell'area contenuto
larghezza
Larghezza dell'area del contenuto
altezza
altezza dell'area del contenuto
imbottitura
Il riempimento si riferisce alla distanza tra l'area del contenuto e il bordo. Il riempimento influisce sulla dimensione della casella.
Nella casella sono presenti quattro direzioni di riempimento.
parte superiore imbottita
imbottitura destra
fondo imbottito
imbottitura-sinistra
imbottitura
È possibile impostare contemporaneamente il riempimento in quattro direzioni e le regole sono coerenti con la larghezza del bordo.
imbottitura: in alto a destra in basso a sinistra
imbottitura: su, sinistra, destra, giù
imbottitura: su, giù, sinistra e destra
imbottitura: su, giù, sinistra, destra
La dimensione della casella visibile è determinata dall'area del contenuto, dal riempimento e dai bordi.
telaio
Il lato più esterno del riquadro visibile è il riquadro del bordo, mentre il bordo è il bordo del riquadro
Imposta i confini
L'impostazione del bordo richiede l'impostazione di tre stili contemporaneamente e uno di questi è indispensabile.
larghezza del bordo
larghezza del bordo
È possibile specificare la larghezza dei quattro bordi contemporaneamente o separatamente.
regola
quattro valori
larghezza del bordo: 10px 20px 30px 40px;
larghezza del bordo: in alto a destra in basso a sinistra;
tre valori
larghezza del bordo: 10px 20px 30px;
larghezza del bordo: superiore, sinistra e inferiore;
due valori
larghezza del bordo: 10px 20px;
larghezza del bordo: su, giù, sinistra e destra;
un valore
larghezza del bordo: 10px;
larghezza del bordo: su, giù, sinistra e destra;
colore del bordo
colore del bordo
stile del bordo
Stile del bordo
Oltre a questi tre stili, i CSS forniscono anche
larghezza-bordo-xxx
bordo-xxx-colore
stile border-xxx
xxx può essere
superiore
Giusto
metter il fondo a
Sinistra
Questi stili consentono di specificare individualmente il colore, la larghezza e lo stile dei quattro lati.
Proprietà abbreviata per confine
confine
confine sinistro
bordo superiore
confine-destra
bordo-fondo
Questi attributi possono impostare contemporaneamente stili relativi ai bordi.
border può impostare il colore, la larghezza e lo stile di quattro lati contemporaneamente
border-xxx può impostare un determinato bordo separatamente
regola
Utilizzando questi stili, puoi impostare la larghezza del bordo border-style border-color contemporaneamente. Diversi attributi sono separati da spazi e non è richiesto alcun ordine.
margini
La distanza tra il riquadro del margine e gli altri riquadri Il margine non influirà sulla dimensione del riquadro visibile, ma influenzerà la posizione del riquadro.
Ha anche margini in quattro direzioni
margine superiore
margine destro
margine-inferiore
margine sinistro
Attributo abbreviato
margine
Le regole sono le stesse del riempimento
valore del margine
Può essere impostato su automatico
Se imposti i margini sinistro e destro individualmente su automatico, imposterà i margini sinistro o destro sul loro valore massimo
Se entrambi i margini sinistro e destro sono impostati su automatico, i margini sinistro e destro verranno impostati su un valore uguale, centrando così un elemento figlio orizzontalmente all'interno del suo elemento genitore.
margine:0 automatico
Può essere impostato su valori negativi
Se il margine è impostato su un valore negativo, l'elemento si sposta nella direzione opposta
sovrapposizione dei margini
I margini verticali adiacenti si sovrappongono
I margini degli elementi adiacenti assumeranno il valore massimo
I margini dell'elemento figlio verranno passati all'elemento genitore
I margini orizzontali non si sovrappongono, ma vengono sommati
Modello box per elementi in linea
larghezza
altezza
non supportare
imbottitura
Supporta l'imbottitura orizzontale
È supportata anche la spaziatura verticale, ma non influirà sul layout.
confine
Supporta i bordi in quattro direzioni, ma i bordi verticali non influiscono sul layout
margine
Supporta i margini orizzontali
Non supporta l'orientamento verticale
Stili correlati al modello box
Schermo
Imposta il tipo di visualizzazione di un elemento
Valore facoltativo
nessuno
L'elemento non verrà visualizzato sulla pagina e non occuperà la posizione della pagina
bloccare
L'elemento apparirà come un elemento di blocco
in linea
L'elemento apparirà come un elemento in linea
blocco inline
L'elemento apparirà come un elemento di blocco in linea
Contiene sia elementi in linea che a blocchi
Non occupare una linea
Può impostare larghezza e altezza
visibilità
Imposta se l'elemento viene visualizzato sulla pagina
Valore facoltativo
visibile
Valore predefinito, l'elemento viene visualizzato normalmente sulla pagina
nascosto
L'elemento non viene visualizzato sulla pagina, ma occupa comunque una posizione nella pagina
traboccare
Imposta il modo in cui un elemento gestisce il contenuto in overflow
Valore facoltativo
visibile
Valore predefinito, il contenuto in overflow non verrà elaborato e visualizzato all'esterno dell'elemento principale.
nascosto
Il contenuto in eccesso verrà nascosto e non verrà visualizzato.
scorrere
Aggiungi barre di scorrimento orizzontali e verticali all'elemento genitore
Le barre di scorrimento verranno aggiunte indipendentemente dal fatto che il contenuto trabocchi.
auto
Genera automaticamente barre di scorrimento secondo necessità
flusso di documenti
Il flusso di documenti si riferisce a una posizione in una pagina Web
Il flusso di documenti è il fondamento di una pagina Web e il livello più basso di una pagina Web. Tutti gli elementi sono disposti nel flusso di documenti per impostazione predefinita.
Per impostazione predefinita, gli elementi sono disposti da sinistra a destra e dall'alto verso il basso nel flusso del documento (coerentemente con le nostre abitudini di scrittura)
elemento di blocco
1. Gli elementi blocco sono disposti dall'alto verso il basso nel flusso del documento.
2. La larghezza predefinita di un elemento blocco nel flusso di documenti è il 100% dell'elemento genitore.
3. Per impostazione predefinita, l'altezza dell'elemento blocco nel flusso di documenti viene allungata dal contenuto.
elementi in linea
1. Gli elementi in linea sono disposti da sinistra a destra nel flusso del documento. Se una riga non è sufficiente per contenere tutti gli elementi in linea, passa alla riga successiva e continua a essere disposti da sinistra a destra.
2. Nel flusso del documento, la larghezza e l'altezza degli elementi in linea vengono allungate in base al contenuto per impostazione predefinita.