HTML
文章平均质量分 57
筱葭
这个作者很懒,什么都没留下…
展开
-
浅谈MDN HTML
1、HTML(HyperText Markup Language超文本标记语言)HTML 是一种标记语言。它告诉浏览器如何显示内容。---命名字符参考:用于表示在HTML中具有特定含义的字符。例如,HTML将">"和""符号表达"大于"的含义时,可以使用命名字符参考来作为替代。4个非常重要的常用实体:> 表示大于符号">"< 表示小于符号"<"& 表示和符号"a原创 2017-01-15 17:04:01 · 808 阅读 · 0 评论 -
浅谈<label>与<input>合作的两种方式
标签来定义表单控制间的关系,当用户选择该标签时,浏览器会自动将焦点转到和标签相关的表单控件上。eg1:通过为设置id属性,在标签中设置for=id来让说明文本和对应的关联起来。Number:eg2:包裹标签,点击,响应两次,即本身出发和触发后冒泡到。 label var label = document.getElementsByTagNa原创 2017-02-28 14:10:28 · 24415 阅读 · 1 评论 -
浅谈HTML5的新特性——data-*自定义属性
HTML5增加了一个新特性——data-*自定义属性。可以往HTML标签上添加任意以 "data-"开头的属性,这些属性在页面上是不显示的,即不会影响到页面布局和风格,但它却是可读可写的。使用data-*自定义属性可以解决自定义属性混乱无管理的现状。1、getAttribute()和setAttribute()方法存取传统的自定义属性的值var username = doc原创 2017-03-06 11:16:07 · 4633 阅读 · 0 评论 -
浅谈JavaScript和Canvas实现彩色图片转换成黑白图片
1、convertToGray()在主体代码中使用 canvas 元素的id来获取画布,并设置画布的宽和高为图片的宽和高,再将上下文初始化为2d画布;彩色图片加载完成后,使用 drawImage 将图片加载到上下文,调用用于完成剩余绘制工作的 getColorData()和 putColorData();最后为myImage指定彩色图片的路径。2、getColorData()使原创 2017-03-13 11:35:02 · 3583 阅读 · 0 评论 -
浅谈HTML5中的<audio>和<video>
1、video和audio的优点:不需要第三方插件就能播放音频和视频了,可以直接插入,并且用同一的API接口控制。 2、video和audio的缺点:1) 暂时没有对流视频的支持和规范。流媒体分HTTP渐进流式下载和实时流式传输,video和audio属于HTTP渐进流式下载,不需要流媒体服务器,普通HTTP服务器就可以。2) 播放媒体类型不统一。由于各种原因,HTML5没有对原创 2017-04-04 16:50:16 · 8954 阅读 · 0 评论 -
浅谈Canvas的状态绘图
Canvas是基于状态的绘图。beginPath核心的作用是:将不同的绘制形态进行隔离,每次执行此方法,表示重新绘制一个路径,与之前绘制的路径可以分开进行样式设置和管理,如颜色、线宽等。var canvas = document.getElementsByTagName("canvas")[0]; if (canvas.getContext) { var conte原创 2017-05-12 17:32:42 · 862 阅读 · 0 评论 -
浅谈HTML的meta标签
meta是HTML的head中的一个辅助性标签,其作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等。meta标签共有两个属性:name属性和http-equiv属性。1、name属性name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机原创 2017-05-07 11:11:03 · 740 阅读 · 1 评论 -
浅谈HTML5中的二进制大对象Blob
1、Blob是什么?在计算机中,Blob常常是数据库中用来存储二进制文件的字段类型,MySQL中的Blob类型就只是个二进制数据容器。在HTML5中,Blob是一种JavaScript的对象类型,Blob对象除了存放二进制数据外还可以设置这个数据的MIME类型,这相当于对文件的存储。一个Blob对象是一个包含只读原始数据的类文件对象。2、创建Blob对象在新的方法中可以直接原创 2017-03-19 15:15:34 · 5868 阅读 · 1 评论 -
浅谈HTML5的FormData对象
利用 FormData 对象,可以通过JavaScript键值对来模拟一系列表单控件,还可以使用 XMLHttpRequest的send() 方法来异步提交表单。与普通的Ajax相比,使用FormData 的最大优点就是可以异步上传二进制文件。 可以先通过new关键字创建一个空的 FormData 对象,然后使用 append() 方法向该对象里添加字段(字段的值可以是一个 Blo原创 2017-04-25 13:59:23 · 11646 阅读 · 0 评论 -
浅谈HTML5新标签的浏览器兼容问题
HTML5 现在已经不是SGML的子集,主要是关于图像,位置,存储,多任务等功能的增加① 新特性:1)绘画2)用于媒介回放的和3)本地离线存储长期存储数据,浏览器关闭后数据不丢失4)的数据在浏览器关闭后自动删除5)语意化更好的内容元素,比如 6)表单控件 7)新的技术 ② 移除的元素:1)纯表现的元素: 2原创 2017-02-28 11:37:45 · 10856 阅读 · 1 评论 -
浅谈HTML5离线存储
在用户没有与因特网连接时,可以正常访问站点或应用;在用户与因特网连接时,更新用户机器上的缓存文件。原理:HTML5的离线存储是基于一个新建的.appcache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。如何使用:① 页面头部像下面一样加入一个原创 2017-02-28 11:26:15 · 4234 阅读 · 0 评论 -
浅谈HTML语义化
1、什么是HTML语义化内容语义化:内容的结构化代码语义化:选择合适的标签2、为什么要语义化在没有CSS的情况下,页面也能呈现出很好的内容结构、代码结构;更好的用户体验,如title、alt用于解释名词或图片信息以及label标签的使用;有利于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;方便屏幕阅读器、盲人阅读器、移动设备等其他设备渲染网页原创 2016-11-07 22:06:25 · 507 阅读 · 0 评论 -
浅谈iframe的优缺点
iframe的优点:① iframe能够原封不动地把嵌入的网页展现出来。② 如果有多个网页调用iframe,只需要修改iframe的内容,就可以实现对调用iframe的每一个页面内容的更改,方便快捷。③ 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用性。④ 如果遇到加载缓慢的第三方内容,如图标和广告等,可以用iframe来原创 2017-02-28 13:46:59 · 12637 阅读 · 1 评论 -
浅谈HTML DOCTYPE
声明位于位于HTML文档中的第一行,处于标签之前,主要有以下两个作用:① 告知浏览器的解析器使用哪种HTML或XHTML规范解析这个文档。② 对浏览器的渲染模式产生影响:不同的渲染模式会影响到浏览器对于CSS代码甚至JavaScript脚本的解析,所以DOCTYPE是非常关键的,尤其是在IE系列浏览器中,由DOCTYPE所决定的HTML页面的渲染模式至关重要。浏览器的渲染模式有原创 2017-02-28 11:44:04 · 447 阅读 · 0 评论 -
浅谈自适应浏览器宽度变化的瀑布流布局的实现
步骤:1、计算页面的宽度,计算出页面可放图片的列数。 2、将各个图片的高度尺寸记入数组中,需要等所有图片加载完成,否则无法知道图片的高度。 3、用绝对定位先将页面第一行填满,因为第一行的top位置都是一样的,然后用数组记录每一列的总高度。 4、继续用绝对定位将其他图片定位在最短的一列的位置之后然后更新该列的高度。 5、当浏览器窗口大小改变时,重新执行一次上面1-4步以重原创 2017-03-08 20:40:15 · 1105 阅读 · 0 评论 -
浅谈表单元素的readonly和disabled属性
readonly和disabled是用在表单中的两个属性。 相同点:使用户不能够更改表单域中的内容。 不同点:① Readonly只是使表单元素不能输入,外观不会变化;而disabled会使表单元素外观变化,如变灰。② readonly只针对input(text / password)和textarea有效;而disabled对于所有的表单元素都有效,包括select、原创 2017-03-15 20:24:07 · 2607 阅读 · 0 评论 -
浅谈HTML5输出标签<output>
html5的标签可以定义不同类型的输出。标签的属性:for 定义输出字段相关的一个或多个元素。form 定义输入字段所属的一个或多个表单。name 定义对象的唯一名称(表单提交时使用)。 0100 + =原创 2017-03-09 20:49:14 · 4759 阅读 · 0 评论 -
浅谈HTML5 canvas实现移动端刮奖效果
刮奖图片通过设置div的背景图片实现,设置一个完全罩住刮奖图片的canvas,在canvas中绘制了一块等大的浅灰色矩形,使其盖住下方的刮奖图片。为使得手指划过画布时,擦除掉相应区域的浅灰色,可以运用canvas中的globalCompositeOperation属性,通过将其设置为destination-out,使得在已填充颜色的基础上再次进行绘制时,所绘制的区域变得透明,从而露出下方的刮奖原创 2017-03-28 19:50:44 · 5951 阅读 · 2 评论 -
浅谈利用遮罩实现点击某区域以外时弹窗的弹出与关闭
HTML:点击除开div的区域可以弹出弹窗点击除开div和弹窗的区域可以关闭弹窗CSS:#div{ /*设置z-index属性必须设置position:relative或absolute*/ position:relative; /*设置div位于遮罩的上方*/ z-index:2; width:300px; height:200px; border:1px原创 2017-03-14 14:01:43 · 6624 阅读 · 0 评论 -
浅谈三种方法实现一个圆形的可点击区域
方法一:+ 方法二:border-radius#circle{ background:red; width:100px; height:100px; border-radius:50%;}方法三:纯JavaScriptdocument.onclick = function(e) { var r = 50; var x1 = 100原创 2017-02-28 16:10:05 · 3813 阅读 · 0 评论 -
浅谈HTML5 canvas(二)
1、变换通过上下文的变换,可以将处理后的图像绘制到画布上。可以通过如下方法来变换上下文:① rotate(angle):围绕圆点旋转angle弧度;② scale(x, y):缩放图像,在x方向乘以x,在y方向乘以y;③ translate(x, y):将坐标圆点移动到(x, y),执行该变换后,坐标(0, 0)会变为之前由(x, y)表示的点;④ Transform(m1原创 2017-03-26 13:47:33 · 1342 阅读 · 0 评论 -
浅谈HTML5 canvas(一)
:HTML5添加的最受欢迎的功能就是元素,这个元素负责在页面中设定一个区域,然后就可以通过JavaScript动态在这个区域绘制图形。主流浏览器都支持canvas,如IE9+、FireFox1.5+、Safari2+、Opera9+、Chrome、iOS版Safari及安卓版Webkit。Canvas除了具备基本绘图能力的2D上下文,还有一个名为WebGL的3D上下文。目前支持canv原创 2017-03-24 23:05:07 · 5349 阅读 · 0 评论