HTML5的文檔結構和新的語義元素

時間 2019-11-11

標籤 html5 html 文檔結構新的語義元素欄目 HTML5 简体版

原文原文鏈接

學習前端的東西彷佛沒有什麼捷徑，就是直接上手擼就完了javascript

本文目標：（熟知）css

一、建立基本HTML5文檔結構html

二、使用新的語義元素來佈局頁面前端

下面直接上代碼：java

<!DOCTYPE html> <!-- DOCTYPE簡潔聲明，強制現代的瀏覽器使用標準模式 -->
<html lang="en"> <!-- 使用lang指定文檔語言 -->
<head>
    <meta charset="UTF-8"> <!-- 使用charset屬性定義字符編碼，這裏使用了8位的unicode編碼 -->
    <title>HTML5標記-語義</title>
    <link rel="stylesheet" href="style.css"> <!-- 使用link元素引入css樣式表。瀏覽器會假設link元素都默認有一個text/css的MIME類型 -->
    <script src="app.js"></script> <!-- 使用script元素能夠引入javascript腳本，瀏覽器會假設script元素具備一個text/javascript的MIME類型，除非使用的不是JavaScript腳本 -->
</head>
<body>
    <header> <!-- 使用header元素，用於標題和其餘重要的細節(標題、永久連接、元信息)，可重複使用的元素 -->
        <hgroup> <!-- hgroup和article元素裏均可以包含一個h1。標題結構的運做方式和HTML4不一樣 -->
            <h1>My Site</h1>
            <h2>My Title</h2>
        </hgroup>
        <nav> <!-- 使用nav元素，顯示主要導航區或內容目錄 -->
            <ul></ul>
        </nav>
    </header>
    <nav>
        <h1>Links Headings</h1>
        <ul></ul>
    </nav>
    <aside> <!-- 使用aside元素定義一個頁面上獨立於內容區域的部分。如文章的邊欄、彈出式廣告或浮動窗口 -->
        <!-- other info -->
    </aside>
    <section> <!-- 使用section元素，定義大塊的內容，如文章區域或重要的表單。區塊能夠有本身的標題、導航及腳本 -->
        <article> <!-- 使用article元素來標記獨立的可發佈內容。 -->
            <header>
                <h1>Post Tilte</h1>
                <div class="meta">
                    Published by someone on
                    <time datetime="2015-07-17T12:30+00:00"> <!-- 使用time元素按照指定的格式顯示時間 -->
                        01 May 2017 @ 12:30pm
                    </time>
                </div>
            </header>
            <section>
                <!-- post -->
                <p>this is a  
                    <mark>wonderful</mark>     <!-- 使用mark高亮文檔中的搜索詞，突出顯示文本部分 -->
                    article.
                </p>
            </section>
        </article>
    </section>
    <footer> <!-- 使用footer元素表示頁面或區域底部的頁腳，一般包括相關文章和連接、版權和元數據等 -->
        <ul><!-- links --></ul>
        <!-- copyright -->
    </footer>
</body>
</html>