如何规范大型网站的HTML代码-马海祥博客
新型SEO思维就是从一个全新的层次上提升seo优化的水平，达到网络信息最佳化的展示效果！
> 如何规范大型网站的HTML代码
如何规范大型网站的HTML代码
时间：&&&文章来源：马海祥博客&&&访问次数：
写Web页面就像我们建设房子一样，地基牢固，房子才不会倒。同样的，我们制作Web页面也是一样的，一个良好的HTML结构是制作一个网站的开始，良好的CSS只存在同样良好的HTML中，所以一个干净的，语义的HTML的优点很多，那么平时制作中，我们又该如何规范大型网站的HTML代码呢？
1、DOCTYPE的声明
如果我们想做好一件事情，首先要知道我们有哪些权利去做，就如网页中&DOCTYPE&的声明，我们没有必要去讨论是否使用HTML4.01或者XHTML1.0或者说现在的HTML5都提供了严格版本或者过渡版本，这些都能很好的支持我们写的代码：
由于我们现在的布局不需要table布局也能做出很好的布局，那么我们就可以考虑不使用过渡型而使用严格型的&DOCTYPE&，为了向后兼容，对此，马海祥建议使用HTML5的声明模式：
&!DOCTYPE HTML&
　　&html lang=&en-US&&
2、字符集和编码字符
在每个页面的开始中，我们都在&head&中设置了字符集，我们这里都是使用&UTF-8&。
&meta charset=&UTF-8& /&
而且我们在平时写页面中时，时常会碰到&&&这样的符号，马海祥认为我们不应该直接在页面这样写&&&，如下图所示：
我们应该在代码中使用字符编码来实现，比如说&&&我们在代码中应该使用&&&来代替它。
3、正确的代码缩进
在页面编辑中，代码的缩进有没有正确，他不会影响你网站的任何功能，但要是你没有一个规范的缩进原则，让读你代码的人是非常的生气，所以说正确的代码缩进可以增强你的代码可读性。
标准程序的缩进应该是一个制表符（或几个空格），我们来一起来看下面展示的这张图，你看后就知道以后自己的代码要怎么样书写了：
不用说，大家都喜欢下面的那种代码吧。这只是一个人的习惯问题，不过马海祥建议从开始就要做好，利人利已。
4、CSS样式和Javascript脚本
页面中写入CSS样式有很多种方法，有些直接将样式放入页面的&&head&&中，这将是一个很不好的习惯，因为这样不仅会搞乱我们的标记，而且这些样式只适合这一个HTML页面。
所以，我们需要将CSS单独提出，保存在外部，这样后面的页面也可以链接到这些样式，如果你页面需要修改，我们也只需要修改样式文件就可以。正如下图所示：
上面我们所说的只是样式，其实javascript脚本也和CSS样式是同一样的道理。
所以，马海祥建议大家在制作web页面中，尽量将你的CSS样式和javascript脚本单独放在一个文件中，然后通过链接的方式引用这些文件，这样做的最大好处是，方便你的样式和脚本的管理与修改。
5、正确的标签嵌套
我们在写HTML时总是需要标签的层级嵌套来帮我们完成HTML的书写，但这些HTML的嵌套是有一定的规则的，如果要细说的话，我们可能要用几个章节来描述，那么我今天这里要说的是，我们在写HTML时不应该犯以下这样的超级错误：
上图的结构我们是常见的，比如说首页的标题，那么我们就应该注意了，不能把&&h1&&放在&&a&&标签中，换句话说，就是不能把块元素放在行内(inline)元素中。
当然，上面只是一个例子，只是希望大家在平时的制作中不应该犯这样的超级错误。
6、删除不必要的标签
首先我们一起来看一个实例的截图：
上图明显是一个导航菜单的制作，在上图的实例中：有一个&div#topNav&包住了列表&ul#bigBarNavigation&，而&div&和&ul&列表都是块元素，加上&div&此处用来包&ul&根本就没有起到任何作用。
虽然&div&的出现给我们制作web页面带来了极大的好处，但我们也没有必要到处这样的乱用，不知道大家平时有没有注意这样的细节呢？我是犯这样的错误，如果你也有过这样的经历，那么从今天开始，从现在开始，我们一起努力来改正这样的错误，当然你也可以做好建站指南（具体可查看马海祥博客的《》相关介绍）。
7、使用更好的命名
这里所说的命名就是给你的页面中相关元素定义类名或者是ID名，很多同学都有这类的习惯，比如说有一个元素字体是红色的，给他加上&red&，甚至布局都写&left-sidebar&等，但是你有没有想过，如果这个元素定义了&red&后，过几天客户要求使用&蓝色&呢？或者又说，那时的&left-sidebar&边栏此时不想放在左边了，而是想放在右边，那么这样一来我们前面的命名可以说是一点意义都没有了，正如下面的一个图所示：
那么定义一个好的名就很得要了，不但自己能看懂你的代码，而且别人也能轻松读懂你的代码，比如说一个好的类名和ID名&mainNav&、&subNav&、&footer&等，他能描述所包含的事情。不好的呢，比如前面所说的。
8、离开版本的CSS
我们在设计菜单时，有时要求所有菜单选项的文本全部大写，大家平时是不是直接在HTML标签中就将他们设置成大写状态呢？
如果是的话，我觉得不好，如果为了将来具有更好的扩展性，我们不应该在HTML就将他们设置为全部大写，更好的解决方法是通过CSS来实现，如下图所示：
9、定义&body&的类名或ID名
大家平时制作web页面时不知道有没有碰到这样的问题，就是整站下来，使用了相同的布局和结构，换句话说，你在页面的布局上使用了相同的结构，相同的类名，但是突然你的上级主管说应客户的需求，有一个页面的布局需要边栏和主内容对换一下。
此时你又不想为了改变一下布局而修改整个页面的结构，此时有一个很好的解决办法，就是在你的这个页面中的&&body&&中定义一个特殊的类名或ID名，这样来你就可以轻松的达到你所要的需求。这样的使用，不知道大家使用过没有：
给&&body&&定义独特的类和ID名称是非常强大的，不仅仅是为了像上面一样帮你改变布局，最主要的是有时他能帮你实现页面中的某一部分达到特殊效果，而又不影响其它页面的效果。
为什么有这样的功能，不用我说我想大家都是知道的，因为每个页面的内容都是&&body&&的后代元素。
10、验证你的代码
人不免会出错，我们编写代码的时候也是一样的，你有时候总会小写或多写，比如说忘了关闭你的元素标签，不记得写上元素必须的属性，虽然有一些错误不会给你带来什么灾难性的后果，但也不免会给你带来你无法意估的错误。所以建议您写完代码的时候去验证你一下你的代码，以免出现下面的错误：
为一有效的验证你的代码，我们可以使用相关的工具或者浏览器的插件来帮助我们完成。如果你的代码没有任何错误，W3C验证工具会在你们面前呈现绿色的文字，这样让你是无比的激动人心，因为再次证明了你写的代码经得起W3C的标准（在此，推荐大家可以看下马海祥博客的《》相关介绍）。
11、逻辑顺序
这是一个很少见的错误情况，因为我想大家写页面都不会把逻辑顺序打乱，换句话说，如果可能的话，让你的网站具有一个先后逻辑顺序是最好的，比如说先写页头，在写页体，最后写页脚。
当然有时也会碰到特殊情况，如何页脚部分在于我们代码的边栏以上，这可能是因为它最适合你的网站设计需求，这样或许是可以理解的，但是如果你有别的方式实现，我们都应该把页脚是放在一个页面的最后，然后在通过特定的技术让它达到你的设计需求：
12、坚持良好的HTML代码规则
我已经总结了很多让HTML代码书写的更加简洁的原则在这里，这将是一个很好的开始，但还有更多。当你试图修复你现的代码，可能会发现很困难，而如果你完全当做从头开始学习，却可能会容易的多。不管如何，重要的是，你应该学习如何撰写良好的HTML并且坚持下去。
当你下次书写一个HTML代码项目时，谨记这些简洁原则，Just do what you can，You&ll do better！
如果让你从一个项目的开始，这一切可能都是非常容易的，但是如果需要你去修复一个现有的代码，那多少都会有一定的难度。所以说我们要将如何学习编写一个良好的、整洁的HTML代码，并且一直坚持这样的编写。
马海祥博客点评：
要使搜索引擎收录我们的网页，其前提是要让搜索引擎的Spider能读懂我们的Web文件，搜索引擎Spider阅读网页的根据便是HTML规范，通过对HTML代码的分析，Spider才能判断网页内容，在此基础上才能判断针对相应关键词的相关性。
另外，有效的HTML也可以保证Web页面可以在多种浏览器下被正确解释，避免同一个页面在不同的浏览器上显示不同的页面，同时，这对于提高网站的可用性方面也是有着极大好处的。
本文为原创文章，如想转载，请注明原文网址摘自于/html/648.html，注明出处；否则，禁止转载；谢谢配合！
您可能还会对以下这些文章感兴趣！
清明节又叫踏青节，在仲春与暮春之交，也就是冬至后的第108天。是中国传统节日，也是最重要的祭祀节日之一……
网络实名制是个长期以来争议不断的话题。一方面，当人们面对越来越多的网上低俗与不良信息、黑客与木马、网……
最近百度跟360的搜索引擎之争，也使得更多人开始关注搜索引擎了，回想搜索引擎的快速发展也就是近15年发生……
作为一名专业的SEO人员，我们很多的时候都在研究站点中有多少页……
最近一直听到圈里的朋友抱怨说，自己辛辛苦苦写的文章，发表的前……
很多做SEO的朋友都会问，是不是网站收录越多网站关键字排名越好……
最近，我明显发现访问马海祥seo博客的博友越来越多了，随之而来……
由于此次整理的SEO作弊方法大全的内容比较多，也比较全面，导致……
相信做个seo的，或者自己已经是站长的，都或多或少的对自己负责……
本月热点文章营销型网站的10大要求之八：舒展的页面布局-肖平营销新说
营销型网站的10大要求之八：舒展的页面布局-肖平营销新说
肖平营销新说
今天分享营销型网站10大要求之八：舒展的页面布局。通常，人们的购买行为在很大程度上回收到环境的影响。好的购买环境会激化人们的购买欲望。在某种特定的环境中，我们更容易成交客户，提高营销型网站的转化率。在传统营销中，构成营销的环境通常包括：时间、地点、环境中的人和事物。一个装修富丽堂皇、窗明几净的商店里面销售的商品会给人高档优质的感觉。而一个简陋陈旧及脏乱差的商店里的商品往往让人感觉质量差、价值低。这也就是人们常说的“一颗钻石摆在地摊上只能买玻璃的价格”，还会别人说是骗子，搞不好还有被抓的危险。举个案例：同样的耳机摆在名尚优品的柜台里，没有任何人给您服务，就因为名尚优品的装修店面的购物环境，您只有任何时候有需要，您就会购买。这就是环境的价值。而同样的耳机，在地摊上您会挑三拣四，还会讲价，最多也就卖你10元，而名尚优品是15元，从不讲价，为什么。这就是因为销售会受到环境的影响，热销或滞销。在网络营销环境当中，营销型网站是构成访客购买环境的最主要的因素。一个好的网站能给客户留下美好的第一印象，并且营造出非常舒适的购买环境，从而营销型网站可以获得更高的转化率和成交量。概括一下：网站（购买环境主要因素）-&第一印象（先入为主）-&美好的第一印象（第一印象很重要）-&营销型网站第一印象要好-&提升转化率和成交率。营销型网站第一印象很重要，直接影响转化和提交，回归到人性人：人人都喜欢美好的事物，爱美，讲究美是人的本能反应-&进一步延伸：网络营销就是对访客的尊重，对人性的研究，目标是获得更好的收益。就像我们前段时间讲的“什么是营销型网站”?今天可以做进一步深入的认识。营销型网站就是以用户为核心，在对用户的深刻洞察基础之上，对人性的深入研究之后，营造出一种让人愉悦的购物环境，通过网络这种有效的工具把商品或服务卖出去，从而提高营销型网站的转化率和成交率，获得更大的经济效益和社会效益。”营销型网站如何营造出有利于成交的购物环境呢?1、舒展的页面布局-通过布局来营造有利于成交的网站环境。2、舒适的色彩搭配-通过色彩搭配来营造有利成交的网站环境。3、愉悦的交互体验-优化交互体验来营造有利于成交的网站环境。一、通过布局来营造有利于网站环境1、什么是网站的布局：网站的布局是对网站页面空间的整体规划和安排。良好的布局能让用户获得舒适的视觉感受和良好的交互体验。营销型网站的布局要求阅读流畅、段落层次清晰、布局舒展，无视觉压迫感。2、通常舒展的布局会让访客有更多的耐心，访客在网站上投入更多的时间，网站的阅读率就会很高，用户越愿意花时间在你的营销型网站上，那么您说服用户的机会就越多。3、舒展的布局来自于舒展的设计，舒展的设计是在设计的过程中通过虚实对比产生的，并不是无限制的放大页面的空间。4、对于营销型网站来说，关键不在于您在网站上内容放了多少，而在于用户看了多少；不在于网站上放了说明内容，而是用户看到了说明内容。这才是布局的关键。通过舒展的页面布局，布局您想给用户看的内容。他们所看到的正是您想通过布局让他们了解的这才是布局的关键。二、什么样的内容更容易获得跟多的耐心1、与用户利益相关的，对用户有用的。请思考：从用户的角度出发，这些布局的布局的内容是否对他有用。2、展现的逻辑很重要。在呈现网站内容时，要学会使用有效的逻辑来组织内容，有逻辑的内容更容易让网站访客理解和接受，并被最终说服。3、呈现营销型网站的内容要有层次感。营销型网站要想让那些不了解你网站内容的人对您提供的产品和服务感兴趣，先要告诉他们您产品服务和服务的价值。在用户没有明确的感觉到你提供的产品和服务对他有帮助之前，不要讲其他无用的东西。只有那些喜欢你的人，才愿意花更多的时间去了解你看似与他们利益无关的东西。而只有那些忠实的粉丝对您的一切信息都感兴趣。总之，营销型网站要想有更高的转化率和订单，请不要让页面布局紧张局促，合理安排营销型网站的内容，无论内容时多是少，为访客呈现一个舒展的、逻辑清晰、层次分明的营销型页面吧。营销型落地页已经是未来网站页面发展的一个主流。肖平营销新说:专注于移动互联网精准营销。教您企业使用移动互联网快速赚钱!您可以关注我的“肖平营销新说”百家号，或给我留言，我们可以一起交流分享，肖平营销新说可以把8年网络营销运营的实战经验免费分享给你。
本文仅代表作者观点，不代表百度立场。系作者授权百家号发表，未经许可不得转载。
肖平营销新说
百家号 最近更新：
简介: 用战士的语言分享我所从事的网络营销工作
作者最新文章您所在位置： &
&nbsp&&nbsp&nbsp&&nbsp
营销型网站要点.ppt 49页
本文档一共被下载：
次 ,您可全文免费在线阅读后下载本文档。
下载提示
1.本站不保证该用户上传的文档完整性，不预览、不比对内容而直接下载产生的反悔问题本站不予受理。
2.该文档所得收入(下载+内容+预览三)归上传者、原创者。
3.登录后可充值，立即自动返金币，充值渠道很便利
需要金币：350 &&
你可能关注的文档：
··········
··········
三.如何提网站的成交力 公信力展示总结 1.没有信赖就没有买卖 2.重要的，特别能打动客户的放到首屏幕 3.由于位置有限，可以利用移动效果展示更多内容 三.如何提网站的成交率 3.高成交力网站的三大功能 转换探头 1 三.如何提网站的成交力 转换探头的布置技巧 1.400电话 -头部 -登陆页面的每个部分 -英文网站不必布置 2.对话框 -右下角出现 -对话按钮要及时出现QQ和在线客服 -首页弹出 -在问题处插入客户想要了解的问题 -弹出时间5-10秒 3.注册框 -首页弹出 -设计注册问题，给客户好处或者利益 4.邮箱 -布置在右上角 -英文网站代替400电话 -链接outlook---(英文网站使用） 三.如何提网站的成交率 三.如何提网站的成交力 3.高成交力网站的三大功能 网站数据统计系统 2 三.如何提网站的成交力 我们需要了解 来了多少人 来了浏览多少网页 那些内容是目标客户最喜欢的 停留了多久 购买路径
我们要分析 询盘率 询盘人数/访问人数 订单转化率 下单人数/询盘人数 四.如何让网站具备强大的传播力 * *
如何打造 超级营销型网站 一、什么是营销型网站？ 二、如何布局和规划营销型网站？ 三、如何高效提升网站成交力？ 四、如何强化网站的传播力？ 五、建设和运行中的注意事项？ 一、什么是营销型网站？ 一.什么是营销型网站 一般网站两大烧钱行为 1.目标对手在比较了解你和你的竞争对手的网站后没有给您询盘 消费者搜索到你公司网站的同时一定会同时浏览你竞争对手的网站， 他们只会向感兴趣的网站询盘或购买 2.网站内部优化功能极差，优化事倍功半，只能通过付费来排到搜
索引擎首页 企业营销型网站的流量30%左右来自免费的搜索流量 一.什么是营销型网站 1.营销型网站有两大阅读对象 1.目标客户
2.搜索 网站 一.什么是营销型网站 2.营销型网站针对两大对象的目的？ 给目标客户看 -产生询盘或者直接购买
给搜索引擎看 -让目标关键词排名到搜索引擎首页 一.什么是营销型网站 3.营销型网站必须具备的两大能力 高成交力 -让更多的的奴婢客户联系到你洽谈业务 -让更多目标客户购买你的产品
高传播力 -让搜索引擎收录的的网站，并排到前面 -低价格，标准化产品排到前五位 -高价格，非标准化产品第二页都有效 二.如何规划和布局营销型网站 二.如何规划布局营销型网站 网站规划布局的两个中心； 1.明确的盈利模式和体现 你的盈利模式是什么？ 二.如何规划布局营销型网站 不同的盈利模式，不同的网络沟通对象 盈利模式是 网络营销策
略基础 展示销售
特定用户 招商加盟
加盟商 网络批发
经销商 网络零售
终端客户 信息平台-广告
广告商的目标客户 交易平台-会员费
供应商，采购商 二.如何规划布局营销型网站 不同盈利模式规划网站考虑事项 各个盈利模式是否需要传递不同的甚至相反的信息 渠道模式
-例如代理和大客户
-批发和零售价格
关键词优化冲突
-代理类别的词汇搜索直接看到了零售页面 二.如何规划布局营销型网站 盈利模式和网站兼容原则 冲突内容可以化解的，不同盈利模式可以放在一个网站
不能化解的，分开不同的网站 二.如何规划布局营销型网站 网站规划布局的两个中心： 1.明确盈利模式的体现 2.规划和布局营销型网站的四个重点 让可能购买的客户对号入座 尽量展示更多产品 让客户快速找到自己想要的产品/资讯 产品页 产品页 产品页 产品页 产品页 转化页
产品 分类页
产品 分类页
产品 分类页
产品 分类页
资讯 列表页 主导航
产品分类图
广告 首页 二.如何规划布局营销型网站 首页的规划和布局
关于我们 头部 主导航 搜索栏 主广告位 副导航
产品 联系 方式
产品 横幅广告 资讯 底部关键词 友情链接 底部导航 分享 二.如何规划布局营销型网站 （1）头部布局 头部布局的六个元素 1.公司名称或网站名称或者商标名称 2.根据地域选择地域词汇 -服务特定区域的选择特定区域 -所在区域是该服务/产品优势产地的选择该产地 -服务与全国的/没有优势产地不写区域 3.广告语
4.会员中心 5.联系方式
6.网站地图 二.如何规划布局营销型网站 （2）主导航布局 --“首页”前加公司名称或商标名 --“核心产品”分类放到首页旁边 -
正在加载中，请稍后...