HTML5部分新标签

HTML5部分新标签

语义化标签

1. header 表示头部-块元素

2. section -区块

3. footer --底部

4. nav -导航链接

5. aside -侧边栏

6. article -内容区域

7. output - 输出 用于存放计算总价的时候，将总价放在这个标签

8. canvas -专业画画的标签

表单标签和表单属性

1. 表单域

2. fieldset：表单集合标签，一般用于把表单中的几个元素包裹在一起，一起控制

   1. disabled 禁用

   2. legend 标题

   <fieldset>

   姓名：<input type="input">

   </fieldset>

3. 新表单类型

   1. type="email" 要有@符号

   2. typr="url". 要有协议

   3. type="number" 只能输入数字和小写字母e

   <input type="number" max="10" min="1" step="5">

   4. type="tel"

   5. type="search". 在输入内容的过程中，会出现清空按钮

   6. type="date" 年月日的日期控件

   7. type="time" 时分秒的空间

   8. type="month" 选择月份的控件

   9. type="week" 显示这是这一年的第几周

   10. type="range" 进度条

   设置最大进度，最小进度和 value表示当前进度

   <input type="range" max="10" min="1" value="5">

   11. type="color" 颜色选择器

   其他的form属性

   1. placeholder

      <input type="password" placeholder="请输入密码">

   2. required 表示必填，空的时候不能提交

      <input type="password" placeholder="请输入密码" required>

   3. autocomplete. 记录表单提交过的数据

      on --开启记录功能，当下次再输入的时候会有一个智能提示

      off--关闭记录功能

      这个属性要添加在form上，表单要有name属性

   4. pattern属性，值是一个正则表达式，用来校验当前表单元素的属性

      <input type="password" placeholder="请输入密码" pattern="">

   5. multipe 用于type=file的文件选择器上，用于选择多个文件，默认只能选择一个

      <input type="file" multiple="multiple">

   6. datalist可输入内容的下拉框，将datalist的id值，跟input的list属性的值保持一致，将需要下拉显示的option放在datalist标签中,option必须要有value属性和值

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

      <datalist id="province">
      <option value="1">湖南</option>
      <option value="2">湖北</option>
      </datalist>

   7. 下拉框添加multiple属性可以让下拉框进行多选

      将多个option放在一个outgroup的标签中，可以对进行分组

   8. 表单之外的表单元素，如果需要在表单提交的时候，也需要进行提交，就可以给表单设置id属性，给外面的表单元素设置form属性，两个值保持一致

   9. formaction 给一个表单设置不同的提交地址

      <input type="submit" formaction="baudu.com" value="登陆">

      <input type="submit" formaction="qq.com" value="注册">

   10. formmethod 给一个表单设置不同的提交方式

video

<video controls autoplay loop width="100" height="50">
<source src="./路径.mp4"></source>

<source src="./路径.avi" ></source>
<source src="./路径.ogg" ></source>
</video>

浏览器对于video的格式兼容不好,以上为兼容写法

loop为循环播放

controls属性，会出现默认的控制面板

autoplay自动播放，在某些情况下是不好用的

width和height属性用来设置宽和高

如果设置了一个，另一个会等比例缩放

如果两个都设置了

audio标签

只接收ogg和mp3两种格式，使用方式和video是一样的

在不写controls时是不占空间的，写了controls时控制面板时行内元素

<audio controls loop>
<source src="路径.mp3">
<source src="路径.ogg">
</audio>

多媒体的API

1. play() 播放

2. pause() 暂停

3. duration()获取多媒体的播放时长。以秒为单位

4. muted 获取/设置多媒体的静音属性

   console.log(vedio.muted);

   vedio.muted=true

vedio.play() //正常情况下是不允许播放的，需要先静音才能播放

5. volume 获取/设置音量，0-1

6. currentTime获取/设置当前多媒体播放的时间

7. paused 获取多媒体是否暂停

8. playbackRate 获取/设置多媒体播放的倍速--倍数

多媒体的事件

1. loadstart:视频开始加载的时候触发

2. progress：浏览器正在下载多媒体的时候触发--相当于在加载

3. canplay：加载完毕，能播放了的时候触发

4. play：多媒体开始播放的时候

5. pause：多媒体暂停的时候触发

6. seeking：当多媒体即将跳到新位置的时候会触发

7. seeked：已经跳转到新位置了

8. waiting：当多媒体正在等待缓存的时候触发

9. timeupdate：只要播放时间改了就会触发，相当于时时都会触发

10. ended：视频播放结束的时候会触发

11. error：播放错误的时候会触发

12. volumechange：音量发生改变的时候会触发

13. ratechange：播放速度更改的时候会触发