强攻前端HTML5 渡一学习记录

最新推荐文章于 2024-03-14 14:19:28 发布

m0_46424423

最新推荐文章于 2024-03-14 14:19:28 发布

阅读量618

点赞数

分类专栏：前端实用小知识文章标签： html5

本文链接：https://blog.csdn.net/m0_46424423/article/details/119004296

版权

这篇博客详细介绍了HTML5的新增属性、标签和API，包括input的type属性、contenteditable、drag和drop功能、canvas与svg的绘制技巧、音频和视频播放器的使用，以及地理定位、设备感应、动画优化等进阶特性。内容丰富，适合前端开发者深入学习。

摘要由CSDN通过智能技术生成

欢迎关注掘金 https://juejin.cn/user/2551305355400797

1.内容大纲

1.新增的属性

placeholder
Calendar, date, time, email, url, search
ContentEditable
Draggable
Hidden
Content-menu
Data-Val(自定义属性)

2.新增的标签

语义化标签
canvas
svg
Audio(声音播放)
Video(视频播放)

3.API

移动端网页开发一般指的是h5
定位（需要地理位置的功能）
重力感应（手机里面的陀螺仪（微信摇一摇，赛车转弯））
request-animation-frame（动画优化）
History历史界面（控制当前页面的历史记录）
LocalStorage（本地存储，电脑/浏览器关闭都会保留）；SessionStorage，（会话存储：窗口关闭就消失）。都是存储信息（比如历史最高记录）
WebSocket（在线聊天，聊天室）
FileReader(文件读取，预览图)
WebWoker（文件的异步，提升性能，提升交互体验）
Fetch（传说中要替代AJAX的东西）

2.属性篇_input新增type

1.placeholder

<input type="text" placeholder="用户名/手机/邮箱">
<input type="password" placeholder="请输入密码">

2.input新增type

以前学的

<input type="radio">
<input type="checkbox">
<input type="file">

input新增type

<form>
    <!-- Calendar类 -->
    <input type="date"><!-- 不常用原因之一：chrome支持，Safari,IE不支持 -->
    <input type="time"><!-- 不常用原因之一：chrome支持，Safari,IE不支持 -->
    <input type="week"><!-- 第几周  不常用原因之一：chrome支持，Safari,IE不支持 -->
    <input type="datetime-local"><!-- 不常用原因之一：chrome支持，Safari,IE不支持 -->
    <br>
    <input type="number"><!-- 限制输入，仅数字可以。不常用原因之一：chrome支持，Safari,IE不支持-->
    <input type="email"><!-- 邮箱格式 不常用原因之一：chrome，火狐支持，Safari,IE不支持-->
    <input type="color"><!-- 颜色选择器 不常用原因之一：chrome支持，Safari,IE不支持-->
    <input type="range" min="1" max="100" name="range"><!-- chrome,Safar支持 ，火狐，IE不支持-->
    <input type="search" name="search"><!-- 自动提示历史搜索.chrome支持,Safar支持一点,IE不支持 -->
    <input type="url"><!-- chrome，火狐支持,Safar,IE不支持 -->

    <input type="submit">
</form>

3.ContentEditable

<div>Panda</div>

想修改内容
原生方法：增加点击事件修改
新方法

<div contenteditable="true">Panda</div>

默认值false,没有兼容性问题,可以继承(包裹的子元素),可以覆盖(后来设置的覆盖前面设置的)
常见误区：

<div contenteditable="true">
    <span contenteditable="false">姓名：</span>Panda<br>
    <span contenteditable="false">姓别：</span>男<br>
    <!-- 会导致删除br等标签 -->
</div>

总结：实战开发可用属性:contenteditable, placeholder

4.Drag被拖拽元素

<div class="a" draggable="true"></div><!-- 谷歌，safari可以，火狐，Ie不支持 -->

默认值false

默认值为true的标签(默认带有拖拽功能的标签)：a标签和img标签

拖拽生命周期
1.拖拽开始，拖拽进行中，拖拽结束
2.组成：被拖拽的物体，目标区域
拖拽事件

var oDragDiv = document.getElementsByClassName('a')[0];
oDragDiv.ondragstart = function (e) {
   
    console.log(e);
}// 按下物体的瞬间不触发事件，只有拖动才会触发开始事件
oDragDiv.ondrag = function (e) {
   //移动事件
    console.log(e);
}
oDragDiv.ondragend = function (e) {
   
    console.log(e);
}
// 从而得出移动多少点

小功能：.a{position:absolute}

<div class="a" draggable="true"></div>
<script>
    var oDragDiv = document.getElementsByClassName('a')[0];
    var beginX = 0;
    var beginY = 0;
    oDragDiv.ondragstart = function (e) {
    
        beginX = e.clientX;
        beginY = e.clientY;
        console.log(e);
    }
    oDragDiv.ondragend = function (e) {
    
        var x = e.clientX - beginX;
        var y = e.clientY - beginY;
        oDragDiv.style.left = oDragDiv.offsetLeft + x + "px";
        oDragDiv.style.top = oDragDiv.offsetTop + y + "px";
    }
</script>

5.Drag目标元素（目标区域）

.a {
   
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
}
.target{
   
  width: 200px;
  height: 200px;
  border:1px solid;
  position: absolute;
  left: 600px;
}

<div class="a" draggable="true"></div>
<div class="target"></div>


<script>

  var oDragDiv = document.getElementsByClassName('a')[0];
  oDragDiv.ondragstart = function (e) {
    
  }
  oDragDiv.ondrag = function (e) {
    
    //只要移动就不停的触发
  }
  oDragDiv.ondragend = function (e) {
    
  }
  var oDragTarget = document.getElementsByClassName("target")[0];
  oDragTarget.ondragenter = function (e) {
    //不是元素图形进入就触发的而是拖拽的鼠标进入才触发的
    // console.log(e);
  }
  oDragTarget.ondragover = function (e) {
    
    //类似于ondrag，只要在区域内移动，就不停的触发
    // console.log(e);
    // ondragover--回到原处 / 执行drop事件
  }
  oDragTarget.ondragleave = function (e) {
    
    console.log(e);
    // 离开就触发
  }
  oDragTarget.ondrop = function (e) {
    
    console.log(e);
    // 所有标签元素，当拖拽周期结束时，默认事件是回到原处，要想执行ondrop，必须在ondragover里面加上e.preventDefault();
    // 事件是由行为触发，一个行为可以不只触发一个事件
    // 抬起的时候，有ondragover默认回到原处的事件，只要阻止回到原处，就可以执行drop事件
    
    // A -> B(阻止) -> C             想阻止c,只能在B上阻止  责任链模式
  }
</script>

6.拖拽demo

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
    
            padding: 0;
            margin: 0;
        }

        .box1 {
    
            position: absolute;
            width: 150px;
            height: auto;
            border: 1px solid;
            padding-bottom: 10px;
        }

        .box2 {
    
            position: absolute;
            width: 150px;
            left: 300px;
            height: auto;
            border: 1px solid;
            padding-bottom: 10px;
        }

        li {
    
            position: relative;
            width: 100px;
            height: 30px;
            background: #abcdef;
            margin: 10px auto 0px auto;
            /* 居中，上下10px */
            list-style: none;
        }
    </style>
</head>

<body>
    <div class="box1">
        <ul>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="box2"></div>
    <script>
        var dragDom;
        var liList = document.getElementsByTagName('li');
        for (var i = 0; i < liList.length; i++) {
    
            liList[i].setAttribute("draggable", true);//赋予class
            liList[i].ondragstart = function (e) {
    
                console.log(e.target);
                dragDom = e.target;
            }
        }
        var box2 = document.getElementsByClassName("box2")[0];
        box2.ondragover = function (e) {
    
            e.preventDefault();
        }
        box2.ondrop = function (e) {
    
            // console.log(dragDom);
            box2.appendChild(dragDom