Tutorial di base HTML5

API HTML5

Media HTML5

Immagini HTML5

Norme di scrittura del codice HTML(5)

Di seguito elenchiamo le norme di codice HTML comuni e spesso utilizzate, una buona abitudine di scrittura facilita la manutenzione e l'aggiornamento del codice in seguito, migliorando l'efficienza del lavoro, speriamo che sia utile a tutti.

Norme di codice HTML

Molti sviluppatori web sanno poco delle norme di codice di HTML.

Tra il 2000 e il 2010, molti sviluppatori web sono passati da HTML a XHTML.

Gli sviluppatori che usano XHTML hanno gradualmente adottato una buona norma di scrittura HTML.

E per HTML5, dovremmo stabilire una buona norma di codice, che fornisce alcune raccomandazioni di norma.

Usare il tipo di documento corretto

La dichiarazione del tipo di documento si trova nella prima riga del documento HTML:

<!DOCTYPE html>

Se vuoi usare lo stesso stile minuscolo degli altri tag, puoi usare il seguente codice:

<!doctype html>

Usare i nomi degli elementi in minuscolo

I nomi degli elementi di HTML5 possono utilizzare lettere maiuscole e minuscole.

Raccomandiamo di usare lettere minuscole:

Lo stile misto di maiuscole e minuscole è molto cattivo.
Gli sviluppatori di solito usano lettere minuscole (simile a XHTML).
Lo stile minuscolo sembra più fresco.
Le lettere minuscole sono facili da scrivere.

Non raccomandato:

<SECTION>　
　　<p>Questo è un paragrafo.</p>
</SECTION>

Molto cattivo:

<Section>　
　　<p>Questo è un paragrafo.</p>
</SECTION>

Raccomandazione:

<section>　
　　<p>Questo è un paragrafo.</p>
</section>

Chiudere tutti gli elementi HTML

In HTML5, non è necessario chiudere tutti gli elementi (ad esempio, l'elemento <p>), ma raccomandiamo di aggiungere un tag di chiusura a ciascun elemento.

Non raccomandato:

<section>
　　<p>Questo è un paragrafo.</p>
　　<p>Questo è un paragrafo.</p>
</section>

Raccomandazione:

<section>
　　<p>Questo è un paragrafo.</p>
　　<p>Questo è un paragrafo.</p>
</section>

Chiudere l'elemento HTML vuoto

In HTML5, l'elemento HTML vuoto non deve necessariamente essere chiuso:

Possiamo scrivere così:

<meta charset="utf-8">

Puoi anche scrivere così:

<meta charset="utf-8" />

In XHTML e XML, la barra obliqua (/) è obbligatoria.

Se ti aspetti che il software XML utilizzi la tua pagina, questo stile è molto buono.

Usare i nomi delle proprietà in minuscolo

I nomi delle proprietà di HTML5 permettono l'uso di lettere maiuscole e minuscole.

Raccomandiamo di usare i nomi delle proprietà in minuscolo:

L'uso contemporaneo di maiuscole e minuscole è un'abitudine molto cattiva.
Gli sviluppatori di solito usano lettere minuscole (simile a XHTML).
Lo stile minuscolo sembra più fresco.
Le lettere minuscole sono facili da scrivere.

Non raccomandato:

<div CLASS="Style">

Raccomandazione:

<div class="style">

Valori degli attributi

I valori degli attributi HTML5 possono non utilizzare virgolette.

Raccomandiamo di utilizzare virgolette per i valori degli attributi:

Se il valore degli attributi contiene spazi, è necessario utilizzare virgolette.
Non si raccomanda lo stile misto, si consiglia di utilizzare uno stile uniforme.
L'uso di virgolette per i valori degli attributi facilita la lettura.

Quello che segue contiene spazi negli attributi di esempio, non utilizza virgolette, quindi non funziona:

<table class=table striped>

Quello che segue utilizza virgolette doppie, è corretto:

<table class="table striped">

Proprietà delle immagini

Di solito si utilizza l'attributo alt per le immagini. Quando l'immagine non può essere visualizzata, può sostituire l'immagine.

<!DOCTYPE html>
<html>
<head>　
<meta charset="utf-8">　
<title>Sito di tutorial di base (oldtoolbag.com)</title>　
</head>
<body>
<img src="logo.png" alt="Tutorial di base HTML5">
</body>
</html>

Definisci le dimensioni dell'immagine, riservando uno spazio specifico durante il caricamento, riducendo il bagliore.

<img src="logo.png" alt="Tutorial di base HTML5" style="width:128px;height:40px">

Spazi e uguale

Si può usare uno spazio prima e dopo l'uguale.

<link rel="stylesheet" href="styles.css">

Ma raccomandiamo di usare meno spazi:

<link rel="stylesheet" href="styles.css">

Evitare che una riga di codice sia troppo lunga

L'uso di un editor HTML, lo scorrimento a destra e a sinistra del codice non è conveniente.

Ogni riga di codice dovrebbe avere meno di 80 caratteri.

Righe vuote e spaziature

Non aggiungere righe vuote senza motivo.

Aggiungi una riga vuota per ogni blocco logico, così è più facile leggerlo.

L'indentazione utilizza due spazi, non si consiglia di utilizzare TAB.

Non utilizzare righe vuote e spaziature non necessarie tra codici brevi.

Righe vuote e spaziature non necessarie:

　　　　　　　　<body>
　　<h1>Sito di tutorial di base (oldtoolbag.com)</h1>
　　<h2>HTML</h2>
　　<p>
　　　　Sito di tutorial di base, imparare bene la base, puoi andare più lontano.
　　　　Sito di tutorial di base, imparare bene la base, puoi andare più lontano.
　　　Sito di tutorial di base, imparare bene la base, puoi andare più lontano,
　　Sito di tutorial di base, imparare bene la base, puoi andare più lontano.
　　</p>
</body>

　　Raccomandazione:

<body>
<h1>Sito di tutorial di base (oldtoolbag.com)</h1>
<h2>HTML</h2>
<p>Sito di tutorial di base, imparare bene la base, puoi andare più lontano.</p>
Sito di tutorial di base, imparare bene la base, puoi andare più lontano.
Sito di tutorial di base, imparare bene la base, puoi andare più lontano.
Sito di tutorial di base, imparare bene la base, puoi andare più lontano.
</body>

　　Esempio di tabella:

<table>
　　<tr>
　　　　<th>Nome</th>
　　　　<th>Descrizione</th>
　　　　</tr>
　　<tr>
　　　　<td>A</td>
　　　　<td>Descrizione di A</td>
　　　　</tr>
　　<tr>
　　　　<td>B</td>
　　　　<td>Descrizione di B</td>
　　</tr>
</table>

　　Esempio di elenco:

<ol>
　　<li>PHP</li>
　　<li>JAVA</li>
　　<li>C++</li>
</ol>

Omettere <html> e <body>?

In HTML5 standard, i tag <html> e <body> possono essere omessi.

Il documento HTML5 seguente è corretto:

Esempio:

<!DOCTYPE html>
<head>
　 <title>Titolo della pagina</title>
</head>
<h1>Questo è un titolo</h1>
<p>Questo è un paragrafo.</p>

Non si raccomanda di omettere i tag <html> e <body>.

L'elemento <html> è l'elemento radice del documento, utilizzato per descrivere la lingua della pagina:

<!DOCTYPE html>
<html lang="zh-CN">

Dichiarare la lingua è utile per i lettori di schermo e i motori di ricerca.

Omettere <html> o <body> nei software DOM e XML può causare un crash.

Omettere <body> nei browser versione precedente (IE9) può causare errori.

Omettere <head>?

In HTML5 standard, il tag <head> può essere omesso.

Di default, il browser aggiunge il contenuto prima di <body> a un <head> predefinito: .

Esempio

<!DOCTYPE html>
<html>
<title>Titolo della pagina</title>
<body>
　　<h1>Questo è un titolo</h1>
　　<p>Questo è un paragrafo.</p>
</body>
</html>

　 Ora è sconsigliato omettere il tag head.

Metadati

In HTML5, l'elemento <title> è obbligatorio, il nome del titolo descrive il tema della pagina:

<title>Base Tutorial Web</title>

Il titolo e la lingua possono far capire rapidamente ai motori di ricerca il tema della tua pagina:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Base Tutorial Web</title>
</head>

Commenti HTML

I commenti possono essere scritti tra :

<!-- Questo è un commento -->

I commenti più lunghi possono essere scritti a righe tra :

<!--　
　　Questo è un commento lungo. Questo è
　　Un commento lungo. Questo è un commento lungo.
　　Questo è
　　Un commento lungo - Questo è un commento lungo. Questo è
　　Un commento lungo.
-->

Il primo carattere di un commento lungo è rientrato di due spazi, il che rende la lettura più facile.

Tabella di stili

La tabella di stili utilizza un formato di sintassi semplice (l'attributo type non è obbligatorio):

<link rel="stylesheet" href="styles.css">

Le regole brevi possono essere scritte in una riga:

p.into {font-family: Verdana; font-size: 14px;}

Le regole lunghe possono essere scritte su più righe:

body {
　　background-color: yellow;
　　font-family: "Arial Black", Helvetica, sans-serif;
　　font-size: 14px;
　　color: red;
}

Metti il parentesi aperto e il selettore sulla stessa riga.
Aggiungi uno spazio tra il parentesi aperto e il selettore.
Usa due spazi per indentare.
Aggiungi uno spazio tra il duepunto e il valore dell'attributo.
Aggiungi uno spazio dopo la virgola e il duepunto.
Ogni attributo e valore devono essere terminati con un punto e virgola.
Usa virgolette solo quando il valore dell'attributo contiene spazi.
Il parentesi a destra deve essere messo su una nuova riga.
Ogni riga può avere al massimo 80 caratteri.

Aggiungi uno spazio dopo la virgola e il duepunto è una regola comune.

Carica JavaScript in HTML

Carica file script esterni utilizzando una sintassi semplice (l'attributo type non è obbligatorio):

<script src="myscript.js">

Accedi agli elementi HTML utilizzando JavaScript

Una cattiva formattazione HTML può causare errori di esecuzione del JavaScript.

Le seguenti due istruzioni JavaScript produrranno risultati diversi:

Esempio

var obj = getElementById("w3codebox")
var obj = getElementById("w3codebox")

Nell'HTML, il JavaScript dovrebbe utilizzare regole di nomi identiche.

Utilizza nomi di file in minuscolo

Molti server web (Centos, *Unix) sono sensibili alle maiuscole e minuscole: loading.jpg non può essere acceduto tramite Loading.jpg.

Altri server web (Window, IIS) non sono sensibili alle maiuscole e minuscole: loading.jpg può essere acceduto tramite Loading.jpg o loading.jpg.

Devi mantenere uno stile uniforme, ti consigliamo di utilizzare nomi di file in minuscolo.

Estensione del file

L'estensione dei file HTML può essere .html (o .htm).

L'estensione dei file CSS è .css.

L'estensione dei file JavaScript è .js.

La differenza tra .htm e .html

L'estensione .htm e .html dei file non ha differenze sostanziali. I browser e i server web li trattano come file HTML.

La differenza sta nel:

.htm è applicato nei sistemi DOS precedenti, il sistema ora o può avere solo tre caratteri.

Sul sistema Unix i suffissi non hanno restrizioni speciali, di solito si usa .html.

Differenze tecniche

Se un URL non specifica il nome del file (ad esempio https://it.oldtoolbag.com/html/), Il server restituirà il nome del file predefinito. Di solito il nome del file predefinito è index.html, index.htm, default.html e default.htm.

Se il server è configurato solo con "index.html" come file predefinito, devi chiamare il file "index.html", non "index.htm".

Ma di solito il server può impostare più file predefiniti, puoi impostare il nome del file predefinito di necessità.

In ogni caso, l'estensione completa di HTML è ".html".

API di cronologia HTML5 WebSocket HTML5