HTML5 ??? ??

HTML ? ??

HTML5? ??? ??? ??? ???? ???? ??? ? ??? ????? ?? ??? ? ??? CSS3 ?? ???? ???? ???? ??? ? ???? ??? ??? ?? ?? ?????.

?? HTML5 ??? ?? ??? ?? ??? ??? ????.

<header>? ??? ?? ??? ??? ?????. ?? ??

<nav>? ??? ?? ??? ?? ??? ?????.

<section> ??><article> ?? ??? ?? ?? ???? ?????.

<aside> ?? ?? ?? ???? ?????.

?? ??? ??? ??? ?? ?? ??? ??? ????. ??? ???. ?? ??? ? ?? ?? ? ??? ???? ???? ?? ???, ???? ?? ??? ??? ????? ?? ???? ?? ????? ?????. ??? ? ??? ??? ???? ??? ??? ???? ????.

?: ??? ???? ???? ??

?? ???? ??? ???? ?? 2-1? ?? ? ??? ??? ?????: ??, ??, ?? ?? ?, ??? ? ?? ??? ??.

?? 2-1

?? 2-1?? ? ? ??? ?? ??? ??? ???? Header ?? ??? ???? ????.

???? ???? ?? ??? ??? ???. ??? ??? HTML5? ???? ??? ?? ??? CSS3? ??????. CSS3 ??? HTML5? ??? ??? ??? ? ????. ????? HTML5 ???? ???? ? ???? ??? ? ????. ?? ???? ??? ?? ????.

1) ?? ?? ??? ?????. HTML5 ???? ?? ??? ???? CSS3 ??? ?? ?? ???? ?????. ?? HTML5 ??? ?? ????? ?? ???? ????.

2) ???? ???? ??? ?? ??? ???? ???. ???? ?? ?? ?? ??? ? ??? ??? ?? ??? ???? ???? ??? ???? ??? ???. ? ???? ??? ?? ???? ?? ?? ?? ?? ? ????.

3) ???? ?? ?? ??: 2)? ? ?? ??? ??? ???? ????? ? ?? ????? ????.

?? HTML5+CSS3? ??? ??? ?? ?? ????? ?? ?? ??? ????.

?? 2-1? ????? ??? ?????.

1. HTML5 ?? ???
???? ? ??? ?? ??? ?? HTML5 ?? ??? ???? ?? ?? HTML5 ???? ???? ???.

<!DOCTYPE html>
  <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Layout TEST</title>
 </head>
  <body>
 </body>
 </html>

??? ???? ?? ??? HTML5? ???? ??? ??????. ??? ??? ?? ???? ?? ?? ?????.
??: ? ?? ?: <!DOCTYPE html>? HTML5? ?? ?? ????, ?? ??? ??: ??? ???? ?? ???? ??? ???? ? ??? ??? ?????. ????? ?? ??? ???? ??????.
2. ??
<header> ?? ??
<header id="page_header">
<h1>Header</h1>
</header>

??: 1) ??? h1, h2, h3 ??? ?????? ? ???. <header>?? ?? ???? ????? ?? ??? ??? ? ????. ???? ??? ???? ????.
2) ??? ????? ?? ?? <header> ??? ??? ? ????. ??? ???? ???? ??? ??? <header>? ??? ? ????. ??? ? ???? CSS3?? ??? ???? ???? ?? ?? ??? id ??? ???????. CSS ???? id ??? ??? ? ? ????.
3. ???
<footer> ?? ??

<footer id="page_footer">
    <h2>Footer</h2>
</footer>

??: ??? ??? ?? ??? ???, ???? ????? <header>? ?????. ???? ?? ??? ?????.
4. ??
<nav> ?? ??

??: ??? ??? ??? ??? ? ???? ?? ?????. ???? ????? ?? ??? ?????.
1) <header> ?? <footer> ?? ?? ??? ??? ? ??? ????? ?? ??? ?? ? ????.
2) ???? ????? CSS? ?????? ?? ??? CSS ???? ? ? ????.
5. ?? ? ??
<article> ?? ??

<nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">One</a></li>
        <li><a href="#">Two</a></li>
        <li><a href="#">Three</a></li>
    </ul>
</nav>

<section id="posts">
        /*可以包含多個(gè)< article>*/
    <article>
         /*article的內(nèi)容*/
        </article>
        <article>
         /*article的內(nèi)容*/
        </article>
</section>

? ???? ?????. ?? ??? ??? ? ??? ? ? ????.

6. ????? ????
<aside> ??? ????? ????, ????? <section>? ?????.
<aside>? ??, ?? ?? ??? ?? ?????.

<article>
        <header>
            <h2>Article Header</h2>
        </header>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>

???

????? ?? ????! ??? ???? ??? ???? ???? <section>

<aside>
    <p>sth. in aside
    </p>
</aside>

?? ? ??? ???? ??? ????. HTML5 index.html ??? ?? ??? ??? ????

?? ??

<article>
        <header>
            <h2>Article Header</h2>
        </header>
        <aside>
            <p>sth. in aside
            </p>
        </aside>
        <p>Without you?I'd be a soul without a purpose.
                </p>
        <footer>
            <h2>Article Footer</h2>
        </footer>
</article>

??? ??? ??? ?? ??? ???????? ??

<canvas> ?? ? ?? ????. ? ??? JavaScript? ??? API

<section id="sidebar">
    <nav>
    <ul>
          <li><a href="2012/04">April 2012</a></li>
          <li><a href="2012/03">March 2012</a></li>
          <li><a href="2012/02">February 2012</a></li>
          <li><a href="2012/01">January 2012</a></li>
    </ul>
    </nav>
</section>

??? ????? ??

?? ??
<audio> ??? ??? ??
<video>
<source> ????? ??? <video> ?
<embed> ???? ?? ?????.

<track> <video> ??? ?? ?? ??? ??? ?????.
? ?? ??

?? ??

<datalist> ?? ??? ?????. ? ??? ?? ??? ?? ???? ??? ?? ?? ?????.
<keygen> ??? ??? ? ? ?? ??? ?????.
<output> ???? ??? ?? ??? ??? ??? ?????.
??? ?? ? ?? ??
HTML5? ? ?? ??? ??? ??? ?? ??? ??? ?????.

?? ??

<article> ???? ???? ??? ??? ?????.
<aside> ???? ???? ???? ?????.
<bdi> ?? ??? ??? ?? ??? ???? ???? ??? ? ????.
<command> ??? ??, ????, ?? ?? ?? ??? ?????.
<details> ??? ????? ??? ?? ??? ???? ? ?????. >
<dialog> ???? ??? ?? ?? ??? ?????.
<summary> ????? ?? ?? ??? ??? ?????.
<Figure> ???(???, ??, ??, ?? ?).
<figcaption> <Figure> ??? ??? ?????.
<footer> ???? ??? ???? ?????.
<header> ??? ?? ??? ?????.
<mark>
<meter> ???? ??? ?????. ???? ???? ??? ???? ??????.
<nav>? ?? ?? ??? ?????.
<progress> ?? ??? ?? ?? ??? ?????.
<ruby> ?? ??(?? ?? ?? ??)? ?????.
<rt> ??(??? ?? ?? ?? ??)? ???? ??? ?????.
<rp> Ruby ??? ???? ?? ?????? ???? ???? ???? ?? Ruby ??? ?????.
<section> ??? ??(??, ??)? ?????.
<time> ?? ?? ??? ?????.
<wbr> ????? ?? ??? ???? ?? ??? ??? ?????.
??? ??
?? HTML 4.01 ??? HTML5?? ???????:
<acronym> ;

;

<font>
<frame>
<frameset>
<noframes>
<strike>

<tt>

???? ??

||

??? ??

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文網(wǎng)(php.cn)</title> </head> <body> <canvas id="myCanvas">你的瀏覽器不支持 HTML5 canvas 標(biāo)簽。</canvas> <script> var c=document.getElementById('myCanvas'); var ctx=c.getContext('2d'); ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100); </script> </body> </html>

?????? ???
????