8.9前端之Html語義

什麼是語義元素

• 語義元素清楚地向瀏覽器和開發者描述其意義

舉例：

非語義元素：<div>，<span> ---> 特點：無法提供關於其內容的資訊。

語義元素：<form>,<table>,<img>--->特點：清晰地定義其內容

Html5中新的語義元素

許多網站包含了指示導航、頁首以及頁尾的 HTML 程式碼，例如這些：<div id="nav"> <div class="header"> <div id="footer">

可以簡單的理解為：每個語義元素下必須接內容。

<section>

        <section contenteditable="false">
            <h1>Semantic Elements</h1>
            <p contenteditable="true" style="font-family: '微軟雅黑'; color: saddlebrown; font-size: medium;">This is a content about Semantic Elements</p>
        </section>
        <section contenteditable="false">
            <h1>Content</h1>
            <p contenteditable="true" style="font-family: '微軟雅黑'; color: darkmagenta; font-size: large;">Input Something</p>
        </section>

<article>

        <article contenteditable="false" style="font-family: '微軟雅黑'; color: black; font-size: large;">
            <h1>What can you do</h1>
            <p contenteditable="false" style="font-family: '微軟雅黑'; color: royalblue; font-size: medium;">It is a content</p>
        </article>

<section>元素和<article>元素的區別

• <article>元素定義完整的相關元素自包含塊。<section>元素被定義為相關元素塊。

• 不能夠使用該定義來決定如何巢狀元素

• <section>可包含<article>也可包含<section>

• <article>可包含<article>也可包含<sections>

<header>

和<table>標籤的<thead>標籤型別，定義頁首

        <article contenteditable="false" style="font-family: '微軟雅黑'; color: blanchedalmond;">
            <header contenteditable="false" style="font-family: '微軟雅黑'; color: darkblue; font-size: larger;">
                <h1>Title of the article</h1>
                <p contenteditable="false" style="font-family: '微軟雅黑'; color: black; font-size: medium;">What is the title of the article</p>
            </header>
            <p contenteditable="true" style="font-family: '微軟雅黑'; color: black; font-size: initial;">Input your answer</p>
        </article>

<footer>

            <footer contenteditable="false" style="font-family: '微軟雅黑'; color: darkcyan; font-size: inherit;">
                <p contenteditable="false">Information from:<a href="PracticeList.html">[email protected]</a>.</p>
            </footer>

<aside>

            <p contenteditable="false" style="font-family: '微軟雅黑';">This is a content</p>
            <aside contenteditable="false" style="font-family: '微軟雅黑'; color: red; font-size: inherit;">
                <ul contenteditable="false" style="font-family: '微軟雅黑'; color: hotpink;">
                    <li>Html</li>
                    <li>Css</li>
                    <li>JavaScript</li>
                </ul>
            </aside>

<figure>、<img>、<figcaption>

• <figure>內放<img>和<figcaption>

        <p contenteditable="false">This is a content about picture</p>
        <figure>
            <figcaption contenteditable="false" style="font-family: '微軟雅黑'; color: red; text-align: left;">皮卡丘，大大大</figcaption>
            <img src="../Picture/Big.gif" alt="This is a Picture" width="304" height="228" />
        </figure>