标点符 » HTML

使用html5shiv让IE6~8支持HTML5

标点符 — Fri, 02 Sep 2011 10:11:06 +0000

越来越多的站点开始使用 HTML5 标签。但是目前的情况是还有很多人在使用IE6，IE7，IE8。为了让所有网站浏览者都能正常的访问网站，解决方案就有下面两个：

为网站创建多套模板，通过程序对User-Agent的判断给不同的浏览器用户显示不同的页面，比如优酷网就是采用的这种模式。
使用Javascript来使不支持HTML5的浏览器支持HTML标签。目前很多网站采用的这种方式。

针对IE浏览器比较好的解决方案是html5shiv。htnl5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。让CSS 样式应用在未知元素上只需执行 document.createElement(elementName) 即可实现。html5shiv就是根据这个原理创建的。

html5shiv的使用非常的简单，考虑到IE9是支持html5的，所以只需要在页面head中添加如下代码即可：

关于IE条件注释，请参考：IE条件注释详解。

html5shiv官方网址：http://code.google.com/p/html5shiv/

HTML中的IE条件注释

标点符 — Thu, 03 Feb 2011 16:23:02 +0000

IE条件注释是一种特殊的HTML注释，这种注释只有IE5.0及以上版本才能理解。比如普通的HTML注释是：

而只有IE可读的IE条件注释是：

“非IE条件注释”：

 non-IE HTML Code

“非特定版本IE条件注释”（很少用到）：

Code for browsers that match the if condition

简而言之，除了“Windows上的IE”之外的所有浏览器都会认为条件注释只是一段普通的HTML注释。你不能在CSS代码中使用条件注释。IE条件注释是很有用的对IE隐藏或者展现特定代码的方法，比起在CSS中用诡异的_/制造bug，利用IE条件注释来写CSS “hacks”是更合理的方法。通俗点，条件注释就是一些if判断，但这些判断不是在脚本里执行的，而是直接在html代码里执行的。

条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。
IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。
条件注释使用的是HTML的注释结构，因此他们只能使用在HTML文件里，而不能在CSS文件中使用。

从语法上看这是相当合法的普通HTML注释。任何浏览器都会认为之间的部分是注释从而忽略它。但是IE也会看到其中[if IE]>，从而开始解释接下来的代码直到遇到

通过“比较操作符”可以更灵活地对IE版本进行控制，用法是在IE前面加上“比较操作符”。合法的操作符如下：

lte：就是Less than or equal to的简写，也就是小于或等于的意思。
lt ：就是Less than的简写，也就是小于的意思。
gte：就是Greater than or equal to的简写，也就是大于或等于的意思。
gt ：就是Greater than的简写，也就是大于的意思。
! ：就是不等于的意思，跟javascript里的不等于判断符相同

示例:

/ 如果IE版本大于5.5 /
/ 如果IE版本小于等于6 /
/ 如果浏览器不是IE /

虽然看上去当你第一次使用条件注释的时候会更费时，但当你以后调试你的CSS的时候，就会发现非常方便。用条件注释你只需要写一遍HTML注释，而用bug你需要为每一条规则都写上又长又丑的代码，而且还经常是为了改变其他的hacks而写的hacks。除此之外条件注释对于不支持它的任何浏览器而言都是合法的HTML注释。以下为条件注释与CSS hacks的一些区别：

Hacks是基于浏览器的bug，而这些bug最终可能会被修复。
条件注释是基于IE特定代码，这种识别机制任何时候都不会被移除。
每一个浏览器都能看见你的hacks，或许下一个版本或者一个新的浏览器会在你的hacks代码上出错。
只有IE才能看到条件注释，通过额外的“IE文件”来影响页面，其他浏览器根本就不会下载它。
Hacks不能确保对哪些浏览器生效而对哪些不，用的hacks越多，代码越混乱。
条件注释利用版本匹配使得作者可以容易地对特定版本写代码。

参考资料：http://haslayout.net/condcom

http://msdn.microsoft.com/en-us/library/ms537512.aspx

HTML Purifier:基于php的HTML过滤器

标点符 — Mon, 05 Apr 2010 15:09:04 +0000

HTML Purifier是一套符合W3C标准的HTML过滤器，不只可以移除恶意的代码(XSS)，还可以让网页内容符合W3C标准。对web programming的人来说,，XSS很早以前就不是新闻，不管是为了XSS、SQL injection或是其他，任何user input都不应该被信任，在使用前都应该先被validate或是filter。

HTML Purifier是基于php 5所编写的HTML过滤器，支持自定义过滤规则，还可以把不标准的HTML转换为标准的HTML，是WYSIWYG编辑器的福音。

官方网站：http://htmlpurifier.org/

WordPress插件：http://wordpress.org/extend/plugins/html-purified/

《HTML与XHTML权威指南（第五版）》PDF电子书下载

标点符 — Sat, 15 Aug 2009 15:14:08 +0000

书名：HTML与XHTML权威指南(第五版)

HTML与XHTML权威指南简介：

《HTML与XHTML权威指南》将HTML、XHTML、级联样式表(CSS)、网页标准及浏览器兼容性等全部介绍给了读者。作者从各种标准和浏览器特性出发，在创建网页方面给读者提出了很多建议，最终使网页能被更广泛的浏览者和浏览平台所接受。和学习其他任何语言一样。大部分都是从示例开始学习的。通过学习别人的网页和程序，可以使学习过程变得简单而且有趣，然而在模仿中很容易养成坏习惯，自己还有可能将它当做好习惯接受。掌握任何一门计算机语言的最好方式是，找一本内容全面的参考书，全面系统的去分析其中的语法、语义和各种变化，自己区分好的和不好的用法。本书作者详细讲述了两种标准(HTML和XHTML)的所有元素，解释了每个元素的工作方式，以及如何与其他元素相互作用。另外还有很多有关样式的技巧。

《HTML与XHTML权威指南》一书的新版本包含了最新的HTML、XHTML和CSS2标准，并向读者显示了以下方法。
1.使用样式表控制页面外观
2.处理用编程手段生成的HTML
3.创建从简单到复杂的表格
4.使用框架调整文档的布局
5.设计和构建交互式表单及动态文档
6.图像、声音文件、视频、applet和JavaScript的插入
7.创建在各种浏览器上都可以正常显示的网页
8.过渡到XHTML
其中还包括一张列出HTML与XHTML标签的快速参考卡片。

HTML与XHTML权威指南目录：

前言
第1章　HTML，XHTML和万维网
　1.1　因特网
　1.2　遵循因特网规则
　1.3　HTML和XHTML的历史　
　1.4　HTML和XHTML的局限性
　1.5　标准和扩展
　1.6　Web设计工具
第2章　快速启动
　2.1　编写工具
　2.2　一个最简单的HTML文档
　2.3　内嵌的标签　
　2.4　HTML的“骨架”
　2.5　HTML和XHTML文档的“皮肉”
　2.6　文本
　2.7　超链接
　2.8　特殊的图像
　2.9　列表、可搜索文档和表单　
　2.10　表格　
　2.11　框架
　2.12　样式表和JavaScript
　2.13　继续学习
第3章　剖析HTML文档
　3.1　外观的欺骗性　
　3.2　HTML文档的结构
　3.3　标签和属性
　3.4　格式良好的文档和XHTML
　3.5　文档的内容
　3.6　HTML和XHTML文档的元素
　3.7　文档的头部
　3.8　文档的主体　
　3.9　编辑标记
　3.10　标签
第4章　文本基础
　4.1　部分和段落
　4.2　标题
　4.3　改变文本的外观和含义　
　4.4　基于内容的样式标签　
　4.5　物理样式标签　
　4.6　精确的间距和布局
　4.7　块引用
　4.8　地址
　4.9　特殊字符的编码
　4.10　HTML中已废弃的扩展字体处理
第5章　分隔线、图像和多媒体
　5.1　水平分隔线
　5.2　把图像插入文档
　5.3　文档颜色和背景图像
　5.4　背景音乐
　5.5　活动文字
　5.6　其他多媒体内容
第6章　链接和Web
第7章　格式化列表
第8章　级联样式表（CSS）
第9章　表单　
第10章　表格
第11章　框架
第12章　可执行的内容
第13章　动态文档
第14章　移动设备
第15章　XML
第16章　XHTML
第17章　技巧、诀窍和微妙
附录一　HTML语法
附录二　HTML/XHTML标签快速参考
附录三　CSS属性快速参考
附录四　HTML4.01 DTD
附录五　XHTML1.0 DTD
附录六　字符实体
附录七　颜色名和值
附录八　Netscape布局扩展

电驴下载：HTML与XHTML权威指南(第五版)PDF高清版电子书

《精通CSS与HTML设计模式》PDF电子书下载

标点符 — Thu, 30 Jul 2009 14:35:39 +0000

书名：精通CSS与HTML设计模式

简介

精通CSS与HTML设计模式是一部非常实用的CSS 与HTML（XHTML）手册。由于浏览器不兼容，Web开发至今仍然是一项繁琐的工作。书中包含了350 多种可以立即使用的设计模式（涉及文本、背景、边框、图片、表格、布局等多方面），并介绍了每种模式的原理和使用。每种设计模式、示例和源代码都经过了精心设计，可以很方便地在实际项目中使用。通过阅读此书，可大大提高读者在Web 设计和开发中的效率和创造力。

第1章　设计模式：轻松搞定CSS！　
　1.1　设计模式——精心组织的解决方案　
　1.2　使用设计模式　
　1.3　应用样式表　
　1.4　CSS语法　
　　1.4.1　CSS语法细节　
　　1.4.2　在CSS中使用空白　
　　1.4.3　使用属性值　
　1.5　使用层叠排序　
　1.6　简化层叠　
　1.7　CSS和HTML链接　
　1.8　CSS属性　
　1.9　CSS的属性和值：常见的　
　1.10　CSS的属性和值：内容　
　1.11　CSS的属性和值：布局　
　1.12　CSS的属性和值：专有的　
　1.13　选择符　
　1.14　变动的度量单位　
　1.15　固定的度量单位　
　1.16　在96dpi下不同单位之间的比率　
　1.17　在96dpi下常用的font-size值　
　1.18　CSS疑难解答　
　1.19　使样式表规范化　
第2章　HTML设计模式　
　2.1　本章大纲　
　2.2　HTML结构　
　2.3　XHTML　
　2.4　DOCTYPE　
　2.5　头部元素　
　2.6　条件样式表　
　2.7　结构化块状元素　
　2.8　终端块状元素　
　2.9　多目标块状元素　
　2.10　内联元素　
　2.11　类和ID属性　
　2.12　HTML空白　
第3章　CSS选择符与继承　
　3.1　本章大纲　
　3.2　类型、类和ID选择符　
　3.3　定位和群组选择符　
　3.4　属性选择符　
　3.5　伪类元素选择符　
　3.6　伪类选择符　
　3.7　子类选择符　
　3.8　继承　
　3.9　视觉继承　
第4章　盒模型　
　4.1　本章大纲　
　4.2　显示　
　4.3　盒模型　
　4.4　内联盒模型　
　4.5　内联块状盒模型　
　4.6　块状盒模型　
　4.7　表格盒模型　
　4.8　绝对定位盒模型　
　4.9　浮动盒模型　
第5章　盒模型的尺寸　
　5.1　本章大纲　
　5.2　宽度　
　5.3　高度　
　5.4　设定尺寸　
　5.5　包裹　
　5.6　拉伸　
第6章　盒模型的属性　
　6.1　本章大纲　
　6.2　外边距　
　6.3　边框　
　6.4　内边距　
　6.5　背景　
　6.6　溢出　
　6.7　可见性　
　6.8　分页　
第7章　定位模型　
　7.1　本章大纲　
　7.2　定位模型　
　7.3　定位　
　7.4　定位最近的祖先元素　
　7.5　堆叠环境　
　7.6　原子化　
　7.7　静态定位　
　7.8　绝对定位　
　7.9　固定定位　
　7.10　相对定位　
　7.11　浮动和清除　
　7.12　相对浮动　
第8章　定位：缩进、偏移与对齐　
　8.1　本章大纲　
　8.2　缩进　
　8.3　静态元素的偏移　
　8.4　静态表格的偏移或缩进　
　8.5　浮动元素的偏移　
　8.6　绝对元素和固定元素的偏移　
　8.7　相对元素的偏移　
　8.8　静态内联元素的对齐　
　8.9　静态块状元素的对齐与偏移　
　8.10　静态表格的对齐与偏移　
　8.11　绝对元素的对齐与偏移　
　8.12　绝对元素的居中　
　8.13　外部对齐　
第9章　定位：进阶　
　9.1　本章大纲　
　9.2　左对齐　
　9.3　左偏移　
　9.4　右对齐　
　9.5　右偏移　
　9.6　中心对齐　
　9.7　中心偏移　
　9.8　顶端对齐　
　9.9　顶端偏移　
　9.10　底端对齐　
　9.11　底端偏移　
　9.12　垂直居中对齐　
　9.13　垂直居中偏移　
第10章　为文本赋予样式　
　10.1　字体　
　10.2　突出　
　10.3　文本装饰　
　10.4　文本阴影　
　10.5　文本替换　
　10.6　隐藏文本　
　10.7　读屏器专用　
第11章　分割内容　
　11.1　分割　
　11.2　块状化　
　11.3　非包裹　
　11.4　保留空白　
　11.5　代码　
　11.6　填充内容　
　11.7　内联空白　
　11.8　内联装饰　
　11.9　断行　
　11.10　内联水平线　
第12章　对齐内容　
　12.1　文本缩进　
　12.2　悬挂缩进　
　12.3　水平对齐的内容　
　12.4　垂直对齐的内容　
　12.5　垂直偏移的内容　
　12.6　下标和上标　
　12.7　嵌套对齐　
　12.8　高级对齐实例　
第13章　块状元素　
　13.1　本章大纲　
　13.2　结构含义　
　13.3　可视结构　
　13.4　区块　
　13.5　列表　
　13.6　背景项目符号　
　13.7　内联化　
　13.8　重叠的外边距　
　13.9　内嵌　
　13.10　水平线　
　13.11　块状间隔　
　13.12　块状间隔移除　
　13.13　左外边距　
　13.14　右外边距　
第14章　图片　
　14.1　本章大纲　
　14.2　图片　
　14.3　图片地图　
　14.4　淡出　
　14.5　半透明　
　14.6　被替换的文本　
　14.7　内容覆盖图片　
　14.8　内容覆盖背景图片　
　14.9　CSS内嵌图片　
　14.10　基础阴影图片　
　14.11　阴影图片　
　14.12　圆角　
　14.13　图片实例　
第15章　表格　
　15.1　本章大纲　
　15.2　表格　
　15.3　行组与列组　
　15.4　表格选择符　
　15.5　分隔的边框　
　15.6　重叠的边框　
　15.7　样式重叠边框　
　15.8　隐藏和删除单元格　
　15.9　删除和隐藏行与列　
　15.10　垂直对齐数据　
　15.11　斑马纹表格　
　15.12　强制转换成表格、行和单元格　
　15.13　表格布局　
第16章　列布局　
　16.1　表格布局模型　
　16.2　使用列布局　
　16.3　本章大纲　
　16.4　列宽度　
　16.5　包裹列　
　16.6　设定尺寸列　
　16.7　内容比例列　
　16.8　尺寸比例列　
　16.9　百分比比例列　
　16.10　反比例列　
　16.11　相等内容尺寸列　
　16.12　等尺寸列　
　16.13　小尺寸列　
　16.14　伸缩列　
　16.15　混合列布局　
第17章　布局　
　17.1　本章大纲　
　17.2　流动布局概述　
　17.3　由外向内盒模型　
　17.4　浮动区块　
　17.5　浮动间隔　
　17.6　流动布局　
　17.7　反向浮动　
　17.8　事件样式　
　17.9　上滚　
　17.10　标签菜单　
　17.11　标签　
　17.12　弹出菜单　
　17.13　按钮　
　17.14　布局链接　
　17.15　布局实例　
第18章　字母下沉　
　18.1　本章大纲　
　18.2　对齐的字母下沉　
　18.3　首字母下沉　
　18.4　悬挂字母下沉　
　18.5　内边距图片字母下沉　
　18.6　浮动字母下沉　
　18.7　浮动图片字母下沉　
　18.8　外边距字母下沉　
　18.9　外边距图片字母下沉　
第19章　强调框和引用　
　19.1　本章大纲　
　19.2　左浮动强调框　
　19.3　右浮动强调框　
　19.4　中心强调框　
　19.5　左外边距强调框　
　19.6　右外边距强调框　
　19.7　块状引用　
　19.8　内联块状引用　
　19.9　内联引用　
第20章　提示框　
　20.1　本章大纲　
　20.2　JavaScript提示框　
　20.3　悬停提示框　
　20.4　弹出的提示框　
　20.5　提示框　
　20.6　内联提示框　
　20.7　悬挂提示框　
　20.8　图片提示框　
　20.9　内嵌提示框　
　20.10　浮动提示框　
　20.11　左外边距提示框　
　20.12　右外边距提示框　
索引

下载精通CSS与HTML设计模式 PDF电子书；英文版Pro.CSS.and.HTML.Design.Patterns

《超越CSS：Web设计艺术精髓》PDF电子书下载

标点符 — Thu, 23 Jul 2009 04:59:30 +0000

书名：《超越 CSS ：Web设计艺术精髓》

超越CSS简介

此书是CSS 禅意花园的姊妹篇，本书系统、深入地阐释了网站的设计与实现，使读者从设计的角度来使用CSS以达到最完美的效果。作者通过使用标记和CSS的形象的创造性示例，帮助读者掌握实现创意设计的方法。读者将学会如何使用新的设计流程，创建对包括设计师在内的所有团队成员都很好用的原型，有效地使用网格，设计标记的视觉效果，并了解优秀设计过程的每一个阶段——从使用最新的浏览器到在团队协作中高效地应用CSS3。

对于普遍缺乏编程经验的Web设计师来说，语义标记和CSS无疑是实现自由设计的障碍。国际著名Web设计师Andy Clarke将与您分享他的“超越CSS”方法，引导读者从设计的角度来使用CSS，来创建富有艺术性并且可用、易用的站点。作者通过可视化的范例来展示标记和CSS的创造性，带领您掌握实现创意的设计方法。通过此书您将学会：如何使用新的工作流程来创建对所有团队成员都非常好用的原型；有效地使用网格；设计标记的视觉效果；如何把握优秀设计过程的每一个阶段；使用最新的浏览器在团队协作中高效地运用CSS3，等等。

超越CSS目录

1. 发现　
　1.1　超越CSS简介　
　　1.1.1　需要什么样的工具来开始学习　
　　1.1.2　为什么需要超越CSS　
　　1.1.3　尽情地发挥创造力　
　　1.1.4　辅助功能本身就是设计，而不应仅把它当成一个特性　
　　1.1.5　向超越CSS进发　
　1.2　超越CSS原则　
　　1.2.1　不是所有的浏览器都显示相同的设计　
　　1.2.2　运用所有有效的CSS选择符　
　　1.2.3　CSS3：展望未来　
　　1.2.4　运用JavaScript和DOM来弥补CSS的不足　
　　1.2.5　避免运用Hacks和滤镜
　　1.2.6　使用富含语义的命名规范和微型格式　
　　1.2.7　分享你的想法，与他人协作　
　1.3　什么使超越CSS变得可能　
　　1.3.1　意想不到的CSS用途　
　　1.3.2　浏览器分级支持　
　　1.3.3　发现，过程，灵感，超越　
　1.4　突出内容的设计　
　　1.4.1　突出内容的途径　
　　1.4.2　一个典型的没经过优化的CSS布局　
　　1.4.3　优化内容顺序而不管有还是没有样式　
　1.5　语义就是含义　
　　1.5.1　“CSS 裸体日”　
　　1.5.2　将含义翻译成标记：这个标记是正确的　
　　1.5.3　内容告诉你了什么　
　　1.5.4　语义的前行　
　1.6　标记这个世界　
　　1.6.1　整个世界是一个列表；每一项都扮演着它自己的角色　
　　1.6.2　环视四座皆列表　
　　1.6.3　给我寄一张旧金山的hCard 　
　　1.6.4　学会拓宽视野　
　　1.6.5　从“内容”开始工作　
　1.7　是时候整理一下你所学的知识了　
2. 过程　
　2.1　寻找最佳工作流程　
　　2.1.1　寻找更好的方式　
　　2.1.2　遵循基于内容的过程　
　2.2　搜集内容　
　2.3　使用框架图来工作　
　　2.3.1　传统的框架图在哪里会失效　
　　2.3.2　框架图有商业价值吗　
　　2.3.3　传统框架图以及交互脚本　
　2.4　使用灰盒方法改进　
　2.5　创建静态设计　
　　2.5.1　更快地通过设计流程　
　　2.5.2　把标签指南加入静态设计　
　2.6　使用交互原型　
　　2.6.1　交互原型使梦想成真　
　　2.6.2　创建可重用的代码　
　　2.6.3　框架图和原型的模型　
　　2.6.4　所见即所得：你看到了什么　
　2.7　遵循交互原型最佳实践　
　　2.7.1　选择用于开发的浏览器　
　　2.7.2　使用浏览器插件　
　　2.7.3　尽可能少地使用 div 元素　
　　2.7.4　确保标签是有效的　
　　2.7.5　选择定位优先于浮动
　　2.7.6　组织CSS　
　2.8　过程的实践　
　　2.8.1　着眼于组成部分　
　　2.8.2　编写分离内容的标签　
　　2.8.3　用CSS实现静态设计　
　　2.8.4　构建布局　
　　2.8.5　从body开始　
　　2.8.6　继续向前还是移交　
　　2.8.7　基本颜色样式　
　　2.8.8　创建商标　
　　2.8.9　加上Logo　
　　2.8.10　导航条样式　
　　2.8.11　设计页脚样式　
　　2.8.12　理解元素的排版样式　
　2.9　汇总　
3. 灵感　
　3.1　引入基于网格的设计　
　　3.1.1　设计师与网格　
　　3.1.2　黄金比例和三分之一规则　
　　3.1.3　纯粹的弹性布局　
　　3.1.4　合理的网格设计　
　3.2　当今Web设计中的网格　
　　3.2.1　减法　
　　3.2.2　Airbag Industries 　
　　3.2.3　Jeff Croft　
　　3.2.4　Veerle的博客　
　3.3　寻找Web之外的网格　
　3.4　为Web设计带来新的网格　
　　3.4.1　打破新闻　
　　3.4.2　以网格作为指导　
　　3.4.3　揭穿小秘密　
　　3.4.4　着迷于新闻手法　
　　3.4.5　保持你的画面　
　3.5　在意想不到的地方发现灵感　
　　3.5.1　把主页改头换面　
　　3.5.2　引入基调板　
　　3.5.3　拥有一个设计剪贴簿　
　　3.5.4　要获得界面灵感去看杂志吧　
　　3.5.5　获得版式灵感　
　　3.5.6　重新审视Flash设计　
　　3.5.7　使用图片与相片　
　3.6　精美的艺术活动　
　　3.6.1　设计不仅仅是创建引人注目的视觉效果　
　　3.6.2　不要把焦点放在技术上　
　　3.6.3　提升基调　
　　3.6.4　寻找不同观点　
　　3.6.5　带着目标剪贴　
　3.7　Web设计的美术　
4. 卓越　
　4.1　卓越的CSS　
　　4.1.1　绝对定位　
　　4.1.2　相对定位　
　　4.1.3　浮动的创意　
　　4.1.4　创建侧边栏　
　　4.1.5　结合多种技术　
　4.2　CSS3（三倍好运）　
　　4.2.1　各部分的汇总　
　　4.2.2　开发新的标准　
　　4.2.3　回到未来　
　　4.2.4　使用CSS3选择符模块进行设计　
　　4.2.5　使用斑马纹提高可读性　
　　4.2.6　使用背景和边框模块进行设计　
　　4.2.7　使用多幅背景图片进行设计　
　　4.2.8　设计多栏布局　
　　4.2.9　使用多栏布局模块　
　4.3　高级布局　
　　4.3.1　回到网格（Grid）　
　　4.3.2　使用高级布局模块进行设计　
　4.4　结束语

下载地址（电驴）：超越CSS：Web设计艺术精髓（扫描版PDF），超越CSS英文原版（清晰版PDF），随书附带源代码。

《超越CSS》大米盘下载：http://www.damipan.com/file/3IqAwIt.html