如何设计出优美良好结构的网页前端

凡是从事互联网的人根本都会写几行html，用过Word的人用Dreamweaver也能做出规整的页面，所以大多数人会很自然地认为“页面的开发没啥技能含量，很简单”。不只有这种遍及的认知，对从业者来说也有许多疑问：做页面前端完成，没疑问；兼容性，小case；图像集成，一直都在用……还能有啥疑问？瓶颈啊、天花板啊、转型啊、未来啊就在从业者中广泛评论。是不是真的没啥疑问了呢？网易邮箱前端技能基地也设立好几年了，好像有着评论不完的论题，也常常会有一些新的主意让咱们为之一振。那么页面开发还有哪些需求，还要做些啥，这儿面的水有多深，让咱们舀舀看。
在不一样的时期对页面前端的观点好像是多变的。在互联网前期的时分，小车仍是比房子贵的，烧饼和粉丝还只是用来吃的，菊花还只是用来泡茶的。那时的页面计划个性相对单一，对应的页面需求对比简单，而且其时的浏览器也根本是IE6的全国，javascript也只是网页特效的代名词，HTML页面网站建设自身没有致使太多人的注重，好像只需能用div甚至table加css辅佐把图像定好位，把页面内容预留好就OK了，而且这种观念存在了很长一段时间。跟着页面内容的丰厚，计划个性的开展，交互杂乱性的添加，AJAX的运用，浏览器的更新换代，又让咱们从头对最根本的页面自身注重起来。然后热议的即是浏览器的兼容性，碰到疑问最热心的即是满网络查找hack，趁便再骂骂IE6、7……当这些都做一遍后，好像又遇到了瓶颈，又开端寻找未来。咱们就从这个期间开端说起。
完成作用图是最根本的作业
把视觉稿经过页面代码的方式表现出来包含了两个根本诉求：1.能够实在反映视觉稿；2.能够经过浏览器的兼容。这两个诉求的到达需求咱们有追求细节的情绪和必定的页面功底，能完成这两个内容就能够开端进入页面前端的从业者行列了，但这就代表着咱们能够担任页面开发的作业了？不，才刚刚开端！
与计划师的交流和项目的参加
交流很重要。先抛出几个疑问：咱们有网站建设没有和计划师讨论过某些作用对低端浏览器烘托功率影响对比大？有没有讨论过有些作用能够用CSS3完成然后使得构造愈加简练明晰？有没有在代码和视觉中寻追求过平衡？页面前端的开发向根本用户，编写的代码也直接作用在浏览器上，咱们有义务对页面的稳定性和烘托功率担任。咱们也常常碰到项目在全体进展压力下致使的计划与页面前端开发同步进行，这时更有必要尽量多地获取项目信息，了解咱们还要做些啥，这些能够协助咱们充分思考重用和构造拓宽。
杰出的页面构造
页面构造的编写比方盖房的地基建造，其好坏会直接影响到CSS代码的质量、js开发、后台开发还会影响到今后的页面拓宽、迭代和页面调整。拿到视觉稿后，不要忙着着手开端，多观察思考。先剖析计划，区分构造，然后计划构造，编写代码。特别在大型项目中，合理运用模块化的开发不管从全体进行仍是拓宽保护都有相当大的优点。
对于hack
许多同学在页面开发时上网查找最多的即是hack了，是不是咱们完全要依靠hack来完成页面兼容性，答案是不是定的。咱们常常比方IE6向咱们撒了一个谎，成果咱们要再撒一百个谎来圆这个谎。不否定IE6常常让咱们口吐鲜血，但不代表咱们用更多的“谎话”来弥补就能够心安理得。大多数情况下能够经过变换思路调整HTML构造，或运用一些尽管无法解释但相对安全的css来干掉hack。谁都无法估计运用hack啥时分会让咱们栽一个大跟头。比方触发layout或position:relative就能够协助处理许多IE6的疑问。
美丽的代码
如今许多web项目功能杂乱，代码规划也会深圳做网站变得很无穷，怎么十分好地进行协同开发和保护是咱们面对的一个疑问。需求思考完善一致的计划，还有要养成杰出的代码开发习气才会在面对各种情况时挥洒自如。翻阅页面代码，看到合理的标签运用、杰出的注释、明晰的代码构造、意图精确的css不只犹如赏识一个艺术品，更为下流开发和协同开发降低了不小的交流本钱，咱们有啥理由不去这么做呢？举个不和比方：div滥用是如今对比典型的一个疑问。数数看自个运用的标签有多少个呢？不一样的语义都该运用对应的标签代码，特别是HTML5供给了更丰厚的语义化标签，它们都苦苦地在等候战场上的冲锋号，让咱们去解放它们吧！
无障碍页面开发
可拜访性与易用性是十分片面且人性化的东西。普通人看上去上完满出现的页面在特别群体中不必定显得那么交心。当瞎子用读屏软件在页面某个区域内堕入循环时，咱们应当感到愧疚。只能说目前国内的网站对此的注重程度还远远不够，这就需求咱们共同尽力，让更多的人感受到咱们的热心。>
保障功率
作为项目开发中对比靠前的一环，页面开发也许需求尽早完成为项目争取时间，这就需求咱们尽也许地进步功率。“工欲善其事，必先利其器”，除了实战经验和代码习气的构成能够协助咱们进步功率外，想要进步对自个开发的进展掌控才干，还有许多辅佐东西能够协助咱们进行页面开发。比方运用Less或Sass能够协助咱们拓宽和组织CSS，大大进步CSS的编写功率添加了可保护性。比方能够经过zen coding的自动自动完成和自定义代码块让你能够剑指如飞。甚至还见过经过自定义输入法的代码块关键词来进步开发速度的。多多开掘必定会找到最合适自个运用的东西。
对于服务器的优化
页面开发也需求了解服务器的优化，尽量减小服务器负担。比方css sprite即是一个典型减小服务器恳求数的比方。在网易邮箱的页面前端开发中咱们不停地在做着各种优化，深圳做网站比方一直在寻求文件巨细与服务器恳求数的平衡；为了尽也许进步缓存利用率采用了补丁晋级；对class名进行了混杂紧缩防止命名过长的冗余；运用base64减少恳求数量等等措施。这些都是归纳权衡的成果，需求思考各个方面全体优化。因为当页面拜访量到达必定的数量级时，再小的一点优化都会到达可观的作用，再小的疑问都也许会构成无穷的灾难。
拥抱HTML5
这是一个充溢时机的年代，HTML5年代的降临伴跟着移动互联网的鼓起发明了更大的时机，还有太多的东西值得咱们去学习去发现。 HTML5供给了丰厚的JS API接口，需求咱们去研讨；CSS3的艳丽招引了足够多的眼球，需求咱们去研讨；移动设备上怎么开发愈加适配的页面，需求咱们去研讨……
Stay Hungry, Stay Foolish
水是越舀越多了，却发现本来下面还深不见底，上面的内容越是深入研讨就越会发现更多山川需求翻越。坚持饥饿状态，用双眼去尽力发现开掘，不断丰厚技能才干找到定位，打破瓶颈，正所谓“唯有建瓴高屋方可瓜熟蒂落”。形本钱文是因为之前和同行评论到瓶颈的疑问，想给自个，给页面前端的同学一同找找定位，整理一下思路。拿苹果CEO在斯坦福演讲的一句话“Stay Hungry, Stay Foolish”和咱们共勉。