XHTML 与 HTML 之间的差异

通过开始编写严格的 HTML,你可以为 XHTML 做好准备。

如何为 XHTML 做好准备

XHTML 与 HTML 4.01 标准没有太多的不同。

所以将你的代码升级至 4.01 是个不错的开始。

另外,你应该马上使用小写字母编写HTML代码,同时绝不要养成忽略类似 </p> 标签的坏习惯。

祝您可以愉快地编码!

最主要的不同:

  • XHTML 元素必须被正确地嵌套。
  • XHTML 元素必须被关闭。
  • 标签名必须用小写字母。
  • XHTML 文档必须拥有根元素。

元素必须被正确地嵌套

在 HTML 中,某些元素可以像这样彼此不正确地嵌套:

<b><i>This text is bold and italic</b></i>

在 XHTML 中,所有的元素必须像这样彼此正确地嵌套:

<b><i>This text is bold and italic</i></b>

提示:在嵌套列表中一个容易犯的错误,是忘记内部列表必须位于 li 元素中,就像下面这样:

这是错误的:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  <li>Milk</li>
</ul>

这是正确的:

<ul>
  <li>Coffee</li>
  <li>Tea
    <ul>
      <li>Black tea</li>
      <li>Green tea</li>
    </ul>
  </li>
  <li>Milk</li>
</ul>

注意:在正确代码的例子中,我们在 </ul> 之后插入了一个 </li> 标签。

XHTML 元素必须被关闭

非空标签必须使用结束标签。

这是错误的:

<p>This is a paragraph
<p>This is another paragraph

这是正确的:

<p>This is a paragraph</p>
<p>This is another paragraph</p>

空标签也必须被关闭

空标签也必须使用结束标签,或者其开始标签必须使用/>结尾。

这是错误的:

A break: <br>
A horizontal rule: <hr>
An image: <img src="happy.gif" alt="Happy face">

这是正确的:

A break: <br />
A horizontal rule: <hr />
An image: <img src="happy.gif" alt="Happy face" />

XHTML 元素必须小写

XHTML 规范定义:标签名和属性对大小写敏感。

这是错误的:

<BODY>
<P>This is a paragraph</P>
</BODY>

这是正确的:

<body>
<p>This is a paragraph</p>
</body>

XHTML 文档必须拥有一个根元素

所有的 XHTML 元素必须被嵌套于 <html> 根元素中。其余所有的元素均可有子元素。子元素必须是成对的且被嵌套在其父元素之中。基本的文档结构如下:

<html>
<head> ... </head>
<body> ... </body>
</html>

CSS让文字、图片及input单行水平对齐的简单方法

CSS单行图文水平垂直对齐方法:

CSS样式:
div img,div input{ vertical-align:middle}

HTML代码:
<div>
<label>姓名:</label><input typt="text" /><img src="xxx.jpg" width=50 height=20 alt="验证码" />
</div>

<div>
<img src="xxx.jpg" alt="注册" /> <a href="#">取回密码"</a>
</div>

这时只要我们给图片加上垂直对齐的属性,后面的文字连接会相应的与图片水平对齐,即: img{     vertical-align:middle;}。当垂直对齐属性为“top“的时候,文字链与图片顶部水平对齐,如次类推。

如果是input与文字链放在一起,在ff和ie7、ie8中文字链都与图片顶部水平对齐,但是在ie6中却是底部对齐,同样我们可以给input添加垂直对齐属性来达到各个浏览器显示效果

CSS 跨浏览器透明 border

在先进的浏览器中,让一个元素的 border 变为透明,只需要把 border 的颜色改为 transparent ,例如:

#id {

border-right: #0F0 solid 400px;

border-bottom: transparent solid 400px;

}

上面的代码就可以生成一个直角等腰三角形,但在 IE6和7 中,你需要这样写:

#id {

width: 400px;

height: 400px;

width:0;

height:0;

border-right: #0F0 solid 400px;

border-bottom-style: dashed;

}

来源:http://www.codecto.com/2010/10/cross-browser-transparent-border/

列表中显示文字强制不换行,大于li宽度自动隐藏...

li{
display:block;
font-size:14px;
height:16px;
line-height:16px;
width:330px;
white-space:nowrap;     //强制不换行
overflow:hidden;            //自动隐藏文字                                                                            
text-overflow: ellipsis;    //文字隐藏后添加省略号
-o-text-overflow:ellipsis; //适用于opera浏览器
}

涉及关键属性的语法:

1、语法:
text-overflow : clip | ellipsis
参数:
clip : 不显示省略标记(...),而是简单的裁切
ellipsis : 当对象内文本溢出时显示省略标记(...)

2、
语法:
overflow : visible | auto | hidden | scroll
参数:
visible : 不剪切内容也不添加滚动条。假如显式声明此默认值,对象将被剪切为包含对象的window或frame的大小。并且clip属性设置将失效
auto : 此为body对象和textarea的默认值。在需要时剪切内容并添加滚动条
hidden : 不显示超过对象尺寸的内容
scroll : 总是显示滚动条

3、
语法:
white-space : normal | pre | nowrap
参数:
normal : 默认处理方式
pre : 用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。参阅pre对象
nowrap : 强制在同一行内显示所有文本,直到文本结束或者遭遇br对象。参阅td,div等对象的nowrap属性(特性)

css sprite是什么,怎么用css sprite

一、CSS Sprites简介

CSSSprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

加速的关键,不是降低重量,而是减少个数。传统切图讲究精细,图片规格越小越好,重量越小越好,其实规格大小无所谓,计算机统一都按byte计算。客户端每显示一张图片都会向服务器发送请求。所以,图片越多请求次数越多,造成延迟的可能性也就越大。

二、CSS Sprites原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

三、CSS Sprites优缺点

利用CSS Sprites能很好地减少了网页的http请求,从而大大的提高了页面的性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;

CSS Sprites能减少图片的字节,曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

解决了网页设计师在图片命名上的困扰,只需对一张集合的图片上命名就可以了,不需要对每一个小元素进行命名,从而提高了网页的制作效率。

更换风格方便,只需要在一张或少张图片上修改图片的颜色或样式,整个网页的风格就可以改变。维护起来更加方便。

诚然CSS Sprites是如此的强大,但是也存在一些不可忽视的缺点,如下:

在图片合并的时候,你要把多张图片有序的合理的合并成一张图片,还要留好足够的空间,防止板块内不会出现不必要的背景;这些还好,最痛苦的是在宽屏,高分辨率的屏幕下的自适应页面,你的图片如果不够宽,很容易出现背景断裂;

CSS Sprites在开发的时候比较麻烦,你要通过photoshop或其他工具测量计算每一个背景单元的精确位置,这是针线活,没什么难度,但是很繁琐;幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具,虽然还有一些使用上的不灵活,但是已经比photoshop测量来的方便多了,而且样式直接生成,复制,拷贝就OK!

CSS Sprites在维护的时候比较麻烦,如果页面背景有少许改动,一般就要改这张合并的图片,无需改的地方最好不要动,这样避免改动更多的css,如果在原来的地方放不下,又只能(最好)往下加图片,这样图片的字节就增加了,还要改动css。

CSS Sprites非常值得学习和应用,特别是页面有一堆ico(图标)。总之很多时候大家要权衡一下利弊,再决定是不是应用CSS Sprites。

四、CSS Sprites的使用

有几篇关于CSS Sprites的文章,基本上把其原理和机制说明得很清楚。

What Are CSS Sprites?

How to create CSS sprites

Creating Rollover Effects with CSS Sprites

Building a Dynamic Banner with CSS Sprites

High Performance Web Sites中关于CSS Sprites的内容3.2. CSS Sprites

五、CSS Sprite的例子

.bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

引用该类 .. 然后在元素中逐一定义背景坐标 .. 以下为关键属性 ..

#ico1 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

#ico2 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

#ico3 {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

.nav {width:容器大小;height:容器高度;background-position:X坐标 Y坐标}

必须要限定容器大小符合背景图元素位置 .. 另外 .. XY轴是相对于整张图片的左上角来算的 .. 所以取值一定要算清楚

六、CSS Sprites的问题

由于IE6存在的background的flicker问题IE6/Win, background image on , cache=‘check every visit’: flicker!,有人针对此问题提出了解决方案Fast Rollovers Without Preload

关于IE6的flicker问题,fivesevensix上有一篇很不错的研究文章Minimize Flickering CSS Background Images in IE6

另外:brunildo的CSS tests and experiments是关于css各种功能不错的参考手册和测试工具。

span 换行与不换行

    span 换行与不换行
在设置span里面的内容有背景的时候会遇到如下问题:
1、设为display:block可以解决有背景,但换行,因block属性原因,必会换行
2、不用display:block背景便不会全部显示出来
3、float:left也不好用
4、有的只好用定位,较麻烦
解决办法:
把display设置为:inline-block

解决HawkHost主机安装phpwind连接数据库出错问题

今天在群里看到有人在老鹰主机安装pw出错,就帮忙看了下,后来研究了后,发现错误的原因是共享服务器上安装了Mod security,因此当网址中包含一些敏感字符时,就会被mod security阻止,从而就出现了刚才的错误提示。

解决方法:

在.htaccess文件中添加以下代码即可
 

1
2
SecFilterEngine Off
SecFilterScanPOST Off

网站根目录没有.htaccess文件的,可以自己创建一个,保存为.htaccess然后上传到网站根目录即可。 

禁止网站显示文件目录列表--索引管理器

开通博客后,几天后发现google收录了几十,感觉有点奇怪,我总共只写了两三篇,查看收录的页面,发 现了问题,原来是网站显示文件目录列表,这种情况对网站安全有很大隐患,所以想办法解决。
进入空间服务器管理面板(我的主机是cpanel面板),找到了索引管理器

看下解释:

索引管理器
通过索引管理器你可以定制在网络上查看目录的方式。 你可以选择默认样式、无索引,或者两种
索引类型。 如果不希望别人查看到你目录中的文件,则选择无索引。

直接进入修改所在目录的索引即可。

或者,在你要修改的网站根目录下

找到.htaccess 文件,记事本打后添加一行。输入:Options -Indexes  即可。

以上为Linux主机下修改方法。

注意:在索引管理器修改和修改.htaccess文件的不同是:Options -Indexes  这句未另起一行,可能在有些网站系统下会出现错误,请知悉。