分析：

  • 拖拽释放(Drap and drop)API ondrop拖放是一种常见的特性，即抓取对象以后拖到另一个位置在 HTML5 中，拖放是标准的一部分，任何元素都能够拖放

  • 画布 canvas；getContext()方法返回一个用于在画布上绘图的环境Canvas.getContext(contextID) 参数 contextID 指定了您想要在画布上绘制的类型。当前 唯一的合法值是 “2d”，它指定了二维绘图，并且导致这个方法返回一个环境对象，该 对象导出一个二维绘图 API

    • cxt.stroke() 如果没有这一步 线条是不会显示在画布上的

    • canvas 和 image 在处理图片的时候有什么区别?

      image 是通过对象的形式描述图片的,canvas 通过专门的 API 将图片绘制在画布上.

  • 自定义属性 data-id

    dataset来实现存取

    1. // h5的自定义属性data- 实现一些简单数据的存取
    2. let div = document.createElement('div')
    3. document.body.appendChild(div)
    4. div.dataset.fru = 'djaisof'

    ​

  • 用于媒介播放的 video 和 audio，如果浏览器不支持自动播放怎么办？在属性中添加 autoplay

  • 新的语义化标签：article，header，nav，section，footer, aside；

  • 新的本地存储：localStorage（长期存储浏览器关闭后数据不丢失），sessionStorage；

  • 新的表单控件：calendar , date , time , email , url , search , tel , file ,number;

  • 新的技术：websocket，web worker，geoloacation（基于地理位置的应用）。

  1. <header>定义网页的头部</header>
  2. <nav>定义网页导航区域</nav>
  3. <section>定义网页的区段</section>
  4. <article>定义网页独立区域内容</article>
  5. <aside>定义网页侧边栏内容</aside>
  6. <footer>定义网页的底部</footer>

video视频标签有兼容问题

属性

  • muted:静音播放
  • autoplay:自动播放,但要加上muted
  • loop:循环播放
  • controls:显示播放控件
  • preload:auto(预先加载) none(不预先加载视频) metadata(加载一部分信息，每个浏览器不同),如果有autoplay则忽略
  • poster:加载等待的画面图片
  • width:宽
  • height:高
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.         video {
  13.             margin: 100px auto;
  14.             height: 600px;
  15.             width: 1076px;
  16.         }
  17.     </style>
  18. </head>
  19. <body>
  20. <video src='http://mdup.apdcdn.tc.qq.com/vcloud1022.tc.qq.com/1022_e69987bb8934400eb786a159f45985ce.f0.mp4?vkey=8AD9E63253276CEA6F778A11794E90D81B116C587318D0AF7379FAF8E2D3F9B7A48CED0D9B1177804922DE9F96C0281A3AE2FAA580CCA98141522BCCF3FF3B307F54E2AEB4A86AB8C04631D21869AD25FB600EA0009A3F9C&sha=0' autoplay='autoplay' muted='muted' loop='loop' controls='controls'></video>
  21. </body>
  22. </html>

注意：谷歌浏览器的autoplay要用加上muted来解决

视频格式兼容问题

  1. <vedio controls>
  2.     <source src='..mp4'>
  3.     <source src='..mp3'>
  4.     <source src='..webm'>
  5. </vedio>

已弃用，会插入文档片段，不安全

  1. <embed src=''>
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Document</title>
  7.     <style>
  8.         * {
  9.             padding: 0;
  10.             margin: 0;
  11.         }
  12.        
  13.     </style>
  14. </head>
  15. <body>
  16.     <audio src="C:\Users\DELL\Documents\Tencent Files\2826696712\FileRecv\MyKey - Why Baby Why.mp3" controls='controls'></audio>
  17. </body>
  18. </html>

注意：浏览器把自动播放功能禁用了

audio 同样也有兼容性问题

  • src:加载音频资源地址
  • autoplay：音频在就绪后马上播放（被禁用了）
  • controls:显示空间，如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
  • muted:静音播放
  • loop:loop 循坏播放

兼容问题

  1. <audio controls>
  2.     <source src='..mp4'>
  3.     <source src='..mp3'>
  4.     <source src='..ogg'>
  5. </audio>

如果还有问题，则表示浏览器不支持audio标签

input新增type值

  1.     <form action="">
  2.         邮箱：<input type="email" name="" id="">
  3.         url: <input type="url" name="" id="">
  4.         日期：<input type="date" name="" id="">
  5.         时间：<input type="time" name="" id="">
  6.         年月：<input type="month" name="" id="">
  7.         年周：<input type="week" name="" id="">
  8.         数字：<input type="number" name="" id="">
  9.         // 数字e可以显示 因为有科学计数法e
  10.         手机号码：<input type="tel" name="" id="">
  11.         搜索框：<input type="search" name="" id="">
  12.         颜色：<input type="color" name="" id="">
  13.         显示：<input type="show">
  14.         隐藏：<input type="hidden" name="">
  15.         滑块：<input type="range" name="" id="">
  16.     </form>

注意：当我们要验证时要在form表单域中

input新增属性

  1.     <form action="">
  2.         accesskey: <input type="text" accesskey="m"> <br>   // 快捷键 alt + accuesskey的值 聚焦
  3.         autofocus <input type="text" autofocus='autofocus'> <br>    //自动聚焦
  4.         required: <input type="text" required='required'> <br>  // 必须填写，不然不能提交
  5.         placeholder <input type="text" placeholder="默认信息"> <br> //默认信息
  6.         multiple <input type="file" multiple='multiple'> <br>   // 文件多选
  7.         autocomplete <input type="text" autocomplete="off" name="names"> //默认为 On 需要在表单内，同时加上name属性，同时成功提交 <hr>
  8.         <input type="submit" value="提交">
  9.     </form>
  1. <!-- input使用list属性-->
  2.     <input type="text" value="输入明显" list='star'>
  3.     <!-- datalist使用id属性，list属性和id属性为一致，表示input完成链接 -->
  4.     <!-- 如果value有值，优先显示value的值 -->
  5.     <datalist id="star">
  6.         <option value="01">小红</option>
  7.         <option value="02">小路</option>
  8.         <option>小明</option>
  9.     </datalist>>

和form标签一起使用，对表单进行分组，分组之后每一组大概描述信息legend标签

  1. <form action="">
  2.         <fieldset>
  3.             <legend>账户信息</legend>
  4.             用户名：<input type="text" name="" id="">
  5.             密码: <input type="password" name="" id="">
  6.         </fieldset>
  7.         <br>
  8.         <br>
  9.         <fieldset>
  10.             其他: <input type="text">
  11.         </fieldset>
  12.         
  13.     </form>

对与定义带有记号的文本，在需要显示的时候可以使用meter标签

  1. <p>对与定义带有<mark> 记号的文本</mark>>>，在需要显示的时候可以使用meter标签</p>

定义度量衡

  1. <meter min="0" value="30" max="100" low="15" high="80"></meter>

注意：ie浏览器不支持meter标签

progress标签

  1. <label for='file'>file progress:</label>
  2. <progress value='70' max='100' id='file'></progress>
  3. <-- js一起使用
  4.     max:描述一个需要完成多少任务
  5.     value:表示已近完成的任务-->
版权声明：本文为a立方原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/shuilifang/p/16230287.html