H5初识

知识点一:H5简介

1、什么是HTML5

  H4的新版本,增加了新的标签、新的属性、新的方法

2、HTML5的改进

  (1)、新元素(2)、新属性(3)、完全支持CSS3(4)、Video和Audio(5)、2D/3D制图(6)、本地存储(7)、Web应用

知识点二:H5标签

1、新增的标签

  (1)、<canvas>新元素

  <canvas>标签定义图形,比如图表和其他图像。该标签基于JavaScript的绘图API

(2)、新多媒体元素

<audio>定义音频内容

<video>定义视频(video或者movie)

<source>定义多媒体资源<video>和<audio>

(3)、新表单元素

<datalist>定义选项列表。请与input元素配合使用该元素,来定义input可能的值。

<output>定义不同类型的输出,比如脚本的输出。

(4)、新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构:

<article>定义页面独立的内容区域。

<aside>定义页面的侧边栏内容。

<command>定义命令按钮,比如单选按钮、复选框或按钮

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

<dialog>定义对话框,比如提示框

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

<footer>定义section或document的页脚。

<header>定义了文档的头部区域

<nav>定义导航链接的部分。

<progress>定义任何类型的任务的进度。

<section>定义文档中的节(section、区段)。

3、移除的标签

<acronym>、<applet>、<basefont>、<big>、<center>、<dir>、<font>、<frame>、<frameset>、<noframes>、<strike>、<tt>

4、新增表单元素

(1)、<datalist>元素规定输入域的选项列表,<datalist>属性规定form或input域应该拥有自动完成功能。当用户在自动完成域中开始输入时,浏览器应该在该域中显示填写的选项:使用<input>元素的列表属性与<datalist>元素绑定。

例:<input  list="browsers">

<datalist  id="browsers">

<option  value="InternetExplorer">

<option  value="Firefox">

<option  value="Chrome">

<option  value="Opera">

<option  value="Safari">

</datalist>

(2)、<output>输出:有两个属性name:要操纵的表单元素的变量  for:定义一个或者多个元素的输出域的元素(多个用空格隔开)

例:<form oninput=’x.value=parseInt(inp1.value)+parseInt(inp2.value)’>

             <input  type=”number”  id=”inp1”  value=”1”>

<input  type=”number”  id=”inp2”  value=”1”>

<output  name=”x”  for=”inp1  inp2”>0</ output >

</form>

5、新增表单属性

(1)、placeholder占位符

(2)、autofocus获取焦点

(3)、autocomplete自动完成,用于表单元素,也可用于表单自身

       参数:on  off

(4)、name指定表单项属于哪个form,处理复杂表单时会需要

(5)、novalidate关闭验证,可用于<form>标签

(6)、required验证条件,必填项

(7)、pattern正则表达式验证表单

(8)、maxlength最大长度minlength最小长度

6、表单输入类型

        (1)、email:输入email格式

        (2)、url:只能输入url格式

        (3)、number:只能输入数字

(4)、search:搜索框

(5)、range:范围,可以进行拖动,通过value进行取值

(6)、color:拾色器,通过value进行取值

(7)、time:时间

(8)、date:日期不是绝对的

(9)、month:月份

(10)、week:星期

7、 表单新增事件

        (1)、oninput用户输入内容时触发,可用于移动端输入字数统计

         例:document.getElementById("name").oninput=function(){

console.log(this.value);

}

document.getElementById("name").onkeyup=function(){

console.log("---"+this.value);

}

8、多媒体

       (1)、Video(视频)

            属性:

1)、controls如果出现该属性,则向用户显示控件,比如播放按钮。

2)、height设置视频播放器的高度。

3)、 loop如果出现该属性,则当媒介文件完成播放后再次开始播放。

4)、muted如果出现该属性,视频的音频输出为静音。

5)、width设置视频播放器的宽度。

6)、autoplay 设置视频自动播放,配合muted使用(不建议使用)

7)、paused 设置视频暂停

    方法:

1)、play() 设置视频播放

2)、pause() 设置视频暂停

    格式:

1)、.mp4

2)、.Ogg

3)、.webm

     (2) 、Audio(音频)

          属性:

    1)、controls如果出现该属性,则向用户显示音频控件(比如播放/暂停按钮)。

              2)、loop 如果出现该属性,则每当音频结束时重新开始播放。

              3)、muted如果出现该属性,则音频输出为静音。

    方法:

1)、play() 设置视频播放

2)、pause() 设置视频暂停

         格式:

               1)、.amr

               2)、.mp3

               3)、.ogg

               4)、.wav

                5)、.wma

9、兼容问题

        <!--[ifltIE9]>

<scriptsrc="//cdn.bootcss.com/respond.js/1.4.2/respond.js"></script>

<scriptsrc="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>

<![endif]-->

html5shiv.min.js:处理IE9以下的对于html5标签的兼容性问题

respond.js:处理css3兼容性问题

原文地址:https://www.cnblogs.com/wangxue13/p/13520036.html