![](https://img-blog.csdnimg.cn/20201014180756923.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
前端页面基础(HTML/CSS)
文章平均质量分 91
似曾相识-
http://blog.csdn.net/liaozhongping,不积跬步无以至千里,不积小流无以成江海
展开
-
如何让一个行内元素(如一张图片)在div中居中
(1)第一种:用vertical-aligndiv class="method1"> span class="tiptop">span> img class="test" src="img/Dota2.jpg" alt="dota2">div>style>.method1{ text-align:center;}/*vertical-align:middle 是依赖原创 2017-09-15 00:02:48 · 23558 阅读 · 0 评论 -
HTTP请求返回状态码中301与302的状态码区别
一.官方说法301,302 都是HTTP状态的编码,都代表着某个URL发生了转移,不同之处在于:301 redirect: 301 代表永久性转移(Permanently Moved)。302 redirect: 302 代表暂时性转移(Temporarily Moved )。这是很官方的说法,那么它们的区别到底是什么呢?二.现实中的差异2.1.对于原创 2015-09-18 10:37:12 · 20084 阅读 · 0 评论 -
使用CSS样式表格式化XML文档
1、XML中引入CSS样式。 在XML中引入CSS样式表有两种方法。一种是在XML文档中直接嵌入CSS样式;另一种则是外部引入(似乎在WEB中很多引入的方式都有这两种)。在XML中直接嵌入CSS样式的方法如下: 1 xml version="1.0" encoding="utf-8"?> 2 3 xml> 4 5 book{ 6转载 2015-07-22 23:41:54 · 2775 阅读 · 1 评论 -
meta的使用小结
<meta name= "Generator " content= " ">作用meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的<head>与</head>中,meta 标签的用处很多。meta 的属性有两种:name和http-equiv。name属性主要用于描述网页,对应于content(网页内容),以便于搜索引擎机器人查找、分类(原创 2015-09-20 00:33:33 · 328 阅读 · 0 评论 -
Ajax小结
什么是ajax?W3School中给ajax的定义是: 1、AJAX = 异步 JavaScript 和 XML。 2、AJAX 是一种用于创建快速动态网页的技术。 3、通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。 4、传统的网页(不使用 AJAX)如果需要更新内容,原创 2015-09-28 01:47:09 · 365 阅读 · 0 评论 -
XHTML与HTML的区别
XHTML的由来:XHTML就是将HTML4依照XML1.0形式重新制定。 一、XHTML文件必须是正规文件正规文件是指满足以下条件的文件:(1)包含一个或多个元素,但仅有一个根元素,而且XHTML文件的根元素一定是...标签。 (2)所有的元素均必须有结束标签,并遵守正确的嵌套顺序,不能有重叠的情况 二、标签与属性必须是小原创 2015-07-24 00:25:35 · 725 阅读 · 0 评论 -
常见CSS布局疑难问题及其解决
常见CSS布局疑难问题及其解决(1)浏览器的默认样式因为不同浏览器的默认页面效果的设置是不同的。如:页边距: IE浏览器默认为body元素的margin-left属性定义,默认值为10px 但对于FF浏览器来说,默认为body元素的padding-left属性定义,默认为8px鼠标指针: IE默认为cursor属性定义,值为hand;原创 2015-07-24 00:26:40 · 942 阅读 · 0 评论 -
CSS Reset方法及它的滥用
Reset是什么?点击Reset后,有些东西没有被重置的原因?(1)CSS Reset通常情况下,它也被写成Reset CSS,即重设浏览器的样式。在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小。但并不是所有的浏览器都使用一样的数值,所以,有了CSS Reset,以让网页的样式在各浏览器表现一致。比如:*{padding:0; margi转载 2015-07-24 00:42:29 · 670 阅读 · 0 评论 -
IE7浏览器下CSS属性选择器二三事
一、为何专门说起IE7以前,或者说数年前,我们从事桌面端网页开发的时候,基本上都还要兼顾IE6浏览器, 即使有些特性,IE7支持,我们也会忽略之。于是,我们会不自然地把IE6和IE7浏览器归为一路货色,研究的多半是两个浏览器共性的东西,比方说haslayout之类的。但是,最近1~2年,至少我个人所从事的桌面PC项目都不需要管IE6浏览器(0.3%)了,但是,还是要关心IE7浏览器转载 2015-10-31 15:54:35 · 596 阅读 · 0 评论 -
使用Div+CSS布局设计网站的优点
网页设计业界越来越关注DIV+CSS的标准化设计,大到各大门户网站,小到不计其数的个人网站,在Div+CSS标准化的影响下,网页设计人员已经把这一要求作为行业标准。那么什么是Div+CSS标准?Div+CSS的标准化设计到底有什么好处? Div 全称 division 意为“区分”使用 DIV 的方法跟使用其他 tag 的方法一样。 Very excellent w原创 2015-10-31 16:05:47 · 1248 阅读 · 0 评论 -
常见浏览器兼容性问题与解决方案
所谓的浏览器兼容性问题,是指因为不同的浏览器对同一段代码有不同的解析,造成页面显示效果不统一的情况。在大多数情况下,我们的需求是,无论用户用什么浏览器来查看我们的网站或者登陆我们的系统,都应该是统一的显示效果。所以浏览器的兼容性问题是前端开发人员经常会碰到和必须要解决的问题。在学习浏览器兼容性之前,我想把前端开发人员划分为两类:第一类是精确按照设计图开发的前端开发人员,可以转载 2015-09-21 00:10:40 · 717 阅读 · 0 评论 -
HTTP协议的头信息详解
HTTP协议的头信息详解HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送WWW方式的数据,关于HTTP 协议的详细内容请参 考RFC2616。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求,请求头包含请求的方法、URI、协议版本、以及包含请求修饰符、客户 信息和内容的类似于MIME的消息结构。服务器以一个状态行作为响应,相应的内转载 2015-07-27 06:01:36 · 759 阅读 · 0 评论 -
bfcache往返缓存
Firefox和Opera有一个新特性,名叫“往返缓存”(back-forward cache,或bfcache),可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据,还保存了DOM和JavaScript的状态;实际上是将整个页面都保存在了内存里。如果页面位于bfcache中,那么再次打开该页面就不会触发load事件。尽管由于内存中保存了整个页面的状态,原创 2015-07-27 22:45:26 · 2821 阅读 · 0 评论 -
前端CSS规范大全
一、文件规范1、文件均归档至约定的目录中。具体要求通过豆瓣的CSS规范进行讲解:所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中:基本样式库 /css/core通用UI元素样式库 /css/libJS组件相关样式库 /css/ui业务类的CSS是指和具体产品相关的文件,放在如下目录中:读书 /css/boo原创 2015-07-27 22:45:53 · 385 阅读 · 0 评论 -
语义元素
一个语义元素能够清楚的描述其意义给浏览器和开发者。无语义 元素实例: 和 - 无需考虑内容.语义元素实例: , , and - 清楚的定义了它的内容.HTML5中新的语义元素许多现有网站都包含以下HTML代码: , , 或者 , 来指明导航链接, 头部, 以及尾部.HTML5提供了新的语义元素来明确一个Web页面的不同部分:语义元素的分转载 2015-07-26 10:52:10 · 1181 阅读 · 0 评论 -
js window对象方法属性整理
window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval moveBy moveTo resizeBy resizeTo scrollBy scrollTo find back forward原创 2016-04-10 18:21:13 · 1339 阅读 · 0 评论 -
常用的ie6,ie7,ie8 css bug兼容性解决
断断续续的在开发过程中收集了好多的bug以及其解决的办法,都在这个文章里面记录下来了!希望以后解决类似问题的时候能够快速解决,也希望大家能在留言里面跟进自己发现的ie6 7 8bug和解决办法!1:li边距“无故”增加任何事情都是有原因的,li边距也不例外。先描述一下具体状况:有些时候li边距会突然增 加很多,值也不固定(只在IE6/IE7有这种现象),让人摸不着头转载 2015-07-26 10:51:01 · 561 阅读 · 0 评论 -
Semantic-Versioning 语义化版本控制
一个标准的版本号必须是X.Y.Z的形式,X是主版本,Y是副版本,Z是补丁版本。.X: 代表发生了不兼容的API改变Y: 代表向后兼容的功能性变化Z: 代表向后兼容bug fixes即:版本格式:主版本号.次版本号.修订号,版本号递增规则如下:主版本号:当你做了不兼容的 API 修改,次版本号:当你做了向下兼容的功能性新增,修订号:当你转载 2017-07-24 14:55:35 · 471 阅读 · 0 评论 -
关于base64编码的原理及实现
我们的图片大部分都是可以转换成base64编码的data:image。 这个在将canvas保存为img的时候尤其有用。虽然除ie外,大部分现代浏览器都已经支持原生的基于base64的encode和decode,例如btoa和atob。(将canvas画布保存成img并强制改变mimetype进行下载,会在下一篇记录)但是处于好奇心,还是驱使我去了解下base64编码的原理。以便也在不支持转载 2017-03-31 12:18:52 · 414 阅读 · 0 评论 -
window.external的使用
由于工作中有很多时候需要用到window.external,以前一直稀里糊涂的,今天又被人问到,于是突击学习了一下,记下备忘。--------------------------------------我们在js中可以通过window.external.myfunc()来调用浏览器提供的外部方法myfunc。可以让网页内的js脚本中能调用C++代码。IE的已默认实现了一些外部方转载 2016-08-01 10:44:58 · 12090 阅读 · 0 评论 -
document.cookie
设置cookie每个cookie都是一个名/值对,可以把下面这样一个字符串赋值给document.cookie:document.cookie="userId=828";如果要一次存储多个名/值对,可以使用分号加空格(; )隔开,例如:document.cookie="userId=828; userName=hulk";在cookie的名或值中不能使用分号(;)、逗号(,)、转载 2016-07-28 11:29:26 · 407 阅读 · 0 评论 -
解决ie6png透明的方法小结
PNG格式比起GIF来表现色彩更丰富,特别是表现渐变以及背景透明的渐变要比GIF格式出色很多,目前,最新的浏览器基本上都支持PNG格式。(1)使用IE特有的expression.pngImg { background:url(image.png); _background:url(image.gif);} 原理:上文的_号,目前IE7,8以及Firefox浏览器等都不支持此CSS语转载 2016-07-25 20:26:53 · 658 阅读 · 0 评论 -
PNG8格式图片详解
最近搜索了一下有关PNG8格式图片的详细解析。发现信息比较零散,也存在有某些争议(当然了,不排除本人搜索功力差的因素)。有说PNG8格式图片是不 支持半透明的,也有持反对意见的。所有才有了写这篇文章的想法。有什么说得不对的,也欢迎大家批评指正。废话就说到这里,直接进入正题吧。首先我们来理解一下什么叫Alpha透明和索引色透明。 Alpha透明:Alpha的数值范围为从0(黑色)到转载 2016-07-25 17:01:49 · 2798 阅读 · 0 评论 -
不规则混排实现(实现图文环绕的效果)
图文环绕方式的实现: 法一:(将图像一幅图像用Photoshop切割成若干个小的图片,然后设置小图片浮动显示)”text/css”>.image{float:left;clear:left;margin-right:2px;padding:0;}”main”>”image”>”../i原创 2015-07-24 00:36:28 · 2032 阅读 · 0 评论 -
电子商务EC模式
名词解释:B2B:企业间的EC(Business-to-Business)B2C:企业对个人用户的EC(Business-to-Customer)C2C:个人对个人的EC(Consumer to CustomerConsumer,电子商务的专业用语)C2B:个人对商家的EC(Consumer to Business)M2C:厂家对个人的EC(Micro-to-Customer)原创 2016-04-24 18:19:19 · 2861 阅读 · 0 评论 -
favicon.ico 的作用(收藏夹的图标文件)
在WEB服务器总是经常看到"GET /favicon.ico HTTP/1.1" 404 288 "-" "Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; Maxthon)",以前一直没有在意,以为是网页做的不好,修改别人的网页导致某处留下了这个图片的调用。 今天在google搜索一下,才发现这个favicon.ico的转载 2015-07-26 10:48:00 · 1456 阅读 · 0 评论 -
<meta>标签总结
前言meta是html语言head区的一个辅助性标签。也许你认为这些代码可有可无。其实如果你能够用好meta标签,会给你带来意想不到的效果,meta标签的作用有:搜索引擎优化(SEO),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!html的meta总结meta标签的组成:meta标签共有两个属性,它们分别转载 2015-06-19 23:08:16 · 826 阅读 · 0 评论 -
“<meta http-equiv="X-UA-Compatible" content="IE=7, edge"/>” 的意义
意思是将IE8用IE7进行渲染,使网页在IE8下正常显示X-UA-Compatible是针对ie8新加的一个设置,对于ie8之外的浏览器是不识别的,这个区别与content="IE=7"在无论页面是否包含指令,都像是使用了 Windows Internet Explorer 7的标准模式。而content="IE=EmulateIE7"模式遵循指令。对于多数网站来说,它是首选的兼容性模原创 2015-06-19 23:09:07 · 568 阅读 · 0 评论 -
html元素水平居中、垂直居中、水平垂直居中于其父级元素的方法
html元素 水平居中 于 其父级元素的方法: 方法1:代码如下: 左右居中方法1 代码如下:html,body,div{ margin:0; padding:0; height:100%; position:relative; } .wrap{ width:400px; height:300原创 2015-07-06 07:34:32 · 678 阅读 · 0 评论 -
标准盒子模型和IE盒子模型
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型:从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 从上图可以看到 IE转载 2015-07-06 07:38:39 · 545 阅读 · 0 评论 -
HTML <!DOCTYPE> 标签
定义和用法 声明必须是 HTML 文档的第一行,位于 标签之前。 声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。HTML5 不基于 SGML,所以不需要引用 DTD。转载 2015-07-06 07:40:11 · 759 阅读 · 0 评论 -
标准盒子模型和IE盒子模型
盒子模型是css中一个重要的概念,理解了盒子模型才能更好的排版。其实盒子模型有两种,分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同,先来看看我们熟知的标准盒子模型:从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content,并且 content 部分不包含其他部分。 从上图可以看到 IE原创 2016-04-10 19:12:30 · 6802 阅读 · 0 评论 -
CSS 浮动的16条规则
1.浮动元素会从文档正常流中删除,但它仍会影响布局2.浮动非替换元素必须为其指定width,否则元素的width会趋于0而导致浮动元素不能完整显示3.一旦元素具有了浮动属性,它便成为了一个块级元素。4.浮动元素的左右外边界不能超出包含块的左右内边界5.浮动元素永不会重叠6.浮动元素不会超过容器的上padding7.后浮动的元素永不会超过先浮动元素的顶端8.浮动元原创 2015-07-27 22:46:09 · 770 阅读 · 0 评论 -
link rel=canonical 用法
rel canonical 属性值 -- rel="canonical"属性让搜索引擎知道当前网站中的重复或相似网页中,哪一个页面才是站长想让其抓取与收录的canonical属性值通常在,rel属性中出现引用网址:http://www.dreamdu.com/xhtml/rel_canonical/canonical从功能上来讲,可理解为301永久重定向的辅助功能canonical可以原创 2015-09-23 02:55:54 · 1625 阅读 · 0 评论 -
Cookie的使用小结
在开发网站应用程序的过程中,使用cookie记录用户的一些信息是比较常用的一种方法,而cookie的使用也非常简单。一、Cookie是通过HttpServletResponse的addCookie方法加入到Set-Cookie应答头中的例如:Cookie userCookie = new Cookie("user", "admin"); response.a转载 2015-08-02 09:25:08 · 847 阅读 · 0 评论 -
常见的块状元素与内联元素小结
块状元素内联元素address – 地址blockquote – 块引用center – 举中对齐块dir – 目录列表div – 常用块级容易,也是CSS layout的主要标签dl – 定义列表fieldset – form控制组form – 交互表单h1 – 大标题h2 – 副标题h3 – 3级标题h4 – 4级标题h5 –原创 2015-08-02 09:28:51 · 709 阅读 · 0 评论 -
CSS 哪些属性默认会继承, 哪些不会继承
不可继承的:display、margin、border、padding、background、height、min-height、max-height、width、min-width、max-width、overflow、position、left、right、top、bottom、z-index、float、clear、table-layout、vertical-align、page-break原创 2015-08-02 09:29:57 · 4481 阅读 · 0 评论 -
浏览器渲染原理及解剖浏览器内部工作原理
1、简单地说,页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程。先来大致了解一下浏览器都是怎么工作的: 1. 用户输入网址(假设是个html页面,并且是第一次访问),浏览器向服务器发出请求,服务器返回html文件; 2. 浏览器开始载入html代码,发现标签内有一个标签引用外部CSS文件; 3. 浏览器又发出CSS文件的请求,服务器返回这个CSS文转载 2016-03-31 17:41:08 · 12022 阅读 · 0 评论 -
style,currentStyle,runtimeStyle,getComputedStyle的区别及用法
1、样式表有三种方式:内嵌样式(inline Style) :是写在html标签里面的。内部样式(internal Style Sheet):是写在HTML的头部。外联样式表(External Style Sheet):是用link链接到外部css文件。style:标准的样式!可用来查询由html标签的style属性指定的样式。currentStyle:可用来查询/修改原创 2016-03-31 13:03:51 · 1508 阅读 · 0 评论 -
web前端开发必备压缩工具整理
影响网站打开时间有两个因素,一个是网页加载速度,另一个是网站页面的大小。网站加载速度与用户所处的网络环境及主机性能有关,而网站页面的大小则由网站开发者决定,最主要的就是web前端开发工程师的工作。本文的重点就是如何压缩网站页面,以减少页面加载时间。1. 图片压缩相对与文本来说,图片是相当占用空间的。压缩图片是重中之重。图片压缩工具推荐:Shrink-O-MaticS转载 2015-08-02 23:06:52 · 4938 阅读 · 0 评论