• 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兼容性问题

  • 相关阅读:
    韦到头打印链表
    字符串替换
    二维数组中的查找
    字符串加解密
    简单密码破解
    vue中store模块化
    使用requests抓取网页内容
    PyQt中的一些小问题
    微信公众号之Token验证
    编译BOOST中的PYTHON模块
  • 原文地址:https://www.cnblogs.com/wangxue13/p/13520036.html
Copyright © 2020-2023  润新知