【HTML】2初探HTML-2.2 認識html5標籤元素

*2 初探HTML5
➤2.2 認識html5標籤元素

各位親愛的棧友們好，在上一篇學習HTML的基礎標籤後相信大家都有個基礎的概念，那麼棧長接著要來講解HTML5各別的常用標籤。另外我在css教學的部分也會和大家說如何透過原生CSS承接設定好的變數來調用。

現在css可說是越來越日新月異，要學的精可不容易(例如SCSS、SASS等製作巢狀式屬性和使用繼承等功能)，且許多css屬性在開發網頁中也未必是常用到的，但整體上基本屬性至少要知道(字型、寬、高、背景色、背景圖、margin外距、padding內距、float浮動、position位置等屬性、@media語法;class類別選擇器和id選擇器的差異請務必要了解)。棧長早期雖是從css開始學起，但後續主要都投注在後端的學習上，所以我僅會帶我自己有常用的屬性和編寫習慣。

@media語法可以針對不同畫面(桌機、平板、手機等)來調適到合適的位子，基本上我都是以boostrap4開發，最後再透過@media語法作些細微調整。

補充:css clip-path maker這個網站頗好用，有興趣者可以去玩看看，沒興趣的話就當我在說幹畫惹~
https://bennettfeely.com/clippy/

下面就來一一對常用的HTML5標籤來做說明:

HTML5-常用標籤* <header> 橫幅or頂層按鈕 </header>
* <nav> 麵包屑導覽列 </nav>
* <aside> 側邊攔選單 </aside>
* <main> 主要內文 </main>
* <section> 小區塊 </section>
* <details> 詳細內文 </details>
* <footer> 結尾 </footer>

HTML5-其他標籤* <artical> 文章 </artical>
* <summary> 摘要 </summary>
* <figcaption> 圖片解說標題 </figcaption>
* <figure> 圖片解說區塊 </figure>

實作上述的HTML5標籤做一個基本頁面(先構想需要那些標籤):
*使用header、nav、aside、main、section、details、footer標籤組成
*當畫面介於769px至1024px跳出土黃底色
*當畫面介於540px至768px跳出寶藍底色
*當畫面介於539px以下跳出紅底色
*css中引用google font的部分我之後會在說明
*三張大頭貼圖&模擬成果圖:


<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>2.1 HTML5 切版實例</title>
    <style>
    @import url('https://fonts.googleapis.com/css?family=Acme|Lobster|Noto+Sans+TC|Sniglet');
      body{
        width: 100%;
        /*橫向斷行不出現拉bar*/
        overflow-x: hidden;
        font-family: var(--Noto);
      }
      :root{
      /*在根元素設定變數，讓下面的選擇器調用(設定變數開頭為2個dash符號--)*/
      --font:"微軟正黑體",cursive;
      --Noto:'Noto Sans TC',cursive;
      --gradient: linear-gradient( to bottom,#f78dbc,#ff512f);
      --light-blue: #d8eff0;
      }
      /*id選擇器是唯一值，和class類別選擇器可重複使用並不相同*/
      #layout{
         width: 80%;
         height: 680px;
         margin-left: auto;
         margin-right: auto;
      }

      header {
        background: var(--gradient);
        width: 100%;
        height: 10vmin;
        margin-bottom: 5px ;
      }

      nav {
        background: var(--light-blue);
        width: 100%;
        height: 10%;
        float: left ;
        margin-bottom: 5px;
      }

      aside {
        background-color: #f3c1c6;
        width: 20%;
        height: 65%;
        float: left;
        margin-right: 5px ;
      }

      main {
        background-color: #f0f69f;
        width: 79%;
        height: 50%;
        float: left;
      }

      details {
        background-color: #b0e0a8;
        width: 79%;
        height: 15%;
        float: left;
      }

      footer {
        background: var(--gradient);
        width: 100%;
        height: 10%;
        float: left;
        margin-top: 5px;
      }
      /*當畫面介於769px至1024px之間，會跳出土黃色底色*/
      @media (min-width:769px) and (max-width:1024px){
        body {background-color: GoldenRod;}
        aside, main, details{width: 100%;}
      }
      /*當畫面介於540px至768px之間，會跳出寶藍色底色*/
      @media (min-width:540px) and (max-width:768px){
        body {background-color: RoyalBlue;}
        aside, main, details{width: 100%;}
      }
      /*當畫面介於539px以下，跳出紅色底色*/
      @media screen and (max-width:539px){
        body {background-color: red;}
        aside, main, details{width: 100%;}
      }
    </style>
  </head>
  <body>
    <div id="layout">
      <header> header橫幅</header>
      <nav>nav麵包屑</nav>
      <aside>aside側邊攔選單</aside>

      <main>
        <section>
          <artical>artical主要內文</artical>
          <summary>summary摘要</summary>
        </section>
        <section>
          <figure>
            <figcaption>figcaption這是小英、KT棧長、維尼的圖解標題</figcaption>
            <img src="images/tsai.jpg" width="100px" alt="">
            <img src="images/kt.jpg" width="100px" alt="">
            <img src="images/winnie.jpg" width="100px" alt="">
          </figure>
        </section>
      </main>

      <details>details詳細內文</details>
      <footer>footer頁尾</footer>
    </div>
  </body>
</html>