H5总结

最新推荐文章于 2019-08-05 20:10:33 发布
转载 最新推荐文章于 2019-08-05 20:10:33 发布 · 630 阅读 · 1
文章标签：

#HTML5

H5现在已经不是SGML的子集，主要是关于图像、位置、存储多任务等功能的增加。


1、新增的语义化的标签

<nav>：导航

<header>： 页眉

<section>：区块

<article>： 文章

<aside>： 侧边栏

<footer>： 页脚

<progress>： 进度条


2、表单相关

（1）表单结构更加灵活

    要提交数据的控件可以布局在form标签之外，只需在元素中加入form="formId"属性，也可提交到form元素指定的服务器地址

<body>
<form action="xxx.php" method="post" accept-charset="utf-8" id="formId">
</form>
<input type="text" name="username" value="" form="formId">
<input type="submit" name="sub" value="提交" form="formId">
</body>


（2）新增表单元素

<input type="email">：email 类型用于验证email的格式，当提交表单时会自动验证email域的值

<input type="url">：url 类型用于验证 URL 地址的格式，当提交表单时会自动验证url域的值

<input type="number">：number 类型会根据你的设置提供选择数字的功能，min属性设置最小值、max属性设置最大值，value属性设置当前值，step属性设定每次增长的值，某些浏览器还不支持

<input type="range">：range 类型用于应该包含一定范围内数字值的输入域，其会以一个滑块的形式展现，min属性设置最小值、max属性设置最大值，value属性设置当前值，如果没有设置，则其默认值的范围是1-100

<input type="date"><input type="month"><input type="week"><input type="time"><input type="datetime">：

日期和时间类型：HTML5 拥有多个可供选取日期和时间的新输入类型：
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间（小时和分钟）
datetime - 选取时间、日、月、年（UTC 时间）
datetime-local - 选取时间、日、月、年（本地时间）

<input type="search">：search 类型用于搜索域，比如站点搜索或 Google 搜索，为其加上results="s"属性，则会在搜索框前面加上一个搜索图标

<input type="tel">：tel类型用于验证输入的是否是电话格式的内容，此元素现在还没有浏览器支持

<input type="color">：color类型会提供一个颜色拾取器，供用户选择颜色，并将用户选择的颜色填充到此元素中

<datalist id="list1">： 数据列表
        <option value="010">111</option>
        <option value="0313">222</option>
</datalist>

<input type="text" name="age" value="" list="list1">


（3）新增表单属性

新的form属性：

<form novalidate></form>： 关闭验证

新的input属性：

<input type="text" autocomplete="off">：自动完成

<input type="text" autofocus>：自动获得焦点

<input type="file" multiple>： 多文件上传

<input type="text" required>： 必填项

<input type="text" placeholder="请输入用户名">： 占位符

<input type="text" pattern="\d">：自定义验证pattern (regexp)

<input type="text" form="某表单ID">


3、多媒体

方法：load()、play()、pause()

属性：currentSrc、currentTime、duration

事件：ontimeupdate，onended等

应用：自定义视频播放器


（1）音频   <audio>，可以通过附加属性可以更友好控制音频的播放，如：

autoplay ：自动播放

controls ：是否显不默认播放控件

loop ：循环播放 

<audio controls autoplay loop="3">
   <!-- 通过source标签指定多格式音频文件-->
   <source src="./music/See You Again.mp3">
   <source src="./music/See You Again.wav">
   <source src="./music/See You Again.ogg">
</audio>

（2）视频  <video>

autoplay ：自动播放

controls ：是否显示默认播放控件

loop ：循环播放

width ：设置播放窗口宽度

height ：设置播放窗口的高度


4、web存储

传统:document.cookie来存储:

缺点：存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便；

H5新增：

 （1）window.sessionStorage：

特性：

  • 生命周期为关闭浏览器窗口
  • 在同一个窗口下数据可以共享

 （2）window.localStorage：

特性：

  • 永久生效，除非手动删除；可以多窗口共享

以上两者的特性：

  • 设置、读取方便
  • 容量较大，sessionStorage约5M、localStorage约20M
  • 只能存储字符串，可以将对象JSON.stringify() 编码后存储

（3）方法详解

setItem(key, value) 设置存储内容

getItem(key) 读取存储内容

removeItem(key) 删除键值为key的存储内容

clear() 清空所有存储内容

key(n) 以索引值来获取存储内容

（4）其它

WebSQL、IndexDB


5、拖拽

（1）拖拽元素

ondrag 应用于拖拽元素，整个拖拽过程都会调用

ondragstart 应用于拖拽元素，当拖拽开始时调用

ondragleave 应用于拖拽元素，当鼠标离开拖拽元素时调用

ondragend 应用于拖拽元素，当拖拽结束时调用

设置了draggable="true"属性的元素，可以被拖拽了；其中<img>、<a>标签默认是可以被拖拽的;


（2）目标元素

ondragenter 应用于目标元素，当拖拽元素进入时调用

ondragover 应用于目标元素，当停留在目标元素上时调用

ondrop 应用于目标元素，当在目标元素上松开鼠标时调用

ondragleave 应用于目标元素，当鼠标离开目标元素时调用

页面中任何一个元素都可以成为目标元素


（3）事件监听

根据元素类型不同，需要设置不同的事件监听


6、DOM扩展

（1）获取元素

  1. document.getElementsByClassName ('class')  ——   通过类名获取元素，以伪数组形式存在。
  2. document.querySelector('selector')  ——  通过CSS选择器获取元素，符合匹配条件的第1个元素。
  3. document.querySelectorAll('selector')  ——  通过CSS选择器获取元素，以伪数组形式存在。


（2）类名操作

  1. Node.classList.add('class')  ——  添加一个class类名
  2. Node.classList.remove('class')  ——  移除一个class类名
  3. Node.classList.toggle('class')  ——  切换class，有则移除，无则添加
  4. Node.classList.contains('class')  ——  检测是否存在一个class类名

Node指一个有效的DOM节点，是一个通称。


（3）自定义属性

格式：data-*=""；

例如：data-info="我是自定义属性"，通过Node.dataset['info'] 我们可获取到自定义的属性值。

特点：自定义属性全部必须是以data-开头的，只要是符合这种格式就是自定义属性。

Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，Node.dataset则存储了所有的自定义属性的值。

假设某元素 <div id="demo" data-name="itcast" data-age="10">

var demo = document.querySelector('#demo');

1、读取 demo.dataset['name'] 或者 demo.dataset['age']

2、设置demo.dataset['name'] = 'web developer'

注：当我们如下格式设置时，则需要以驼峰格式才能正确获取

<div data-my-name="lining"> 这样获取Node.dataset['myName']

总结：

  • 获取一个DOM节点，并且这个DOM节点定义了一些自定义属性
  • 通过Node.dataset,管理/读取/设置自定义属性
  • Node.dataset.属性
  • Node.dataset.属性 = “属性值”


7、新增API

（1）网络状态

我们可以通过window.onLine来检测，用户当前的网络状况，返回一个布尔值。

window.online用户网络连接时被调用

window.offline用户网络断开时被调用


（2）全屏

HTML5规范允许用户自定义网页上任一元素全屏显示。

1、Node.requestFullScreen() ：开启全屏显示

2、Node.cancelFullScreen() ：关闭全屏显示

由于其兼容性原因，不同浏览器需要添加前缀如：

webkit内核浏览器：webkitRequestFullScreen、webkitCancelFullScreen，如chrome浏览器。

Gecko内核浏览器：mozRequestFullScreen、mozCancelFullScreen，如火狐浏览器。

3、document.fullScreen：检测当前是否处于全屏

不同浏览器需要添加前缀

document.webkitIsFullScreen、document.mozFullScreen

全屏伪类选择器

:full-screen .box {}、:-webkit-full-screen {}、:moz-full-screen {}


（3）文件读取

通过FileReader对象可以读取本地存储的文件，使用 File 对象来指定所要读取的文件或数据。

File对象可以是来自用户在一个 <input> 元素上选择文件后返回的FileList 对象，也可以来自由拖放操作生成的  DataTransfer。


（4）FileList对象

由于HTML5中我们可以通过为表单元素添加multiple属性，因此我们通过<input>上传文件后得到的是一个FileList对象（伪数组形式）。

<input type="file" multiple class="file">

// 获取file表单元素
var file = document.querySelector('.file');
file.onchange = function () {
   console.log(file.files); //FileList {0: File, length: 1}
}


（5）FileReader对象

HTML5新增内建对象，可以读取本地文件内容。

var reader = new FileReader; 可以实例化一个对象

实例方法

事件监听

onload 当文读取完成时调用

属性

result 文件读取结果

<script>
   // 获取file表单元素
   var file = document.querySelector('.file');
   file.onchange = function () {
      // 获取第一个文件信息
      var f = this.files[0];
      // 实例化一个读取器
      var reader = new FileReader();
      console.log(reader);
      // 读取文件
      reader.readAsDataURL(f);
      // reader.readAsBinaryString(f);
      // reader.readAsText(f);
      // 当文件过大，不能立即读完
      // 通过事件监听进度
      reader.onload = function () {
         console.log(this.result);
         document.querySelector('img').src = this.result;
      }
   }
</script>

8、地理定位

（1）获取地理信息

通过IP地址、三维坐标、GPS、Wi-Fi、手机信息等多种方式获取地址信息，不同获取方式各有优缺点，浏览器会自动以最优方式去获取用户地理信息。


（2）隐私

HTML5 Geolocation 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。


（3）API详解

1、获取当前地理信息

navigator. geolocation.getCurrentPosition(successCallback, errorCallback, options) ;

2、重复获取当前地理信息

navigator. geolocation.watchPosition(successCallback, errorCallback, options);

当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position。

position.coords.latitude纬度

position.coords.longitude经度

position.coords.accuracy精度

position.coords.altitude海拔高度

当获取地理信息失败后，会调用errorCallback，并返回错误信息error

可选参数 options 对象可以调整位置信息数据收集方式

a) enableHighAccuracy 高精度模式  true/false

b) timeout 超时设置，单位为ms

c) maximumAge表示浏览器重新获取位置信息的时间间隔，单位为ms

navgator.geoloation.getcurrentPosition(success,error,{

enableHighAccuracy: true;

timeout : 3000

 maximumAge: 1000

});

3、应用

在现实开发中，把获得到的客户的具体信息当做参数通过调用第三方API（如百度地图）来实现地理定位信息，这些API都是基于用户当前位置的，并将用位置位置（经/纬度）当做参数传递，就可以实现相应的功能。

<body> 
  <div id="container"></div>
   <!-- 引入百度javascript版 API -->
   <script src="http://api.map.baidu.com/api?v=2.0&ak=0A5bc3c4fb543c8f9bc54b77bc155724"></script>
   <script>
      // 提供了一个对象 navigator.geolocation
      // 此对象下有一个方法 getCurrentPosition(); 是用来获取用户当前位置
      // 成功的回调
      function success(position) {
         // alert(1);
         console.log(position);
      }
      // 失败的回调
      function error(err) {
         console.log('error');
         console.log(err);
      }
      // 获得用户当前信息
      // navigator.geolocation.getCurrentPosition(success, error, {
      //     // enableHighAccuracy: true,
      //     // timeout: 3000,
      //     // maximumAge: 1000
      // });
      navigator.geolocation.getCurrentPosition(function (position) {
         var latitude = position.coords.latitude; // 纬度
         var longitude = position.coords.longitude; // 经度
         // 查看地理信息
         console.log(position);
         /********************/
         // 这些都是写死
         var map = new BMap.Map("container"); // container表示主到哪个容器
         // 把经度纬度传给百度
         var point = new BMap.Point(longitude, latitude);
         // 调用方法
         map.centerAndZoom(point, 15);
         /****************************/
         // 只写上面三行就可出现地图了，并且会定位
         // 定义好了一个图片标记
         var myIcon = new  BMap.Icon("http://developer.baidu.com/map/jsdemo/img/fox.gif", new BMap.Size(300, 157));
         // 创建标注
         var marker = new BMap.Marker(point, {icon: myIcon});
         // 调用方法
         map.addOverlay(marker);
      });
   </script>
</body>


9、历史管理

提供window.history对象，可以管理历史记录，可用于单页面应用：Single Page Application，可以无刷新改变网页内容。

（1）旧版本

history.back() 回退

history.forward() 前进

history.go(n) 前进/后退n步

history.length历史记录条数


（2）新增方法

1、pushState(data, title, url) 追加一条历史记录

data用于存储自定义数据，通常设为null

title网页标题，基本上没有被支持，一般设为空

url 以当前域为基础增加一条历史记录，不可跨域设置

2、replaceState(data, title, url)

与pushState()基本相同，不同之处在于replaceState()，只是替换当前url，不会增加/减少历史记录。

3、事件监听

onpopstate事件，当前进或后退时则触发，通过事件对象ev.state可以读取到存储的数据。


10、应用缓存

HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个cache manifest文件。

（1）优势：

  • 可配置需要缓存的资源
  • 网络无连接应用仍可用
  • 本地读取缓存资源，提升访问速度，增强用户体验
  • 减少请求，缓解服务器负担


（2）缓存清单

一个普通文本文件，其中列出了浏览器应缓存以供离线访问的资源，推荐使用.appcache为后缀名，添加MIME类型

AddType text/cache-manifest .appcache

例如我们创建了一个名为demo.appcache的文件，然后在需要应用缓存在页面的根元素(html)添加属性manifest="demo.appcache"，路径要保证正确。


（3）manifest文件格式

  • 顶行写CACHE MANIFEST
  • CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等
  • NETWORK: 换行 指定需要在线访问的资源，可使用通配符
  • FALLBACK: 换行 当被缓存的文件找不到时的备用资源

CACHE MANIFEST

#version 1.0.0

#缓存一些资料，在离线时使用

CACHE:

./images/img1.jpg

./images/img2.jpg

./images/img3.jpg

#当处于网络连接时可以更新

NETWORK:

./css/main.css

FALLBACK:

./online.html ./offline.html

./css/online.css ./css/offline.css

CACHE:

./images/img1.jpg

./images/img2.jpg

./images/img3.jpg

（4）其它

1、CACHE: 可以省略，这种情况下将需要缓存的资源写在CACHE MANIFEST

2、可以指定多个CACHE: NETWORK: FALLBACK:，无顺序限制

3、#表示注释，只有当demo.appcache文件内容发生改变时或者手动清除缓存后，才会重新缓存。

4、chrome 可以通过chrome://appcache-internals/工具和离线（offline）模式来调试管理应用缓存

11、兼容处理

    在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement('tagName')创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了，但在实际开发中我们更多采用的是通过检测IE浏览器的版本来加载第三方的一个JS库来解决兼容问题，这个库文件会帮自动通过document.createElement('tagName')创建所有HTML5的新标签。


12、微数据

微数据是在如 span、div 的标签内添加属性，让机器（如搜索引擎）识别其含义，某些特定类型的信息，例如评论、人物信息或事件都有相应的属性，用来描述其含义，可以理解成新语义标签的一种补充。


13、WAI-ARIA

WAI-ARIA[1]  , 是Web Accessibility Initiative - Accessible Rich Internet Applications 的缩写，让残障人士能无障碍地访问网页上的动态内容。



H5自我总结
m0_64148060的博客
11-12 775
网络上太多的总结都是复制粘贴，以为为本人的自我总结，可能布局不太完善但是均为自己一个一个字手敲（本文中涉及的代码和效果均没有，适合有一定基础的人复习使用） 简单标签 标题标签也就是<h1>-<h6>,分别为1级标签到6级标签，字体会变粗，并且字号依次减小 <p>简单来说就是一个段落标签，被<p></p>包围的文字均为一个段落，段落和段落之间是保有空隙的，并且也会随游览器的界面的放大和缩小，自动换行 加粗，倾斜，删除线，下划线也分别通过标签&
H5edu前端培训实训报告以及最终总结报告
09-06
H5edu前端培训实训报告以及最终总结报告
h5总结
qq_32458791的博客
08-05 253
关于基线，行高（text-height），行距，顶线，底线的理解 行高和内容区直接关联 https://www.jianshu.com/p/7707b710b365 页面的结构
HTML5学习总结
weixin_30919919的博客
11-13 891
一、HTML5概念 HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它制定了Web应用开发的一系列标准，成为第一个将Web做为应用开发平台的HTML语言。 HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，同时有令人眼花缭乱的css 3，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可...
vue写h5页面的方法总结
10-17
在当今Web开发领域，Vue.js已成为构建单页应用...当然，以上的总结和分析仅为参考，实际开发中可能会遇到更多细节问题，需要开发者灵活应对。希望这些方法能够帮助到正在学习或者需要使用Vue.js编写H5页面的开发者们。
详解h5页面在不同ios设备上的问题总结
12-13
本文主要总结了在不同iOS设备上，特别是嵌入到小程序Webview中的H5页面所遇到的一些典型问题及其解决方案。 1. **日期问题**： 当日期格式为"yyyy-mm-dd hh:mm:ss"时，iOS系统可能无法正确识别和解析。例如，尝试...
H5 简单demo示例模板
最新发布
05-30
总结，H5以其强大的功能和广泛的兼容性，成为了现代前端开发的主流选择。结合Vue和React等框架，开发者可以构建出更加高效、美观、交互性强的Web应用，满足用户日益增长的需求。在H5的世界里，前端开发的可能性无限...
H5player-2.1.2
12-29
总结，H5player-2.1.2是一款强大的H5内容播放器，其优秀的兼容性、丰富的功能和易用的API使其在众多应用场景中展现出强大生命力。通过深入了解和熟练使用，开发者可以为用户提供更加优质的多媒体体验。在不断发展的...
移动端H5的一些基本知识点总结
FungLeo's Blog
03-06 9955
移动端H5的一些基本知识点总结来到这家公司之后,和以前的工作发生了很大的转变.以前我一直是做PC端页面的.来到现在这家公司之后,主要是做手机移动端的页面.移动端的页面在我这个做习惯了PC端页面的人看来,应该是很简单的一些事情.但是在上手的过程当中,还是发现,原来移动端虽然DOM结构要简单得多,但是需要注意的细节,还是非常多的.原因非常简单,那就是,你必须考虑所有的手机上不同分辨率的展示效果.移动端的
H5简单总结
Sugar_wzy的博客
05-16 695
-webkit-: 谷歌前缀，谷歌内核（猎豹 360 safari）-o-: 欧朋 （已经摒弃自己的内核，转战谷歌的阵营）-ms-: 微软 ie 斯巴达-moz-: 火狐 ffHTML5 的新特性: a).用于绘画的 canvas 元素 b).用于媒介回放的 video 和 audio 元素 c).对本地离线存储的更好的支持 d).地理定位 e).web workers 多线程 f).新的特殊内...
h5+ 总结
晓风残叶
07-26 545
缓存：    存： localStorage.setItem('$' +userId, JSON.stringify(userInfo)); 取： var userStr = localStorage.getItem('$' +userId);  得到JSON,然后  userInfo= JSON.parse(userStr || "{}"); 清除对应缓存： lo
H5移动端开发学习总结
weixin_33778544的博客
01-06 2385
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点： 1.首先，选取一款手机的屏幕宽高作为基准(现在一般选取iphone6的375×667)。之前项目中也用到过iphone5的320×568。 2.对于retina屏幕(如: dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍（对iphone6而言：原先的375×667，就会变成7...
移动端 h5 开发相关内容总结——JavaScript 篇
强子的专栏
01-04 4845
1.改变页面标题的内容有时候我们开发 h5页面的时候需要动态的去更新title 的名字，这个时候使用 document.titile='修改后的名字';就可以解决我们的问题。或者使用 //当前firefox对 title 参数不支持 history.pushstate(state,title,url);这种方法不仅能够修改 title 而且能够修改 url 的值，并且将这些信息存
H5 概述总结（文字总结）
冀义勇
01-29 1990
1. H5与native有啥区别？native是什么? 2. div section article的区别与应用!   Native: native是一个计算机函数，一个Native Method就是一个Java调用非Java代码的接口。方法的实现由非Java语言实现，比如C或C++。 native是使用原生系统内核的，相当于直接在系统上操作。是我们传统意义上的软件，更加稳定。 但是H5...
H5项目总结
leocat2011的专栏
07-26 975
第一次做H5的项目，遇到不少问题和注意事项，特意记录下来 1. 用户交互的接口中，后端除了返回0，其他错误信息需要抛出展示给用户 2. 项目要求页面的title不要显示url，只需要一个空白 觉得很简单，设置一个空字符串，document.title = ""不就行了，发现在iphone上可以，android上不行，还是显示url。然后在chrome上做测试，发现空...
JS知识点全面总结思维导图：H5、xmind及多种格式
标签“xmind js H5 知识点总结 思维导图”提供了文件的其他相关知识和用途。 #### 关于xmind标签 - 指出了思维导图是用xmind软件制作的。 - xmind软件广泛用于个人和团队的知识管理和头脑风暴。 - 它支持多种思维...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值