HTML5知识点总结

一．新增语义化标签

<header></header>    头标签

<nav></nav>    导航

<article></article>    文章

<section></section>    文档中的节

<footer></footer>    脚注   底部

<aside></aside>    侧边栏

二．其他标签

<details>

        <summary>标题</summary>

        其他内容

  </details>

<time></time>            <time  datetime="日期"></time>

进度条    <progress   value=""  min=""  max=""  ></progress>

度量衡    <meter  value=""  min=""  max=""  low=""  high=""></meter>

数据列表

<input  list="id值">

<datalist  id="值">

        <option  value=""></option>

        <option  value=""></option>

        。。。。

</datalist>

三．form新增控件

<input type="email"/>        邮箱   

<input type="url"/>        地址

<input type="number"   min="" max=""  step=""/>        数字       step表示步长

<input type="range" min=""  max=""  step=""/>        滑动条

年月日    <input type="date"/>

年月    <input type="month"/>

年周    <input type="week"/>

时间（时分）    <input type="time"/>

年月日时分（utc时间)      <input  type="datetime"/>

年月日时分（本地时间)       <input  type="datetime-local"/>

搜索域    <input  type="search"/>

颜色        <input   type="color"   value="十六进制"/>

电话        <input   type="tel"  pattern="\d{11}"/>        \d数字[0,9]     {11}重复前一项11次

新增属性

placeholder    文本提醒

required       必填项

autocomplete   自动补全         值：1）on  默认开启自动补全   2）off  关闭自动补全

autofocus      自动获取焦点

readonly       只读状态

四．多媒体

1.音频

 <audio   src="音频路径"></audio>

兼容

<audio>

        <source  src="音频路径"  type="audio/ogg"></source>

        <source  src="音频路径"   type="audio/mpeg"></source>

        ....

       你的浏览器不支持audio标签

</audio>

audio属性：

1）controls     控件

2）autoplay     自动播放

3）loop         重复播放

2.视频

<video  src="视频路径"></video>

兼容

<video>

         <source  src="视频路径"   type="video/ogg"></source>

        <source src="视频路径"    type="video/mp4"></source>

        ......

        你的浏览器不支持video标签

</video>

video属性：

1）controls     控件

2）autoplay     自动播放

3）loop         重复播放

4）muted        静音

5）poster     值：“图片路径”     视频的背景图片