godaddy 出现 406 Not Acceptable 解决方法

godaddy 升级cPanel以后,有些网站会出现

Not Acceptable

An appropriate representation of the requested resource /admin/ could not be found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.

类似的错误.

原因可能是cPanel的一个安全机制(Mod security),当网址中包含特殊字符,或提交或查看过多的数据时,会触发此机制,只能让服务商加白名单,这样你包含的所有域名都会无视这个rule.

以下是其他解决方案(godaddy最新cPanel无效,不允许自定义关闭mod_security模块):

很多站长朋友可能不知道,这个是因为LINUX服务器里Apache设置将 Mod security 开启了,
就是因为这个MOD,当网址中包含有“%”等其它敏感字符的时候,就会被阻挡。当然这只是针对GBK版,如果安装的UTF版没问题的。因为GBK版本,我们在安装提交地址栏里有汉字,而汉字输入地址栏需要转码显示,转码后包含字符%,所以导致了这些问题的出现!

要解决这些问题,有3个方法:

1、针对上面的第一个问题,如果你装的是GBK版本DZ论坛,你可以直接跳过同意这一步的。
点击“同意”以后,你的地址栏会得到一个地址,注意观察,例如:

把step=1后面的删掉,再敲回车就可以安装了。但是这个方法治标不治本,程序安装完后,则有可能会
遇到后续问题,导致一些功能不能启用。比如你论坛会员ID为中文的,你点“编辑”会员资料或“搜索”该会员帖子,URL网址中就会转换ID的中文字符,这下仍然会出现406错误拦截页面。

2、装UTF-8编码的版本,毕竟是用国外的空间,而且UTF-8是一个国际通用的编码格式,据说性能
还好,但是缺点也是显而易见,如果是康盛的产品,你会发现,不管是DZ、Uchome还是SS,要扩展不是很容易,很少有针对UTF-8的插件、模板、风格,更多的还是GBK的,这个就看个人喜好了。

3、最直接有效办法,关闭 Mod security 设置。有的服务器可能允许用户通过使用.htaccess控制Mod security 选项权限,但是很多不支持。所以最好请空间商帮你关闭。给空间商发个ticket,请他们关闭Mod Security服务.

Hello, I am sorry to bother you! I hope you can help me disable the Mod security for this domain: 网址com, my cpanel account name is 用户名. Because my URL must contain the characters “%”, but the Mod security led to the error, thanks very much!

同时以下是通过增加.htaccess规则来关闭mod_security模块,2个规则是一样的功效,如果你增加后发现空间打开出现500错误,那么说明你的服务器不允许自定义关闭mod_security模块,只能联系空间商管理员了。

.htaccess代码:

<IfModule mod_security2.c>
SecRuleEngine Off
</IfModule>

或者:

<IfModule mod_security.c>
SecFilterEngine Off
SecFilterScanPOST Off
</IfModule>

网站被跳转sp3.yousee.com上面

虚心请教:之前一切正常,今天打开苹果网站,立即被跳转到http://sp3.yousee.com/?dm=alpple.com&acc=3F254F8E-C939-4DF2-84B2-CA2A97E466E5这个网址上,刷新几次正常.而这个网站只是个域名停放.

本机host也没有问题,dns是电信和360的.

不存在中毒.

百度site: sp3.yousee.com可以发现不少此类型链接.

理解营销型网站

所谓营销型网站就是为实现某种特定的营销目标,能将营销的思想、方法和技巧融入到网站策划、设计与制作中的网站。最为常见的营销型网站的目标是获得销售线索或直接获得订单。
一个好的营销型网站就像一个业务员一样,了解客户;善于说服之道;具有非常强的说服力;能抓住访客的注意力;能洞察用户的需求;能有效的传达自身的优势;能一一解除用户在决策时的心理障碍,并顺利促使目标客户留下销售线索或者直接下订单。更重要的是它24小时不知疲惫。
营销型网站是对网站的发展,整合了各种网络营销理念和网站运营管理方法,不仅注重网站建设的专业性,更加注重网站运营管理的整个过程,是企业网站建设与运营维护一体化的全程网络营销模式。

定义

营销型网站:顾名思义就是指具备营销推广功能的网站,建站之初,便以日后的营销推广为目的和出发点,并贯彻到网站制作的全过程,务使每一个环节,每一步骤都考虑到营销功能的需求,使网站一上线即具备营销功能或有利于优化推广的特征。

目的

根据企业传统盈利模式以及核心产品在传统中的销售渠道,设定网络目标客户群体,针对网络潜在目标客户群体的习惯以及需求思维,站在潜在客户的角度在网站首页排布潜在客户感兴趣的内容。进而塑造企业公信力、核心产品展示、客户见证,为潜在目标客户答疑等,通过网站营销贯彻。获得销售线索,最终达成交易。简单的讲,企业现状营销型网站就是企业的销售平台,无论线上直接交易与否,都能够获得销售线索。营销型网站就是为了获得销售机会甚至获得成交。

由来

营销型网站是最近几年才新出来的名词,在行业内还没有一个标准的定义。结合企业网络营销策划服务团队的实战经验,我们认为营销型网站是指以现代网络营销理念为核心,基于企业营销目标进行站点规划,具有良好搜索引擎表现和用户体验、完备的效果评估体系,能够有效利用多种手段获得商业机会,提高产品销售业绩和品牌知名度的企业网站。

颠覆

营销型网站概念的提出,打破了企业对于网站建设的传统认识。事实证明,传统观念中的网站FLASH形象首页、大篇幅企业新闻报道、领导人风采展示、产品介绍不详等现象,均使得企业网站营销职能难以很好地发挥出来。构建营销型网站,就是要明确网站的营销职能,以网络营销为核心目标来进行网站建设。
营销型网站是为了满足企业网络营销,包括以客户服务为主的网站营销,以销售为主的网站营销,和以国际市场开发为主动网站营销。
营销型网站实质就是抓住每一个细节,向网站要效益。营销型网站的本质就是能赚钱的网站。

2发展阶段编辑

1、 企业网站在国内发展从技术角度经历了两大发展阶段,第一阶段是以静态HTML为代表的企业网站建设,这个阶段ASP技术尚未发展到全面普及应用的程度,更多的企业网站建设在满足企业信息和产品信息的简单展示功能,当年流行的词称这个时候的网站是企业的网络名片,意思也仅仅是将企业信息予以网络上展示而已。这个阶段企业网站主要存在以下问题:网站维护困难,表现在要懂HTML代码,或会用Frontpage等简单的编写网页的软件,网站需要更新的话存在每次都需要使用FTP等软件,最初还需要懂在DOS下的FTP命令(记得我1999年在为企业建设网站的时候没有FTP软件,采用的是FTP等命令行的形式上传企业网站文件);网站无法承受大量产品,因为这个阶段没有采用数据库技术,每增加一个产品或一个信息页面均需要改动所有有关联的页面的超级链接等;网站建设目的简单等。第二个阶段是基于ASP动态网页技术的迅速普及企业网站建设的发展阶段,从这一阶段来看企业网站的发展主要表现在技术革新的发展,大量企业网站采用动态数据库技术,实现了企业快速建站和满足了日常维护方便的需要,而在这一阶段也涌现出了更多的企业建站系统,涌现出了更多的模板建站业务模式等。从企业网站发展来看基本可以概括为以上两大阶段。
2、 从企业网站的发展与企业对网站营销的日益需求来看,企业网站发展是以技术为导向,而企业的需求是以市场、业务的需求为导向,企业网站以上两个发展阶段都没有从帮助企业改善经营的角度来规划企业网站;不管是网络标榜的第一代企业建站系统还是第二代第三代,乃至第四代都仍旧以技术为发展的核心,基于这样的企业网站发展现状:企业网站建站技术与服务与企业对网站营销的需求的矛盾日益突出并加剧。如何从网站建设的角度解决这样的矛盾?
3、 营销型企业网站以及营销型企业网站解决方案破茧而出,网站必须具备一定的营销性才能够满足企业对网站营销的需求!在企业网站建设的大环境下营销型网站从概念和理论上一举打破以技术为导向的企业网站发展历程。营销型网站与国内网络营销专家冯英健先生提出来的网络营销为导向的企业网站网络营销理论上是一致的,而网络营销为导向的企业网站概念的提出早于营销型网站,我们发现在实践与企业应用的角度来说营销型网站更易于实践,同时网络营销为导向的企业网站并没有一套解决方案,传统企业与网络服务机构都处于无从下手的境况。营销型企业网站解决方案是对企业营销型网站的最好诠释,我们不能够仅仅提概念,出理论,我们更需要的是将这种思想应用与实践到企业,至此经过一年多时间的开发、实践、验证。
营销型企业网站的核心要素
1、 以帮助企业实现经营目标为网站建设目标
营销型企业网站一定是为了满足企业的某些方面的网络营销功能,比如面向客户服务为主的企业网站营销功能,以销售为主的企业网站营销功能,以国际市场开发为主的企业网站营销功能,以上简单列举均是以实现企业的经营目标为核心,从而通过网站这样的工具来实现其网站营销的价值。
2、 良好的搜索引擎表现
企业网站另一个重要功能是网站推广功能,而搜索引擎是目前网民获取信息最重要的渠道,如果企业网站无法通过搜索引擎进行有效推广,那么这个企业网站从一定程度上来讲其营销性会大打折扣,所以营销型企业网站必然要解决企业网站的搜索引擎问题,也可以理解为搜索引擎优化的工作,在营销型企业网站解决方案中,搜索引擎优化工作为基础和长期的工作,从企业网站的策划阶段乃至从企业网络营销的战略规划阶段就已经开始,而且又贯穿于企业网站的整个运营过程。
3、 良好的客户体验
企业网站最终面对的潜在客户与客户或说与本公司业务有关联的任何组织和个人,如何提升企业网站的客户体验是营销型企业网站必须考虑的重要问题。客户体验在我们的现代营销中无处不存在其身影,比如电话营销中我们不得不重视客户体验、在面对面营销中我们不得不重视客户体验,在设计企业业务流程时不得不重视客户体验;那么企业网站是一个直接面对市场主体的窗口更需要重视其客户体验性。客户体验又是一个非常无法量化的指标,更多的时候是不同受众的感觉。我们一般从这几方面来实现一个具备良好客户体验的营销型企业网站:可用于易用性(网站的基础标准:速度、安全、兼容型以及导航等)、网站的沟通性(对于特殊用户群体的定制,企业网站应该具备的交互与沟通功能,)、网站的可信度(与传统信息的一致以及站内信息的一致,信赖程度等)、易于传播(分享是网络营销中价值转换率最高的一种模式)等方面。
4、 重视细节
细节本也是客户体验中一个重要的元素,由于其的重要性所以我们单独将其作为营销型企业网站的一个因素,在营销型网站的流程制定、内容维护、网站管理等都需要体现出来细节问题。
5、 网站监控与管理
营销型网站的另一个因素是网站本身的监控功能与管理功能,最简单来说网站总需要加一段流量监测的代码吧,更多的管理特点就不多做介绍。
营销型企业网站技术与营销的关系
摆在我们面前的一个很重要的问题,营销型企业网站是以营销为导向,而技术是一个什么样的地位与角色,在营销型企业网站整体体系中技术是基础,同时技术也是支持营销型网站实 现营销目标的一个不可或缺的重要因素。
以营销为导向的营销型网站如何理解:在上面已经对这个问题做了分析,营销指企业的整体营销和企业的网络营销,营销型企业网站所指以营销为导向的网站建设思路即是以企业营销与网络营销目标为网站营销规划与建设的指导思想,这个时候技术作为实现的工具。
新技术在营销型企业网站中的应用:在营销型企业网站建设过程中我们处处可以感受到新技术的应用所带来的营销价值,比如搜索引擎优化技术的应用、HTML静态化技术的应用,WEB标准为指导的网页代码编写,基于WEB的交互工具,基于WEB的CRM客户系统等都在为营销型网站实现更大营销价值而服务。
以营销为导向并不是否定技术的重要,而反过来对新技术的应用却是营销型网站解决方案的一大特点,简单的例子,2005年5月博研科技就率先在企业网站中全面采用WEB标准来构建网站,这个时候一些网络营销专家却还在说这种技术至少需要3-5年才能在国内普遍应用,实际上我们并不需要考虑其是否普及,更多的是其对网站营销是否有价值。
最后用一句话来结束技术与营销的关系,营销型网站开发的技术人员与营销的关系:不懂营销的技术人员永远也无法开发出满足企业营销需要的营销型企业网站。
如何构建营销型网站
通过将SEO概念融入网站网站的程序设计,域名选择功能规划等方面。交给客户一个带有搜索引擎优化元素,符合搜索引擎规范的网站。
省略花哨的、无意义网页,营销网站的每一个页面都将会在产品销售过程中发挥作用。
把焦点放在网站的使用性、信息结构和最好的优化行径。让浏览者可以快速查找产品,联系方式,来电咨询。
产品文案的重构将试图为您与您的客户之间建立起一座桥梁,通过合适的文字条理去建立客户对企业与产品的信任。供明晰的结构、诱饵性产品介绍与全新的WEB2.0技术,以触发潜在客户购买动作为目的的网站建设方式。
如果网站设计的非常符合搜索引擎优化,那么不用花一分钱就可以在Google、百度、Yahoo等搜索引擎中获得较好的排名,从而让搜索引擎源源不断的给你带来客户。
网站设计是否人性化,直接影响着你的潜在客户能否在最短的时间内了解你,信任你,并且能够快速转化成你的客户。要让网站设计的人性化,就需要在网站的结构、业务介绍流程、产品的描述文案、排版设计,网页技术采用等方面进行专业的策划。
在线网络客服系统、 潜在客户跟踪系统等辅助手段进一步提升效益。
影响营销型网站成败的因素主要有三项:
  1. 营销型网站成败的决定性因素是坚持不懈
  2. 营销型网站关键性因素是领导对自己的网站建设的认识及重视程度;最后是网站建设服务提供商的技能及专业水平。
  3. 营销型网站是指以现代网络营销理念为核心,以搜索引擎良好表现、用户良好体验为标准,能够更好地将访客转化为顾客的企业网站.
所有营销型企业网站首先要符合SEO,搜索引擎优化排名是最重要的网站推广手段之一,如果一个企业网站没有从SEO的角度去设计,做好之后,还需要花不少钱请专业的SEO公司进行网站优化.网站不是艺术品,一定要设计的清晰明了,方便用户浏览.网络营销是一种技术和营销策略相集合的营销手段,所以采取合理的网络营销工,可以很大程度的提高潜在客户的转化率

3建站原则编辑

  1. 以服务目标访问者为原则;
  2. 整合企业经营流程为原则;
  3. 突出网站的服务功能为原则;
  4. 积累客户资源为原则;
  5. 易于维护和管理为原则;
  6. 遵循用户可用性为原则;
  7. 利于搜索引擎优化为原则;
  8. 利于开展营销活动为原则;
  9. 运用数据跟踪分析网站为原则。
  10. 宣传以真实为基础。

4网站特征编辑

1.以用户为中心的网站设计
很多的企业仍停留在“公司介绍、产品展示、在线订单、联系我们”的老套路上。殊不知以用户为中心的网站设计才是有特色的设计,才能获得用户的青睐。以用户为中心并不是一个口号,而是应以专业的视觉来审视,什么才是最重要的内容,什么才是用户最希望看到的,围绕用户的心理,通过最有特色服务满足用户的需要,让客户喜欢网站。
2.提供丰富的产品/服务介绍信息
多数网站在对产品/服务的介绍信息上没有下足文章,这导致用户的兴趣全无。就好像来到一个装饰华丽的表演舞台,观众最期待的还是表演。表演的不好看,舞台再漂亮观众也不买帐。
有调查表明,在网上零售商为提升顾客转化率采用的各种措施中,其提供丰富商品介绍信息明显有利于提升网上商店顾客转化率。对于企业网站也是如此,产品的特点介绍越详细,产品展示图片越清晰,用户的兴趣越高。随着视频技术的发展,为你的产品进行视频展示已经成为一种时尚。淘宝网的一家内衣店的女店主已经用自己做模特来展示店内出售的内衣商品,反响很好――要是再来几段视频展示的话,销售量更要飙升了。
3.让用户对网站产生信任感
调查表明,网站备案信息、经营资质展示、完整的联系方式、权威的网络安全认证标志、详细的地址等信息,能够增强用户的认可程度。只有用户在感到安全的前提下,才会对网站产生信任感,进一步产生业务联系、在线购买等行为。
4.简化转化流程
用户的转化流程主要体现在浏览过程、购买流程、注册流程、互动流程等。我们千万不能去考验用户的耐心,而应该尽量让用户心情愉悦地进行每一步操作,并快速得到他想要的结果。简化流程是一项细活,需要反复地测试和揣摩。
5.设计合理的促销与限购
小区内有一家新开的羊毛衫店,一开张就表明“只卖7天,低价促销”。7天后改说法了,“接厂家通知,再卖5天,降价促销”;5天后的说法是“最后3天,买一送二”;3天后的说法是“延期三天,一件不留”;再过3天的说法是“明天下午6点走,半卖半送”;2天后的说法是“厂车未到,见钱就卖,随到随走”――之后过了几天,羊毛衫全卖完了,他们真的走了,不过并没有走远,到另一个小区重新上演。一个月的时间里,这家羊毛衫店接连掀起5次销售高潮,在小区里创造了比商业街上同类店铺还要好的销售业绩。有不少网站在模仿这种“促销与限购”相结合的方式,有效的提高了用户转化率,取得了骄人的成绩。
6.有效利用在线客服工具
在线客服工具是提高网络营销转化率的有效工具。有数据表明,企业网站大多数访客由于不能进行及时的互动沟通和线上交流,超过98.5%的潜在用户将会流失。推荐使用QQ、旺旺等在线客服工具,另外400电话也可以大幅提高广告效果,400热线电话一年只需几百元,在极速400电话网有关于400业务的详细说明。在线客服工具是一个双向的交流沟通工具。用户可以主动同网站客服进行交流,网站客服也可以对用户的访问行为进行关注,并主动发出交谈邀请,帮助用户解决难题。
7.精准的搜索引擎关键词广告
搜索引擎竞价广告是提高用户转化率的一种有效的网络营销方式。在对用户检索行为分析并在此基础上选择最有效的关键词组合,优化广告着陆页面内容的相关性,能有效提高转化率。搜索引擎竞价的效果由多方面的因素组成,每日的消耗预算、关键词上词数量和报告分析等维护工作的好坏直接影响了搜索引擎竞价产品的效果。由于搜索引擎关键词广告具有一定的专业性,通过选择有实力的服务商进行广告维护,可以进一步提升网络营销效果。
8.具有说服力的客户见证
客户见证是有效的营销技巧,但很多网站并没有充分利用客户见证到网络营销中来。在产品/服务展示的同时,展示该产品/服务客户的服务评价、使用体验,能增强产品/服务的说服力,增加用户购买的兴趣和信心。
9.引导老客户进行转介绍
利用网络营销来引导老客户进行转介绍比传统营销方法还具有优势。通常情况下,对于已成交客户,我们可以通过积分、折扣、礼品等形式来促进老客户再次消费;同时,对于老客户介绍来的新客户,除了新客户能够得到比较优惠的价格,老客户也将得到积分或礼品等多种形式的回报。
10.重视电子邮件营销的应用(潜在客户的跟踪关怀)
电子邮件营销并非指发送垃圾邮件广告。电子邮件营销除了在开拓新客户上有其作用之外,更大的作用还在于对于潜在客户的跟踪关怀上面。我们通过自身平台的电子杂志订阅用户、注册会员邮箱、有奖活动参与者邮箱以及合作伙伴提供的相关电子邮箱等多种形式获取潜在客户的邮件列表,使用电子期刊、促销活动介绍、网站精华内容推荐、免费资源提供等多种邮件形式,吸引潜在客户继续关注我们的网络平台和产品(服务),最终实现潜在客户的转化。
提高网络营销专户率并没有特殊的秘诀,最重要的就是站在用户的角度,抓住用户的心理,为用户着想,不断的改进网络营销思路,简化各种流程,加强与客户之间的沟通交流,维系好客户之间的联系,追求可持续发展的网络营销。

5建站关键编辑

人性化设计

一、速度要快
1、尽量不要使用flash、过多flash会影响企业网站的打开速度,一方面不利于用户浏览体验,同时对搜索引擎的收录也不友好。
2、尽量不要使用像设计稿中的过多图片堆积,这样也会影响。图片和文字合理排版,错落有致。
二、设计风格
1、设计风格不要盲目模仿竞争对手,绝大部分竞争对手网站设计都不合理。
2、网站设计一定要追求简约、越简单越大气、简单到极致就是艺术。
3、网页设计一定都是以产品为核心,而不是设计美工。
三、内容规划
核心思想:
1、在设计网页的时候,不要站到企业自我的角度去考虑我们需要表现什么
2、我们要站到客户的角度去思考,客户需要看到什么
3、同时我们还要思考,我能在网页上呈现那些内容,能够让客户立刻喜欢上我们,并且愿意与我们互动。
四、内容布局:
网站导航一定要清晰明了,让用户上网站首页,点击不超过2下鼠标,可以立刻找到自己需要的信息。
描写企业或者产品的时候,文字排版要错落有致,每一句话都要能够打动客户,让客户喜欢看的。

功能设计

一、潜在客户跟踪系统
介绍,让浏览网站10%的客户,上来就愿意留下联系方式;积累潜在客户与粉丝数量。然后把网站推广的效果长期的积累,每天我们有相应的信息,可以第一时间内,通过邮件或者短信方式,推送给客户。这样可以提升品牌的美誉度和忠诚度。
构成部分:
1、诱惑设计
2、订阅系统
3、发送系统
二、网络营销分析系统
介绍:要通过这个工具,每天去检测以下数据:
1、网站的流量
2、网站的用户行为数据:跳出率、平均浏览时间、平均浏览PV量等等
3、用户在网站上产生了那些行为?
4、那些产品和网页是最受欢迎的?
5、那些推广渠道带来了效果?
6、不同渠道流量的转化率是多少?
三、在线客服系统工具
及时与在线浏览用户互动沟通的工具
四、互动功能
目标:
1、黏住客户
2、提升品牌文化
3、提升客户与企业的交流
4、提升客户群体之间的交流
5、可以通过互动交流,让客户产品到品牌的建设中,让客户成为品牌建设一分子。

注意事项

网站设计一定要符合搜索引擎技术标准,容易让搜索引擎抓去,并且容易在搜索引擎中获得较好的排名。要考虑到以下几点:
一、关键词策略:
二、关键词布局:
按照SEO的要求,让每个网页中搜索引擎最关注的地方都出现关键词。例如title、meta、h1、B等等
三、URL设计:
设计符合SEO的url、例如避免使用动态URL
四、内部链接构架:
设计出最让搜索引擎和用户都方便的内部链接结构。
五、网站内容建设:
根据客户和SEO共同的需求进行的内容建设工作。

6建站目的编辑

1、 企业建网站根本目的:企业建设网站目的是通过它要获得商业机会和新客户,帮助企业提高产品的销售额和品牌知名度,为企业产生经济效益。
2、 信息表达清晰完整、获取信息方便快捷等充分满足企业网站推广效果的要求。
3、 网站的下载速度快,多地域能保持均衡的速度,解决了由于南北电信与网络互相通问题导致的网站在南北方速度不均同和在国内访问正常在国内不正常的问题,大大提高了企业在网站推广的效果。
4、 营销型网站能够最快最方便地把客户需要的产品信息与联系方式给客户,最大限度的减少客户的流失。
5、 营销型网站能够让客户获得好的访问体验,客户喜欢经常性到访问体验好的网站上获得信息,高了客户对企业的连接度。
6、 营销型网站是”活”的网站,让企业和浏览用户互动沟通,能主动、及时、方便、多途径的跟访问用户沟通,大幅度提升了网站访问用户的转换率,让企业的网站真正意义的成为企业的销售渠道。

7推广技巧编辑

网站推广的文章标题中要有关键字
标题通常是搜索引擎分析判断网页的第一步也是用户决定是否要浏览该网页的第一步,标题中包含关键字,使搜索引擎更好的理解收录该网页、帮助用户第一时间了解网页的网页并决定是否浏览。
从用户的角度创作文章
一篇文章好的标题肯定招用户喜欢,通过搜索引擎来的流量会很可观,好的标题在网站推广对用户会拥有足够的吸引力。一个好的标题让用户知道你这里提供着他所需要的资料。
文章的标题要简单明了
标题注意通俗易懂,用户都能明白,大部分的搜索引擎只会在搜索结果中显示40-60个字符的标题长度,在网站推广中,对于用户来说,也希望能通过阅读更少的文字来获得更多的信息。避免很长而且繁琐的信息,另外标题应该采用一些通俗易懂的语言,不可为追求标新立异用一些难以理解的话语。
不可出现关键词积累现象
如果大量堆积关键词,虽然网页关键词的密度对排名有一定的影响,但明显的堆积关键词会增加用户阅读标题的难度影响用户体验,同时还可能被搜索引擎判定为关键字堆砌作弊,两面都吃力不讨好。标题中重复网站的导航信息中的关键词作法跟这个是一样的。整个文章内容的关键词也不宜太多。

8相互对比编辑

网站营销与营销型网站
到底如何建设企业网站,特别是中小企业网站,使网站真正成为营销型网站?尽 管企业的多数业务仍主要依靠传统的业务方式开展,但是,欲通过互联网形式参与市场竞争的企业越来越多,这是信息时代经济发展的必然趋势。那么,到底如何建设企业网站,特别是中小企业网站,使网站真正成为效益型网站。
网站是企业信息化建设的重要组成部分,是企业展示形象和实力的窗口。企业上网不是摆设,而是要从中获得效益。网站设计 不能只求美观,盲目攀比,而是要根据企业经营的需要,构造适合自身特点的上网计划和模式,以最小的投入换取最大的回报。
1、 明确网站建设 的“理由”
明确企业网站建设 的意义。企业建网站不是为了赶一时的潮流或是博取一个好名声,而是要通过互联网这个全球性的网络来宣传企业、开拓市场,同时,降低企业的管理成本、交易成本和售后服务成本,并通过开展一系列的电子商务活动获得更多的利润,这些均与企业的经营目的是一致的。所以,只有把信息技术同企业的管理体系、生产流程和商务活动紧密结合起来,才能正确地建设和维护这个网站,并使网站发挥作用,为企业服务。
2、组建好一支队伍
确定网站建设 与管理人员。对于大型企业来说,可以设专门的部门或CIO即首席信息执行官,总体负责企业的信息化发展规划。但对于中小企业来讲,单设CIO会有一定的困难,可以设兼职CIO。
CIO不仅负责企业网站的规划、建设、管理与更新维护,而且负责企业信息化发展规划的制定、普及企业上网知识、组织人员对传统企业的管理模式、生产模式等进行信息技术改造。企业是单纯做一个网站进行宣传好呢,还是结合企业内部业务开展全面的电子商务好?类似这样的问题,CIO可以为企业做出符合自身发展的信息化建设的最佳方案。
3、形成自己的特色
网站内容及制作形式要有特色。“千篇一律”的企业网站制作 模式是可以参考的,但不能不加思考地照搬照抄。要结合企业自身的特点进行适当地改造。
4、做好运维管理
加强网站的管理和维护。网站建设后管理和维护非常重要,包括动态信息更新、新产品更新、咨询回复、网站安全等。企业的领导要对网站的管理倍加重视。企业CIO(包括兼职的CIO)要切实负起责任,制定网站管理与日常维护更新制度,落实考核与奖惩办法,建立信息更新渠道,确保网站发挥作用。
总之,只有把网站做成企业和客户之间的有效纽带,网站才能真正发挥作用。另外,企业的网站还应该多关注自己特定的客户群,通过多种形式和客户保持沟通,吸引客户不断地通过网站和企业进行交流,从而加深与客户的关系、更深层次地了解客户需求、为企业发展提供服务,使其成为一个效益型网站。

9建设步骤编辑

总体定位

主要解决网站究竟要达到什么目的?靠什么赚钱?网站的目标受众是谁,他们有什么特征?网站的核心优势是什么?只有先明确目的、方向、策略、风格,然后围绕策略规划网站,我们才能赢得客户,赢得商战!

结构规划

网站结构规划主要考虑的是逻辑关系,必须符合用户的逻辑思维并引导用户,用户最关注的是什么?先让用户了解什么内容,然后又了解什么内容?规划时要有引导用户最终联系客服或者拿起电话的意识。

视觉布局

先确定网站的基本色和辅助色,然后根据网站结构图画出首页DEMO框架图和所有内页DEMO框架,才能开始设计。规划网站框架时要综合考虑首页、内页还有网站后台功能等。

搜索优化

这里说的搜索优化其实包含两大部分,一是搜索引擎优化的关键字策略规划;二是网站SEO的一些功能。如常见的网站需具备的SEO功能包括:
·动态页面伪静态化:迅速收录,迅速优化
·META标签自设定:后台自己添加修改META标签,动态管理
·关键字自动互链:大量增加网站的关键字链接数,迅速提升排名
·网页结构优化:网站导航采用文字并且采用静态链接
·智能友情链接:自行在后台方便地添加和管理网站的友情链接
·智能网站地图:网站完全自动生成网站地图
·文件目录结构优化:网站文件目录结构及文件命名根据搜索引擎优化原则设立。
·TAG标签自设定:方便搜索引擎爬行全站、快速提升收录。
·RSS订阅、分享功能:为网站外部链接优化提供便利,能迅速增加大规模的外链

后台规划

后台其实也是需要规划的,需要从操作的体验方面来规划,如何方便使用、用起来舒服快速,尤其要考虑前后台的匹配。

销售沟通

不仅仅是客服联系方式,而是要规划好客服环节和人员,比如是设置专人的网络销售,还是由线下业务人员兼任,并且要做好培训排班等工作。

内容规划

网站结构规划好,只是提供了栏目或者说是目录,而真正的销售力主要是靠网站内容来打造。一个企业网站至少包括:公司介绍相关、公司品牌相关、公司产品相关、公司新闻相关等内容,一定要精心策划撰写。

控制测试

一般来说采用DIV+CSS的方式开发前端符合SEO规律,而后台开发,建议还是手写开发,不要使用网络开源系统,因为网络开源系统一般功能众多,系统庞大,而其实企业站根本就用不上里面的很多功能。

10建站特点编辑

用户体验

1、访问速度
(首页FLASH或大图片、国内多路由访问、服务器稳定性)
2、网站结构
(导航栏是否清晰,整体结构是否适合营销的需求)
3、网站内容
(是否突出公司优势、产品优势、服务优势)
4、网站设计
(色彩搭配协调、专业性强,细节处理比较好)
5、网站诚信
(有资质论证、荣誉证书、第三方论证书)
6、联系方式
(每个产品与服务页面都有直接的联系方式,方便客户第一时间找到你)

SEO优化

1、标题优化
(首页标题、产品页面、新闻页面是否进行针对性关键词优化)
2、内容优化
(核心关键词内容重复频率、内容更新率、内容原创性)
3、关键词优化
(企业SWOT分析、优势产品与服务、关键词列表)
4、友情链接
(外部链接、内部链接、高PR值网站互链)
5、核心优势
(企业定位,核心产品与服务优势)

营销功能

1、网站客服
(网站客服,在线把握销售机会,整合QQ、MSN在线功能)
2、客服热线
(400、800全国免费热线:专业大公司形象,注重品牌与服务,把握商机)
3、企业邮局
(对外统一形象,对内方便管理,企业邮局是基础准备)
4、广告促销
(在线广告活动,最新促销,营造营销气氛,把握线上机会)
5、电子地图
(让客户方便找到你,提升诚信度,用户体验好)
6、在线支付
(让客户在找到你之后,在最有热情的能及时下 付款)

灵活操作

1、管理后台
(统一网站管理后台登陆口,方便进行整站管理)
2、新闻系统
(及时发布公司新闻、行业新闻、行业相关知识)
3、产品系统
(自我管理产品,方便、好用,及时修改产品与服务信息)
4、在线调查
(与客户互动,直接面对一线得到最直接,真实的数据,利于市场决策)

11建站方法编辑

一、网站建设目的
要做好电子商务型网站,首先我们要了解它能带来怎么样的作用呢?一般我们建设企业网站可以提高企业、公司的形象、产品的推广、业务的推广、品牌的推广、提高客户信任度、增加网络销售能力以及线下销售能力、提高服务质量、搞好客户关系。
二、电子商务型企业网站有哪些功能模块
电子商务型网站应具备丰富一些特有的功能模块才行,除了关于我们、产品展示、联系我们、在线反馈、咨询中心等特有模版外,还需要添加的有例如:营销网络or企业资质、投票专区or在线留言Or客户见证or企业展示Or媒体报道or专题产品or互动中心等模版,这些模版最好能够合理的出现在首页上面才能达到最大化的营销型,企业网站不应该只有一些简单、单调的模块,这样不能体现网站的多样性,也不符合电子商务领域企业网站的建站需求。
三、网站要让客户信任
电子商务型网站一定要让浏览的客户对我们有一种信任感,可以首页增加“客户见证版块”、“知名的合作伙伴展示”、“第三方现身说法”、首页展示“企业荣誉资质”、“企业实力展示(展示我们公司的企业特点)”“媒体报道(视频中心)”这些版块,信息要真实可靠,不要太夸大宣传!
四、程序很重要
电子商务网站要达到这些功能,程序很重要,在这里比较推荐的是dedecms建站程序以及帝国cms程序,都是php程序,如果是asp的话就比较难达到这么具有营销型的网站了,对于企业来说招一个会dedecms的二次开发+网站运营优化的人员即可了,这样来其实比在网络公司花了几万块建设的网站要实际的多,比较推荐大部分企业这么来做,一个dedecms的二次开发+网站运营优化的人员工资大致会在300-4000元左右(dedecms开发并不难,不要想的很难),但是开发好之后dedecms,他可以维护网站以及推广网站,要知道推广网站也是很重要的,即使你找网络公司建设网站了,后期还是需要一个推广营销专员的。
五、具备强大seo优化功能
基本上企业网站都比较重视seo了,即使不是一个合格的电子商务型网站,但是都是有seo功能的,但是那些网站seo功能并不出众,只是首页和几个二级目录可以设置关键词、标题、页面描述标签,如果一个能力出众的seoer来优化不出众的seo功能的网站,那只会限制它的水平,比如好的seo功能性网站它的页面链接必须是静态链接和伪静态链接才行,不可是动态链接,这个也是最基本的
六、建站前先写出营销型企业网站的建设方案
不管你是找网络公司,还是找人专门开发,前期都需要规划好企业网站的运营建设方案,通过平面的形式呈现出来,就可以在前期达到最好的效果,网站建设出来之后也不会懊恼了,碰见过几个硅胶同行都是因为找了网络公司建站之后会非常懊恼,因为他们前期没有去写企业网站的运营方案。所以特别针对找网络公司建站的那些朋友们说下,一定要前期写出运营方案,如果你们公司写不了,就要网络公司给你先写好才行,不然最后的后果就是你的立场很被动,网络公司牵着你走,这样只会让你的网站建设的越来越糟糕。

12盈利关键编辑

一、网站定位
网站是企业的一种营销手段,营销手段就必须讲究个差异化,否则,难有效果。
网站定位包括如下内容:
1、企业产品的市场分析
2、网站要达到什么目的(个人网站同样)
3、网站的盈利模式(个人网站同样)
二、建站角度
传统网络公司在给企业建立网站的时候,基本上是从两个角度出发来制做的,一是美工,二是功能。
没有考虑网站的营销因素,因此,这种网站不是营销型网站。对企业在营销方面的作用十分有限,甚至基本上是个摆设,只能对泛博客户展示企业,并不能达到营销的理念。
准确的建站角度包括如下内容:
1、从网络营销的角度出发架构网站结构
2、从客户的角度考虑人道化
3、在以上两个基础之上考虑网站的美工与功能。
三、建站策划
传统在给企业建站时候,是没有什么策划的,因此,几乎所有企业的网站的栏目都是一样的。如:首页,公司先容,产品,售后服务,联系方式,总裁致辞等等。这也是企业网站面孔一致的原因吧。这样的企业网站太多了,有什么营销作用吗?没有!只是无用的摆设
有人说过:建站角度决定了建站策划。
既然建站必须从网络营销的角度出发,那么,我以为,网站策划就包含如下内容:
1、枢纽词策划。如包含企业产品、品牌、VI因素、商标、服务口号等等在内的核心枢纽词,及相关拓展枢纽词都需要经由严格的策划,以形成公道的枢纽词清单
2、从营销的角度出发来规划网站的整体架构与栏目结构,以符合枢纽词策划的实施
3、网站最好使用div+css技术进行架构
4、充分考虑seo的营销因素,使网站的整体结构与搜索引擎的习惯相符合,从而逐步成功实现枢纽词策略,使得与企业相关营销因素的枢纽词可以获得较好的排名。
四、网站推广
企业站推广的手段主要还是要有针对性,不能和个人站点手段相同,尽量针对某个领域。
五、检测与调整网站推广策略
网站建立之初的推广策略可能会有偏差,那么,根据网站营销分析系统的数据,加以分析,重新调整网站推广策略十分重要。推广策略老是在不断调整过程中加以完善,逐步施展更大的作用。

视差滚动(Parallax Scrolling)效果的原理和实现

视差滚动(Parallax Scrolling)是指让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。作为今年网页设计的热点趋势,越来越多的网站应用了这项技术。

可以先看看效果:http://www.ok-studios.de/home/

一、什么是视差滚动?
视差效果,原本是一个天文学术语,当我们观察星空时,离我们远的星星移动速度较慢,离我们近的星星移动速度则较快。当我们坐在车上向车窗外 看时,也会有这样的感觉,远处的群山似乎没有在动,而近处的稻田却在飞速掠过。许多游戏中都使用视差效果来增加场景的立体感。说的简单点就是网页内的元素在滚动屏幕时发生的位置的变化,然而各个不同的元素位置变化的速度不同,导致网页内的元素有层次错落的错觉,这和我们人体的眼球效果很像。我看到多家产品商用视差滚动效果来展示产品,从不同的空间角度和用户体验,起到了非常不错的效果。
目前这种视差滚动效果被越来越多的国外网站所应用, 成为网页设计的热点趋势。
通过一个很长的网页页面,其中利用一些令人惊叹的插图和图形,并使用视差滚动(Parallax Scrolling)效果,让多层背景以不同的速度移动,形成立体的运动效果,带来非常出色的视觉体验。完美的展示了一个复杂的过程,让你犹如置身其中。厌倦了千篇一律,呆板网页设计的你不放一试。

就是固定背景不让它随着滚动轴移动,但包含背景的容器是跟着滚动的,所造成的视觉差异看起来就像跟转换场景一样。

二、视差滚动效果的主要特点:

1、直观的设计,快速的响应速度,更合适运用于单页面
2、差异滚动 分层视差
页面上很多的元素在相互独立地滚动着,如果我们来对其它分层的话,可以有两到三层 :背景层,内容层,贴图层。

三、原理
通过前景与背景在场景移动时产生不同的视差,从而达到简单的立体效果

页面上很多的元素在相互独立地滚动着,如果我们来对其它分层的话,可以有两到三层 :背景层,内容层,贴图层

差异滚动的实现规则:

  •   背景层的滚动(最慢)
  •   贴图层(内容层和背景层之间的元素)的滚动(次慢)
  •   内容层的滚动(可以和页面的滚动速度一致)

我们让三个图层的滚动速度不一致,就做出了漂亮的差异滚动效果

1、运用大背景

这些背景图像一般是高分辨率,大图,覆盖整个网站。高清照片是一个迅速抓住观众的好方式,可以产生极具冲击力的视觉效果,用户的视线会不自觉地落在宽大的背景上

注意:

1. 1、背景图的色彩、内容在选择时要十分讲究,前提是不要破坏用户的体验,不然再漂亮的照片也是枉然。

图片类型最好选取趋向于一些比较柔和、略带透明的一类,不要影响到网站主体内容的阅读,识别,讲究协调。

1.2、以大量图片为特色的页面应该考虑图像的预加载问题,以便为用户提供更好更流畅的视觉体验.

2、你也可以用简单的配色方案

没有比纯色的背景更直观更简洁。纯色可以有很多种表达方式,一个视差区间内颜色最好保持使用2到3种,我们可以调整颜色的透明度,来达到各种视觉效果

3、定位好背景层,贴图层和内容层之间的关系

根据页面自身的功能来定义是否需要贴图层,贴图层的存在是为了更有效的传达视觉效果,但如果它成为了干扰,就会违背了我们使用的初衷

内容层的展现是最主要的,无论背景层和贴图层有多少花哨,在设计师设计过程中,内容层对用户的展示是最优先的

4、讲故事

有力的表现、简约的风格和设计的美感共同构成了一个出色地交互式叙事体验。我们经常听到这样的话:内容是王道,技术只是实现内容的一种工具。当你能够成功地把有力的信息和漂亮的执行力结合起来,你就能创造出人们喜欢并且享受其中的体验。 ————Wieden+Kennedy

TWO 数据可视化——信息图形设计 故事1 传统水银体温计和大字母水银体温计

四、实现方法和工具

1、在CSS中定义背景滚动方式的属性是backgroud-attacthment

background-attachment — 定义背景图片随滚动轴的移动方式

  • 取值: scroll | fixed | inherit
    • scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。
    • fixed: 当页面的其余部分滚动时,背景图像不会移动。
    • inherit: 规定应该从父元素继承 background-attachment 属性的设置。
    • 初始值: scroll
    • 继承性: 否
    • 适用于: 所有元素

附带w3c的链接:http://www.w3school.com.cn/css/pr_background-attachment.asp

浏览器的支持性:

测试了chrome,opera,safari,firefox,ie7-8都是可以的,所以就是说IE6下不行~

在IE6下使用这个属性,需要把background-attachment:fixed放置于body或html当中,就是说你说在其它标签里面是没用。上面的w3c里可以看得到效果就是因为它是放在body里的。

复制代码
<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                width: 1280px;
                margin:auto
            }
            .header{
                background:#fff;
                padding: 10px 0
            }
            .bg-attachment{
                background:url(6.jpg) center center no-repeat;
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url(qingz.jpg) center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="header">
                <img src="5.jpg">
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img src="qi.jpg">
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>
复制代码

2、插件

Scrollorama

滚动视差网站工具与教程

curtain.js  类似于幕布升起的效果

滚动视差网站工具与教程

jQuery-Parallax

滚动视差网站工具与教程

stellar.js

滚动视差网站工具与教程

jparallax

滚动视差网站工具与教程

Skrollr

滚动视差网站工具与教程

Parallax.js

滚动视差网站工具与教程

A Simple Parallax Scrolling Technique via Nettuts+

滚动视差网站工具与教程

Parallax Slider

3、教程

四、超炫的视差滚动效果网站设计欣赏

GLP创意

无限滚动-18

divups

New ebay

New ebay

360 Long Road Zurich

Q Music Titanic

Q music Titanic

Putzengel

Putzengel

OK Studios

OK Studios

Nike Better World

Nike Better World

Ben the Bodyguard

Ben the Body Guard

Egopop Creative Studio

Egopop Creative Studio

Smokey Bones

Smokey Bones

Cultural Solutions

Cultural Solutions

The Beatles Rock Band

The Beatles Rock Band

XHTML Slicing

XHTML Slicing

Farmhouse Fare

Farmhouse Fare

Sullivan NYC

Sullivan NYC

I to Sie Ceni

I to Sie Ceni

Grab and Go

Grab and Go

Micro-Site for Mario Kart Wii

Micro-site for Mario Kart Wii

Air Jordan 2012

Air Jordan 2012

Micro-site for Mario Kart Wii

Micro-site for Mario Kart Wii

Unfold

Unfold

Dentsu Network

Dentsu Network

ResIm

ResIm

Jan Ploch

Jan Ploch

Kry-Ptis

Kry-Ptis

Anna Safroncik

Anna Safroncik

Unfinished Business

Unfinished Business

Volkswagen-Beetle

Volkswagen-Beetle

Appmiral

Appmiral

Atlantis World’s Fair

Atlantis World's Fair

Johan Reinhold

Johan Reinhold

Iutopi

Iutopi

Beautiful Explorer

Beautiful Explorer

Bagigia

Bagigia

Activate Drinks

Activate Drinks

Tokyu Agency Recruit 2013

Tokyu Agency Recruit 2013

Von Dutch

Von Dutch

Playtend

Playtend

Phase 2 Design Studio

Phase 2 Design Studio

Friendly Gents

Friendly Gents

TokioLab

TokioLab

Krystalrae

Krystalrae

No leath

No leath

Dangers of Fracking

Mo’s & Bows

Tinke

Whiteboard

Parallax Scrolling in Web Design

New Zealand

Parallax Scrolling in Web Design

Marcus Thomas

Parallax Scrolling in Web Design

Fishy

Parallax Scrolling in Web Design

Soleil Noir

Parallax Scrolling in Web Design

kinvara3

Parallax Scrolling in Web Design

Smokey Bones

Parallax Scrolling in Web Design

Laurentius : Jaarverslag 2010

Parallax Scrolling in Web Design

ala

Parallax Scrolling in Web Design

Bomb Girls

Parallax Scrolling in Web Design

Head2Heart

Parallax Scrolling in Web Design

Michelberger Booze<

Parallax Scrolling in Web Design

Ascensión Latorre

Parallax Scrolling in Web Design

Biamar

Parallax Scrolling in Web Design

inTacto 10 Years

Parallax Scrolling in Web Design

http://www.cnblogs.com/JoannaQ/archive/2013/02/08/2909111.html

dogpack 国外的狗狗网站

dogpack

打开dogpack网站,紧接着出现Do you have a dog?的选项,”YES” OR “NO”.选YES自然而然进去下一个交互页面,直至出现首页.而选择NO则出现另一个提示:”Okay, no dog.
But you love dogs right?”让人温馨.网站十分符合用户浏览体验,交互设计让人感到异常贴切.

进入主界面后.网站主旨油然而生:Discover the magic of everyday dog moments.

 

一些明星狗的封面,各式各样的表情,无不打动爱狗人士的心.网站似乎尤其不缺技术牛人,从设计到发布,人性化的网页浏览充斥各个细节,需要慢慢体会.当然也可以相互交流,又爱动物又爱摄影的同学可是才色兼收.

技术方面,网站使用ZURB开源响应式前端框架,各式浏览器体验不错.

唯一不足的是登陆需要Facebook,你懂得!

使用Modernizr 检测HTML5和CSS3浏览器支持功能

传统浏览器目前不会被完全取代,令你难以将最新的 CSS3 或 HTML5 功能嵌入你的网站。 Modernizr 正是为解决这一难题应运而生,作为一个开源的 JavaScript 库,Modernizr 检测浏览器对 CSS3 或 HTML5 功能支持情况。 Modernizr 并非试图添加老版本浏览器不支持的功能,而是令你通过创建可选风格配置修改页面设计。 它也可以通过加载定制的脚本来模拟老版本浏览器不支持的功能。

Modernizr 简单易用,但不是万能的。 成功使用 Modernizr 很大程度上取决于你的 CSS 和 JavaScript 技能。 通过本指南,你可以了解如何为不支持多栏或投影的浏览器设置可选风格。 此外,你还可以了解如何让老版本浏览器对使用最新 HTML5 要求(required)属性的表单进行验证,以及如何根据浏览器的功能有选择地加载脚本文件。

什么是Modernizr?

Modernizr 是一个用来检测浏览器功能支持情况的 JavaScript 库。 目前,通过检验浏览器对一系列测试的处理情况,Modernizr 可以检测18项 CSS3 功能以及40多项关于HTML5 的功能。 它比传统检测浏览器名称(浏览器嗅探)的方式更为可靠。 一整套测试的执行时间仅需几微秒。 此外,Modernizr 网站通过定制脚本只对你感兴趣的元素进行检测,从而实现效率优化。

当使用 Modernizr 检测 CSS3 支持情况时,你无需具备任何 JavaScript 的知识。 你仅需在网页中插入文件,它随即根据浏览器的功能情况在页面的<html>标签上添加一组类。 相应类的名称已经符合标准化的要求并浅显易懂。 例如,如果浏览器支持 box-shadow 属性,则需要添加相应的 boxshadow 类;否则,添加一个 no-boxshadow类即可。 你所要做的一切只不过是创建一个使用这些类的式样表,以便为相应浏览器提供合适的式样。

Modernizr 可轻松实现 JavaScript 解决方案,即人们熟知的 polyfills——它模拟HTML5 相关功能和技术,如地理定位。 然而,你的确需要对 JavaScript 有基本了解以便使用这些功能和技术。 术语polyfill 来源于一种填补裂缝的黏土的英国品牌Polyfilla(即美国人熟知的填泥料)。 这里,polyfill 用来填补浏览器功能上的漏洞。 有时,Modernizr 可无缝地执行这项任务。 但本质上,这只是一种修补工作,所以,不能依赖它产生无漏洞浏览器所实现的完全相同结果。

下载 Modernizr

与其它 JavaScript 库相同的是,Modernizr 可提供 development 和 production 版本。 与大多数库相比,唯一的不同之处是,空格和注释已经从 production 版本中删除了,这样可以减少下载量的大小。 Modernizr 采取了不同的方法。 development 版本在某种意义上可称为是“厨房中的水槽”—它几乎包含了一切。 production 版本只包含了你选择的那些元素,这样能够显著降低下载量。 在很多情况下,production 版本可以缩小为development版本大小的二十分之一。

当使用 Modernizr 进行测试时,我建议你下载 development 版本。 一旦你掌握了它是如何运作的以及它的能力,你就可以下载一个自定义 production 版本以便在你的网站进行部署。

本教程的示例文件包含的是 Modernizr的development 2.0.6 版本,但是我建议你从 Modernizr 站点上用最新更新的版本替代它。

  1. 下载本文附带的示例文件(使用modernizr.zip)并且在 Dreamweaver 站点内将它们解压到一个方便的位置,或者是为本教程创建一个新站点。
  2. 访问 Moderniz 网站,其地址为 http://www.modernizr.com/ 
  3. 在 Download Modernizr 2 部分中,单击 Development 按钮(参见图1)。Modernizr 的 development 版本就会直接在你的浏览器窗口上打开。

选中development版本以便进行Modernizr测试
图1. 选中development版本以便进行Modernizr测试

注: 如果你错误地单击了主导航菜单中的 Download 链接,那么你将看到大量的复选框出现,要求你去选择你想要的工具。 这是为定制的 production 版本所设置。 单击面板顶部的 Development 版本的链接,或者单击浏览器的 Back 按钮返回主页并选中图1所示的 Development 按钮。

  1. 在浏览器的主菜单上,选中 Save Page As,并在示例文件的js文件夹里将它另存为 modernizr.js。如果有必要的话可以替换已有的文件。

使用 Modernizr 检测 CSS 功能

如前所述,Modernizr 并没有尝试在旧版本的浏览器中添加新的功能,但是它允许你按照你的风格去弥补那些缺失的功能。 为了展示这是如何运作的,示例文件中包含了一个叫做 css_support_begin.html 的页面。如果你在新式浏览器中加载这个页面,它应该看起来如图2所示。

Firefox 5以多栏的格式显示了页面并且在图像中添加阴影
图2. Firefox 5以多栏的格式显示了页面并且在图像中添加阴影

该页面的风格是使用了CSS3的 column-count 和 box-shadow 属性,以便以多栏的格式显示文本并在图像中添加阴影。 旧版本的浏览器不支持这些属性中任何一项,因此在 Internet Explorer (IE) 7 中同一页面看起来如图3所示。

IE7忽略了column-count 和 box-shadow属性
图3. IE7忽略了column-count 和 box-shadow属性

在IE9中,同一页面显示了图像阴影,但是文本和图3中所示的布局是一样的。

你在尝试弥补缺失的功能上采取什么方式取决于你的设计大纲的要求。 要尝试使页面在所有的浏览器中看起来完全一样将要涉及大量工作,但是你可以做一些简单的改进,比如在图像周围环绕文字,调整图像与文本的左边距,以及在图像底部和右边缘添加隐约的边界,以便使它更具三维立体的感觉。

检测对 CSS3 功能的支持

Modernizr 使用 JavaScript 检测浏览器所支持的功能,但是,它并不是使用 JavaScript 动态地加载不同的样式表,而是使用非常简单的技术将类添加到页面的<html>标签。然后作为设计者由你决定使用 CSS 层叠为目标元素提供合适的样式。例如,如果页面支持 box-shadow 属性,那么 Modernizr 会添加 boxshadow 类。如果不支持,那么它用 no-boxshadow 类作为替代进行添加。

由于浏览器忽略它们无法识别的 CSS 属性,因此你可以放心地按照你的基本样式规则使用 box-shadow 属性,然而需要按照下面的格式为旧版本的浏览器添加单独的 descendant selector 

.no-boxshadow img { /* styles for browsers that don't support box-shadow */ }

只有不支持 box-shadow 的浏览器才会有 no-boxshadow 类,因此其它的浏览器不会应用这个样式规则。

让我们将 Modernizr 添加到示例页面并检查它添加到<html> 标签中的类。

  1. 复制 css_support_begin.html 并将它另存为 css_support.html。
  2. 打开你刚创建的复制文件,并切换到 Code 视图或者Split视图。
  3. HTML markup 的前两行应该如下所示:

<!DOCTYPE HTML> <html>

  1. class=”no-js”添加到<html>标签中,如下所示:

<!DOCTYPE HTML> <html class="no-js">

Modernizr 依赖于在浏览器中启用的 JavaScrip。 当它启用时,这种类会被动态地删除。 但是,在极少数情况下,当 JavaScrip 没有启用时,它依然存在于 HTML makup 中,如果必要,它允许你为这样的访问者创建特殊的样式规则。

  1. css_support.html 中的样式是嵌入在 <style> 块中。Modernizr 库需要被添加到样式加载之后的页面的 <head> 部分。在结束的 </style> 和 </head> 标签之间添加一条新的线,并且使用 <script>标签附加上 moderizr.js。最简单的方式是键入你自己的代码,但是你也可以在Insert面板中使用 Script 按钮或者选中 Insert – HTML–Script Objects–Script。<head> 的最后三行应该如下所示:

</style> <script src="js/modernizr.js"></script> </head>

注: 如果你使用 Insert 面板或者Insert菜单,则 Dreamweaver 会添加 type="text/javascript" 到开始的 <script> 标签中。 这在 HTML5 中不再要求,但是留着它并不会造成危害。

  1. 保存 support_css.html 并在 Document 工具栏中单击 Live Code 按钮。 目前 <html> 标签已经加入了超过40个类的名称,这些名称能够表明 WebKit 浏览器引擎中 Dreamweaver 的内置版本的功能(参见图4)。

Modernizr添加了大量的表明浏览器功能的类
图4. Modernizr添加了大量的表明浏览器功能的类

注:如果你的 Dreamweaver 版本没有 Live Code(或者你正使用不同的 HTML 编辑器),那么你可以使用大多数新式浏览器提供的开发工具或者 Firefox 浏览器提供的 Firebug 检查生成的代码。

如图4所示, no-js 类已经被js类替代,这表明 JavaScript 已经启用。

表1列举了 Modernizr 使用的类名称以表明对 CSS3 的支持。 如果某个功能不支持,那么相应类的名称用no-作前缀。

表1. Modernizr 检测的 CSS3 功能

CSS 功能

Modernizr 类(属性)

@font-face fontface
::before and ::after pseudo-elements generatedcontent
background-size backgroundsize
border-image borderimage
border-radius borderradius
box-shadow boxshadow

CSS animations

cssanimations

CSS 2D transformations

csstransforms

CSS 3D transformations

csstransforms3d

CSS transitions

csstransitions

flexible box layout

flexbox

gradients

cssgradients
hsla() hsla

multi-column layout

csscolumns

multiple backgrounds

multiplebgs
opacity opacity

reflection

cssreflections
rgba() rgba
text-shadow textshadow

无论在哪对特定的CSS属性进行测试,类的名称和属性名称都是一样的,然而这要求去除任何连字号或是括号。 其它类是按照它们参考的CSS3模块而命名。

创建旧版本浏览器样式规则

参见表1,你可以看到Modernizr使用boxshadow 和 csscolumns 分别表明了对box-shadow 属性和多栏布局的支持。 因此,你可以使用no-boxshadow 和 no-csscolumns 类为不支持这些功能的浏览器创建特殊的样式规则。

为了保证指令简单,我将演示只有CSS 声明的范例。 你可以直接地将它们键入到Code视图中或者使用New CSS Rule对话框。

  1. .no-boxshadow img创建一个新的descendant (compound) selector。
  2. 设置2像素灰色实心的右边界和底边(我选择#8A8A8A)。 由此产生的样式规则应该如下所示:

.no-boxshadow img { border-right: #8A8A8A 2px solid; border-bottom: #8A8A8A 2px solid; }

这不像半透明的阴影那样有吸引力,但是尽管如此,它仍然使得图像能够从背景中略微地突起。

  1. 在不支持多栏布局的浏览器中,你需要浮动图像并且调整它的页边距。为.no-csscolumns img创建一个新的descendant selector。
  2. 设置图像向左浮动,并且将顶部和底部页边距设置为3px,右边距为8px,以及左边距为0。 样式声明如下所示:

.no-csscolumns img { margin: 3px 8px 3px 0; float: left; }

  1. 确保这个样式规则是遵循.columns img规则。两个规则有着相同的特殊性,因此,如果它们顺序颠倒,则.columns img 的10像素的左边距可能会覆盖你刚刚创建的新规则。你可以将.no-csscolumns img重命名为.no-csscolumns .columns img以便于给它更高的特殊性,但是最好是保证selector越简单越好。(顺便说一下,如果你不确定什么是特殊性,查阅Adrian Senior的文章,Understanding Specificity。它虽然发表时间很长,但是很有价值。)
  2. 保存css_support.html,并在新式浏览器中对它进行测试。它应该和以前看起来完全一模一样。
  3. 你应该在你的本地系统上或通过链接到BrowserLab,在旧版本的浏览器上对这个页面进行测试。虽然没有阴影或者栏目,但是现在页面的式样是可接受的,如图5所示。

旧版本浏览器使用的是可选的样式,例如IE6。
图5. 旧版本浏览器使用的是可选的样式,例如IE6。

在这个的简单范例中,我只用了前缀为no-的类就为旧版本的浏览器创建了特殊的样式。 但是,按照它们的能力,你不同时使用这两个类(带或不带前缀)为浏览器创建不同的样式是绝对没有道理的。 例如:

.csscolumns { /* rules for browsers that support multi-column layout */ } .no-csscolumns { /* rules for browsers that don't support multi-column layout */ }

有时这种方法是合理的,例如,如果你想为每一级支持都创建一个完全不同的布局。 但是如果它仅仅是一个为旧版本浏览器提供可选择的样式的问题,不要忘记,浏览器会忽略它们无法识别的属性。 如果你对所有的样式都使用 Modernizr 类,那么在 JavaScript 禁用的浏览器中你的页面将完全非样式化。

使用Modernizr检测HTML5的支持功能

Modernizr 为开始的<html>标签添加的类名称起着双重目的作用。当页面加载时,它们也是 Modernizr 对象创建的 JavaScript 属性的名称。表1列举了与 CSS 有关的类和属性的名称。表2列举了剩下的与 HTML5 和相关技术有关的类和属性,例如地理位置。

表2. Modernizr 检测的与 HTML5 有关的功能

HTML5 有关功能

Modernizr 类(属性)

Application cache

applicationcache

Audio

audio.type (ogg, mp3, wav, m4a)

Canvas

canvas

Canvas text

canvastext

Drag and drop

draganddrop

Form input attributes

input.attributeName

Form input elements

inputtypes.elementName

Geolocation

geolocation

hashchange event

hashchange

History management

history

IndexedDB

indexeddb

Inline SVG

inlinesvg

Local storage

localstorage

Messaging

postmessage

Session storage

sessionstorage

SMIL

smil

SVG

svg

SVG clip paths

svgclippaths

Touch events

touch

Video

video.type (ogg, webm, h264)

WebGL

webgl

Web sockets

websockets

Web SQL database

websqldatabase

Web workers

webworkers

在大多数情况下,表1和表2列举的所有属性返回的都是 true 或者 false 。所以,你可以按照如下所示使用 JavaScript 对本地存储进行测试:

if (Modernizr.localstorage) { // script to run if local storage is supported } else { // script to run if local storage is not supported }

然而,就 audio 和 video 而言,返回值是一个字符串,它表明着浏览器能够处理特定类型的置信水平。 根据 HTML5 规范,空的字符串表示该类型不支持。 如果支持该类型,那么返回值是“maybe”或是“probably”。 例如:

if (Modernizr.video.h264 == "") { // h264 is not supported }

使用 Modernizr 验证 HTML5 必需的表单字段

HTML5 添加了许多新的表单属性,例如 autofocus,当页面第一次加载时它会自动地将光标放在某个指定的字段。 另一个有用的属性是 required, 如果某个必需的字段留有空白,那么它将阻止HTML5兼容的浏览器提交表单(参见图6)。

提交表单前,HTML5 兼容的浏览器会检查必需字段是否填写
图6. 提交表单前,HTML5 兼容的浏览器会检查必需字段是否填写

这很好,但是它会给你留下一个问题:旧版本的浏览器该怎么办?

一个解决方法是忽略它们,并留给服务器侧的验证功能进行最终的检查。 如果浏览器无法识别 required 属性,那么另外一个处理这种情况的用户界面更为友好的方法是创建一个小小的脚本对必需字段进行检查。 如下的指令显示了在Modernizr帮助下如何进行相应的操作。

  1. 在范例文件夹中复制 required_start.html并保存为 required.html。
  2. 在结束的</head> 标签前用 <script>块按照如下所示将 modernizr.js 粘贴到页面中:

</style> <script src="js/modernizr.js"></script> </head>

  1. 紧接在 Modernizr 库与页面连接的标签之后,创建一个单独的 <script> 块,并且在页面一加载完就创建一个事件处理程序以便于执行代码:

<script src="js/modernizr.js"></script> <script> window.onload = function() { // code to execute when page loads }; </script> </head

  1. 事件处理程序需要获得一个与表单元素有关的参考并在无法识别 autofocus 和 required 属性的浏览器中模拟它们。处理autofocus 的方式很简单:

window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it }

该条件测试了 Modernizr.input.autofocus,如果不支持 autofocus,那么返回的值是 false。 然而,逻辑运算符NOT(一个感叹号)却能使意思颠倒,因此如果不支持 autofocus,那么该条件的求值结果为 true,并且 inputs[0].focus() 将光标放在第一个输入字段。

  1. 如果不支持 required,那么现在添加代码以便于检查必需字段。 事件处理程序的完整代码如下所示:

window.onload = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // if no autofocus, put the focus in the first field if (!Modernizr.input.autofocus) { inputs[0].focus(); } // if required not supported, emulate it if (!Modernizr.input.required) { form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; } }

新代码产生了一个函数,当提交表单时它能够遍历所有的输入元素,以便于找到具有 required 属性的字段。 当它找到某个字段时,它会从值中除去开头和结尾的空白,并且如果结果是一个空的字符串,那么它会把结果添加到 required 数组中。 在所有的字段都已经得到检查后,如果数组中包含某些元素,那么浏览器会显示一个与缺失字段名称有关的警告,并阻止提交表单。

  1. 保存 required.html 并加载到某个浏览器中,例如尚不支持 HTML5 表单的 IE 6-9。 注意一下光标是如何自动地填入第一个字段的。
  2. 单击提交按钮而无需填写任何其它字段。 你应该能看到一个警告提示你名称和邮箱字段需要填写(参见图7)。

脚本检测到不支持新属性的浏览器中的必需字段
图7. 脚本检测到不支持新属性的浏览器中的必需字段

  1. 只填写其中一个必需字段,再进行一次页面测试。 当你单击 OK 关闭警告时,你填写的字段仍然有它的内容,这表明表单尚未提交。
  2. 同时填写两个必需表单,并单击 submit 按钮。 这一次,所有表单字段被清空,并且你应该能够看到隶属于 URL 的数据作为查询字符串出现在浏览器的地址栏。 这就证实了表单数据已被提交。
  3. 在 HTML5 兼容的浏览器中,例如最新版本的 Firefox、Chrome 或者 Opera,对这个页面进行测试。 浏览器显示了它自己的类似于图6所示的错误信息,而不是显示警告信息。

注意: Safari 5.1 错误地报告了它支持 required 属性,所以它在没有验证必需字段的情况下就提交了表单。 这是 Safari 的缺陷,然而在 Modernizr 里它是不存在的。

创建版本

当你准备好对你的网站进行部署时,推荐创建一个 Modernizr 的自定义 production 版本,它只包含那些你实际需要的元素。 这可以按照你所选的功能将 Modernizr 库的大小从 44KB 缩小到 2KB。当前选项的范围如图8所示。

Modernizr 下载页面允许你仅选择那些你需要的功能
图8. Modernizr 下载页面允许你仅选择那些你需要的功能

选项可以便捷地按照如下类别进行分组:CSS3、HTML5、Misc(ellaneous) 和 Extra。 单击前三个标题旁边的 Toggle 按钮可任意地选择或者放弃选择分类中的所有复选框。

在默认情形下,Extra 分类将会选中如下三个条目:

  • HTML5 Shim/IEPP:它添加了两个脚本— HTML5 shim 和 IE Print Protector—它们迫使 IE6-8 正确地设计并打印 HTML5 元素。如果你打算使用新的 HTML5 语义标签,例如 <header> 、<footer>、<nav> 、 <section> 、<article> 等等时,那么你需要这个选项。
  • Modernizr.load(yepnope.js):它添加了一个不包含在 development 版本中的可选择的脚本加载器。它增加了3KB 的下载量,所以如果你不需要它,你可以放弃选择它。稍后我将描述如何使用该加载器。
  • Add CSS Classes: 它将 Modernizr 类添加到开始的<html>标签。如果你想检测对 CSS3 功能支持,那么你必须选择这个选项。

如果你在 CSS3 分类中选中任何选项,那么如下 Extra 分类中的选项也会被选中:

  • Modernizr.testProp()
  • Modernizr.testAllProps()
  • Modernizr._domPrefixes()

不要取消选择这些选项。 这样做将会自动地取消你在 CSS3 分类中已经选择的任何选项。

Extra 分类中的MQ Polyfill (respond.js) 添加了一个脚本,它可以使IE 6-8中的 media queries 获得有限的支持。当你选中这个选项时,它会自动地选中Media Queries 和 Modernizr.testStyles()。如需知道更多关于media queries polyfill (respond.js)的信息,请访问https://github.com/scottjehl/Respond

只有高级用户才会对 Extra 分类中的其它选项感兴趣。关于它们是什么和如何使用它们的更多细节,参见Modernizr 文档的扩展性部分Extensibility section of the Modernizr documentation)。

下载 Modernizr 自定义版本

下面的说明描述了如何为范例文件创建一个 Modernizr 的自定义production版本。 后续的练习需要使用这一自定义版本,它将展示如何使用 Modernizr.load() 加载外部 JavaScript 文件。

  1. 单击http://www.modernizr.com/download/. 这将会打开如图8所示的界面。
  2. 在 CSS3 分类中,选中box-shadow 和 CSS columns.
  3. 在 HTML5 分类中,选中 Input Attributes.
  4. 在 Extra 分类中,取消选择 HTML5 Shim/IEPP.
  5. 确保 Extra 分类中如下的选项被选中(它们应该已经自动地被选中)。
    • Modernizr.load(yepnope.js)
    • Add CSS Classes
    • Modernizr.testProp()
    • Modernizr.testAllProps()
    • Modernizr._domPrefixes
  1. 单击Generate按钮。
  2. 当自定义脚本准备好(一般在一到两秒内)时,在 Generate 按钮旁边会出现一个 Download 按钮。 单击 Download 按钮并在范例网站的js文件夹中保存该文件。 下载页面会给 production 脚本提供一个文件名,例如 modernizr.custom.79475.js,但是你或许会希望给它一个更加有意义的名称。 在范例文件中,我使用的名称是 modernizr.adc.js。
  3. 用自定义 production 脚本的链接替换 modernizr.js in css_support.html 和 required.html 的链接。 注意 production 脚本只有 5KB,而不是 development 版本的44KB。
  4. 单击 css_support.html 中的 Live Code(或者使用你的浏览器中的 development 工具)。 现在,如图9所示,开始的<html>标签只有三个类。

现在<html>标签中的类只涉及必要的 CSS3 功能
图9. 现在<html>标签中的类只涉及必要的 CSS3 功能

使用 Moder 年 izr 加载外部脚本

当创建Modernizr的自定义production版本时,在默认情形下,必须选中包含 Modernizr.load() 的选项。Modernizr.load() 是 yepnope() 的别名,它是与 Modernizr 同步开发的独立脚本加载器。 为了说明如何使用它,我给出一个简单范例。我已经将相应的脚本从 required.html 移到了 check_required.js,并且做了三个微小的改动以便于去除 Modernizr 测试以及将它赋值到一个名为 init 的变量中。 修订的脚本如下所示:

var init = function() { // get the form and its input elements var form = document.forms[0], inputs = form.elements; // put the focus in the first input field inputs[0].focus(); // check required fields when the form is submitted form.onsubmit = function() { var required = [], att, val; // loop through input elements looking for required for (var i = 0; i < inputs.length; i++) { att = inputs[i].getAttribute('required'); // if required, get the value and trim whitespace if (att != null) { val = inputs[i].value; // if the value is empty, add to required array if (val.replace(/^\s+|\s+$/g, '') == '') { required.push(inputs[i].name); } } } // show alert if required array contains any elements if (required.length > 0) { alert('The following fields are required: ' + required.join(', ')); // prevent the form from being submitted return false; } }; };

Modernizr.load() 的一个很大的优点是,根据测试浏览器能力的结果,它可以有条件地加载脚本—这就是为什么起初叫它 yepnope() 的原因。 它可以异步地加载外部脚本—换句话说,就是能够在浏览器已加载 Document Object Model (DOM) 之后加载外部脚本—因此它可以有助于提升你的网站性能。

Modernizr.load() 的基本语法是将一个具有如下属性的对象传递给它:

  • test: 你希望检测的 Modernizr 属性。
  • yep: 如果测试成功,你希望加载的脚本的位置。 使用一个多脚本数组。
  • nope: 如果测试失败,你希望加载的脚本的位置。 使用一个多脚本数组。
  • complete: 外部脚本一经加载就运行的函数(可选)。

yep 和 nope 两者都是可选的,只要你提供了其中一个即可。

为了在 check_required.js 中加载和执行脚本,需要在 modernizr.adc.js 已附着到页面之后添加如下<script> 块(代码位于required_load.html 中):

<script> Modernizr.load({ test: Modernizr.input.required, nope: 'js/check_required.js', complete: function() { init(); } }); </script>

这样就与之前运行的完全一致,但是却可以降低已支持 required 属性的浏览器的下载负荷。

为了测试多种条件,你可以给 Modernizr.load()传递一组对象。如需获得更多细节信息,参见 Modernizr 文档上的Modernizr.load() 教程

一句忠告

Modernizr 是一个强大而有用的工具,但是这并不意味着你就应该使用它。 并不是在所有情形下均必须使用 Modernizr 给浏览器提供多种样式。 如果你主要关注的对象是 Internet Explorer,那么考虑使用IE conditional comments。 你也可以使用CSS层叠覆盖一些样式。 例如,先使用hexadecimal color,然后使用 rgba() 或hsla() 覆盖它。 旧版本的浏览器会使用第一个值并且忽略第二个值。

Modernizr 真正地变成现实是当它与 polyfills 和其它 JavaScript 相结合的时候。但是记住,通常很容易创建属于你自己的适合支持功能的测试。例如,下面就是你测试某个浏览器是否支持 required 属性的全部代码(代码位于required_nomodernizr.html 中):

var elem = document.createElement('input'); if (typeof elem.required != 'boolean') { // required is not supported }

下一步阅读方向

本教程已经涵盖了 Modernizr 的所有主要功能 如需了解关于这些功能的更多信息,请查阅相应的官方文档,其网站地址为 http://www.modernizr.com/docs/

换行标签br的写法

如果在HTML中写成 <br></br>, 这样就会导致 br 元素拥有内容 完全没有意义.常见的写法有 <br> 和 <br />.

因为<br>和<hr> <img> <input> <link> <meta> 

或是: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr> 

一样是空(void)元素,他们是一种特殊的元素,绝对不能有内容.

在HTML中, 这个 <br> 标签没有结束标记.

在XHTML中, 这个 <br> 标签必须要正确关闭, 像这样: <br />.