HTML&HTML5
文章平均质量分 55
霜月枫桥
Web前端软件工程师
展开
-
使用html+js书写分页功能
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> ul,li{ .原创 2021-08-18 10:54:50 · 520 阅读 · 0 评论 -
配置Canvas为全屏时,无滚动条
问题描述: 当需要canvas元素充满整个屏幕时,我们一般将window的宽高赋值给canvas。但是,canvas赋值后,页面中会出现滚动条,从而影响用户体验。这里,我列举出我的三个解决方法,希望对大家有所帮助,同时欢迎大神补充。代码如下: var windowHeight=0; var windowWidth=0; var canvas=document.get原创 2017-11-23 17:25:24 · 4591 阅读 · 1 评论 -
HTML5之postMessage和addEventListener实现<iframe>跨域通信
使用postMessage实现跨域的前提条件是一个页面通过调用另一个页面,示例如下所示:在这个示例中,通过outter.html调用inner.html这是outter.htmlfunction outmethod(){var value=document.getElementById("outtext").value;document.getElementById("if原创 2016-11-16 09:37:28 · 3652 阅读 · 1 评论 -
canvas——js画多边形方法
代码如下: var aa=document.getElementById("aa").getContext("2d"); aa.shadowBlur=6; aa.shadowColor="gray"; aa.shadowOffsetX=7; aa.shadowOffsetY=5; function createStar(cont原创 2017-10-13 10:28:58 · 6561 阅读 · 0 评论 -
疯狂讲义随笔——canvas之arc()使用详解
canvas画弧线的方法一共有四个,分别是arc(),arcTo(),quadraticCurveTo(),bezierCurveTo()arc的作用是画一个正规的圆弧,可以是一个完整的圆,也可以是一个圆的某一段弧线。arc的语法如下:context.arc(x, y, radius, startAngle, endAngle, anticlockwise)方法参数对应的语义如下原创 2017-10-12 16:01:32 · 1997 阅读 · 0 评论 -
疯狂讲义随笔——使用二次曲线quadraticCurveTo()画花朵
代码如下: Document .div1{ height:400px; border:1px solid black; position:relative; } #canvas{ margin:0px auto; border:1px solid black;原创 2017-10-17 19:05:21 · 1554 阅读 · 0 评论 -
前台HTML页面显示XML内容
应用场景:在网站开发过程中,读取XML格式文件,并将其所有内容都显示到页面上,即显示标签内容,又显示标签本身。备注:本博客场景还适应于读取显示含有标签的数据库存储字段。解决方法:解决方法一共有四种(可能还有别的方法,但我只知道四种,欢迎大家补充),分别如下:第一种,使用将你要显示的内容包含在标签中,便可以将标签显示在页面上。JS代码: var str原创 2017-07-26 17:49:59 · 24828 阅读 · 0 评论 -
页面预览上传文件的内容
功能介绍:网站通常通过file类型的标签进行文件的上传,文件为客户端任意位置(桌面、C盘、D盘……)的文件。有时,需求需要在文件上传到服务器之前,在页面的某区域显示文件的内容。这在过去的技术中,是很难实现的,但是通过H5的API接口,却可以通过很少的代码实现此功能。代码: 页面预览显示上传的文件内容原创 2017-07-31 17:35:52 · 3558 阅读 · 3 评论 -
EL表达式 (详解)
EL表达式 1、EL简介1)语法结构 ${expression}2)[]与.运算符 EL 提供.和[]两种运算符来存取数据。 当要存取的属性名称中包含一些特殊字符,如.或?等并非字母或数字的符号,就一定要使用 []。例如: ${user.My-Name}应当改为${user["My-转载 2017-04-20 22:26:10 · 437 阅读 · 0 评论 -
HTML5学习随笔
HTML5中各类型元素的具体使用,可以查看http://www.w3school.com.cn/tags/tag_input.asp1、中有accept属性,可以限制上传的类型。2、元素中有size属性,可以设置下拉框的高度,若选项多于下拉框的高度,则会出现下拉条。元素还有multiple属性,可以设置是否对选,用法类似于disabled。可以对中的进行分类,eg.……原创 2016-12-20 20:46:51 · 659 阅读 · 0 评论 -
a标签中href=""的用法详解
众所周知,a标签的最重要功能是实现超链接和锚点。而且,大多数人认为a标签最重要的作用是实现超链接,今天我刚好碰到a标签的一种写法JavaScript:;">,所以就来整理下a标签中href的几种用法。一、Js的几种调用方法(参考总结的) 1、a href="javascript:js_method();" 这是常用的方法,但是这种方法在传递this等参原创 2017-03-31 17:00:06 · 6901 阅读 · 0 评论 -
响应式布局总结
响应式布局的开发基础知识本章主要分为以下几个部分正确理解响应式设计响应式设计的步骤响应式设计需要注意的问题响应式网页布局实现原理第一:正确理解响应式布局响应式网页设计就是一个网站能够兼容多个终端-而不是为每个终端做一个特定的版本。打个比方来说:现在社会有很多响应产品,例如折叠沙发,折叠床等等,当我们需要把沙发放到一个角落的时候,此刻沙发就好比div吧,而角落转载 2017-06-07 17:08:03 · 764 阅读 · 0 评论 -
对html与body的一些研究与理解
一、写在前面的最近一直构思着写篇关于html标签的文章,虽说之前处理过html标签,也解决过不少棘手的问题,但是对其理解还不是很透彻,很多原理都是自己推测的。在网上查阅相关资料想整合一下相关的信息,发现深入探讨html,与body的文章很少,只有在蓝色理想看到一篇“一叶千鸟”的这篇“正确认识html与body”有点价值,其余都没有什么相关的好文章。而这里,我要讲述的与上面的交集并不多,转载 2017-07-11 10:20:13 · 420 阅读 · 0 评论 -
去除inline-block元素间间距的N种方法
一、现象描述真正意义上的inline-block水平呈现的元素间,换行显示或空格分隔的情况下会有间距,很简单的个例子: 间距就来了~~我们使用CSS更改非inline-block水平元素为inline-block水平,也会有该问题:.space a { display: inline-block; padding: .5em 1em;转载 2017-05-30 16:38:47 · 434 阅读 · 0 评论 -
marquee标签实现跑马灯效果--无缝滚动
今天在做微信端的大转盘抽奖时,想把所有用户的抽奖记录做成无缝滚动的效果,无奈我的js功底太差,一时想不出实现的方法,便百度各种相似效果。但无意中发现了一个html标签——可以实现多种滚动效果,无需js控制。使用marquee标签不仅可以滚动文字,也可以滚动图片,表格等,而且使用起来方便快捷,真的为我节省了不少时间。 marquee标签不是HTML3.2的一部分,并且只支持M转载 2017-05-02 09:28:54 · 1704 阅读 · 0 评论 -
HTML5学习随笔01
1、安全换行,分割过长单词为几部分,当窗口宽度缩小时,过长单词会一部分一部分的换行2、、分别为添加上标和下标eg. html5 //下标 ; html5 //上标3、可以使一些文字位于另一些文字的上方,例如可以实现在汉字上加汉语拼音4、有序链表,可以设置列表项从多大值开始,方法有以下两种: ·1、设置中的start属性,例如,那么列表项的数字将会从原创 2016-12-14 15:01:30 · 488 阅读 · 0 评论 -
HTML5图片映射——<map>+<area>
在一些购物网站,我们总能看到一张大图,上面铺满充满诱惑的礼品,当我们轻轻地用鼠标单击一下,就跳转到这个宝贝的页面。 对于这个神奇的功能,身边的小伙伴们往往都被震惊了。要是能够学会这招技能,那该多好啊,以后再也不用去找美工切图,并且也不用为兼容这种浏览器而发愁了。 其实,对于这个看起来神奇的功能,实现起来却是相当的容易。只需要使用HTML的标签、标签和标签就能实现这个强大的功能。但是如转载 2017-01-22 10:50:40 · 3053 阅读 · 0 评论 -
HTML5学习随笔02
1、元素中的ismap属性,可以在浏览器导航栏显示鼠标点击图片的坐标,类似于jQuery中的pageX/pageYeg. 2、元素的usemap属性,关联元素,可以实现当点击图片中某一规定区域时,浏览器打开设定好的链接,类似于地图查询。eg. 3、中的属性书写类似于,都有src、width、height等。其中,,原创 2016-12-19 17:01:26 · 675 阅读 · 0 评论