HTML5(H5)

Posted 2022-03-26 lyx1014

一.什么是H5

html5的第五个版本（h5一般是指移动版的开发）

二.h5新增属性：（1）placeholden(文本框的样式设计，默认值)　　

    <input type="text" placeholder="请设置用户名">
    <input type="password" placeholder="请输入密码">
    <input type="text" value="请设置用户名">

 

 

 

　　　　　　　 （2）input的type类型

 

    <input type="date" name="date">//日期(年月日)框
        <br>
        <input type="time" name="time">//时间框（几点几时几分）
        <br>
        <input type="week" name="week">//(第几周)
        <br>
        <input type="datetime-local" name="datetime">


        <br>
        <br>
        <br>
        <input type="number">
        <br>
        <input type="email">
        <br>
        <input type="color" name="color">
        <br>
        <input type="range" min="1" max="100" name="range" value="10" step="10">
        <br>
        <input type="search" name="username">
        <br>
        <input type="url">

 

　　　　　　　　　　　　　（3）contenteditable（可编辑文本的框）---可以继承（也可以覆盖）

　　　　　　　　　　

    <div contenteditable="true">hello world</div>


    <!-- 可以继承的，可以覆盖 -->
    <div contenteditable="true">
        hello
        <span contenteditable="false">world</span>
    </div>



    <div contenteditable="true">
        <span contenteditable="false">用户名：</span>
        <span>张三    </span>
    </div>
    <div>
        <span>用户名：</span>
        <span contenteditable="true">张三    </span>
    </div>

 

 

 

 

　　　　　　　 （4）draggable(拖拽属性)

　　　　　　　　在标签中默认为（draggable="true"）

　　　　　　　　生命周期：（1）.鼠标按下（拖拽开始）

　　　　　　　　　　　　  （2）.拖拽中；

　　　　　　　　　　　　　（3）.松开鼠标，拖拽结束

　　　　　　　　拖拽属性的方法

1----divDrag.ondragstart=function()

　　　　按下的时候必须移动一下

2----divDrag.ondarg=function ()

　　　　鼠标按下以后，只要移动一下，时间一直触发

3----divDrag.ondragend=function（）

　　　　鼠标完成移动后处罚的事件

4----divTarget.ondragenter=function()

　　　　(当拖拽元素进入区域触发）--必须鼠标进入

 

        // 进入目标元素也有几个对应的事件
        var divTarget = document.getElementsByClassName("target")[0];
        divTarget.ondragenter = function(event)   //当拖拽元素进入区域触发（必须是鼠标进入）
            console.log(‘进入‘)
        

 

 

 

5----divTarget.ondragover=function()

　　　　

        divTarget.ondragover = function(event)    //当拖拽元素的鼠标进入区域，不断触发
            console.log("移动")
            event.preventDefault();
        

 

 

 

6----divTarget.ondragleave=function()

　　　　

        divTarget.ondragleave = function(event)   //当拖拽元素的鼠标进入区域后离开，触发
            console.log(‘移出‘)
        

 

 

 

  

7----divTarget.ondrop=function()

　　　　

    divTarget.ondrop = function(event)   //当拖拽元素的鼠标进入区域后松开鼠标，触发
            console.log(‘松开‘)
        

 

 

 

  

8----拖拽元素最终都是回到拖拽的起点

（事件一定是由行为触发的，一个行为不止可以触发一个事件）                              

三.h5新增标签：（1）语义化标签，就是跟div差不多的东西

所谓语义化标签就是一种我们仅通过标签名就能判断出该标签内容的语义的标签。下面将介绍<article> <section> <nav> <aside>、<header> <footer>等HTML5新增的语义化区块标签。

1----header（通常放置在页面或者页面中某个区间标题，还可以放置搜索清单，logo图片等元素，按照最新的w3c标准，我们还可以放置<nav>导航栏）

2----nav (通常表示页面的导航，可以通过导航连接到网站某个页面，或者当前网页的其他部分)

3----aside（所包含的内容不是页面的主要内容，具有独立性，是对页面的补充。）

4----footer（一般放置在页面的或者页面中某个区块的底部，包含版权信息，联系方式等信息）

5----article（表示包含于一个文档，页面，应用程序或者网站的一段地里的内容，可以被独立发布或者重新使用文章标记标签）

6----section（是一个主题性的内容分组，通常用于对页面进行分块或者对文章等进行分段）

　　　　　　　 （2）canvas（画布），javascript代码画图

　　　　　1--canvas标签定义：在网页中提供一块区域，可以供你画图的区域（行内块标签）

 

当浏览器不支持canvas时会显示其中的内容　　　　　　　

    <canvas>
    您的浏览器不支持画布
    </canvas>

 

2--canvas的属性

getContext----设置画布的样式（2d；3d）

 

 

　　　　　　

　　　　　　　 （3）SVG（可以伸缩的矢量的图形）

　　　　　　　 （4）audio(声音)

　　　　　　　 （5）video（视频）

四.新增API(ES6)

定义：（1）需要地理位置的功能（GPS）

（2）重力感应：陀螺仪

（3）动画优化 request

（4）history 控制历史

（5）localstorage(当前)      sessionstorage(会话)  ------存储功能、存储数据

（6）websocket  聊天室，在线聊天

（7）filereader  读取文档

（8）webworker   文件异步处理

（9）fetch