html5网页怎么弄才高级,Html5高级
什么是 HTML5?
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML 的上一个版本诞生于 1999 年。自从那以后,Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而,大部分现代浏览器已经具备了某些 HTML5 支持
HTML5 是如何起步的?
HTML5 是 W3C 与 WHATWG 合作的结果。
编者注:W3C 指 World Wide Web Consortium,万维网联盟。
编者注:WHATWG 指 Web Hypertext Application Technology Working Group。
WHATWG 致力于 web 表单和应用程序,而 W3C 专注于 XHTML 2.0。在 2006 年,双方决定进行合作,来创建一个新版本的 HTML。
为 HTML5 建立的一些规则:
1.新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
2.减少对外部插件的需求(比如 Flash)
3.更优秀的错误处理
4.更多取代脚本的标记
5.TML5 应该独立于设备
6.开发进程应对公众透明
HTML5 中的一些有趣的新特性:
1.用于绘画的 canvas 元素
2.用于媒介回放的 video 和 audio 元素
3.对本地离线存储的更好的支持
4.新的特殊内容元素,比如 article、footer、header、nav、section
5.新的表单控件,比如 calendar、date、time、email、url、search
HTML5的优势:
1.跨平台:
在多屏年代,开发者的痛苦指数是相当高的,HTML5可以扮演救星吗?多套代码、不同技术工种、业务逻辑同步等等,由此来看跨平台确实是刚需。
2.快速迭代:
移动互联网可以说是一个快鱼吃慢鱼的时代,谁对用户需求满足的快,谁的试错成本更低,谁就可以拥有巨大的优势。
3.持续交付:
很多人有这样的体会,一个原生应用上线Appstore,突然发现由于某种原因而导致在市场上出现一片差评、用户大量流失,等到新应用审核上线,用户早已卸载,但HTML5没有这些问题,你可以事实更新,有问题就立即响应。
4.大幅下降成本:
如果你使用原生开发的App和竞争对手使用HTML5开发的App没什么区别,但你的开发成本高出一倍,相信没有投资人会喜欢给你投钱。
5.开源生态系统发达:
HTML5前端是开放的正反馈循环生态系统,有大量的开源库可以使用,开源应用也会变得更轻松、敏捷,可以说这种开放的正反馈循环生态未来的生命力要比原生生态系统更强劲。
6.开发数据交换:
HTML是以page为单元开发代码的,无需专门开发SDK,只要不混淆,就能够与其他应用交互数据。
7.更易推广:
导流入口会很多,HTML5应用导流非常容易,微信朋友圈、搜索引擎、应用市场和浏览器等等,到处都是HTML5的流量入口。
canvas 元素用于在网页上绘制图形
HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。
画布是一个矩形区域,您可以控制其每一像素。
canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
创建 Canvas 元素
向 HTML5 页面添加 canvas 元素。
规定元素的 id、宽度和高度:
通过 JavaScript 来绘制
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:
varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
JavaScript 使用 id 来寻找 canvas 元素:
var c=document.getElementById("myCanvas");
然后,创建 context 对象:
var cxt=c.getContext("2d");
getContext("2d") 对象是内建的 HTML5 对象,拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
下面的两行代码绘制一个红色的矩形:
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
fillStyle 方法将其染成红色,fillRect 方法规定了形状、位置和尺寸
理解坐标
上面的 fillRect 方法拥有参数 (0,0,150,75)。
意思是:在画布上绘制 150x75 的矩形,从左上角开始 (0,0)。
如下图所示,画布的 X 和 Y 坐标用于在画布上对绘画进行定位。
实例 - 线条
通过指定从何处开始,在何处结束,来绘制一条线:
varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");
cxt.moveTo(10,10);
cxt.lineTo(150,50);
cxt.lineTo(10,50);
cxt.stroke();
Your browser does not support the canvas element.
实例 - 圆形
通过规定尺寸、颜色和位置,来绘制一个圆:
varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();
Your browser does not support the canvas element.
实例 - 渐变
使用指定的颜色来绘制渐变背景:
varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");vargrd=cxt.createLinearGradient(0,0,175,50);
grd.addColorStop(0,"#FF0000");
grd.addColorStop(1,"#00FF00");
cxt.fillStyle=grd;
cxt.fillRect(0,0,175,50);
Your browser does not support the canvas element.
实例 - 图像
把一幅图像放置到画布上:
varc=document.getElementById("myCanvas");varcxt=c.getContext("2d");varimg=newImage()
img.src="flower.png"cxt.drawImage(img,0,0);
Your browser does not support the canvas element.
什么是SVG?
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
SVG 是万维网联盟的标准
SVG 的优势
与其他图像格式相比(比如 JPEG 和 GIF),使用 SVG 的优势在于:
SVG 图像可通过文本编辑器来创建和修改
SVG 图像可被搜索、索引、脚本化或压缩
SVG 是可伸缩的
SVG 图像可在任何的分辨率下被高质量地打印
SVG 可在图像质量不下降的情况下被放大
把 SVG 直接嵌入 HTML 页面
在 HTML5 中,您能够将 SVG 元素直接嵌入 HTML 页面中:
实例
结果:
HTML 5 Canvas vs. SVG
Canvas 和 SVG 都允许在浏览器中创建图形,但是它们在根本上是不同的。
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
Canvas
依赖分辨率
不支持事件处理器
弱的文本渲染能力
能够以 .png 或 .jpg 格式保存结果图像
最适合图像密集型的游戏,其中的许多对象会被频繁重绘
SVG
不依赖分辨率
支持事件处理器
最适合带有大型渲染区域的应用程序(比如谷歌地图)
复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)
不适合游戏应用
HTML5 地理定位
定位用户的位置
HTML5 Geolocation API 用于获得用户的地理位置。
鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。
使用地理定位
请使用 getCurrentPosition() 方法来获得用户的位置。
可返回用户位置的经度和纬度。
实例
varx=document.getElementById("demo");functiongetLocation()
{if(navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}else{x.innerHTML="Geolocation is not supported by this browser.";}
}functionshowPosition(position)
{
x.innerHTML="Latitude:" +position.coords.latitude+
"
Longitude:" +position.coords.longitude;
}
解释:
检测是否支持地理定位
1.如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
2.如果getCurrentPosition()运行成功,则向参数showPosition中规定的函数返回一个coordinates对象
3.showPosition() 函数获得并显示经度和纬度
HTML 5 拖放
拖放(Drag 和 drop)是 HTML5 标准的组成部分。
拖放
拖放是一种常见的特性,即抓取对象以后拖到另一个位置。
在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。
下面的例子是一个简单的拖放实例:
实例
#div1, #div2{float:left;width:120px;height:120px;margin:10px;padding:10px;border:1px solid #aaaaaa;}
请来回将图片拖放到矩形中:
html5网页怎么弄才高级,Html5高级相关推荐
- HTML5网页术语,web前端之HTML5的一些术语和概念
HTML5是html标准的下一个版本,它並沒有完全颠覆後者,依然有很多相似之处,但是也有10个关键不同之处.(从头用html5建站更方便) HTML5与HTML4区别不是特别的大,新增了很多直观的新功 ...
- html5网页小游戏 拖拽,HTML5拖拽功能实现的拼图游戏
本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏,代码简单易懂,非常不错,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 具体代码如下所示: drag拖拽 .box{ f ...
- html5 手机录音上传 源码,Html5网页JavaScript录制MP3并上传
[实例简介]后端为 asp.net [实例截图] [核心代码] Html5网页JavaScript录制MP3音频 Html5网页JavaScript录制MP3音频 录制 停止 上传 调试信息: var ...
- 安装html5 win7,什么是HTML5? Win7旗舰版浏览HTML5网页要做哪些准备?
什么是HTML5? Win7旗舰版浏览HTML5网页要做哪些准备? HTML5是目前最新的网页编码技术,拥有占用电脑资源小.网页效果更加流畅.取代Flash实现视频网页播放等优点,大型的主流网站基本都 ...
- div+css静态网页设计——防锤子手机商城官网 (1页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:防锤子手机商城网站设计--防锤子手机商城官网 (1页) HTML5网页设计成品 文章目录 HTML5期末大作业:防锤子手机商城网站设计--防锤子手机商城官网 (1页) HTML5 ...
- 6本适合初级到高级HTML5程序员阅读的书籍推荐,读完事半功倍
随着移动互联网的日益兴起,IT行业对于前端的需求也在不断的提高,那么从前端小白修炼成为HTML5前端大神的这个过程之中,一些必备的枕边书也是必不可少的. 俗话说书籍是人类进步的阶梯,对HTML5程序员 ...
- div+css静态网页设计——迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作
HTML5期末大作业:电影网站设计--迪斯尼公主滚动特效(7页) HTML5网页设计成品_学生DW静态网页设计代做_web课程设计网页制作 常见网页设计作业题材有 个人. 美食. 公司. 学校. 旅游 ...
- html5网页动画总结--jQuery旋转插件jqueryrotate
CSS3 提供了多种变形效果,比如矩阵变形.位移.缩放.旋转和倾斜等等,让页面更加生动活泼有趣,不再一动不动.然后 IE10 以下版本的浏览器不支持 CSS3 变形,虽然 IE 有私有属性滤镜(fil ...
- [HTML5_资源]给网页设计师的30个HTML5学习资源
Blowing up HTML5 video and mapping it into 3D space(将HTML5视频吹散并组成3D效果)最近我研究了HTML 5中的Canvas 和Video 标签 ...
最新文章
- China Daily | 技术不是拦路虎:在线音乐教学可完美还原线下场景
- python3.8图片_python3.8.3官方中文文档[PDF][CHM][31.14MB]
- html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
- 可信云十年,重磅研究成果与2021云计算十大关键词悉数发布
- 页游中的十大经典游戏题材
- linux基础网络设置及使用DHCP动态配置主机地址
- java 11下载_jdk11版
- 关于OS端/iOS端QQ表情白边处理方案
- 微信小程序分享二维码扫码进入如何获取参数,小程序码进入参数为啥拿不到;
- 软件测试笔记2-目的
- C++综合实例——个人银行账户管理程序
- 牛顿迭代法求求一个数的算术平方根
- 第四章 线程切换与调度——操作系统的发动机
- 危化品企业双重预防机制数字化系统怎样建?
- Python(一)为什么要学习Python
- 微信小程序学习笔记一 + 小程序介绍 前置知识
- godaddy plesk mysql_» Godaddy的Plesk面板语言更改图文详细教程
- Android聊天软件的开发(七)--聊天通信
- Java多线程:Lambda 表达式
- 声音/声学成像2021-4-13