HTML5自学笔记[ 7 ]defer和async

defer:给位于最前面的script标签设置defer="defer",外联js就会在onload触发之前才加载. async:给script标签设置async="async",外联js就会进行异步加载,加载顺序不确定,有依赖关系的js就不要用了,和其他js没有依赖关系的js用这个属性可以提高加载速度.…

html5新增<canvas>标签用于绘制图像,默认宽高是300*150,canvas的宽高需要在这里设置,在css中设置会有问题:设置的形状,如矩形,会等比缩放,而非设置的宽高. 在不支持canvas的浏览器里会显示这行文字,这里的文字颜色要和canvas背景色一致才行: <canvas id="canvas1" width="1000" height="1000"> <span>该浏览器不支持canvas&…

HTML5自学笔记[ 10 ]简单的购物车拖拽

用html5拖拽功能实现了一个简单的购物车,样式简陋,得学学画画提高下审美了T^T: <!doctype html> <html> <head> <meta charset="utf-8"> <title>购物车拖拽</title> <style> *{ margin:0; padding:0;} #proList{ overflow:hidden;} #proList li{ list-style:n…

HTML5自学笔记[ 9 ]HTML5实现元素的拖放

要想在html5中实现元素的拖放,被拖放元素就必须设置属性draggable="true";被拖放元素被放置的地方是另外一个元素,该元素是目标元素:这两个元素在拖放过程中都会触发不同的事件,处理好这些事件才可以完成漂亮的拖放. 被拖放元素触发的事件有: ondragstart:该事件在鼠标按住元素开始拖动时触发. ondragend:该事件在鼠标抬起时触发. ondrag:该事件在dragstart和dragend之间连续触发(即使鼠标不移动). 目标元素触发的事件有: ondrage…

Html5 自学笔记

1 html的全称 Hyper Text Markup Language 2 HTML的意义使用标记标签( Markup Tag)来描述网页 3 HTML标签一定成对吗是 4 <html> </html> 它们之间的文本用来描述网页 5 <body></body> 它们之间的文本描述网页上的可见内容 6 html标题标签 h1 到 h5 7 html段落用<p>来定义的 8 html链接 html链接是用<a> 来定义的…

HTML5自学笔记[ 24 ]canvas绘图之星空草地

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> body{ background:#fff;} div{ width:800px; height:600px; margin:0 auto;} canvas{ background:#000;} </sty…

HTML5自学笔记[ 23 ]canvas绘图基础7

变换矩阵: transform(a,b,c,d,e,f),多次使用该函数,效果是多次状态改变的累加: setTransform(a,b,c,d,e,f),会忽略之前的变换,从起始状态开始改变.…

HTML5自学笔记[ 15 ]canvas绘图基础6

关于线条的一些属性: lineCap,这个属性表示的是线条两端的样式,值有butt(默认)/round/square. lineJoin,这个属性表示线条相交的方式,值有miter(默认)/bevel/round: miterLimit,该属性指定默认情况下lineJoin采用miter方式的极限值:比如,在上面的例子中,将miterLimit设置为1,那么第一个图的两条线的相交方式就会自动转变为bevel.…

HTML5自学笔记[ 21 ]canvas绘图实例之马赛克

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>马赛克</title> <style> body{background:#000;} canvas{background: #fff; margin-left:500px;} </style> <script> windo…

HTML5自学笔记[ 20 ]canvas绘图实例之绘制倒影

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>倒影</title> <style> body{background:#000;} canvas{background: #fff; margin-left:500px;} </style> <script> window…

HTML5自学笔记[ 19 ]canvas绘图实例之炫彩时钟

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>炫彩时钟</title> <style> body{ background:#000;} canvas{ background:#fff; } </style> <script src="countdown.js&qu…

HTML5自学笔记[ 18 ]canvas绘图基础5

获取图像数据:getImgData(x,y,w,h),返回的是一个ImageData对象,这个对象有三个属性保存图像信息:width/height/data.data是一个数组,保存了每个像素的信息,一个像素用4个元素保存,分别表示红.绿.蓝和透明度. 创建图像数据:createImgData(w,h),w/h表示图像的大小,返回的也是一个ImageData对象,只要设置好data,就可以用putImgData()将该图像绘制到画布上了. 绘制图像数据:putImgData(imgData,x,…

HTML5自学笔记[ 17 ]canvas绘图基础4

绘制图像: drawImage(oImg,x,y),oImg是一个Image对象,(x,y)为绘制起点,绘制的图像大小和源图大小一样. drawImage(oImg,x,y,w,h),后两个参数设置绘制后的图形大小. drawImage(oImg,x1,y1,w1,h1,x2,y2,w2,h2),该方法获取源图像的一部分进行绘制并且指定绘制起点和绘制后图像的大小,x1/y1/w1/h1表示选取源图上(x1,y1)点起宽w1高h1的部分,x2/y2/w2/h2表示将选取的部分绘制到画布(x2,y2…

HTML5自学笔记[ 16 ]canvas绘图基础3

canvas还提供提供了一些动态方法,使图像可以旋转.缩放和移动,与css3中的方法一样. 移动:translate(x,y),x和y为横竖方向的偏移量旋转:rotate(弧度),弧度=角度*Math.PI/180:注:多次旋转角度累加. 缩放:scale(x,y),x和y为水平和垂直方向的缩放比. 注意:scale缩放有个弊端,那就是即缩放宽高,又缩放边框的宽度,所有在使用时应该注意.…

HTML5自学笔记[ 15 ]canvas绘图实例之钟表

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之方块移动</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style…

HTML5自学笔记[ 14 ]canvas绘图基础2

canvas绘制路径不仅可以绘制直线和多边形,还提供了绘制曲线的方法,利用这些方法可以画出多种曲线效果. 方法1:arc(x,y,r,起始弧度,结束弧度,绘制方向);其中(x,y)为圆心坐标,r为半径,弧度计算公式:deg*Math.PI/180,绘制方向默认为false表示顺时针绘制 ,设置为true时,逆时针绘制. 例1,顺时针绘制0-90°圆弧: oContext.beginPath(); oContext.arc(300,300,200,0,90*Math.PI/180,false);…

HTML5自学笔记[ 13 ]canvas绘图小实例之方块移动

HTML5自学笔记[ 12 ]canvas绘图小示例之鼠标画线

<!doctype html> <html> <head> <meta charset="utf-8"> <title>canvas绘图小实例之鼠标画线</title> <style> body{ background:#000;} #canvas1{ margin:100px 500px; background:#fff;} #canvas1 span{ color:#fff;} </style…

HTML5自学笔记[ 8 ]历史管理

触发历史管理的三种方法: 跳转页面改变hash值 pushState(在服务器环境下运行) 用hash值来触发历史管理: <!doctype html> <html lang="en"> <head> <title>随机产生彩票号码</title> <meta charset="utf-8"/> <script> window.onload = function(){ var oI…

HTML5自学笔记[ 6 ]data自定义数据

在标签中添加data-name属性并赋值,在js脚本中用ele.dataset.name就可以获取该属性的值.如: <div id="box" data-age="20">年龄</div> <script> var oDiv = document.getElementById('box'); alert(oDiv.dataset.age); //20 </script> 如果name是用-连接的两个及以上单词来命名,那…

HTML5自学笔记[ 5 ]JSON的新方法

eval和JSON.parse的区别:eval:可以解析任何字符串为js:parse:只能解析JSON形式的字符串变为js(更安全). json格式的字符串中的属性名必须加双引号“”. stringify()方法将json对象转换成严格格式的json字符串. 兼容低版本浏览器:在页面中引入json2.js.…

HTML5自学笔记[ 4 ]js中新增的选择器方法

querySelector():参数与jQuery一样,这个方法获取一组元素中的第一个元素. querySelectorAll():获取一组元素. getElementsByClassName():获取一组class元素. 列表属性classList:返回类数组对象,包含元素所有的class:该对象包含length属性.add()方法.remove()方法和toggle()方法.…

HTML5自学笔记[ 3 ]表单验证反馈

表单控件对象的validity对象可以设置或返回相关的验证信息(在invalid事件处理中获取validity对象): 属性valid:为true所有验证通过,为False至少有一种验证失败. 属性valueMissing:表单控件输入值为空时,该属性值为true:不为空时该属性值为false. 属性typeMismatch:输入的内容不符合控件类型要求时,该属性为true,否则为false. 属性patternMismatch:输入的内容不匹配正则表达式时,该属性为true,否则为false.…

HTML5自学笔记[ 2 ]新增表单控件和表单属性

新增<input>属性type="email",自动验证,若输入不为邮箱,则不能提交. 新增<input>属性type="tel",在移动端切换到数字键盘,其他无变化. 新增<input>属性type="url",自动验证,若输入不为url,则不能提交. 新增<input>属性type="search",输入框内显示删除文本按钮,其他无变化. 新增<input>属性t…

HTML5自学笔记[ 1 ]新增标签

新增语义化标签 <header></header>: 用于页面或板块头部. <footer></footer>:用于页面底部. <nav></nav>:导航. <hgroup></hgroup>:标题组合. <section></section>:一个板块或区块,用来划分区域. <article></article>:一般用来呈现论坛的一篇帖子. <asid…

HTML5 defer和async的区别

在HTML页面中插入Javascript的主要方法,就是使用<script>元素.这个元素由Netscape创造并在Netscape Navigator 2中首先实现.后来,这个元素就被加入到正式的HTML规范中.HTML4.01为<script>定义了6个属性,包括defer和async.defer和async都是可选的,且只对外部脚本文件有效. 一.当浏览器解析到script脚本,没有defer或async时: <script src="main.js&…

Js高设笔记1-2章 defer and async

1,js是由ECMAscript ,dom ,bom组成的专为网页交互而设计的脚本语言.js是脚本语言之一. 2,MIME,是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开.多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式. 3,外部文件,放在head中的外部文件,会先解释js后呈现body内容,遇上js多的时候,为不让用户久等而现在一般都会把js放到body的内容最后.(p12) defer(延迟脚本):整个页面都…

script标签中defer和async属性的区别

这篇文章来源于JS高级程序设计第三版中关于script标签的介绍,结合查阅的资料写下的学习笔记. 向html页面中插入javascript代码的主要方法就是通过script标签.其中包括两种形式,第一种直接在script标签之间插入js代码,第二种即是通过src属性引入外部js文件.由于解释器在解析执行js代码期间会阻塞页面其余部分的渲染,对于存在大量js代码的页面来说会导致浏览器出现长时间的空白和延迟,为了避免这个问题,建议把全部的js引用放在</body>标签之前. script标签存在两…

脚本引用中的defer和async的用法和区别

之前的博客漫谈前端优化中的引用资源优化曾经提到过脚本引用异步设置defer.async,没有细说,这里展开一下,谈谈它们的作用和区别,先上张图来个针对没用过的小伙伴有个初始印象: 是的,就是在页面脚本引用的时候设置defer或者async,为什么会有这两个属相来辅助脚本加载那,因为浏览器在遇到script标签的时候,文档的解析会停止,不再构建document,有时打开一个网页上会出现空白一段时间,浏览器显示是刷新请求状态(也就是一直转圈),这就会给用户很不好的体验,defer和async的合理使…

html5 (个人笔记)

妙味 html5 1.0 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <div class="a">3434</div> <script> // var obj=docum…

【HTML5自学笔记[ 7 ]defer和async】的更多相关文章