補充一下昨日資訊～

特殊字元：

特殊字元的格式像是「＆ＯＯ；」這種以「＆（And符號）」為字首，並以「；（分號）」為字尾的格式。

像是通常網頁底下都會有著作權聲明：

比較常用的特殊文字：
 < ：&lt;
 > ：&gt;
 &：&amp;
 "：&quit;
 ©：&copy;

©：© 小技巧：當你在裡面加入<small></small>，可以使文字大小縮小一號。

<p>&copy;2020初學歷程</p>
<p><small>&copy;2020初學歷程<small</p>

HTML5 語意結構區塊(Semantic Layout Section)

HTML5 有很多新的語意標籤，讓網頁可以利用來建立更語意化的結構內容，幫助搜尋引擎和開發者可以更清楚的解讀網頁結構。

HTML5 主要的語意結構標籤有 <section>、<article>、<nav>、<header>、<footer>、<main>、<aside>。

章節標籤

可以定義文件並加以區隔。
用處是讓網頁文件結構更明確，可以將網頁裡內的文章分類成章、節、項目等，讓人好讀、有區隔性。

• article

獨立完整的內容區塊。

• aside

跟主要內容無關的區塊，通常是網頁的補充資訊或廣告。

• nav

網站的主要導覽列。

要記住<article><aside><nav>在具有特別意義的時候使用！（不可以隨意使用）

• section

不屬於上述任何一種的內容區塊，擁有自己明顯含義的區塊。

article

一個頁面可以有一個或多個<article>只要他們是獨立且完整的內容，一般多用於部落格的文章。

<article class="diary">
  <h1>學習日記</h1>
  
  <article class="chapter">
    <h2>day1</h2>
    <p>今天天氣晴，寫鐵人第一天</p>
  </article>
  
  <article class="chapter">
    <h2>day2</h2>
    <p>今天是寫鐵人的第二天</p>
  </article>
  
  <article class="chapter">
    <h2>day3</h2>
    <p>今天終於第三天惹</p>
  </article>
</article>

看上述範例可以知道，一個內容裡面擁有<h2><p>，上面內容可分別閱讀，所以可以視為獨立完整的內容，故用article標籤來標記。

section

擁有自己明顯含義的區塊。

<article>
  <h2>貓貓狗狗派對</h2>
  <p>貓貓狗狗們互相玩樂，認識彼此</p>
/--------第一個section---------/  
 <section>
    <h3>派對資訊</h3>
    <table>
      <tr>
        <th>日期</th>
        <td>2020年9月18日</td>
      </tr>
      <tr>
        <th>時間</th>
        <td>09:00~20:00</td>
      </tr>
    </table>
  </section>
/--------第二個section---------/  
	<section>
		<h3>地址</h3>
		<p>狗狗貓貓路</p>
	</section> 
</article>

可以看到這些區塊在<article>裡面，屬於“貓貓狗狗派對”的一部分內容，像這種部分內容區塊就可以用標籤框起來。

＊但是不能將<section>當作一般容器或CSS排版使用，因為它屬於“語意標籤”。

一般容器或CSS排版應該使用<div>，因為他是不含任何語意的。

所以要清楚知道<article>與<section>的差別歐！內容完整獨立的話就使用<article>。

nav

網頁的"主要導覽連結"，網站最上面的主菜單 (menu)。

一個 HTML 頁面可以有多個 <nav> ，例如一個做網站導覽、另一個做頁內導覽。

<nav>
	<ul>
		<li><a href="#">首頁</a></li>
		<li><a href="#">甜點</a></li>
		<li><a href="#">登入</a></li>
	</ul>
</nav>

header

標題區塊裡面可以有標題、介紹文字或像網頁最上方的網頁標頭區塊中會有網站名稱、logo、導覽連結、搜尋表單等內容。

<header>
	<h1>貓貓狗狗甜點</h1>
	
	<nav>
		<ul>
			<li><a href="#">首頁</a></li>
			<li><a href="#">甜點</a></li>
			<li><a href="#">登入</a></li>
		</ul>
	</nav>
</header>

＊<header> 並非在排版上一定要放在最上面。

footer

是網頁最下面的頁尾區塊會包含作者、版權、聯絡方式等資訊。

<footer>
	<p><small>&copy;2020初學歷程<small</p>
</footer>

main 網頁主要區塊

最重要的事：一個網頁裡面只能出現一個main標籤。

<main>
	  <article>
	    <h2>簡介</h2>
	    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt repellat aperiam minima magni dolores nesciunt, quod enim maxime</p>
	  </article>
	  
	  <article>
	    <h2>貓貓狗狗派對</h2>
	    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt repellat aperiam minima magni dolores nesciunt, quod enim maxime</p>
	  </article>
</main>

這個頁面的“主要內容”是<article>元素裡的“簡介”跟“貓貓狗狗派對”的部分，所以將這兩個<article>放入<main>元素裡。

今天先了解html的語意，在未來寫結構的時候才不會跟命名錯亂～

明日會再附上圖片結構搭配切版，看圖片會更清楚：）