8.9前端之Html语义

8.9前端之Html语义

什么是语义元素

• 语义元素清楚地向浏览器和开发者描述其意义

举例：

非语义元素：<div>，<span> ---> 特点：无法提供关于其内容的信息。

语义元素：<form>,<table>,<img>--->特点：清晰地定义其内容

Html5中新的语义元素

许多网站包含了指示导航、页眉以及页脚的 HTML 代码，例如这些：<div id="nav"> <div class="header"> <div id="footer">

标签	描述
<article>	定义文章。规定独立的自包含内容。文档有其自身的意义，并且可以独立于网站其他内容进行阅读。
<aside>	定义页面内容以外的内容。比如侧栏。aside 内容应该与周围内容相关。
<details>	定义用户能够查看或隐藏的额外细节。
<figcaption>	定义 <figure> 元素的标题。
<figure>	规定自包含内容，比如图示、图表、照片、代码清单等。图片和标题能够被组合在 <figure>元素中
<footer>	定义文档或节的页脚。提供有关其包含元素的信息。包含文档的作者、版权信息、使用条款链接、联系信息等等。
<header>	规定文档或节的页眉。被用作介绍性内容的容器。一个文档中可以有多个 <header> 元素。
<main>	规定文档的主内容。
<mark>	定义重要的或强调的文本。
<nav>	定义导航链接。是一个集合。旨在定义大型的导航链接块，并非文档中所有链接都应该位于<nav>元素中！
<section>	定义文档中的节。“节（section）是有主题的内容组，通常具有标题。可以将网站首页划分为简介、内容、联系信息等节
<summary>	定义<details> 元素的可见标题。
<time>	定义日期/时间。

可以简单的理解为：每个语义元素下必须接内容。

<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">Lucifer@163.com</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>