html
唐小狼
“人们称赞我是最勤奋的人,如果思考也算劳动的话,或许的确如此,因为一天之中从睁开眼,我几乎一直在思考。但是,如果工作被认为是在特定时间,根据狭隘标准从事某些特定活动的话,那么或许我是最懒惰的家伙。”
展开
-
html/css标签学习,持续Mark——iframe与<input>新特性range
示例代码: 您的浏览器不支持 iframe 标签。 通过iframe,达到在同一个浏览器窗口中显示不止一个页面。另外一个html5中标签的新特性,range挺好玩的,大家可以试试,代码如下,function myFunction() { var x = document.getElementById("myRange").value;原创 2015-10-29 14:56:41 · 584 阅读 · 0 评论 -
HTML5——新增表单元素与属性(2)
2016年4月24日, 星期日1、标签的control属性在HTML5中,可以在标签内部放置 一个表单元 素,并且通过该标签的control属性来访问该表单元素。2、文本框的placeholder属性placeholder是指当文本框处于未输入状态时显示的输入提示。当文本框处于未输入状态且未获取光标焦点时,模糊显示输入提示文字。3、文本框的list属性原创 2016-05-03 09:02:52 · 637 阅读 · 0 评论 -
HTML5——新增表单元素与属性(3)
2016-04-29 14:48:49 星期五1、表单内元素的form属性在HTML4中,表单内的从属性必须书写在表单内部,而在HTML5中,可以把他们书写在页面上任何地方,然后为该元素指定一个form属性,属性值为该表单的id,这样就可以声明该元素从属于指定表单了。2、表单内元素的formaction属性在HTML4中,一个表单内的所有元素只能通过表单的actio原创 2016-05-03 09:03:59 · 713 阅读 · 0 评论 -
HTML5——Range对象(1)
2016-04-27 15:22:55 星期三1、Range对象(1)selectNode、SelectNodeContents、deleteContents方法setStart、setEND、setStartBefore、setStartAfter、setEndBefore、setENDAfter方法(2)基本概念:一个Range对象代表页面上的一段连续区域。通过Rang原创 2016-05-04 09:41:36 · 1531 阅读 · 0 评论 -
HTML5——Range对象(2)
2016-04-28 13:56:44 星期四1、cloneRange、cloneContents、extractContents方法 id="p">这里是随便书写的内容 onclick="cloneRange()">克隆 function cloneRange() { var rangeObj = document.createRange(); ra原创 2016-05-04 09:43:33 · 665 阅读 · 0 评论 -
HTML5——拖放
HTML5拖放1、HTML5拖放拖放(Drag和drop)是HTML5标准的组成部分。2、拖动开始:ondragstart:调用了一个函数,drag(event),它规定了被拖动的数据3、设置拖动数据setData():设置被拖数据的数据类型和值。4、放入位置:ondragover:事件规定在何处放置被拖动的数据。5、放置:原创 2016-05-05 09:13:08 · 1528 阅读 · 0 评论 -
HTML5——本地资源拖放
HTML5本地资源拖放 lang="en"> charset="UTF-8"> 本地拖放 #imgContainer{ background-color: #cccccc; width:500px; height:500px; } src="app1.js">原创 2016-05-06 10:23:50 · 589 阅读 · 0 评论 -
HTML5——音频视频
音频播放1、Audio(音频)HTML5提供了播放音频文件的标准2、control(控制器)control属性提供了播放、暂停和音量控件3、标签定义声音规定多媒体资源,可以是多个 src="1.mp3" controls="controls">您的浏览器不支持 onclick="clickA()">播放/暂停 id="audio"原创 2016-05-05 09:08:14 · 438 阅读 · 0 评论 -
Canvas5——路劲应用绘制动画效果初级
Information利用Canvas路径api绘制线与圆,让圆沿着线的方向运动。实现原理很简单,就是不断的清楚画布,然后再重新绘制各个组件。当然,这个逻辑也是制作大部分动画的根本逻辑。有一些复杂的动画会用到store()函数,对画布上的元素进行存储,不完全清除掉,以后就会接触到了。这个代码的效果可以看这里:演示效果代码如下: xmlns="http://ww原创 2016-05-18 17:15:01 · 1593 阅读 · 0 评论 -
Canvas——路径使用的一些感悟
路径使用的一些总结:moveTo()和lineTo()函数都是用来移动点,绘制路径的函数,绘制完成后,调用closePath()函数,它会创建一条由描点的终点通向起点的虚拟路径,闭合整个路径,然后调用stroke()函数进行描边,最后可以用fill()函数来填充样式。简单的实例代码如下: charset="utf-8"> type="text/javascript"原创 2016-05-06 14:32:07 · 3442 阅读 · 1 评论 -
聊html——应该先说DOCTYPE(用法详解)
小记假如面试官让你谈谈html,我觉得他首先想要了解的应该是你对doctype的理解。(貌似当时I’not get the point)一、定义描述在MDN上,对于Doctype有这样一段描述: informs the browser which version of HTML (or XML) you used to write the document. Doctype原创 2016-06-14 13:48:56 · 3172 阅读 · 0 评论 -
两列等高布局
charset="utf-8" /> type="text/javascript"> type="text/css"> *{ margin: 0px; padding: 0px; } #o {原创 2016-06-23 21:24:26 · 411 阅读 · 0 评论 -
HTML5——表单新增元素与属性(1)
2016-04-26 09:38:55 星期二1、文本框的pattern属性在HTML5中,对input元素使用pattern属性,并且将属性值设为某个格式的正则表达式,在提交时会针对这些进行检查,检查其内容是否符合给定格式。当输入的内容不符合给定格式时,则不允许提交,同时在浏览器中显示信息提示文字,提示输入的内容必须符合给定格式。2、文本框的SelectionDirect原创 2016-05-03 09:00:36 · 625 阅读 · 0 评论 -
HTML5——增强页面元素
2016-04-26 15:55:14 星期二1、figure元素一个figure元素只能包含一个figcaption标题,但可以包含多个其它元素。2、details和summary元素 lang="en"> charset="UTF-8"> details id="details"> 速度与激情7 id="p">你好原创 2016-05-03 08:58:14 · 785 阅读 · 0 评论 -
HTML5<video>标签,使用DOM进行播放控制
强大而灵活的html5标签,今天学习了一下标签,对以后写视频展示类的网站应该很有帮助,以下是w3cschool中的部分实例代码: 播放/暂停 放大 缩小 普通 var myVideo = document.getElementById("video1"); function playPause() {原创 2015-11-03 15:54:49 · 4487 阅读 · 0 评论 -
Mark——URL-统一资源定位器
网页地址实例:http://www.w3cschool.cc/html/html-tutorial.html语法规则:scheme://host.domain:port/path/filename说明:1、scheme——定义因特网服务的类型,最常见的类型是http2、host——定义域主机(http的默认主机是www)3、domain——定义因特网域名,比如w3cscho原创 2015-11-03 09:48:54 · 679 阅读 · 0 评论 -
学习css3过渡效果,可以实现很好玩的东西,无需js
翻滚吧,牛头怪!!!使用css3的过渡效果,可以让一种样式过渡到另一种样式,无需js就能实现某些动画效果。还是挺有意思的,在一些生动表现力的网站上应该是可以用到的。原创 2015-11-18 15:29:07 · 994 阅读 · 0 评论 -
CSS3 响应式设计 网络视图与媒体查询综合笔记
先贴上w3cschool相关的源代码,再一步步学习分析!!!!* { box-sizing: border-box;}.row:after { content: ""; clear: both; display: block;}[class*="col-"] { float: left; padding: 15px;}html原创 2015-11-23 11:12:55 · 708 阅读 · 0 评论 -
Html5旋转绘画大法
首先先说明一下问题:例如:要画这样一个矩形ctx.fillRect(50,50,100,200); ,要实现的目的是让这个矩形旋转一个角度。现在就有问题了,旋转操作的原心是(0,0),也就是画布的坐标原点,而这个矩形的左上顶点是(50,50),直接旋转是出不来我们想要的结果的,这里就需要一个平移操作了,代码如下:<!DOCTYPE html><html><head> <title>Rec原创 2015-12-31 09:54:24 · 1265 阅读 · 0 评论 -
自己总结前端web知识学习——太多太多(html/css/js/php)
最近一直在学习web知识,需要学习的知识也很多,查了很多学习资料,边学习边总结,画了一张学习流程图,特此Mark一下:光看这些事远远不够的,要充分的动手才能有更深刻的体会,和更好的掌握,继续努力,持续Mark!!原创 2015-12-16 15:29:11 · 1341 阅读 · 0 评论 -
一个简单大气的登陆(login)界面源码介绍学习
首先上页面截图:然后贴段代码: Welcome 敲门 主要是标签中,placeholder属性的应用。以及css文件中对样式的设计,大家可以学习一下!!源码下载链接:源码下载链接源码下载链接:http://download.csdn.net/detail/tangxiaolang101/9369998原创 2015-12-21 10:46:00 · 9210 阅读 · 1 评论 -
javascript简单布局实现单选按钮控件
主要是对最近学习的知识做练习,可以巩固提高!效果如下图:代码如下: 单选控件 .radioD{ width: 300px; height: 300px; background: url(field.jpg) no-repeat; } .radioD li{ font-size: 18px; font-family: Ari原创 2016-03-30 10:49:46 · 3961 阅读 · 0 评论 -
关于canvas在retina屏下绘制文字或图像模糊的解决方案
一、问题描述最近在鼓捣canvas的时候,发现绘制在canvas上的文字(或图片)在retina屏幕上会出现显示模糊的问题,感觉很不爽,于是就Google了一番,还真发现了一个解决方案。有兴趣的同学可以去读一下原文,我在这里简单的记录一下。先看一下Deom页面,对比一下前后两个效果,请务必在配有retina屏幕的设备上浏览(iOS6下的safari除外)。否则是看不到效果的。转载 2016-03-30 11:11:45 · 5784 阅读 · 0 评论 -
HTML5——响应式布局
1、响应式布局介绍(1)响应式布局:响应式布局是2010年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端——而不是为每个终端做一个特定的版本。这个概念是为解决移动互联网浏览而诞生的。其目的是为用户提供更加舒适的界面和更好的用户体验。(2)优缺点:优点1) 面对不同分辨率设备灵活性强2) 能够快捷解决多设备显示适应问题缺点1) 兼容各种设原创 2016-05-16 14:11:34 · 736 阅读 · 0 评论 -
HTML5——Canvas基本介绍
1、Canvas标签HTML5元素用于图形的绘制,通过脚本(通常是JavaScript)来完成。标签只是图形容器,你必须使用脚本来绘制图形。可以通过多种方法使用Canvas绘制路径、盒、圆、字符以及添加图形。2、标签创建(1)脚本创建: lang="en"> charset="UTF-8"> canvas .canvas{原创 2016-05-06 10:25:49 · 450 阅读 · 0 评论 -
float左右,中间自适应,和一些tips
class="reply-wrapper"> class="reply-logo"> class="reply-btn" id="subjectQuickReplyBtn">回复 class="out-input"> type="text" class="reply-input" id="subjectQuickReply" placeholder="请输入原创 2016-11-23 14:20:04 · 1653 阅读 · 0 评论