HTML
程序员杰森
热爱
展开
-
文件选中后自动AJAX上传文件
基本实现思路在表单上传File类型控件选中文件后,自动将数据打包入FormData并AJAX上传。实现示例···//海报图片选择点击事件var upload_btn_event=function () { $('#id_input_file_article_poster').click(); };$('#id_btn_upload_image').on('click',upload_btn_event);//海报图片自动上传$('#id_input_file_article_p原创 2020-07-08 16:30:41 · 645 阅读 · 0 评论 -
HTML5 FormData 对象的使用
感谢原文作者:Veb原文链接:https://www.jianshu.com/p/a98b2b2aff88目录简介简单使用通过HTML表单创建FormData对象搭配AJAX进度条拖拽上传实现简介FormData对象用以将数据编译成键值对,以便用XMLHttpRequest来发送数据。其主要用于发送表单数据,但亦可用于发送带键数据(keyed data),而独立于表单使用。简单使用你可以自己创建一个FormData对象,然后调用它的append()方法来添加字段,像这样:var formD.转载 2020-07-08 08:56:18 · 237 阅读 · 0 评论 -
js实现滚动条滚动到页面底部继续加载
感谢原文作者:chua1989原文链接:https://www.jb51.net/article/76645.htm简介这篇文章主要为大家详细介绍了js实现滚动条滚动到页面底部继续加载,原理很简单,就是为window添加一个scroll事件,需要的朋友可以参考下。这个实例应该说可以很简单,直接使用jQuery的方法来处理也是可以的。但本文底层使用原生的js来处理,遇到一些小知识点可以分析一下也算有所得。原理原理很简单,就是为window添加一个scroll事件,浏览器每次触发scroll事件.转载 2020-07-06 20:59:12 · 2321 阅读 · 0 评论 -
jsonp原理详解
感谢原文作者:HansExploration原文链接:https://blog.csdn.net/hansexploration/article/details/80314948什么是JSONP?Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获取资料,即跨域读取数据。为什么需要JSONP?由于浏览器同源策略安全限制,数据是不可以直接跨域(包括不同的根域名、二级域名、或不同的端口)请求的,除非目标域名授权你可以访问。同源策略.转载 2020-07-06 16:06:31 · 246 阅读 · 0 评论 -
css自定义属性(css变量)
感谢原文作者:Kuku殿下原文链接:https://segmentfault.com/a/1190000015948538前言刚开始的“css变量”,经扩展之后,称为“css自定义属性”当各种预处理器满天飞的时候,css变量已经开始渐渐普及在特定的应用场景,css变量确实发挥了很大的作用下面开始学习css变量。正文一、变量的声明和使用CSS选择器不能是数字开头,JS中的变量是不能直接数值的,但是,在CSS变量中,这些限制通通没有。 但不能包含$,[,^,(,%等字符,普通字符局限在只要.转载 2020-07-05 15:47:38 · 1970 阅读 · 0 评论 -
CSS选择器
1 基本选择器2 多元素选择器3 属性选择器转载 2020-07-05 15:19:16 · 462 阅读 · 0 评论 -
CSS3 box-shadow
感谢原文作者:WEB前端开发原文链接:https://www.html.cn/archives/9360/CSS3 box-shadow 属性用来描述一个元素的一个或多个阴影效果,该属性几乎可以让你完成你想要的任何阴影效果。然而 box-shadow 属性语法和取值非常灵活,对于新手有点不容易理解。今天总结一下语法和 box-shadow 属性各种阴影效果。语法/* offset-x | offset-y | color */box-shadow: 60px -16px teal; /*.转载 2020-06-27 08:25:52 · 147 阅读 · 0 评论 -
CSS 媒体查询
感谢原文作者:fly63前端网原文链接:http://www.fly63.com/article/detial/3122目录概述语法媒体类型(mediaType )媒体功能(media feature)引入方式1. CSS2 Media方式2. CSS3 Media方式开始编写响应式页面前的准备工作1:设置Meta标签2:加载兼容文件JS3:设置IE渲染方式默认为最高(可选)代码示例概述@media 媒体查询选择性加载css,意思是自动探测屏幕宽度,然后加载相应的CSS文件。可以针对不同的屏幕尺.转载 2020-06-26 09:22:16 · 363 阅读 · 0 评论 -
HTML Flex 布局
感谢原文作者:在路上de 小白原文链接:https://www.cnblogs.com/likun123/p/9518466.html#commentform目录一、Flex 布局是什么?二、基本概念三、设置在容器(父亲)的属性1.flex-direction属性2.flex-wrap属性3.flex-flow4.justify-content属性5.align-items属性6.align-content属性四、设置在项目(儿子)的属性1.order属性2.flex-grow属性3.flex-sh.转载 2020-06-26 07:26:59 · 239 阅读 · 0 评论 -
实现表单input文本框不可编辑的三种方法
感谢原文作者:青灯夜游原文链接:https://www.php.cn/div-tutorial-413133.html目录问题实现方式1、οnfοcus=this.blur()2、readonly属性3、disabled 属性注意readonly属性和disabled 属性的区别disabled 属性----禁用属性readonly属性----只读属性问题有时,我们需要以不可编辑的模式显示表单域,那么如何实现?我们可以通过为表单字段(input文本框,标签,复选框,文本区域)设置以下方法来实现表.转载 2020-05-14 11:59:44 · 2763 阅读 · 0 评论 -
HTML加载动画实现
在页面加载完成之前或者执行某操作时,先显示要显示的加载动画。实现原理先定义一个加载动画元素(最好是纯CSS实现,图片的话可能慢一点),当页面未加载完成之前,先使其“可见”,当页面加载完成后,再使其“不可见”。重要的一点就是怎样知道页面或者元素加载完成了,详情可以看一下:https://blog.csdn.net/weixin_43670802/article/details/1058751...原创 2020-05-01 11:13:59 · 1619 阅读 · 0 评论 -
DOM Document.readyState 属性
感谢原文作者:MDN原文地址:https://developer.mozilla.org/zh-CN/docs/Web/API/Document/readyState描述一个document 的 Document.readyState 属性描述了文档的加载状态。当该属性值发生变化时,会在document 对象上触发readystatechange事件。document.readySt...转载 2020-05-01 10:51:55 · 2842 阅读 · 0 评论 -
html中怎么去掉input获取焦点时候的边框
感谢问题解答者:zztuku问题地址:https://zhidao.baidu.com/question/1609376990135881787.html/*你可以百用下面的css代码度去掉所有元素的知边框道: */*:focus {outline: none;} /*用下面的代码去掉你要去掉的元素的边框:版 */.nohighlight:focus { outline:none...转载 2020-04-29 15:17:29 · 1269 阅读 · 0 评论 -
CSS3 Animation动画
感谢W3C属性描述CSS@keyframes规定动画。3animation所有动画属性的简写属性,除了 animation-play-state 属性。3animation-name规定 @keyframes 动画的名称。3animation-duration规定动画完成一个周期所花费的秒或毫秒。默认是 0。3animation-...转载 2020-04-29 14:50:43 · 129 阅读 · 0 评论 -
HTML CSS 特殊字符表
感谢原文作者:冯美玲原文链接:https://www.cnblogs.com/fml1com/p/5149269.htmlHTML有许多特殊的字符,您对此有多少了解?平时在WEB制作中,您又有用到多少?或者说你在平时使用之时,是否也会碰到,有许多特殊字符要如何打印出来?比如说“笑脸”,比如说“版权号”。要是你用时忘记了这些特殊字符,不要紧,请记住今天这个地址,你就随时可以查到这些特殊字符...转载 2020-04-26 16:32:02 · 291 阅读 · 0 评论 -
AJAX请求的五个步骤
感谢原文作者:0x29a原文链接:https://www.cnblogs.com/0x29a/p/11231950.html1. 创建XMLHttpRequest异步对象步骤一代码引自:https://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.aspvar xhr;if (window.XMLHttpRequest)...转载 2020-04-14 22:05:04 · 558 阅读 · 0 评论 -
HTML图片轮播
纯 CSS 实现图片轮播理论基础CSS3 animation 属性和 @keyframes 规则主体思想准备相同大小的多个图片将要展示图片横排放在一个图片容器里面在图片容器外再加一个展示容器,展示容器大小为图片大小给图片容器添加自定义动画,在动画不同阶段设置递增的偏移值注意事项动画效果分为切换和停留两部分自定义动画阶段与图片数量相关动画各阶段偏移值与图片大小相关本文中...转载 2020-04-13 16:04:58 · 1019 阅读 · 0 评论 -
HTML横向二级导航
效果HTML<!DOCTYPE html><html lang="zh-cn"><head> <meta charset="UTF-8"> <title>企业小栈</title> <style type="text/css"> *{padding: 0;margi...原创 2020-04-13 15:24:52 · 3601 阅读 · 4 评论 -
HTML 5的革新——语义化标签
感谢原文作者:html5jscss原文链接:http://www.html5jscss.com/html5-semantics-section.html大佬的下一篇博文:http://www.html5jscss.com/html5-semantics-rich.html语义化手册:http://caibaojian.com/html5/ele.htmlHTML 5的革新之一:语义化标...转载 2020-04-13 15:21:12 · 144 阅读 · 0 评论 -
CSS滑动门
感谢原文作者:Rocin原文链接:https://www.cnblogs.com/allen2333/p/9027482.html概念1.1 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。1.2 使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。1.3 最常见于各种导航栏的滑动门。原理2.1 利用CSS精灵Sprite...转载 2020-04-10 13:10:40 · 237 阅读 · 0 评论 -
Html设置文本换行与不按行操作
图片来源:W3C部分引自大佬:https://zhidao.baidu.com/question/424920602093167052.html强制不换行div{white-space:nowrap;}自动换行div{word-wrap: break-word;word-break: normal;}word-wrapword-break强制英文单词断行...转载 2020-04-10 12:37:40 · 1911 阅读 · 0 评论 -
设置鼠标光标与页面favicon
鼠标光标body{cursor: url('http://image.XXXX.com/ii.png'),default;}2. favicon<link rel="shortcut icon" href="icon地址"/>原创 2020-04-10 09:06:41 · 132 阅读 · 0 评论 -
因服务端路径引用问题导致的事故
问题描述今天在项目中使用JSP包含指令(动态包含)引入一个html页面,打开浏览器测试时,却发现运行到加载的那里直接崩了。如图:目录结构及异常。问题分析可以清楚的看到所报的异常为文件找不到的异常,所以肯定是路径写错了,而且它还已经把错误的路径打印出来了。可以看到,contextPath重复拼接了。解决方案删去我们手动获取的contextPath即可。思考既然我们的问题解决了,...原创 2020-04-08 23:30:46 · 350 阅读 · 0 评论 -
让HTML和JSP页面不缓存从Web服务器上重新获取页面
感谢原文作者:佚名原文链接:https://www.jb51.net/web/100639.html问题描述用户退出后,如果点击浏览器上的后退按钮,Web应用将不能正确保护受保护的页面——在Session销毁后(用户退出)受保护的JSP页重新在浏览器中显示出来。然而,如果用户点击返回页面上的任何链接,Web应用将会跳转到登陆页面并提示Session has ended.Please l...转载 2020-04-08 18:15:01 · 285 阅读 · 0 评论 -
HTTP消息头(HTTP headers)-常用的HTTP请求头与响应头
感谢大佬:https://itbilu.com/other/relate/EJ3fKUwUx.html <p><br> HTTP消息头是指,在超文本传输协议( Hypertext Transfer Protocol ,HTTP)的请求和响应消息中,协议头部分的那些组件。HTTP消息头用来准确描述正在获取的资源、服务器或者客...转载 2019-08-20 15:58:14 · 4021 阅读 · 0 评论 -
HTML元素的隐藏方式
感谢原文作者:幼儿园中的小小白原文链接:https://blog.csdn.net/weixin_43846130/article/details/95963426一、元素的隐藏方式:1.display:none; 特点: 真正的隐藏元素。 (1) 将元素的display属性设置为none能够确保元素不可见; (2) 使用这个属性,被隐藏元素不占用...转载 2020-03-26 14:48:02 · 176 阅读 · 0 评论 -
HTML页元素自适应+居中总结(不定期补充)
感谢大佬:https://www.cnblogs.com/SallyShan/p/11480685.html图片自适应背景图片自适应/*背景页*/ #page_content{ width: 100%; height: 100%; background: url(img/bg.png) no-repeat; background-size: cover;...转载 2020-03-09 22:19:28 · 1571 阅读 · 0 评论 -
Html 项目使用自定义字体文件问题
感谢大佬:https://zhidao.baidu.com/question/652711582735059245.html1、首先在项目过程中新建文件夹fonts将准备好的ttf字体文件复制该文件夹下:2、然后在工程新建style.css,使用@font-face中的font-family和src引入字体,在src的属性值填写“url(“路径”)”即可:3、然后打开html文件,写...转载 2019-12-19 10:42:35 · 1128 阅读 · 0 评论 -
Html CSS的三种链接方式
感谢原文:https://blog.csdn.net/abc5382334/article/details/24260817感谢原文:https://blog.csdn.net/jiaqingge/article/details/52564348Html CSS的三种链接方式css文本的链接方式有三种:分别是内联定义、链入内部css、和链入外部css1.代码为:<html>...转载 2019-06-29 16:55:32 · 29914 阅读 · 0 评论 -
【HTML】table表格拆分合并(colspan、rowspan)
代码演示 横向合并:<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" conte转载 2019-03-18 15:20:35 · 19677 阅读 · 0 评论 -
html中的锚点
一、页面内跳转的锚点设置 页面内的跳转需要两步: 方法一: ①:设置一个锚点链接&lt;a href="#miao"&gt;去找喵星人&lt;/a&gt;;(注意:href属性的属性值最前面要加#) ②:在页面中需要的位置设置锚点&lt;a name="miao"&gt;&lt;/a&am转载 2019-03-07 10:43:43 · 258 阅读 · 0 评论 -
HTML中html元素的lang属性的说明
HTML中html元素的lang属性的说明我在刚开始学习HTML的时候,关于基本的HTML格式中有一点不明白的地方,基本格式如下: 12345678究竟html标签中的lang属性是干嘛的呢?为什么要指定它的值是”en”或者”zh-CN”呢?个人见解如下:1.属性lang是英语language的缩写,意思是语言,”en”代表英语,”zh-CN”代...转载 2019-03-04 16:28:38 · 1085 阅读 · 0 评论