![](https://img-blog.csdnimg.cn/20201014180756738.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
html
qiphon3650
成功需要努力,知识源于分享!
展开
-
mustache语法
mustache 模板,用于构造html页面内容。在实际工作中,当同一个模板中想要调用不同的函数来渲染画面,在已经自定义好了的前提下,可以在渲染页面时对传入的参数进行手动判断。【在不好判断的情况下,我们可以通过改变传入参数来进行判断】跟小白我来看看该模板的语法吧。Mustache 的模板语法很简单,就那么几个:借助 Demo 来对语法做简单的介绍:就是 Mustache 的标示符,花括号里的 data 表示键名,这句的作用是直接输出与键名匹配的键值,例如:以#开始、以/结束表示区块,如果m转载 2022-06-29 21:20:12 · 256 阅读 · 0 评论 -
formdata 发送 filelist
formdata 发送 filelist只需要将fileappend到formdata的相同key中即可const fd = new FormData()fd.append('file', File1)fd.append('file', File2)原创 2022-01-06 09:29:35 · 714 阅读 · 0 评论 -
img lazyload chrome
chrome 75 之后,已经支持 img lazy-load 了,以后可以不用使用js 的库来实现了<script> // 判断浏览器是否支持 const hasSupport = 'loading' in HTMLImageElement.prototype; document.documentElement.className = hasSupport ? 'pass' : 'fail'; </script><!-- Lazy-load an of翻译 2020-11-29 16:05:21 · 1112 阅读 · 0 评论 -
HTTP请求
原生JS写一个GET请求let xhr = new XMLHttpRequest();xhr.open("GET", "/list");xhr.send();xhr.open第一个参数是请求方法,第二个参数是请求url,然后把它send出去就行了。如果需要加上请求参数,如果用jQuery的ajax,那么是这么写的:$.ajax({ url: "/list", ...转载 2018-05-29 18:10:29 · 467 阅读 · 0 评论 -
js获取select标签选中的值
转载自博客https://www.cnblogs.com/qq3245792286/p/6390504.htmlvar obj = document.getElementByIdx_x(”testSelect”); //定位idvar index = obj.selectedIndex; // 选中索引var text = obj.options[index].text; // 选中...转载 2018-04-11 18:05:20 · 422 阅读 · 0 评论 -
cookie笔记
特性: 同一个域名下共享一个cookie 数量和大小有限制(4-10k,不会超过50条) 有过期时间设置方法//这样写cookie的值不会覆盖document.cookie = 'user=q';document.cookie = 'pw = f'过期时间(如果没有设置,关闭浏览器时就会消失)var oDate = new Date()oDate.s...原创 2018-03-15 22:30:37 · 241 阅读 · 0 评论 -
html视频播放器兼容处理
本文转载自http://blog.csdn.net/freshlover/article/details/7535785由于html5的出现,让网页中的视频、音频有了更加便捷的实现方式。但是video、audio标签只在IE 9+、Safari 3+、FireFox 4+、Opera 10+、Chrome 3+的浏览器版本得到了支持,并且各浏览器对于视频编码格式的支持不一致,这就需要我们考虑一转载 2017-12-27 22:29:24 · 4715 阅读 · 0 评论 -
bootstrap表单基本结构代码
每天写同一份代码,比较烦。留一份以后复制<form class="form-horizontal col-xs-10 col-xs-offset-1 col-sm-12 col-sm-offset-0" method="post" action="index.php" name="myform" enctype="multipart/form-data原创 2018-01-01 16:26:00 · 2173 阅读 · 1 评论 -
css3 实现非锚点的页面跳转效果
演示案例点这里html代码 css3非锚点跳转案例 a b c d 这是第一屏 这是第原创 2017-11-30 12:37:16 · 2054 阅读 · 0 评论 -
加载动画
加载动画集合,全是css写出来的哦,没有图片http://loading.awesomes.cn/原创 2017-10-12 17:01:55 · 263 阅读 · 0 评论 -
前端优化(《高效前端》)
浏览器渲染知识帧 人眼感觉良好的帧率为60fps以上,这样才能看起来不卡顿,60fps为例,它要求一帧完成的事件为 1s/60 = 16.7ms . 浏览器显示页面的时候,要处理js逻辑,还要做渲染,每个片段执行不能操过16.67ms。实际上,浏览器内核支撑体系运行也需要一定的时间,所以留给我们的时间差不多只有10ms。 在chrome开发文档《Rendering Perform...转载 2018-07-16 19:16:51 · 689 阅读 · 0 评论 -
hash
#后面出现的任何字符,都会被浏览器解读为位置标识符。这意味着,这些字符都不会被发送到服务器端。改变#后的内容不会触发页面重载改变#会改变浏览器的访问历史 每一次改变#后的部分,都会在浏览器的访问历史中增加一个记录,使用”后退”按钮,就可以回到上一个位置。 这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。 值得注意的是,上述规则...原创 2018-07-17 18:00:39 · 1244 阅读 · 0 评论 -
form 的优点
form 优点1. 自动提交表单2. 回车键绑定3. 数据获取更轻松``` <div> <input id="user" /> <input id="password" /> </div> jQ 获取对应值的方式 $('user').val() ///这个看着挺简单的,但是性能损耗比...转载 2018-07-11 18:14:20 · 2222 阅读 · 0 评论 -
浏览器常用的图片优化 雪碧图/实体字符/svg
雪碧图唯一的优点是减少请求数,HTTP/1.1下浏览器同时加载资源的数量是一定的,IE6个,chrome 6个,firefox 8个,而HTTP2 下是没有数量限制的雪碧图的制作方法:node 的一个包 css-sprite ,制作方便,只要将图标做好放到对应的文件夹里,写好配置文件运行就能生成相应图片的css雪碧图的缺点高清屏失真不方便变化雪碧图是一张静态图片,生...转载 2018-07-18 11:33:38 · 1328 阅读 · 0 评论 -
a标签 rel属性
a标签常用rel属性rel=’external’此属性的意思是告诉搜索引擎,这个链接不是本站链接,其实作用相当于target=‘_blank’。为什么要这样写呢?因为有些网站因为是采用严格的DOCTYPE声名的,如果你在网页源码中的第一行看到:在这种情况下target=”_blank”会失效,因此采用rel=’external’这个参数来替代。rel=’nofllow’它是告诉搜索...转载 2018-12-10 14:28:15 · 5281 阅读 · 0 评论 -
部分Android机子人民币符号¥只显示一横
部分Android机子人民币符号¥只显示一横把 ¥ 复制过去,然后全部替换本文转自安卓AndroidX 网友的文章转载 2019-06-20 12:35:43 · 854 阅读 · 0 评论 -
抖音app中打开的第三方页面是黑色的
抖音web view默认的body是黑色的背景,写代码的时候要替换下用自己的颜色body { background: #fff;}原创 2019-07-04 18:14:33 · 2227 阅读 · 0 评论 -
vs code 配置html模板
vs code 配置html模板找到配置位置首选项 - 用户代码片段 - 输入html.json2. 写入代码段// html.json{ // Place your snippets for html here. Each snippet is defined under a snippet name and has a prefix, body and // desc...转载 2019-07-10 16:47:31 · 12036 阅读 · 1 评论 -
html a标签滚动到页面指定位置
好久没有用这个功能了,做下笔记<a href='javascript:scrollTo(x,y)'>滚动到指定位置</a>原创 2019-07-11 11:42:47 · 1403 阅读 · 0 评论 -
html5 标签
标签 描述 4 5 定义注释。 4 5 定义文档类型。 4 5 定义超链接。 4 5 定义缩写。 4 5 HTML 5 中不支持。定义首字母缩写。 4 定义地址元素。 4 5 HTML 5 中不支持。定义 applet。 4 定义图像映射中的区域。 4 5 定义 article。 5 定义页面内容之外的内容。 5 定义声音内原创 2017-07-22 17:06:22 · 298 阅读 · 0 评论 -
html标签
标签定义和用法表示一个缩写形式,比如 "Inc."、"etc."。通过对缩写词语进行标记,您就能够为浏览器、拼写检查程序、翻译系统以及搜索引擎分度器提供有用的信息。 标签最初是在 HTML 4.0 中引入的,表示它所包含的文本是一个更长的单词或短语的缩写形式。浏览器可能会根据这个信息改变对这些文本的显示方式,或者用其他文本代替。也许当前流行的浏览器对 标签中包含的文本还转载 2017-08-10 15:26:21 · 324 阅读 · 0 评论 -
h5新标签
标签描述标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API新多媒体元素标签描述定义音频内容定义视频(video 或者 movie)定义多媒体资源 和 定义嵌入的内容,比如插件。转载 2017-06-29 13:45:15 · 324 阅读 · 0 评论 -
placeholder支持ie
ie低版本不支持placeholder的情况可以解决了只需简单的计步1、文档引入jQuery2、文档引入jquery-placeholder.js (压缩版仅仅3.21k)3、简单的js$(function(){$('input').placeholder();})大功告成,是不是很简单呢!原创 2017-07-13 10:26:10 · 254 阅读 · 0 评论 -
a标签实现下载
直接在a标签内加入一个download属性就ok了点击下载如果要设置文件的名字可以将文件名写在download属性的里面点击下载ie和iOS好像还不支持该功能原创 2017-07-11 17:20:28 · 1569 阅读 · 0 评论 -
margin塌陷现象的解决办法
给父容器加1、border/padding-top2、overflow:hidden/auto/scroll3、position不是static也不是relative4、float不是none5、display是table-cell或者inline\inline-block原创 2017-07-01 14:42:35 · 1107 阅读 · 0 评论 -
IE下background连写无法解析
今天遇到个问题,背景图片在IE8下无法显示出来,看了看w3c,也是没有问题的,找了好久才发现background:#ABC url('1.gif') 0 100px no-repeat;格式很重要啊!任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。原创 2017-07-01 14:09:43 · 1055 阅读 · 0 评论 -
ie兼容
IE8中有一个“兼容性视图”的概念,当初IE8发布时,相对于IE6/7已经做出了非常大的改进,但是很多老站点仅针对IE6/7进行了优化,使用IE8渲染反而会一团糟。为了照顾这些苦逼的前端工程师,IE8加入了“兼容性视图”功能,这样的话就可以在IE8中使用IE6或IE7的内核渲染页面。这个当然不是我们想要的,所以需要使用meta标签来强制IE8使用最新的内核渲染页面IE=edge表示强制使用转载 2017-07-11 10:57:00 · 269 阅读 · 0 评论 -
h5已移除的元素
已移除的元素以下的 HTML 4.01 元素在HTML5中已经被删除:原创 2017-06-29 13:53:59 · 3197 阅读 · 0 评论 -
图片与图片间距去除
图片的间距问题,是前端必须要解决的:目前为止,我知道的方法有三种: 1、给图片设置浮动2、让图片变成块级元素3、给图片的父级设置font-size:0;如果有其他的方法,请不吝赐教,谢谢!原创 2017-05-27 10:35:59 · 9113 阅读 · 2 评论 -
雅虎十四条:网站前端网页优化的14条原则
Web应用性能优化黄金法则:先优化前端程序(front-end)的性能,因为这是80%或以上的最终用户响应时间的花费所在。法则1. 减少HTTP请求次数80%的最终用户响应时间花在前端程序上,而其大部分时间则花在各种页面元素,如图像、样式表、脚本和Flash等,的下载上。减少页面元素将会减少HTTP请求次数。这是快速显示页面的关键所在。一种减少页面元素个数的方法是简化页面设转载 2016-12-04 14:30:14 · 301 阅读 · 0 评论 -
回到顶部的几种写法
1、html标签 a链接锚点跳转,回到顶部 在顶部的元素上加入id例如:2、js写法回到顶部document.getELementById('top').onclick=function(){document.body.scrollTop=0;}3、html a标签写法回到顶部原创 2017-07-19 09:58:33 · 1839 阅读 · 0 评论 -
HTML5: 标签的改变
HTML5 吸取了 XHTML 2 一些建议,包括一些用来改善文档结构的功能,比如,新的 HTML 标签 header, footer, dialog, aside, figure 等的使用,将使内容创作者更加语义地创建文档,之前的开发者 在这些场合是一律使用 div 的。HTML5 还包含了一些将内容和展示分离的努力,开发者们也许会惊讶, b和 i 标签依然存在,但它们原创 2017-07-22 17:02:34 · 335 阅读 · 0 评论 -
file
上传 function showName(){ var file; //document.getElementById('file').files返回fileList文件列表对象 var len = document.getElementById('file').files.length; for(let i = 0; i<len; i++){ //file对象为用户选择原创 2017-08-17 17:33:07 · 325 阅读 · 0 评论 -
cite、small
cite元素表示作品(例如一本书、一篇文章、一首歌曲等)的标题。该作品可以 在页面中被详细引用,也可以只在页面中提示一下。html4中,cite可以用来表示作者,但是在html5中明确规定了不能用cite表示包括作者在内的任何人名,因为人名不是标题(当然除非标题就是一个人的名字),但是为了与html4 的兼容,并没有把它当作错误,所以这只是一个规定而已。html5中对small进行了重新定原创 2017-08-17 17:12:38 · 316 阅读 · 0 评论 -
ol
h5中ol新增的属性start起始值 1111 1111 1111 1111显示为1111111111111111reversed倒序 1111 1111 1111 1111 1111 1111显示为111111111111111111111111原创 2017-08-17 16:56:49 · 508 阅读 · 0 评论 -
html属性
属性 值 描述 accesskey character 规定访问元素的键盘快捷键 class classname 规定元素的类名(用于规定样式表中的类)。转载 2017-08-10 15:05:00 · 287 阅读 · 0 评论 -
HTML 5 Input 类型
HTML 5 表单属性 HTML 5 的新的表单属性 本章讲解涉及 和 元素的新属性。 新的 form 属性:autocomplete novalidate新的 input 属性: autocomplete autofocus formform overrides (formaction, formenctype, formmethod, fo转载 2017-08-10 15:00:00 · 518 阅读 · 0 评论 -
HTML 5 Canvas
HTML 5 的 canvas 元素使用 JavaScript 在网页上绘制图像。 画布是一个矩形区域,您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。 创建 Canvas 元素向 HTML 5 页面添加 canvas元素。 规定元素的 id、宽度和高度:通过 JavaScript 来绘制canvas 元素本身是没有绘图转载 2017-07-22 17:32:04 · 309 阅读 · 0 评论 -
HTML 5 音频
今天,大多数音频是通过插件(比如 Flash)来播放的。然而,并非所有浏览器都拥有同样的插件。 HTML 5规定了一种通过 audio 元素来包含音频的标准方法。audio 元素能够播放声音文件或者音频流。 音频格式当前,audio 元素支持三种音频格式: IE 9 Firefox 3.5 Opera 1转载 2017-07-22 17:22:04 · 339 阅读 · 0 评论 -
html5 video 元素
今天,大多数视频是通过插件(比如 Flash)来显示的。然而,并非所有浏览器都拥有同样的插件。 HTML 5规定了一种通过 video 元素来包含视频的标准方法。视频格式当前,video 元素支持三种视频格式: 格式 IE Firefox Opera Chrome Safari原创 2017-07-22 17:17:19 · 507 阅读 · 0 评论