二、html 5 骨架

2.1 HTML 5 骨架

1、HTML 5 的doctype非常简单。表明你的HTML 内容使用HTML 5 ，只需要简单的使用：

<!DOCTYPE html>

DTD（文档类型声明头）。需要注意的是，现在的HTML5没有XHTML系列了。

这样做会让目前还不支持的HTML5的浏览器采用标准模式解析，这意味着它们会解析那些HTML5中兼容的旧的HTML的标签的部分，而忽略它们不支持HTML5的新特性。

2、在一个页面上做的第一件事通常是声明使用的字符集。在以前版本的HTML，它是一个非常复杂的<meta>元素，现在它变得非常简单：

<meta charset="UTF-8">

HTML 5 完整骨架：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

2.2 新的语言特性

1、所有的type都不用写了（现在只有这3个可以省略）

<!-- 下面标签的type属性可以省略 可以使用-->
    <style></style>
    <link rel="stylesheet" href="">
    <script></script>

2、所有自封闭标签，现在不写反斜杠合法

<!-- 所有自封闭标签，现在不写反斜杠合法  可以使用 -->
    <img src="" alt="">

3、标签名大小写都合法（工作中不使用）

4、现在不写引号合法（工作中不使用）

2.3 新的语义化标签

2.3.1 `<section>` `<article>` `<nav>` `<header>` `<footer>` `<aside>`

HTML就是负责页面语义的，HTML4.01中，div负责的任务太多，具体的语义没有拆分。

HTML 5 中，就是把div拆分为了更多的标签：

区域<section> 
文章<article> 
导航 <nav> 
头部<header> 
底部 <footer> 
侧边栏<aside>

这些标签都和div一样，是容器级标签，可以互相嵌套，放什么都行，放自己也行。都是block-level，标准流中是块级元素。

<!-- header 头部语义 -->
    <header>
        <h1 class="logo"></h1>
        <!-- nav 导航语义 -->
    </header>
    <!-- section 区域语义 -->
    <section>
        <!-- aside 侧边栏语义 -->
        <aside></aside>
        <section>
            <!-- article 文章语义 含有标题和段落 -->
            <article>
                <h3>标题</h3>
                <p>段落</p>
                <p>段落</p>
                <p>段落</p>
            </article>
            <article>
                <h3>标题</h3>
                <p>段落</p>
                <p>段落</p>
                <p>段落</p>
            </article>
        </section>
    </section>
    <!-- footer 底部语义 -->
    <footer></footer>

2.3.2 `<figure>` `<figcaption>` `<time>` `<mark>` `<details>` `<summary>`

以前的语义标签：ul dl ol table p h span a img em u b i 等等。

HTML 5 增加了一些语义化标签：

<figure> 和<figcaption>（一般用于图片介绍）
<time>
<mark>
<details>和 <summary>

<details>标签用于描述文档或文档某个部分的细节。

<summary>元素包含<details>元素的标题。

<details>元素用于描述有关文档或文档片段的更多详情。

<!-- 图片解释说明 -->
    <figure>
        <!-- 标题figcaption -->
        <figcaption>图片标题</figcaption>
        <img src="images/boya.png" alt="">
    </figure>

    <!-- time日期 -->
    <p>我们上课时间<time>9点</time></p>

    <!-- nark 强调 -->
    <p>学习前端最重要的是<mark>多练习</mark></p>

    <!-- 含有总结语义的标签 -->
    <!-- details 细节 -->
    <!-- summary 总结 -->
    <details>
        <summary>我们每一阶段都有测试</summary>
        <p>html基础测试</p>
        <p>js基础测试</p>
        <p>js进阶测试</p>
    </details>