html5知识点

一、html5是什么

• HTML5 是最新的 HTML 标准。
• HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件。
• HTML5 拥有新的语义、图形以及多媒体元素。
• HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建。
• HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行。

二、新增语义化标签

html5中新增的语义化标签可以分为两大类：块元素标签和内联元素标签。

1.块元素标签

（1）<header></header>:定义文档的头部区域

<header>我是头部</header>

（2）<nav></nav>：定义导航链接的部分

<nav>我是导航</nav>

（3）<section></section>： 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档                                                  中的其他部分。

<section>
    <header>section中的头部</header>
    <article>section中的内容区域</article>
    <footer>section中的脚注</footer>
</section>

（4）<footer></footer>：定义 页面 的页脚。

<footer>我是页脚</footer>

（5）<main></main>:定义文档的主体部分。

<main>文章主体部分放在这里</main>

   tips:main标签在网页中应该是唯一的，只能出现一次，不能重复出现，只能放在body里面           不能是其他元素的子元素，只能是其他元素的包含框元素。

（6）<aside></aside>：定义页面的侧边栏内容。

<aside>我是侧边栏哈哈哈</aside>

（7）<article></article>：定义一个文章区域。

<article>这里放文章哦</article>

（8）<figure></figure>：规定独立的流内容（图像、图表、照片、代码等等）。

<figure>
    <figcaption>独立流内容标题</figcaption>
    <!-- 独立流内容（图标、代码、图片、表格等） -->
</figure>

（9）<details></details>：用于描述文档或文档某个部分的细节。

<details>
    <summary>概要</summary>
  <!-- 文字/图片等 -->
</detail>

2.内联元素标签

（1）<progress></progress>：定义运行中的进度（进程）。

<progress value="进度值" min="最小值" max="最大值">
你的浏览器不支持此标签
</progress>
<!-- 若浏览器版本太低 则不显示进度条 显示浏览器不支持此标签  -->

（2）<meter></meter>：定义度量衡。仅用于已知最大和最小值的度量。

<meter value="" min="" max="" low="" high="">
your browser is not supported
</meter>
<!-- 若浏览器版本太低 则不显示进度条 显示your browser is not supported -->

（3）<time></time>：定义日期或时间，或者两者。

<time datetime="yyyy-mm-dd"></time>
<!--  表示xxxx年xx月xx日  -->

（4）<mark></mark>：定义带有记号的文本。

<mark>标记</mark>
<!-- 在谷歌浏览器中 默认为黄色背景色标记选中文字  -->

三、新增表单控件

1.数据列表

（1）基本格式

          <input list="id值">
          <datalist id="id值">
          <option value="值">文本</option> 
          <option value="值">文本</option>
            ... 
          </datalist>

（2）实例

<input type="text" list="kouhong">
        <!-- 此标签在IE浏览器中只支持IE10及以上版本 -->
        <!-- 若value值为空，则不支持显示，可以去掉value值，或写上value值 -->
        <datalist id="kouhong">
            <option value="channel">香奈儿</option>
            <option value="dior">雕</option>
            <option value="mac">魅可</option>
            <option value="3ce">3ce</option>
            <option value="lancome">兰蔻</option>
</datalist>

2.输入框控件

（1）电子邮箱email

<p>邮箱:<input type="email" name="" id=""></p>
        <!-- 只能填入正确的邮箱格式 -->

（2）网址url

<p>网址:<input type="url" name="" id=""></p>
        <!-- 只能填写网址 协议也需要补充完整 -->

（3）搜索域search

  <!-- 搜索域 -->
        <p>搜索域:<input type="search" name="search"></p>

（4）电话号码tel

<!-- 电话号码 -->
        <!-- pattern:格式 模式 -->
        <!-- [0-9]=\d -->
        <!-- \d{11} 代表输入的必须是十一位的数字-->
        <p>电话号码：<input type="tel" name="telephone" pattern="\d{11}" autofocus></p>

（5）数字number

 <p>数字:<input type="number" name="age" value="18" step="2" min="1" max="100"></p>

3.日期控件

（1）年月日date

<!-- 年月日 -->
        <p>年月日:<input type="date" name="date"></p>

（2）年月month

<!-- 年月 -->
        <p>年月:<input type="month" name="month"></p>

（3）年周week

<!-- 年周 -->
        <p>年周:<input type="week" name="week"></p>

（4）UTC年月时分datetime

 <!-- UTC年月时分秒 -->
        <p>本地时间:<input type="datetime-" name="datetime"></p>

（5）本地年月时分datetime-local

 <!-- 本地时间 -->
        <p>本地时间:<input type="datetime-local" name="datetime-local"></p>

4.其他控件

（1）滑块range

 <!-- 滑动条 -->
        <p>滑动条:<input type="range" name="range" value="2" min="0" step="2" max="10"></p>

（2）拾色器color

 <!-- 拾色器 -->
        <p>拾色器:<input type="color" name="color" value="#cccccc"></p>
 <!-- value是颜色初始值 只能使用十六进制全写形式表示 -->

四、多媒体标签

1.音频标签audio

（1）基本格式

 <audio src="media/song.mp3" controls>你的浏览器不支持</audio>

（2）不同格式音频文件兼容（用来解决浏览器不支持该格式的情况）

 <audio controls autoplay muted>
        <source src="media/song.mp3" type="audio/mp3">
        <source src="media/song.ogg" type="audio/ogg">
    </audio>

2.视频标签video

（1）基本格式

 <video src="media/explore_promo.mp4" controls>你的浏览器不支持此标签</video>

（2）不同格式视频文件兼容（用来解决浏览器不支持该格式的情况）

<video controls>
    <source src="mp4视频文件" type="video/mp4">
    <source src="ogg视频文件" type="video/ogg">
</video>

3.属性值

（1）自动播放 autoplay 

（2）静音 muted

（3）单曲/单视频循环播放 loop

（4）封面 poster

（5）音频/视频控件 controls

tips：在Chrome中 静音状态下视频或音频才会自动播放

    <!-- controls 音频/视频控件 -->
    <!-- autoplay 自动播放 -->
    <!-- poster 设置封面 -->
    <!-- muted 静音 -->
    <!-- 单曲循环 loop -->