La creazione di pagine Web inizia con HTML. Abbellirli e renderli interattivi viene dopo. Ma per iniziare a creare siti Web statici funzionali, è necessaria una conoscenza dell'HTML. (Vuoi una rapida introduzione a questo linguaggio di markup? Leggi le nostre FAQ HTML.)
Come parte dell'apprendimento della lingua, c'è un lungo elenco di elementi che devi aggiungere al tuo vocabolario HTML. E questo compito può sembrare scoraggiante all'inizio, motivo per cui abbiamo creato il seguente cheat sheet. Ti offre un modo semplice per scoprire/capire/richiamare elementi HTML ogni volta che ne hai bisogno.
Il cheat sheet copre tag e attributi per strutturare le pagine Web, formattare il testo, aggiungere moduli, immagini, elenchi, collegamenti e tabelle. Include anche i tag introdotti nei codici HTML5 e HTML per i caratteri speciali di uso comune.
eccezione del servizio di sistema bsod di Windows 10
DOWNLOAD GRATUITO: Questo cheat sheet è disponibile come a PDF scaricabile dal nostro partner di distribuzione, TradePub. Dovrai compilare un breve modulo per accedervi solo per la prima volta. Scarica Il cheat sheet di HTML Essentials .
puoi giocare con i giochi gamecube?
Il cheat sheet di HTML Essentials
scorciatoia | Azione | |
---|---|---|
Tag di base | ||
... | Il primo e l'ultimo tag di un documento HTML. Tutti gli altri tag si trovano tra questi tag di apertura e chiusura. | |
... | Specifica la raccolta di metadati per il documento. | |
... | Descrive il titolo della pagina e viene visualizzato nella barra del titolo del browser. | |
... | Include tutti i contenuti che verranno visualizzati nella pagina web. | |
Informazioni sul documento | ||
Menziona l'URL di base e tutti i relativi link al documento. | ||
Per ulteriori informazioni sulla pagina come autore, data di pubblicazione, ecc. | ||
Collegamenti a elementi esterni come fogli di stile. | ||
... | Contiene informazioni sullo stile del documento come CSS (Cascading Style Sheets). | |
... | Contiene collegamenti a script esterni. | |
Formattazione del testo | ||
... O ... | Rende il testo in grassetto. | |
... | Mette in corsivo il testo e lo rende in grassetto. | |
... | Scrive il testo in corsivo ma non lo rende in grassetto. | |
... | Testo barrato. | |
... | Cita un autore di una citazione. | |
... | Etichetta una parte eliminata di un testo. | |
... | Mostra una sezione che è stata inserita nel contenuto. | |
... | Per visualizzare le quotazioni. Spesso utilizzato con il tag. | |
... | Per preventivi più brevi. | |
... | Per abbreviazioni e forme complete. | |
... | Specifica i dettagli di contatto. | |
... | Per le definizioni. | |
... | Per frammenti di codice. | |
... | Per scrivere i pedici | |
... | Per scrivere apici. | |
... | Per ridurre le dimensioni del testo e contrassegnare le informazioni ridondanti in HTML5. | |
Struttura del documento | ||
... | Diversi livelli di titoli. H1 è il più grande e H6 è il più piccolo. | |
... | Per dividere il contenuto in blocchi. | |
... | Include elementi in linea, come un'immagine, un'icona, un'emoticon, senza rovinare la formattazione della pagina. | |
... | Contiene testo normale. | |
| Crea una nuova linea. | |
Disegna una barra orizzontale per mostrare la fine della sezione. | ||
Elenchi | ||
| Per l'elenco ordinato degli articoli. | |
| Per un elenco di articoli non ordinato. | |
Per singoli elementi in un elenco. | ||
| Elenco di elementi con definizioni. | |
La definizione di un singolo termine in linea con il contenuto del corpo. | ||
La descrizione del termine definito. | ||
Link | ||
... | Tag di ancoraggio per i collegamenti ipertestuali. | |
... | Tag per il collegamento a indirizzi e-mail. | |
... | Etichetta di ancoraggio per elencare i numeri di contatto. | |
... | Tag di ancoraggio per il collegamento a un'altra parte della stessa pagina. | |
... | Passa a una sezione div della pagina web. (Variazione del tag sopra) | |
immagini | ||
| Per visualizzare i file di immagine. | |
Attributi per il etichetta | ||
src=url | Collegamento al percorso di origine dell'immagine. | |
alt = testo | Il testo visualizzato quando si passa il mouse sull'immagine. | |
altezza= | Altezza dell'immagine in pixel o percentuali. | |
larghezza= | Larghezza dell'immagine in pixel o in percentuale. | |
allinea= | Allineamento relativo dell'immagine sulla pagina. | |
bordo= | Spessore del bordo dell'immagine. | |
... | Link a una mappa cliccabile. | |
... | Nome dell'immagine della mappa. | |
L'area dell'immagine di una mappa immagine. | ||
Attributi per il tag | ||
forma= ' | Forma dell'area dell'immagine. | |
coordinate= | Coordinate dell'area dell'immagine della mappa. | |
Forme | ||
... | Il tag padre per un modulo HTML. | |
Attributi per il tag | ||
azione=url | L'URL a cui vengono inviati i dati del modulo. | |
metodo= | Specifica il protocollo di invio del modulo (POST o GET). | |
enctype= | Lo schema di codifica dei dati per gli invii POST. | |
completamento automatico | Specifica se il completamento automatico del modulo è attivato o disattivato. | |
non convalidare | Specifica se il modulo deve essere convalidato prima dell'invio. | |
accetta-charsets | Specifica la codifica dei caratteri per l'invio di moduli. | |
obbiettivo | Mostra dove verrà visualizzata la risposta all'invio del modulo. | |
... | Raggruppa elementi correlati nel modulo/ | |
... | Specifica cosa l'utente deve inserire in ogni campo del modulo. | |
... | Una didascalia per l'elemento fieldset. | |
Specifica il tipo di input da ricevere dall'utente. | ||
Attributi per il tag | ||
tipo= | Determina il tipo di input (testo, date, password). | |
nome= | Specifica il nome del campo di input. | |
valore= | Specifica il valore nel campo di input. | |
taglia= | Imposta il numero di caratteri per il campo di input. | |
lunghezza massima= | Imposta il limite dei caratteri di input consentiti. | |
necessario | Rende obbligatorio un campo di immissione. | |
larghezza= | Imposta la larghezza del campo di input in pixel. | |
altezza= | Imposta l'altezza del campo di input in pixel. | |
segnaposto= | Descrive il valore del campo previsto. | |
modello= | Specifica un'espressione regolare, che può essere utilizzata per cercare modelli nel testo dell'utente. | |
min = | Il valore minimo consentito per un elemento di input. | |
max= | Il valore massimo consentito per un elemento di input. | |
Disabilitato | Disabilita l'elemento di input. | |
... | Per acquisire stringhe di dati più lunghe dall'utente. | |
... | Specifica un elenco di opzioni tra cui l'utente può scegliere. | |
Attributi per il tag | ||
nome= | Specifica il nome per un elenco a discesa. | |
taglia= | Numero di opzioni fornite all'utente. | |
multiplo | Imposta se l'utente può scegliere più opzioni dall'elenco. | |
necessario | Specifica se la scelta di una o più opzioni è necessaria per l'invio del modulo. | |
messa a fuoco automatica | Specifica che un elenco a discesa viene automaticamente evidenziato dopo il caricamento di una pagina. | |
... | Definisce gli elementi in un elenco a discesa. | |
valore= | Visualizza il testo per qualsiasi opzione data. | |
selezionato | Imposta l'opzione predefinita visualizzata. | |
... | Tag per la creazione di un pulsante per l'invio del modulo. | |
Oggetti e iFrame | ||
... | Descrive il tipo di file incorporato. | |
Attributi per il tag | ||
altezza= | L'altezza dell'oggetto. | |
larghezza= | La larghezza dell'oggetto. | |
tipo= | Il tipo di supporto contenuto nell'oggetto. | |
Un frame in linea per incorporare informazioni esterne. | ||
nome= | Il nome dell'iFrame. | |
src= | L'URL di origine per il contenuto all'interno del frame. | |
srcdoc= | Il contenuto HTML all'interno del frame. | |
altezza= | L'altezza dell'iFrame. | |
larghezza= | La larghezza dell'iFrame. | |
Aggiunge parametri extra per personalizzare l'iFrame. | ||
... | Incorpora un'applicazione esterna o un plug-in. | |
Attributi per il tag | ||
altezza= | Imposta l'altezza dell'incorporamento. | |
larghezza= | Imposta la larghezza dell'incorporamento. | |
tipo= | Il tipo o il formato dell'incorporamento. | |
src= | Il percorso di origine del file incorporato. | |
Tabelle | ||
Definisce tutto il contenuto di una tabella. | ||
... | Una descrizione della tabella. | |
... | Intestazioni per ogni colonna della tabella. | |
Definisce i dati del corpo per la tabella. | ||
... | Descrive il contenuto del piè di pagina della tabella. | |
Contenuto per una singola riga. | ||
... | I dati in una singola voce di intestazione. | |
... | Contenuto all'interno di una singola cella di tabella. | |
... | Raggruppa le colonne per la formattazione. | |
Una singola colonna di informazioni. | ||
Nuovi tag HTML5 | ||
... | Specifica l'intestazione della pagina web. | |
... | Specifica il piè di pagina della pagina web. | |
... | Contrassegna il contenuto principale della pagina web. | |
... | Specifica un articolo. | |
... | Specifica il contenuto della barra laterale di una pagina. | |
... | Specifica una particolare sezione nella pagina web. | |
... | Per descrivere ulteriori informazioni. | |
... | Usato come intestazione per il tag sopra. È sempre visibile all'utente. | |
... | Crea una finestra di dialogo. | |
... | Utilizzato per includere grafici e figure. | |
... | Descrive un elemento. | |
... | Evidenzia una parte specifica del testo. | |
... | Insieme di collegamenti di navigazione su una pagina web. | |
... | Un particolare elemento di un elenco o di un menu. | |
... | Misura i dati all'interno di un determinato intervallo. | |
... | Posiziona una barra di avanzamento e tiene traccia dei progressi. | |
... | Visualizza il testo che non supporta le annotazioni Ruby. | |
... | Visualizza i dettagli dei caratteri tipografici dell'Asia orientale. | |
... | Un'annotazione Ruby per la tipografia dell'Asia orientale. | |
... | Identifica ora e data. | |
Un'interruzione di riga all'interno del contenuto. | ||
¹Oggetti carattere HTML5 | ||
" O & quot; | Virgolette | |
< O & lt; | Segno minore di (<) | |
> O > | Segno di maggiore di (>) | |
; O ; | Spazio infrangibile | |
© ; O &copia ; | Simbolo del copyright | |
™ ; O & ucirc; | Simbolo del marchio | |
@ O & Uuml; | al simbolo (@) | |
& O & | Simbolo commerciale (&) | |
• ; O & ouml; | Piccolo proiettile | |
¹Ignora lo spazio prima del punto e virgola durante la digitazione del carattere HTML. |
Costruisci un sito web per un'esperienza pratica
Una volta capito le basi del codice HTML e avere una conoscenza pratica di CSS e JavaScript, prova a creare un sito web . Inoltre, assicurati di salvare il nostro cheat sheet delle proprietà CSS3 e Cheat sheet JavaScript per uso futuro!
Condividere Condividere Tweet E-mail Come accedere alla livella a bolla integrata di Google su Android
Se hai mai avuto bisogno di assicurarti che qualcosa sia livellato in un pizzico, ora puoi ottenere una livella a bolla sul tuo telefono in pochi secondi.
trova la musica in un video di youtubeLeggi Avanti Argomenti correlati
- Produttività
- Programmazione
- HTML
- Foglio informativo
Akshata si è formato in test manuali, animazione e design UX prima di concentrarsi sulla tecnologia e sulla scrittura. Questo ha riunito due delle sue attività preferite: dare un senso ai sistemi e semplificare il gergo. A MakeUseOf, Akshata scrive di come ottenere il meglio dai tuoi dispositivi Apple.
Altro da Akshata Shanbhag
Iscriviti alla nostra Newsletter
Iscriviti alla nostra newsletter per consigli tecnici, recensioni, ebook gratuiti e offerte esclusive!
Clicca qui per iscriverti