Login
Accedi

Galleria mappe mentale Punti di conoscenza HTML5 e CSS3

Punti di conoscenza HTML5 e CSS3

Questa è una mappa mentale sui punti di conoscenza di HTML5 CSS3, inclusi elementi e attributi della pagina HTML, introduzione ai CSS, modello box CSS, mobile e posizionamento, applicazione di moduli, ecc.

Modificato alle 2021-07-06 01:12:01

WSCoUtCI

Lavori recenti Visualizza più lavori>>

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.

Punti di conoscenza HTML5 e CSS3

WSCoUtCI

Lavori recenti Visualizza più lavori>>

Consigliato per te
Profilo

canvasHTML5 nuovo tag punto di conoscenza note mappa mentale
- 4
WSCoUtCI
HTML5
- 6
WSCoUtCI
Progettazione e produzione web HTML5 CSS3
- 5
WSCoUtCI

HTML CSS3

Prima introduzione all'HTML

tag di controllo del testo

etichetta del titolo

<hn align="alignment">Testo del titolo</hn>

segno di paragrafo

<p align="alignment">Testo del titolo</p>

segno di linea orizzontale

segno di nuova riga

<br/>

Tag di formattazione del testo

<b></b> e <strong></strong> il testo viene visualizzato in grassetto (b definisce il testo in grassetto e forte definisce il testo enfatizzato)

tag immagine

alt testo sostitutivo quando l'immagine non può essere visualizzata

tag del collegamento ipertestuale

<a href="Salta target" target="Come si apre la finestra di destinazione">Testo o immagine</a> target _self è il valore predefinito, che significa l'apertura nella finestra originale, _blank significa l'apertura in una nuova finestra

Link di ancoraggio <a href="#id name">Testo del link</a>

Elementi e attributi della pagina HTML

Elenca elementi

<ul> Elenco non ordinato <li>Voce elenco 1</li> (<ul></ul> può essere nidificato solo <li> </li>)

<ol> Elenco ordinato <li>Elenco voce 1</li> Modificare il valore iniziale della numerazione dell'elenco <ol start="2">

L'elemento dl è spesso usato per spiegare e descrivere termini o sostantivi <dl> <dt>Sostantivo 1</dt> <dd>Spiegazione del sostantivo 1<dd>

Elementi strutturali

elemento di intestazione

elemento header (un elemento strutturale con ruolo guida e di navigazione che può contenere tutto il contenuto solitamente posto in testa alla pagina) Formato grammaticale di base; <intestazione> <h1>Tema Web</h1> …. </intestazione>

elemento di navigazione

elemento nav (i collegamenti con le proprietà di navigazione possono essere riepilogati in un'unica area) Formato della sintassi di base: <nav> <ul> <li><a href="#">Home page</li> </ul> </nav>

Elementi interattivi della pagina

elemento dettagli ed elemento riepilogo

l'elemento dettagli e l'elemento riepilogo riepilogo definiscono un titolo per i dettagli e quindi il contenuto nascosto viene visualizzato quando si fa clic <dettagli> <summary>Mostra elenco</summary> <ul> <li>Elenco 1</li> <li>Elenco 2</li> </ul> </dettagli>

Iniziare con i CSS

Foglio di stile CSS

in linea

<tagname style="Attribute1:Attributo valore 1";"Attributo2:Attributo valore 2";>Contenuto</tagname>

Incorporato

<testa> <style type="text/css"> Selettore {Attributo 1: Valore attributo 1; Attributo 2: Valore attributo 2} </stile> </testa>

tipo=testo/css

Collegamento

Selettori di base CSS

selettore di tag

Nome tag {Attributo 1: Valore attributo 1; Attributo 2: Valore attributo 2}

selettore di classe

.Nome classe {Attributo 1: Valore attributo 1; Attributo 2: Valore attributo 2}

Selettore dell'ID

#id nome {attributo 1: valore attributo 1; attributo 2: valore attributo 2}

selettore di caratteri jolly

*{Attributo 1: Valore attributo 1; Attributo 2: Valore attributo 2}

Può corrispondere a tutti gli elementi della pagina

Selettore dell'Unione

I selettori sono collegati da virgole e qualsiasi selettore può essere utilizzato come parte del selettore di unione.

Proprietà dello stile del testo

dimensione-carattere: dimensione del carattere

I pixel più comunemente utilizzati sono i caratteri em con dimensione px

famiglia di caratteri: carattere

I pixel più comunemente utilizzati sono i caratteri em con dimensione px

font-weight: peso del carattere

normal Predefinito bold Definisce i caratteri in grassetto bolder Definisce i caratteri in grassetto più leggero definisce i caratteri più leggeri (100-900) 400 equivale a normale

font-style: stile del carattere

valore predefinito normale corsivo corsivo obliquo

Proprietà dell'aspetto del testo

coler: colore del testo

interlinea dell'altezza della riga

Esistono generalmente tre tipi di unità di valore degli attributi: pixel px valore relativo em percentuale %

decorazione del testo decorazione del testo

nessuno Nessuna decorazione sottolineatura sottolineatura sopralinea sopralinea barrato

text-align: modalità di allineamento orizzontale

sinistra allineata a sinistra destra allineata a destra centro centrato

taxt-indent: trattino della prima riga

Applicazione del modulo

Crea modulo

<from action="indirizzo url" metodo="metodo di invio (post)" nome="nome modulo"> Vari controlli del modulo </da>

elementi e attributi di input

Casella di immissione testo a riga singola ,<tipo di input="testo">

Casella di immissione della password <tipo di input="password">

pulsante singolo <input type="radio">

casella di controllo <tipo di input="casella di controllo">

pulsante di invio <input type="invia">

pulsante di reset <tipo input="reimposta">

seleziona elemento

<seleziona> <option>Opzioni</option> <option>Opzioni</option> <seleziona>

Galleggiamento e posizionamento

elemento galleggiante

L'attributo float dell'elemento float l'elemento sinistro fluttua a sinistra l'elemento destro fluttua a destra none l'elemento non fluttua

posizionamento degli elementi

Posizione: valore dell'attributo posizionamento statico statico relativo posizionamento relativo assoluto posizionamento assoluto fisso posizionamento fisso

tipo di elemento

Il tag <span> può contenere solo testo e vari tag in linea

Modello a scatola CSS

<div>modello a scatola

<div> può sostituire elementi a livello di blocco

Lo spazio tra <div> e </div> equivale a un riquadro. Puoi impostare i margini, il riempimento, la larghezza e l'altezza. Allo stesso tempo, può ospitare vari elementi di rete come paragrafi, titoli, tabelle, immagini. eccetera.

Proprietà relative al modello box

Proprietà di confine

stile del bordo

border-style: /Impostazione completa dello stile del bordo/

larghezza del bordo

larghezza del bordo Un valore per i quattro lati

colore del bordo

Impostazioni complete dei bordi

bordo: colore dello stile della larghezza

Proprietà del margine

automatica automatica

imbottitura imbottitura

Imbottitura superiore imbottita Imbottitura fondo-imbottitura Imbottitura sinistra imbottitura sinistra Imbottitura destra, imbottitura destra

margine margine

Imbottitura superiore con margine superiore Imbottitura inferiore del margine inferiore Imbottitura sinistra del margine sinistro Imbottitura del margine destro destro Margine in alto a destra in basso a sinistra

margini interni ed esterni netti

*{ imbottitura: 0; margine: 0; }

proprietà dello sfondo

Quando si aggiungono immagini alla casella Se sia la larghezza che l'altezza sono al 100%, la copertura può essere regolata automaticamente.

colore di sfondo Imposta il colore di sfondo

immagine di sfondo Imposta l'immagine di sfondo

ripetizione dello sfondo Imposta i riquadri dell'immagine di sfondo

riquadri con ripetizione dello sfondo in orizzontale e in verticale -no-repeat non piastrellare Ripeti x tessere in orizzontale Ripeti y per affiancare verticalmente

posizione dello sfondo Valori dei pixel per controllare la posizione dell'immagine di sfondo

dimensione dello sfondo Imposta la dimensione dell'immagine

Dimensione dello sfondo: attributo 1 attributo 2; La copertina è sufficientemente grande. La dimensione massima del contenitore si adatta perfettamente all'area del contenuto.

Selettori CSS3

:prima del selettore

Per inserire contenuto prima del contenuto dell'elemento selezionato, il contenuto deve essere specificato con l'attributo content. <elemento>: prima { Contenuto: testo; }

Link pseudo-classe

a: link{regola di stile CSS;} Lo stato del collegamento ipertestuale non visitato

a: visitato{regole di stile CSS;} Lo stato del collegamento ipertestuale dopo la visita

a: hover {regola di stile CSS;} Lo stato del collegamento ipertestuale quando il mouse passa o si ferma

a: attivo {regola di stile CSS;} Lo stato del collegamento ipertestuale quando il mouse non si muove

sinistra sinistra giusto giusto centro centro

larghezza (larghezza) altezza titolo (contenuto visualizzato al passaggio del mouse)