二、HTML5

一、HTML5简介

1、什么是HTML5

HTML5 是新一代的 HTML 标准，2014年10月由万维网联盟（W3C）完成标准制定。
官网地址：
W3C 提供： https://www.w3.org/TR/html/index.html
WHATWG 提供：https://whatwg-cn.github.io/html/multipage

HTML5在侠义上是指新一代的HTML标准，在广义上是指：整个前端

2、HTML5 优势

1、针对JavaScript，新增了很多可操作的接口。
2、新增了一些语义化标签、全局属性
3、新增了多媒体标签，可以很好的替代 flash。
4、更加侧重语义化，对于SEO 更友好。
5、可移植性好，可以大量应用在移动设备上。

3、HTML5兼容性

支持：Chrome、Safari、Opera、Firefox 等主流浏览器。
IE浏览器必须是9及以上版本才支持HTML5,IE9仅支持部分HTML5新特性。

二、新增语义化标签

1、新增布局标签

标签名	语义	单/双标签
header	整个页面，或部分区域的头部	双
footer	整个页面，或部分区域的底部	双
nav	导航	双
article	文章、帖子、杂志、新闻、博客、评论等。	双
section	页面中的某段文字，或者文章中的某段文字（里面文字通常里面会包含标题）	双
aside	侧边栏	双
main	文档的主要内容（WHATWG没有语义，IE不支持），几乎不用	双
hgroup	包裹连续的标题，如文章主标题、如文章主标题、副标题的组合（W3C将其删除）	双

上面的标签其实没有什么实际的效果，可以理解为有了语义的div。

关于 article 和 section ：

1、artical 里面可以有多个section。
2、section 强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用section元素。
3、article 比 section 更强调独立性，一块内容如果比较独立、比较完整，应该使用 article 元素。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <header>
        <h1>尚品</h1>
    </header>
    <hr>
    <!-- 主导航区 -->
    <nav>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
        <a href="#">首页</a>
    </nav>
    <!-- 主要内容 -->
     <div class="page-content">
                 <!-- 侧边栏导航 -->
                 <aside style="float: right;">
                    <nav>
                        <ul>
                            <li><a href="#">秒杀专区</a></li>
                            <li><a href="#">会员专区</a></li>
                            <li><a href="#">领取优惠卷专区</a></li>
                            <li><a href="#">品牌专区</a></li>
                        </ul>
                    </nav>
                  </aside>
        <!-- 文章 -->
         <article>
            <h2>《如何一夜暴富》</h2>
            <section>
                <h3>第一种方式：通过做梦</h3>
                <p>你要这么做梦：XXXXXXXXXXXXX</p>
            </section>
            <section>
                <h3>第二种方式：通过彩票</h3>
                <p>你要这么买彩票：XXXXXXXXXXXXX</p>
            </section>
         </article>
         <hr>
         <!-- 页脚 -->
          <footer>
            <nav>
                <a href="#">友情链接1</a>
                <a href="#">友情链接2</a>
                <a href="#">友情链接3</a>
            </nav>
          </footer>
     </div>
</body>
</html>

2、新增状态标签

2.1 meter 标签

语义：定义已知范围内的标量测量。也被称为 gauge 尺度，双标签，例如：电量、磁盘用量等。
常用属性如下：

属性	值	描述
high	数值	规定高值
low	数值	规定低值
max	数值	规定最大值
min	数值	规定最小值
optimum	数值	规定最优值
value	数值	规定当前值

2.2 progress标签

语义：显示某个任务完成得进度的指示器，一般用于标识进度条，双标签，例如：工作完成进度等。
常用属性如下：

属性	值	描述
max	数值	规定目标值
value	数值	规定当前值

    <span>手机电量</span>
    <meter max="100" min="0" value="10" low="20" high="80" optimum="90"></meter><br>
    <span>当前进度:</span>
    <progress max="100" value="20"></progress>

3、新增列表标签

标签名	语义	单\双标签
datalist	用于搜索框的关键字提示	双
details	用于展示问题和答案，或对专有名词进行解释	双
summary	写在 details 的里面，用于指定问题或专有名词	双

<form action="#">

<input type="text" list="mydata">

<button>搜素</button>

</form>

<input type = "text" list = "mydata" >