HTML/CSS

HTML5 Elements

與HTML4相比，HTML5增加了新的tag，幫助使用者更方便進行管理，不需要使用一大堆的div tag，下圖是新增的tag

section

section表示文章的一部分、一段落，與div類似，但是div並無代表意義，如果只是要區分區塊的話使用div，如果該區塊是有意義的話使用section
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<div class="section">
     <h2>The Gallery</h2>
       ..........
</div>
上面是過去的寫法使用div tag，下面是使用HTML5的section tag
<section>
     <h2>The Gallery</h2>
       ..........
</section>

<h1>This is the title of the page</h1>
<section>
     <h2>This is the title of a sub-section</h2>
</section>

header

header表示標題、標頭，在一個網頁中可能會有多個不同的header
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<div class="header">
     ..........

</div>

下面是HTML5的header tag用法

<header>

     ..........

</header>

header 可能是網頁的標題，也可能是一段文章的標頭

<section>

     <header>

          <h1>The heading of the section</h1>

          <p>this is content in the heeader</p>

     </header>

     <p>This is some information within the section</p>

</section>

footer

footer表示文章的結尾、表尾

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - 

<div class="footer">
     ..........

</div>

下面是HTML5的footer tag用法

<footer>

     ..........

</footer>

<section>

     <header>

          <h1>The heading of the section</h1>

          <p>this is content in the heeader</p>

     </header>

     <p>This is some information within the section</p>

     <footer>

          <p>By "Author Name"</p>

     </footer>

</section>

aside

aside是用來存放網頁的附加資訊、說明文字
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<div class="sidebar">

     ..........

</div>

下面是HTML5的aside tag用法

<aside>

     ..........

</aside>

<section>

     <header>

          <h1>The heading of the section</h1>

          <p>this is content in the heeader</p>

     </header>

     <p>This is some information within the section</p>

     <aside>

          <p>Some secondary infrmation</p>     

     </aside>

     <footer>

          <p>By "Author Name"</p>

     </footer>

</section>

nav

nav通常用用來存放連結

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - 

<div class="nav">

     ..........

</div>

下面是HTML5的nav tag用法

<nav>

     <ul>

         ..........

     </ul>

</nav>

article

article是另一種特別的section，與section不同的是它通常是放一獨立起完整的內容，通常包含header及footer

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - - 

<div class="article">

     ..........

</div>

下面是HTML5的article tag用法

<article>

    ..........

</article>

main

一篇文章中只會有一個main用來表達文章的主旨
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -

<div class="main">

     ..........

</div>

下面是HTML5的main tag用法

<main>

    ..........

</main>

figure

figure通常放置插圖、圖片、圖表等，裡面包含標題
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<figure>
     <img src="image.jpg" alt="My Picture">   --src是圖片位置，alt是圖片說明
     <figcaption>This is a caption for the picture</figcaption>   --表示圖的標題
</figure>

time

time用來表示時間
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  - - - - - - -
<time>2014-12-24</time>
如果我想要更換格式
<time datetime="2014-12-24">12/24/2014</time>   --只要在datetime屬性內輸入正確的時間，中間就可以打你所想要顯示的格式