HTML5新特性

最新推荐文章于 2024-07-20 18:16:53 发布

咩Kakao

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量72

点赞数

分类专栏： HTML 文章标签： html5 前端 javascript

本文链接：https://blog.csdn.net/weixin_52142992/article/details/128099959

版权

HTML 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

HTML5新特性

(1) 语义化标签

<section>表示区块
<article>表示文章
<header>表示页眉
<footer>表示页脚
<nav>表示导航
<aside>表示侧边栏
<figure>表示媒介内容分组
<mark>表示标记
<progress>表示进度
<time>表示日期

(2) 新语义标签的兼容性处理

IE及以下版本的浏览器不支持H5和CSS3.解决办法: 引入htmlshiv.js文件,引入是,需要做if判断.

<!--  条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
  <script src="html5shiv.min.js"></script>
<![endif]-->

(3) H5中新增的表单类型

email 只能输入email格式
tel 手机号码
url只能输入url格式
number 只能输入数字
search 搜索框
range 滑动条
color 拾色器
time 时间
date 日期
datetime 时间日期
month 月份
week 星期

(4) web本地缓存

浏览器存储数据: cookie, sessionStorage, localStorage

三者不同点:

存储大小: cookie数据不超过4kb,localStorage和sessionStorage是5M
数据有效期:
- cookie在设置(服务器设置)的有效期内有效
- localStorage一直有效,除非主动删除数据,否则不会过期
- sessionStorage仅在当前浏览器窗口关闭前有效,关闭即销毁

// 存储数据
localStorage.setItem('username','张三');
// 获取数据
localStorage.getItem('username');
// 清除数据
localStorage.removeItem('username');
// 清除全部数据
localStorage.clear()

(5) 音频和视频

音频<audio>标签
视频<video>标签

(6) DOM操作

选择器

document.querySelector();
document.querySelector();

自定义属性

js里可以通过box.index = 100; box.title来自定义属性和获取属性

H5可以直接在标签里添加自定义属性,但必须以data-开头

<body>
    <!-- 给标签添加自定义属性 必须以data-开头 -->
    <div
      class="box"
      title="盒子"
      data-my-name="smyhvae"
      data-content="我是一个div"
    >
      div
    </div>
    <script>
      var box = document.querySelector(".box");

      //自定义的属性 需要通过 dateset[]方式来获取
      console.log(box.dataset["content"]); //打印结果：我是一个div
      console.log(box.dataset["myName"]); //打印结果：smyhvae

      //设置自定义属性的值
      var num = 100;
      num.index = 10;
      box.index = 100;
      box.dataset["content"] = "aaaa";
    </script>
  </body>

(7) 拖拽api

draggable = "true"讲需要被拖放的数据加上此属性
setData()保存数据
drag ondrag当拖放元素或选中的文本时触发
dragend ondragend当拖拽操作结束时触发
dragenter ondragenter当拖动元素或选中的文本到一个可释放目标时触发
dragexit ondragexit当元素变得不再是拖动操作的选中目标时触发
dragleave ondragleave当拖动元素或选中的文本离开一个可释放目标时触发
dragover ondragover当元素或选中的文本被拖到一个可释放目标上时触发
dragstart ondragstart 当用户开始拖动一个元素或选中的文本时触发
drop ondrop当元素或选中的文本在可释放目标上被释放时触发

(8) 离线缓存

HTML5中我们可以轻松的构建一个离线(无网络状态)应用,只需要创建一个cachemanifest缓存清单文件.

离线缓存优势
- 可配置需要缓存的资源
- 网路无连接应用仍可用
- 本地读取缓存资源,提升访问速度,增强用户体验
- 减少请求,缓存服务器负担
缓存清单文件

缓存清单文件中列出了浏览器缓存,以供离线访问的资源,推荐使用.appcache作为后缀名,另外还要添加MIME类型.

(9) 地图和地理定位

获取地理定位:

html5提供了获取定位的api

// 封装获取定位的方法
      function getLocation() {
        if (!navigator.geolocation) {
          console.log("对不起,你的浏览器不支持地理定位");
          return false;
        }
        // 调用html提供的api获取经纬度
        navigator.geolocation.getCurrentPosition(
          function successCallback(position) {
            // 纬度
            var wd = position.coords.latitude;
            // 经度
            var jd = position.coords.longitude;
          },
          function (err) {
            console.log("获取位置失败");
          }
        );
      }

可以使用百度地图,腾讯地图或者高德地图提交的公共api完成地图定位和地图绘制
- 申请apikey(也就是访问腾讯地图api的通行证)
- 登录腾讯地图服务,控制台=>应用管理=>我的应用=>创建应用=>添加key
- 调用接口

 <!DOCTYPE html>
 <html>

 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     <title>前端定位模块</title>
     <meta name="viewport"
         content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"> 
     <script type="text/javascript" src="https://mapapi.qq.com/web/mapComponents/geoLocation/v/geolocation.min.js">
     </script>
 </head>

 <body>
    <button onClick="get()">获取定位信息</button>
    <p></p>


     <script type="text/JavaScript">
         var geolocation = new qq.maps.Geolocation("XBZBZ-OBG63-LOD3N-3QR5Q-X6Z2Q-BFBIR", "woshilaohu");   

        function get(params) {
            geolocation.getIpLocation(function (position) { 
            document.querySelector('p').innerHTML = JSON.stringify(position);
        }, function () {
            document.querySelector('p').innerHTML = '定位失败';
        });
        } 
    </script>
 </body> 
 </html>

(10) 绘图- canvas

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      canvas {
        border: 1px solid;
      }
    </style>
  </head>
  <body>
    <canvas id="myCanvas" width="600" height="600"></canvas>
    <script>
      var c = document.getElementById("myCanvas");
      var cxt = c.getContext("2d"); //获取2d作图对象
      cxt.moveTo(10, 10); //画线的的起始点
      cxt.lineTo(150, 50); //画线
      cxt.lineTo(10, 50);
      cxt.stroke(); //线
      cxt.fillStyle = "#FF0000"; //填充颜色
      cxt.beginPath(); //开始路径
      cxt.arc(70, 18, 15, 0, Math.PI * 2, true); //画圆
      cxt.closePath(); //结束路径
      cxt.fill(); //填充

      var img = document.createElement("img");
      img.src = "https://www.w3school.com.cn/i/eg_dragdrop_w3school.gif";
      img.onload = function () {
        cxt.drawImage(img, 200, 200); //画布填充图片
      };
    </script>
  </body>
</html>