2010-04-11 14 views
5

non riesco a trovare demo di variabili di struttura <header>, <footer>, <articles> ... http://brucelawson.co.uk/tests/html5-elements.html Ecco, qualcosa di simile, ma con evidenza di ogni elementi prega, aiutanoHTML 5 variabili di struttura demo

+0

"In questa demo" - Quale demo? – Jonas

+0

demo = esempio di html 5 pagina :) –

+1

Ecco perché HTML è fantastico: puoi copiare il suo esempio, incollarlo in un editor di testo, salvarlo come "test.html", aggiungere acqua, quindi aprirlo nel browser. Demo istantaneo! –

risposta

0

Due grandi le risorse sono HTML5 Doctor e HTML5 Gallery. Offrono articoli dettagliati su come utilizzare i nuovi tag HTML5 ed esempi di siti che li utilizzano, rispettivamente.

+0

http://www.brucelawson.co.uk/tests/html5-elements.html Qui, qualcosa del genere, ma con evidenziato di ogni collegamento degli elementi –

5

C'è un buon articolo in elenco a parte (come al solito): http://www.alistapart.com/articles/previewofhtml5

Per una struttura semplice, è posible racchiudere 'articolo' e 'parte' all'interno di una 'sezione', ma questo non è obbligatorio se si dispone di solo una sezione.

Ad esempio:

<header>...</header> 
<section> 
    <article>...</article> 
    <aside>...</aside> 
</section> 
<footer>...</footer> 

è lo stesso di:

<header>...</header> 
    <article>...</article> 
    <aside>...</aside>> 
<footer>...</footer> 

ma come questo tag sono molto flessibili non sono fissate ad un luogo, ad esempio:

<header>...</header> 
<section> 
    <header>...</header> 
    <nav>...</nav> 
    <aside id="navbar1">...</aside> 
    <article> 
    <header>...</header> 
    <section>...</section> 
    <aside>...</aside> 
    <footer>...</footer> 
    </article> 
    <aside id="navbar2">...</aside> 
    <footer> 
    </footer> 
</section> 
</section>...</section> 
<nav>...<nav> 
<footer>...</footer> 
0

Il post sopra è corretto, ma gli strumenti di navigazione dovrebbero usare il tag <nav>, che è più se codice mantico. (nota: non utilizzare il tag sezione per un contenitore globale, utilizzare <div id="main"> o anche <body> con l'intestazione riarrangiato e piè di pagina):

<header>...</header> 
<div id="main"> 
    <header>...</header> 
    <nav>...</nav> 
    <aside class="nav_container"> 
    <nav id="navbar1">...<nav> 
    </aside> 
    <article> 
    <header>...</header> 
    <section>...</section> 
    <aside>...</aside> 
    <footer>...</footer> 
    </article> 
    <aside class="nav_container"> 
    <nav id="navbar2">...<nav> 
    </aside> 
    <footer> 
    </footer> 
</div> 
</section>...</section> 
<nav>...<nav> 
<footer>...</footer> 
0

Introduzione con HTML5 è migliore dei modi