HTML5
关注
分享
扫一扫
文章平均质量分 80
HTML5
天涯学馆
资深大厂程序员，12年开发经验，致力于探索前沿技术，在代码世界中追求卓越，欢迎关注评论私信一起交流技术！公众号：天涯学馆 （回复“获取资料”领取2500G高级架构师资料）
展开
-
PWA进阶：离线存储与推送通知的高级技巧
渐进式网页应用（Progressive Web App, PWA）通过离线存储和推送通知等功能，能够提供类似原生应用的体验。原创 2024-05-06 10:04:56 · 665 阅读 · 0 评论 -
HTML5新API详解之扩展XMLHttpRequest API、Ajax及Fetch API
一、XMLHttpRequest APIXMLHttpRequest详解XMLHttpRequest 是一个浏览器接口，使得 Javascript 可以进行 HTTP (S) 通信。最早，微软在 IE 5 引进了这个接口。因为它太有用，其他浏览器也模仿部署了，ajax 操作因此得以诞生。但是，这个接口一直没有标准化，每家浏览器的实现或多或少有点不同。HTML 5 的概念形成后，W3C 开始考虑标准化这个接口。2008年 2 月，就提出了 XMLHttpRequest Level 2 草案。这个 XMLH原创 2020-12-31 21:35:19 · 595 阅读 · 0 评论 -
HTML5新API详解之本地存储与应用缓存
Web 存储随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。Web Storage（sessionStorage和localStorage）H5 中有两种存储的方式1、window.sessionStorage 会话存储：保存在内存中。生命周期为关闭浏览器原创 2020-12-31 21:33:11 · 379 阅读 · 0 评论 -
HTML基础知识概要面试必备
一、HTML的概述HTML的概念HTML 全称为 HyperText Markup Language，译为超文本标记语言。HTML 不是一种编程语言，是一种描述性的标记语言。作用：HTML是负责描述文档语义的语言。概念：超文本所谓的超文本，有两层含义：（1）图片、音频、视频、动画、多媒体等内容，成为超文本，因为它们超出了文本的限制。（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。概念：标记语言HTML 不是一种编程语言，是一种描述性的标原创 2020-12-31 21:30:33 · 1623 阅读 · 0 评论 -
HTML5本地数据库（WebSQL和IndexDB）
一、WebSQLWebSQL是前端的一个独立模块，是web存储方式的一种，我们调试的时候会经常看到，只是一般很少使用。并且，当前只有谷歌支持，ie和火狐均不支持。[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g6CM9dFv-1609421143537)(en-resource://database/4497:1)]我们对数据库的一般概念是后端才会跟数据库打交道，进行一些业务性的增删改查。而这里的数据库也不同于真正意义上的数据库。Websql的关键技术点分为：测试原创 2020-12-31 21:25:56 · 2439 阅读 · 0 评论 -
HTML5新API详解之文件操作API
FileList对象、file对象、FileReader对象HTML 5中，通过添加multiple属性，file控件内允许一次放置多个文件。控件内的每一个用户选择的文件都是一个file对象，而FileList对象则为这些file对象的列表，代表用户选择的所有文件。file对象有两个属性，name属性表示文件名，不包括路径，lastModifiedDate属性表示文件的最后修改日期。1.File 对象File 对象代表一个文件，用来读写文件信息。它继承了 Blob 对象，或者说是一种特殊的 Blob原创 2020-12-31 21:24:56 · 555 阅读 · 0 评论 -
HTML5新API详解之历史、地理位置处理、全屏处理
历史界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。在HTML5中可以通过 window.history 操作访问历史状态，让一个页面可以有多个历史状态window.history对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。window.history.forward(); // 前进window.history.back(); // 后退window.history.go(); // 刷新w原创 2020-12-31 21:23:42 · 419 阅读 · 1 评论 -
HTML5新API详解之拖拽API
拖拽在HTML5的规范中，我们可以通过为元素增加 draggable="true" 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。1、拖拽元素页面中设置了 draggable="true" 属性的元素。举例如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <原创 2020-12-20 22:25:36 · 763 阅读 · 0 评论 -
HTML5常见标签的使用以及DOM操作
一、HTML5的介绍Web 技术发展时间线1991 HTML1994 HTML21996 CSS1 + JavaScript1997 HTML41998 CSS22000 XHTML1（严格的html）2002 Tableless Web Design（表格布局）2005 AJAX2009 HTML52014 HTML5 Finalized2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。2009年就原创 2020-12-20 22:24:19 · 965 阅读 · 0 评论 -
HTML5 IndexDB高级使用
IndexDB的优点：1、允许快速索引和搜索的对象，所以在HTML5 的 web应用程序中， 你可以有效管理你的数据和高效率的读/写操作。2、W3C主推的离线数据库类型，逐渐替代Web SQL类型数据库，更新效率高并不断完善。3、工作在异步模式下执行每步操作。让你使用高效率的的JavaScript事件驱动模块。使用IndexDB：1、初始化声明var dbName = "H5AppDB"; //数据库名称var dbVersion = 2.0; //数据库版本var tablename =原创 2020-12-05 23:01:37 · 1458 阅读 · 1 评论 -
HTML5技术调用电脑或手机上的摄像头
移动设备和桌面电脑上的客户端API起初并不是同步的。最初总是移动设备上先拥有某些功能和相应的API，但慢慢的，这些API会出现在桌面电脑上。其中一个应用接口技术就是getUserMedia API，它能让应用开发者访问用户的摄像头或内置相机。下面就让我展示一下如何通过浏览器来访问你的摄像头，并提取截屏图形。HTML代码下面的代码里我写了一部分注释，请阅读： <video id="video" width="640" height="480" autoplay></video>原创 2020-12-05 16:32:46 · 617 阅读 · 0 评论 -
HTML5本地存储Web Storage使用
Web Storage是HTML5引入的一个非常重要的功能，在前端开发中经常用到，可以在客户端本地存储数据，类似HTML4的cookie，但可实现功能要比cookie强大的多，cookie大小被限制在4KB，Web Storage官方建议为每个网站5MB。Web Storage又分为两种：*sessionStorage*localStorage从字面意思就可以很清楚的看出来，sessionStorage将数据保存在session中，浏览器关闭也就没了；而localStorage则一直将数据保存在客原创 2020-12-05 11:36:13 · 395 阅读 · 1 评论 -
全面认识Web标准和浏览器内核引擎
Web、网页、浏览器WebWeb（World Wide Web）即全球广域网，也称为万维网。我们常说的Web端就是网页端。网页网页是构成网站的基本元素。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。浏览器浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。Web标准W3C组织W3C：万维网联盟组原创 2020-12-04 22:37:22 · 700 阅读 · 1 评论 -
HTML5前端常用开发框架
1. JX（腾讯）JX 是一个类似 Google Closure Library 的 Web 前端开发框架，服役于 WebQQ 等大规模的 WebApp。JX 是模块化的非侵入式Web前端框架，开发于2008年，并于2009年开源于GoogleCode ，于2012年切换到Github。 JX 框架同时适用于 Web Page 和 Web App 项目的开发，特别适合构建和组织大规模、工业级的Web App，腾讯 WebQQ、腾讯Q+等产品都是采用JX框架开发，兼容目前所有主流浏览器。2. KISSY原创 2020-11-22 14:21:20 · 718 阅读 · 0 评论