【青年職涯發展工作站─HTML5✕前端開發】
議程與課堂實作(第二階段)



第二階段議題-語意標籤
  • HTML5語意標籤(section, article, header, footer, aside, nav, aside)
  • 利用語意標籤取代第一階段使用的 div 元素建立的版型
  • 使用語意標籤的優勢
  • 語意標籤與網頁結構大綱輸出
完成實作
  • 語意標籤版型製作

    <!DOCTYPE html>
    <html>
    <head>
        <title> 排版 </title>
        <meta charset="utf-8" />
        <link href="css/main.css" rel="stylesheet" />
    </head>
    <body>
        <header id="header">
            <h1>
                <span >YS-HTML5 前端開發課程</span>
            </h1>
            <ul>
                <li class="menu-list">首頁</li>
                <li class="menu-list">關於</li>
                <li class="menu-list">Fackbook</li>
            </ul>
        </header>
        <section id="section">
            <section id="main-section">
                <span style="color:red;font-size:24px;">課程內容</span>
                <nav>
                    <ul>
                        <li class="mainlist" style="" id=""> HTML 標籤</li>
                        <li class="mainlist">CSS 樣式設計</li>
                        <li class="mainlist">JavaScript 程式設計</li>
                    </ul>
                </nav>
            </section>
            <aside id="aside">
                <h2>每日課程</h2>
                <ul>
                    <li class="daylist">DAY 1</li>
                    <li class="daylist">DAY 2</li>
                    <li class="daylist">DAY 3</li>
                    <li class="daylist">DAY 4</li>
                    <li class="daylist">DAY 5</li>
                    <li class="daylist">DAY 6</li>
                </ul>
            </aside>
        </section>
        <footer id="footer">
            2014 C 版權所有-YS-HTML5
        </footer>
    </body>
    </html>




沒有留言: