HTML
dz45693
我是一个软件开发人员,有较强的责任心,是一个典型的技术爱好者。在此希望能认识更多好朋友。
展开
-
HTML META的用途,功能和属性
META本来只是HTML代码中的一个标签而已,不过某天,这个世界出现了一种叫做搜索引擎的东西,META标签便突然被人们重视起来了,并且META还增加了类似于Robots这种属性。 写这篇文章之前,我也在考虑,究竟这篇介绍META的文章,应该归属于HTML专栏,还是SEO专栏?转载 2011-08-29 22:22:28 · 2953 阅读 · 0 评论 -
对CSS中的Position、Float属性的一些深入探讨
对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨。本文主要探讨点:Position、Float属性的基本使用方法Position、Float属性对元素所造成的影响Position、Float属性交叉使用上面的影响转载 2014-12-12 17:48:41 · 2433 阅读 · 0 评论 -
yahoo base.css
/*CSS reset*/html{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-co转载 2014-12-12 13:24:47 · 2610 阅读 · 0 评论 -
CSS3文本溢出
text-overflow:1text-overflow:clip | ellipsis;clip:剪切多余的文字。ellipsis:文本溢出时显示省略标记。要实现文本溢出剪切显示省略标记,还需要两个属性的配合,并定义文本容器宽度。123转载 2015-09-18 16:44:39 · 2402 阅读 · 0 评论 -
JS 判断上传 文件 大小
随着HTML5 的发展,我们可以用file控件的size属性来获取客户端 上传文件的大小,但是 我今天测试 发现IE10支持,IE11的某个版本不支持, 于是就借用img控件来加载一此, 以此来获取文件大小。整个code 如下: File API Demo原创 2016-01-11 12:14:44 · 3082 阅读 · 0 评论 -
web性能优化:详说浏览器缓存
TOC背景浏览器的总流程图一步一步说缓存朴素的静态服务器设置缓存超时时间html5 Application CacheLast-Modified/If-Modified-SinceEtag/If-None-Match什么是Etag为什么有了Last-Modified还要EtagEtag 的实现迷之浏览器总结背景在对页面的性能优化时,特别是移动端的优化转载 2016-06-13 11:16:27 · 2095 阅读 · 0 评论 -
html页面禁止自动填充浏览器记住的密码
现在的浏览器功能越来越强大,比如Chrome浏览器,在一个系统login的时候我们一般会记住密码,那么在整个系统中,浏览器一旦遇到 type="password"的控件,就会把密码自动填充到该控件。非常烦恼,问了一下同事有人说可以用autocomplete="off" 来禁用自动填充, 经过简单的实践没有达到我的需求。于是回到最原始的解决方案。比如html如下在页面初始化的时候 把原创 2016-11-05 11:03:29 · 10706 阅读 · 0 评论 -
Content Security Policy 入门教程
跨域脚本攻击 XSS 是最常见、危害最大的网页安全漏洞。为了防止它们,要采取很多编程措施,非常麻烦。很多人提出,能不能根本上解决问题,浏览器自动禁止外部注入恶意脚本?这就是"网页安全政策"(Content Security Policy,缩写 CSP)的来历。本文详细介绍如何使用 CSP 防止 XSS 攻击。一、简介CSP 的实质就是白名单制度,开发者明确告诉客户端,哪些外...转载 2018-08-20 18:50:00 · 2463 阅读 · 0 评论 -
你真的了解回流和重绘吗
回流和重绘可以说是每一个web开发者都经常听到的两个词语,我也不例外,可是一直不是很清楚这两步具体做了什么事情。最近由于部门内部要做分享,所以对其进行了一些研究,看了一些博客和书籍,整理了一些内容并且结合自己的体会,写了这篇文章,希望可以帮助到大家。浏览器的渲染过程本文先从浏览器的渲染过程来从头到尾的讲解一下回流重绘,如果大家想直接看如何减少回流和重绘,可以跳到后面。(这个渲染过程来自MD...转载 2018-12-11 13:40:51 · 1759 阅读 · 0 评论 -
深入浅出浏览器渲染原理
前言浏览器的内核是指支持浏览器运行的最核心的程序,分为两个部分的,一是渲染引擎,另一个是JS引擎。渲染引擎在不同的浏览器中也不是都相同的。比如在 Firefox 中叫做 Gecko,在 Chrome 和 Safari 中都是基于 WebKit 开发的。本文我们主要介绍关于 WebKit 的这部分渲染引擎内容以及几个相关的问题。如需获取思维导图请猛戳GitHub博客浏览器工作大体流程...转载 2019-01-04 10:13:07 · 1789 阅读 · 0 评论 -
Form表单input回车提交问题
问题:文本框输入完成后点击回车页面刷新问题出在form上,当表单中只有一个文本框的时候获取焦点并点击回车之后会提交表单内容,就会发生刷新事件。发现问题所在就好解决问题了。现在有三种解决方案:1.全局禁用回车事件function document.onkeydown() { var e = event.srcElement; if (event.k...转载 2018-12-31 19:25:05 · 3162 阅读 · 0 评论 -
关于请求被挂起页面加载缓慢问题的追查(stalled 时间过长)
关于请求被挂起页面加载缓慢问题的追查缘起有一个Dashboard的页面大约有十几个图表,每一个图表是一个ajax请求。突然有一天改了页面中间几个图表的查询逻辑,导致ajax请求响应时间比较长。然后就出现了图表加载出现了顺序等待,后面本来很快就能加载出来的图表也必须等待上面的图表加载一些之后才能加载。可能的原因中间的图表加载慢是因为本来就是慢查询,可是为什么后面的图表正常必须等到...转载 2019-03-12 17:00:45 · 13455 阅读 · 1 评论 -
块级元素和行内元素的区别
块级元素和行内元素是布局最基本的两种元素,常见的块级元素有div,p,form,ul,ol,li等,常见的行内元素有span,strong,em等.块级元素和行内元素有什么区别呢?块级元素会独占一行,默认情况下,其宽度自动填满父元素宽度,行内元素不会独占一行,相邻的行内元素会排列在同一行里,直到一行排不下才会换行,其宽度随元素内容变化而变化.块级元素可以设置width,he原创 2014-12-12 16:35:34 · 2723 阅读 · 0 评论 -
Zindex和png
Z轴在元素设置position为absolute或relative后被激活,起大小由z-index设置,z-index越大,元素位置越靠上。如果多个元素的z-index值相同,那么html标签中后出现的元素会浮在先出现元素上面。多元素位置重叠,除了设置position为absolute或relative激活z-index外,还有一种特殊的情况它未激活z-index,但仍然让元素位置发生了重叠-原创 2014-12-15 23:05:04 · 2184 阅读 · 0 评论 -
html 的 meta 标签 简介及设定方式 .
meta是用来在HTML文档中模拟HTTP协议的响应头报文,meta 标签用于网页的与中。meta 的常用设置如下:1、用以说明页面生成工具(如Microsoft FrontPage 4.0)等;2、向搜索引擎说明网页的关键词;3、告诉搜索引擎站点的主要内容;转载 2011-08-18 15:54:28 · 2991 阅读 · 0 评论 -
做一名合格的前端开发工程师---各浏览器对页面外部资源加载的策略
这个总结来源于一次优化的请求,最初某个页面的加载十分缓慢,load事件迟迟无法触发,因此希望可以通过对静态文件分域名等方式对页面的外部资源进行优化,拿得load事件尽可能早地触发。于是我查看了页面的源码,并对外部资源进行了整理,基于下面2个理念画出了一个推测的瀑布图:浏览器对同一个域只能并发2个HTTP请求 – 网上盛传已久。 javascript文件的加载会阻塞浏览器其他资源的加载转载 2012-05-04 20:57:39 · 3528 阅读 · 0 评论 -
解决CSS背景图片闪动和重复加载的IE6BUG
标题没能准确的描述清楚问题,CSS背景图片出现闪动是因为这个样式加在了a:link a:hover等属性上。在IE6中表现为:鼠标移上链接再移开便会出现短暂的闪烁,从HttpWatch和Fiddler中很明显的看到这个鼠标动作加载了两次该背景图片,所以更准确的描述是具有链接属性的背景图片在IE6中闪动和重复加载。 调用JS的execCommand函数即可实现?转载 2012-05-04 21:14:14 · 4981 阅读 · 0 评论 -
IE6 margin 双倍边距解决方案
一、什么是双边距Bug?先来看图:margin 双倍边距解决方案" border="0" height="181" width="417" style="margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:0px; padding-top:0px; padding-right:0px; padding-b转载 2012-05-10 13:52:03 · 2886 阅读 · 0 评论 -
IE6的浮动float时3px问题
IE6和更早的版本会在一个浮动的列(橙色)和一个非浮动的列(灰色)之间插入一个3px的空间。这个3px空间的准确位置取决于几个条件。非浮动列没有固定的宽度或者高度。非浮动列有固定的宽度或者高度。当满足第1种条件时,非浮动列里会沿着浮动列有个3px的缩进,直到浮动终止(如下图,注意在灰色的左边有3px的空间)。 如果要修复这个BUG,要完成两个步骤。第一步转载 2012-05-17 15:17:47 · 3145 阅读 · 0 评论 -
雅虎再谈WEB前端网站优化
雅虎给出了优化网站加载速度的34条法则(包括Yslow规则22条) 详细说明,下载转发 ponytail 的译文(来自帕兰映像)。1.Minimize HTTP Requests 减少HTTP请求图片、css、script、flash等等这些都会增加http请求数,减少这些元素的数量就能减少响应时间。把多个JS、CSS在可能的情况下写进一个文件,页面里直接写入图片也是不好的做法,应转载 2012-06-08 12:15:18 · 5115 阅读 · 0 评论 -
IE6下z-index犯癫不起作用bug的初步研究
一、匆匆带过的概念关于CSS中层级z-index的定义啊什么的不是本文的重点,不会花费过多篇幅详细讲述。这里就简单带过,z-index伴随着层的概念产生的。网页中,层的概念与photoshop或是flash中层的概念是一致的。熟悉photoshop或是flash的应该知道,层级越高(图层越靠上),越在上面显示,如果层发生重叠,层级高的会覆盖层级低的,如果非透明或半透明,则会遮挡。在phot转载 2012-09-24 14:21:29 · 3130 阅读 · 0 评论 -
html5离线应用application cache
一、应用场景 我们通常使用浏览器缓存在用户磁盘上存储web单页,在用户再次浏览的时候已节省带宽,但即便这样,依然无法在没有Internet的情况下访问Web。为了让web应用程序在离线状态也能被访问。html5通过application cache API提供离线存储功能。前提是你需要访问的web页面至少被在线访问过一次。 离线本地存储和传统的浏览器缓存有什么不同呢?转载 2012-11-02 14:21:19 · 2949 阅读 · 0 评论 -
File input 的样式和文字的更改方法__适用于Firefox、IE等浏览器
每次写完的东西就忘了,下次用时还要重查资料重新写,这是今天写的一段测试代码,保留下来,记录给自已,同时分享给大家。目标:把下边的这个上传文件的input样式和文字改成一句话“上传图片”,同样实现上传图片的功能。难点1、不同浏览器的样式表现不同。2、文字如果只用click这样的方式是不可以的。3、input 上的文字是没有办法更改的。解决的方法转载 2012-10-26 17:05:32 · 4526 阅读 · 0 评论 -
CSS居中
最近在看编写高质量代码--Web前端开发修炼之道一书,发现里面有很多东西是以前不知道或则不熟悉的,希望把它记录下来.1.水平居中(1)文本、图片等行内元素的水平居中给父元素设置text-align:center可以实现文本、图片等行内元素的水平居中,代码如下:(2)确定宽度的块级元素的水平居中确定宽度的块级元素的水平居中是通过设置margin-left:auto和margi原创 2014-12-15 23:03:54 · 2197 阅读 · 0 评论 -
网站加载 Waiting (TTFB) 时间过长的原因和解决办法
关注网页前端性能的朋友,在优化网页性能的时候都会遇到网站加载Waiting(TTFB)时间过长的问题。对于没有优化过的 WordPress 站点,TTFB 时间经常超过了页面内容的下载时间,为用户带来不必要的等待时间。这个问题的主要原因是在服务器端,不熟悉服务器运维的朋友优化起来可能会不知道从哪里下手,今天我们就从各方面分析一下网站加载 Waiting (TTFB) 时间过长的原因和解决办法。...转载 2019-03-12 17:02:26 · 5620 阅读 · 0 评论