Latest web development tutorials

HTML (5) Codice Specifica

Convenzioni di codice HTML

Molti sviluppatori web specifiche per il codice HTML poco conosciuti.

Nel 2000-2010, molti sviluppatori web per convertire da HTML a XHTML.

Gli sviluppatori utilizzano XHTML sviluppare gradualmente un buon specifiche di scrittura HTML.

E per in HTML5, dovremmo formare un relativamente buone norme del codice, diverse raccomandazioni sono fornite di seguito le specifiche.


Utilizzare il corretto tipo di documento

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

<! DOCTYPE html>

Se si desidera utilizzare altre etichette, come minuscole, è possibile utilizzare il seguente codice:

<! Html Doctype>

i nomi degli elementi minuscolo

HTML5 nome di un elemento in grado di utilizzare le lettere maiuscole e minuscole.

Uso consigliato lettere minuscole:

  • caso di stile misto è molto cattivo.
  • Gli sviluppatori utilizzano in genere in minuscolo (simile XHTML).
  • stile minuscolo sembra più rinfrescante.
  • Le lettere minuscole facile da scrivere.

Non consigliato:

<Section>
<P> Questo è un paragrafo. </ P>
</ Section>

Molto male:

<Section>
<P> Questo è un paragrafo. </ P>
</ Section>

Consigliato:

<Section>
<P> Questo è un paragrafo. </ P>
</ Section>

Spegnere tutti gli elementi HTML

In HTML5, non si vuole chiudere tutti gli elementi (ad esempio, <p> elemento), ma si consiglia che ogni elemento deve aggiungere un tag di chiusura.

Non consigliato:

<Section>
<P> Questo è un paragrafo.
<P> Questo è un paragrafo.
</ Section>

Consigliato:

<Section>
<P> Questo è un paragrafo. </ P>
<P> Questo è un paragrafo. </ P>
</ Section>

Chiudi elementi HTML vuoti

In HTML5, elemento HTML vuoto non deve spegnere:

Possiamo scrivere:

<META charset = "utf-8 ">

Si può anche scrivere:

<META charset = "utf-8 " />

XML, XHTML and slash (/) è un must.

Se si prevede di utilizzare la pagina XML software, questo stile è molto buona.


nome dell'attributo minuscolo

HTML5 consente l'utilizzo del nome della proprietà lettere maiuscole e minuscole.

Si consiglia di utilizzare minuscole nome dell'attributo:

  • Caso d'uso è una pessima abitudine.
  • Gli sviluppatori utilizzano in genere in minuscolo (simile XHTML).
  • stile minuscolo sembra più rinfrescante.
  • Le lettere minuscole facile da scrivere.

Non consigliato:

<Div class = "menu">

Consigliato:

<Div class = "menu">

Proprietà Valore

valori degli attributi HTML5 non può preventivo.

Si consiglia di utilizzare le virgolette valore di attributo:

  • Se il valore della proprietà contiene spazi hanno bisogno di utilizzare le virgolette.
  • stile misto non è consigliato, lo stile unificato proposto.
  • I valori delle proprietà che utilizzano le virgolette sono facili da leggere.

L'attributo seguenti esempi valore contiene spazi, non utilizzare le virgolette, non può funzionare:

<Class = Tavolo tavolo a righe>

Il seguente utilizza le virgolette doppie, è corretto:

<Class = Tabella "tavolo a righe" >

proprietà immagine

Immagine alt attributi spesso utilizzato. Quando l'immagine non può essere visualizzata, si può sostituire la visualizzazione delle immagini.

<Img src = "html5.gif" alt = "HTML5" style = "width: 128px; altezza : 128px">

dimensioni immagine definita, può essere riservato al momento del carico specificato spazio, ridurre lo sfarfallio.

<Img src = "html5.gif" alt = stile "HTML5" = "width: 128px; height: 128px">

Gli spazi e segni di uguale

È possibile utilizzare gli spazi prima e dopo il segno di uguale.

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

Tuttavia, si consiglia di utilizzare meno spazio:

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

Evitare lunga riga di codice

Utilizzando un editor HTML, a sinistra ea destra lo scorrimento codice è scomodo.

Ogni riga di codice il più possibile a meno di 80 caratteri.


Le righe vuote e rientro

Non aggiungere una riga vuota per nessun motivo.

Per ogni blocco funzione logica aggiungere una riga vuota, che rende più facile da leggere.

Rientro due spazi, non è raccomandato TAB.

Non usano righe vuote non necessarie sono rientrate tra il codice breve.

righe vuote non necessarie e rientri:

<Body>

<H1> Questo tutorial </ h1>

<H2> HTML </ h2>

<P>
Questo tutorial, l'apprendimento non è solo tecnologia, ma anche un sogno.
Questo tutorial, l'apprendimento non è solo tecnologia, ma anche un sogno.
Questo tutorial, l'apprendimento non è solo tecnologia, ma anche sogno,
Questo tutorial, l'apprendimento non è solo tecnologia, ma anche un sogno.
</ P>

</ Corpo>

Consigliato:

<Body>

<H1> Questo tutorial </ h1>

<H2> </ h2>
<P> Questo tutorial, l'apprendimento non è solo tecnologia, ma anche un sogno.
Questo tutorial, l'apprendimento non è solo tecnologia, ma anche un sogno.
Questo tutorial, l'apprendimento non è solo tecnologia, ma anche un sogno.
Questo tutorial, l'apprendimento non è solo tecnologia, ma anche un sogno. </ P>

</ Corpo>

Formare Esempio:

<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 B </ td>
</ Tr>
</ Table>

Lista Esempio:

<Ol>
<Li> Londra </ li>
<LI> Parigi </ li>
<LI> Tokyo </ li>
</ Ol>

Omettere il <html> e <body>?

Nello standard HTML5, <html> e <body> tag può essere omesso.

I seguenti documenti sono corretti HTML5:

esempio:

<! DOCTYPE html>
<Head>
<Titolo> Titolo della pagina </ title>
</ Head>

<H1> Questa è un'intestazione </ h1>
<P> Questo è un paragrafo. </ P>

Prova »

Non consigliato omesso <html> e <body> tag.

<HTML> elemento è l'elemento principale del documento, il linguaggio usato per descrivere la pagina:

<! DOCTYPE html>
<Html lang = "zh">

dichiarazione lingua è quello di facilitare i lettori di schermo e motori di ricerca.

Omettere il <html> o <body> nel DOM e crash del software XML.

Omettere il <body> errore si verifica in vecchi browser (IE9).


Omettere il <head>?

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

Per impostazione predefinita, il browser contenuto <body> prima aggiunto a un valore predefinito <head>.

Esempi

<! DOCTYPE html>
<HTML>
<Titolo> Titolo della pagina </ title>

<Body>
<H1> Questa è un'intestazione </ h1>
<P> Questo è un paragrafo. </ P>
</ Corpo>

</ Html>

Prova »
nota Ora omettono i tag head non sono raccomandati.

Metadati

HTML5 nel <title> è necessario elemento, il nome del titolo descrive il tema della pagina:

<TITLE> Questo tutorial </ title>

Titolo e linguaggio che permette al motore di ricerca sarà presto comprendere il tema della pagina:

<! DOCTYPE html>
<Html lang = "zh">
<Head>
<META charset = "UTF-8 ">
<TITLE> Questo tutorial </ title>
</ Head>

commenti HTML

I commenti possono essere scritti nel <- e -> In:

<! - Questo è un commento ->

commenti più nella <! - e -> ha scritto nel rami:

<! -
Questo è un commento più lungo. Questo è un commento più lungo. Questo è un commento più lungo.
Questo è un commento più Questo è un commento più lungo. Questo è un commento più lungo.
->

I commenti del primo carattere trattino due spazi, più facile da leggere.


foglio di stile

Stylesheet sintassi concisa (attributo del tipo non è obbligatorio):

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

Le regole possono essere scritte come una breve linea:

p.into {font-family: Verdana; font-size: 16EM;}

regole più linee lunghe possono essere scritti:

body {
background-color: grigio chiaro;
font-family: "Arial Black" , Helvetica, sans-serif;
font-size: 16EM;
color: black;
}
  • Il tutore sulla stessa linea con i selettori.
  • Scegliere tra la parentesi sinistra e aggiungere uno spazio.
  • Io uso due spazi per il rientro.
  • Dispone di spazi aggiunto fra i due punti ed i valori delle proprietà.
  • Utilizzare uno spazio dopo la virgola e simboli.
  • I valori delle proprietà devono usare alla fine di ogni simbolo.
  • Solo quando il valore della proprietà contiene spazi utilizzare le virgolette.
  • brace destro su una nuova linea.
  • Fino a 80 caratteri per riga.
nota Dopo la virgola e virgola aggiungono spazi è una regola comune.

Caricamento JavaScript in HTML

Utilizzare la sintassi semplice per caricare file di script esterno (attributo del tipo non è obbligatorio):

<script src = ""> MyScript.js

Utilizzare JavaScript per accedere agli elementi HTML

Un formato HTML male può causare l'esecuzione di errori JavaScript.

Le due istruzioni JavaScript per output diversi risultati:

Esempi

var obj = getElementById ( "Demo" )

var obj = getElementById ( "demo" )

Prova »

HTML, JavaScript Provare a usare la stessa convenzione di denominazione.

specifiche del codice di accesso JavaScript .


i nomi dei file in minuscolo

La maggior parte dei server Web (Apache, Unix) sono case sensitive: London.jpg London.jpg non può accedere.

Altri server Web (Microsoft, IIS) non è case sensitive: London.jpg si può accedere tramite London.jpg o London.jpg.

È necessario mantenere uno stile unificato, si consiglia di nomi coerenti di file uso minuscole.


estensione del nome del file

suffisso del file HTML può essere .html (o R htm).

estensione del file CSS è css.

JavaScript file js di suffisso.


La differenza tra .htm e .html

L'estensione del file .htm e .html sulla natura non vi è alcuna differenza. Browser e il server Web li tratterà come file HTML da affrontare.

La differenza è che:

htm applicazione nei sistemi primi DOS, o sistemi sono ora solo tre caratteri.

Il suffisso non è particolarmente limitata a sistemi Unix, di solito con .html.

tecnicamente differenza

Se un URL non specifica un nome di file (ad esempio http://www.w3big.com/css/), il server restituirà al nome del file di default. Il nome del file predefinito di solito è index.html, index.htm, default.html, e default.htm.

Se il server è configurato con solo "index.html", come il file predefinito, è necessario assegnare un nome al file "index.html", piuttosto che "index.htm".

In generale, tuttavia, il server può impostare file di default multiplo, è possibile impostare il file predefinito in base alle esigenze.

In ogni caso, HTML suffisso completo è ".html".