康廷數位: 【青年職涯發展工作站─HTML5✕前端開發】議程與課堂實作（第二階段）

【青年職涯發展工作站─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>

沒有留言:

訂閱：張貼留言 (Atom)