img中alt与title简单介绍



img中alt与title简单介绍。

alt与title的不同:

1、含义不同

alt是当图片不存在时的替代文字;title是对图片的描述与进一步说明

2、在浏览器中的表现不同

在firefox和ie8中,当鼠标经过图片时title值会显示,而alt的值不会显示;只有在ie6中,当鼠标经过图片时title和alt的值都会显示。

3、对于网站seo优化来说,title与alt还有最重要的一点:

搜索引擎对图片意思的判断,主要靠alt属性。所以在图片alt属性中以简要文字说明,同时包含关键词,也是页面优化的一部分。条件允许的话,可以在title属性里,进一[......]

Read more

border:none与border:0的区别是什么



border:none与border:0的区别是什么?border:none;与border:0;的区别体现有两点:一是理论上的性能差异二是浏览器兼容性的差异。

1、性能差异:
border:0; 把border设为“0”像素虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
border:none; 把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。

2、兼容性差异:
兼容性差异只针对浏览器IE6、IE7与标签button、input而[......]

Read more

IE6中a标签的伪类:hover的兼容问题

IE6中a标签的伪类:hover的兼容问题
IE6仅仅支持对a标签的hover状态,IE7+添加了对a以外其它标签的支持
一个关于:hover在IE6及更早浏览器下的问题:
很多人可能都已经知道了:hover在IE6及更早浏览器下的一些兼容问题。我主要是想说一下形如a:hover span{}这样的兼容问题。有的时候为了增加一些简单的动态效果,常常会借助:hover的帮忙,比如我们时常会令鼠标经过链接时改变文字的颜色。

 

a:hover{color:#F00;}
<a href=”###”>鼠标经过时改变我的颜色</a>

[......]

Read more

hasLayout IE浏览器bug的来源

hasLayout IE浏览器bug的来源。hasLayout是IE特有的一个属性。很多的ie下的css bug都与其息息相关。在ie中,一个元素要么自己对自身的内容进行计算大小和组织,要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时,它负责对自己和可能的后代元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容,而不是依赖于祖先元素来完成这些工作。

 默认 hasLayout=true 的标签:
<table> <td> <body> <img> <hr> &[......]

Read more

如何让IE6实现min-width效果

如何让IE6实现min-width效果?由于IE6不支持 min-width 属性,所以只能采用迂回的方法来实现。具体有以下四种方法:

方法一:

.wrapper {
width:auto !important;
width:500px;
min-width:500px;
}
方法二:

.wrapper {
min-width:500px;
_width:500px;
}
方法三:

.wrapper {
min-width:500px;
_width:expression((document.documentElement.clientWidth|[......]

Read more

详解IE6横向外边距叠加的BUG

详解IE6横向外边距叠加的BUG 。margin相关bug当中有一个bug是,在IE6下,浮动的块状元素当中,如果设置了横向的外边距,则外边距会加倍。但是,之前的这种说法并不足够严谨。接下来,详细的说说这个bug的触发条件。

IE6 横向外边距叠加

需要满足的几个基本条件是:

块状元素进行了浮动;

设置了横向的外边距。

如果块元素向左进行了浮动,设置的外边距是右外边距(margin-right),那么此bug不会被触发。同样的,为向右浮动的块元素设置了左侧的外边距也不会触发bug。

同一个行当中,如果为多个浮动的块元素设置了外边距,只有第一个块元素的外边距会发生叠加,如[......]

Read more

为什么要闭合浮动?

为什么要闭合浮动?CSS中的定位机制:普通流,浮动,绝对定位。

1.普通流: 普通流 (normal flow),或者称之为常规流。也是我们通常称呼的“文档流”。
 
2.浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局,只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样。
当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。
正是因为浮动的这种特性,导[......]

Read more

网页标签的书写规范介绍

网页标签的书写规范介绍。

  1. 标签书写在<>标识符中
  2. 标签需成对的出现
  3. 在起始标记当中可以书写属性/可以定义标签属性
  4. 标签互相嵌套,形成文档结构
  5. 文档所有信息必须在html当中,元信息放置在head当中,传递的信息和网页显示内容应当放置在body当中

一些小细节

  1. strong、em、i、b标签的区别
  2. img的src属性以及src中文件位置关系(路径)的确定
  3. 为何使用h1标签去嵌套标题,而不使用p标签(虽然效果也能够实现),为何用p标签去放置段落文本,而不是使用div
  4. h1-h6标签当中,哪些是最常用的?为什么呢?
  5. table当中,每[......]

Read more

html标签对SEO的影响有哪些?

html标签对SEO的影响有哪些?标签的基本嵌套以及标签属性的书写,对于网页的SEO是有一定的影响的。比如说,a标签需要添加title的属性,对于img标签需要添加alt和title的属性。对于标签的合理使用和嵌套,一方面能够有利于SEO,另一方面,能够避免掉在网页中出现布局等方面的问题。

有关标签的基本嵌套请查看《HTML标签嵌套规则》

有关SEO,应该说SEO是个大学问,对于前端来讲,只会涉及SEO中很少的一部分知识,请查看《解读SEO 黑帽白帽》

Read more

html如何清除浮动?

html如何清除浮动?在前面的《浮动元素有何性质》与《为何要闭合浮动》这两篇博文中,我们进行了详细的浮动元素特点以及清除浮动的必要性。今天我们来探讨一下,具体清除浮动可以采用哪些方法。最佳的选择方案是after伪元素清浮动。也是个人比较推荐的,具体如下。

 空标签清除浮动

.clear{clear : both;}

优点:通俗易懂,容易掌握。

缺点:会添加大量无语义空标签,结构与表现未分离,不利于维护。

 br标签清除浮动

优点:比空标签方式语义稍强,代码量较少。

缺点:结构与表现未分离,不推荐。

 父元素设置 overflow : hidden[......]

Read more