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<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>Document</title> 8</head> 9<body>10<canvas id="myCanvas" width="300" height="300" style="border:1px solid black"></canvas>11<img id="scream" src="https://www.runoob.com/try/demo_source/img_the_screa...
什么是 Canvas？HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。<canvas> 标签只是图形容器，它没有自己的行为，需要定义API 支持脚本化客户端绘图操作。创建 Canvas 元素canvas的代码很简单，定义一个ID以及宽和高。这里强调一点：canvas的宽高必须写在元素上，如果用样式定义，不能改变其图片的比例<canvas i...
<meta name="viewport" content="height=[pixel_value | device-height], width=[pixel_value | device-width], inital-scale=float_value, minimum-scale=float_value, maximum-scale=float_value, user-scalable=[yes|no], target-densitydpi=[dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi]" />width:控制 viewport的大小，可以指定一个值或者特殊的值，如 device-width为设备的宽度（单位为缩放为 100%时的 css 的...
（注：本笔记是本人在菜鸟教程网站https://www.runoob.com/bootstrap学习时所做的记录）一、Bootstrap介绍Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。二、Bootstrap包的内容基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。CSS：Bootstrap 自带以下特性：全局的 CSS 设...
<!DOCTYPE html><html><head><meta charset="utf-8"><title>访问计数</title></head><body><div id="counter_div"></div></body></html><script type="text/javascript"> // 递增localStorage计数 if (localStorage.counter == null) { localStorage.counter = 1; } else { localStorage.counter++; } // 显示计数 var counter_div = document.getElementById("counter_div"); counter_div.innerHTML = localStorage...
<article>标签定义外部的内容（结构元素）<section>标签定义文档中的节（section，区段）。比如章节，页眉，页脚或文档中的其他部分（结构元素）<nav>引导和导航内容链接<aside>定义页面内容之外的内容。 aside的内容与article的内容相关。（结构元素）<meter>定义预定义范围内的度量。仅用于已知最大和最小值的度量（内联元素）<progress>定义任何类型的任务的进度。可以使用<progress>标签来显示javascript中耗费时间的函数的进度...
最近看到一个粒子网格动画挺炫的，自己也就做了一个，当背景挺不错的。CSDN不能上传超过2M的图片，所以就简单截了一个静态图片：可以点击这里查看动画.下面就开始说怎么实现这个效果吧： 首先当然是添加一个canvas了：<canvasid="canvas"></canvas>下面是样式：<style>#canvas{position: absolute;display: block;left:0;top:0;background:#0f0f0f;z-index: -1;}</style>上面canvas的z-index: -1的作用是可以放在一些元素的下面当...
浏览器支持Internet Explorer 9+、Firefox、Opera 12、Chrome 以及 Safari 5 支持拖放。注释：在 Safari 5.1.2 中不支持拖放。HTML5 拖放实例下面的例子是一个简单的拖放实例：实例<!DOCTYPE HTML> <html> <head> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); }function drag(ev) { ev.dataTransfer.setData("Text",ev.target.id); }function drop(ev) { ev.preventDefault();//allowDrop(ev) ...
地理位置（Geolocation）是 HTML5 的重要特性之一，提供了确定用户位置的功能，借助这个特性能够开发基于位置信息的应用。今天这篇文章向大家介绍一下 HTML5 地理位置定位的基本原理和一个基于浏览器的HTML5地理定位的小demo，获取浏览器经纬度，并用腾讯地图（大家可以选择自己喜欢的地图）显示出来，实现的最终效果如下图所示：一、检测浏览器是否支持： if (navigator.geolocation) { //console.log("浏览器支持!"); }else {...
1元素指的是从开始标签到结束标签的所有代码<br/>换行，但是换行的间距跟p标签的间距不同空元素在开始标签中进行关闭大多数的html元素可拥有属性大多数的html元素都是可以嵌套的 html属性：1标签可以拥有属性为元素提供更多的信息2属性以键值对的形式出现3常用标签属性：<h1>:align对其方式<body>:bgcolor背景颜色<a>:target规定在何处打开链接（新的页面，默认的是当前页面，一共是4个）4通用属性：class：规定元素的类名id:规定元...
本地数据持久性提高了 Web 应用程序可访问性和移动应用程序响应能力索引数据库 (IndexedDB) API（作为 HTML5 的一部分）对创建具有丰富本地存储数据的数据密集型的离线 HTML5 Web 应用程序很有用。同时它还有助于本地缓存数据，使传统在线 Web 应用程序（比如移动 Web 应用程序）能够更快地运行和响应。本文将介绍如何管理 IndexedDB 数据库。 HTML5 的一个重要特性是本地数据持久性，它使用户能够在线和离线访问 Web 应用程序。此...
一、indexedDB为何替代了Web SQL Database？跟小朋友的教育从来没有什么“赢在起跑线”这种说法一样，在前端领域，也不是哪来先出来哪个就在日后引领风骚的。HTML5 indexedDB和Web SQL Database都是本地数据库数据存储，Web SQL Database数据库要出来的更早，然并卵。从2010年11月18日W3C宣布舍弃Web SQL database草案开始，就已经注定Web SQL Database数据库是明日黄花。未来一定是indexedDB的，从目前浏览器的兼容性来看，也表明...
如果你使用jQuery类库，那么你可以非常愉悦的使用jquery的data()方法存取data-* 自定义属性，方法允许我们在DOM元素上绑定任意类型的数据,避免了循环引用的内存泄漏风险主要的方法如下：复制代码代码如下:.data( key, value ).data( obj ).data( key ).data()从jQuery 1.4.3起， HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。例如HTML：复制代码代码如下:<div data-role = "page" data-last-value = "43" data-hidden = "...
获取checkbox是否选中：$("#checkbox").is(":checked");获得的值为true或false。 设置checkbox是否选中：$("#checkbox").attr("checked", true);//设置为选中状态 $("#checkbox").attr("checked", false);//设置为未选中状态 原文：https://www.cnblogs.com/lhlong/p/11253536.html
随着 Retina 屏幕的逐渐普及，网页中对图片的适配要求也越来越高。如何让图片在放大了两倍的 Retina 屏幕显示依然清晰，曾经一度困扰着网页开发者，好在CSS3 与 HTML5 已经着力在改变这种现状。那么到底什么是响应式图片呢？ 什么是响应式图片？ 响应式图片是指：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。UI前端框架最新力作！有...