A. 设计代码前首先应该进行 进行规范的代码设计
相信很少有人会在网页设计的过程中把代码设计单独拿出来说，虽然在软件设计中代码设计很受重视，但在web设计里，大家更关心网站结构设计、数据库设计、页面视觉设计，很少有人会真正关心前端代码设计。这恰恰是因为代码设计的优劣不是一般用户所能感觉出来的，设计得差的前端代码，在用户使用过程中也许毫无影响，却能将前端工程师和web程序员弄得一塌糊涂。
DIV的规范及科学统筹
说到前端代码，不能不说DIV架构。目前主流的网站页面架构方式已经转向DIV+CSS的结构层和表现层脱离的方式，这个过程也叫做网站的标准化。这与以往的利用表格定位的方式完全不同，更加强调了界面元素的模块化定位，由DIV确定模块的界限，再由CSS代码表现该DIV元素的表现形式。
在DIV的布局方式中，我们更多强调的是规范，因为DIV的ID名称和CLASS类名称是能够由代码编写者自行定义的，所以有明确规范的DIV设计是前端代码设计的前提。如今的web工作往往牵涉到一个团队中的多人进行协作开发，代码被阅读和被修改的次数远远多于它被编写的次数，而保持代码易读、易修改的关键，就在于在代码编写前期确定能被认同的代码规范。
首先我们先了解DIV架构中的命名规则，DIV的许多规范要点体现在ID或者CLASS的命名中，绝大多数设计师习惯使用属性命名方式：即显示绿色14号字的类就命名为green14，蓝色背景区域的类就命名为blueBg。这样命名也未尝不可，但是这样的命名方式对于合作的其他职能部门的同事来说，是毫无意义的。PHP程序员不会关心这个类的字是什么颜色，他只管这块区域应该和哪个程序模块接口；模板编辑也不会关心背景究竟该是前庆什么颜色，他只管哪个区域是用来显示头图、哪个区域显示全站导航和全站通用底部。所以我们比较倡导表意命名方式和接口命名方式，比如pageHead和loginArea这样的命名，pageHead明确表示了这块区域的意思，而loginArea指代了这是个登录区域的接口。不管这两个类里的字号颜色等将来因为改版发生了什么改变，它们起到的作用和所定义的固定区域是不会改变的。
其次我们了解一下DIV中类的复用，同一个页面中，DIV的ID是唯一的，表示该页面上独一无二的一种特定表现；而CLASS（类）是可以无限重复使用的，表现该页面上有某些属性相同的若干区域，所以DIV的复用仅仅指的是类。牵涉到复用的时候，类的命名应该尽量多地表意化，有必要的情况下使用属性命名也能起到很好的效果。比如页面中有很多个不同的内容列表区块，但是宽度都是760px，那么使用contList760这样的类名称进行复用就比contListA、contListB、contListC……这样单独且表意不明显的命名要好得多。如图1所示的网站alistapart.com，由图2我们可以看出，它的代码设计非常规整。
名词解释
CSS是英语Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。
DIV元素是用来为HTML文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV标签的属性来控制，或者通过使用样式表格式化这个块来进行控制。
DIV+CSS是网站标准（或称“Web标准”）中常用的术语之一，通常为了说明与HTML网页设计语言中的表格（table）定位方式的区别，因为XHTML网站设计标准中，不再使用表格定位技术，而物悉是采用DIV+CSS的方式实现各种定位。
CSS整站规划――网站设计的重中之重
说过DIV当然要说说CSS，CSS使现代网站大放异彩。符合标准化的网站，仅仅通过更换一个不同的CSS文件，就可以瞬间实现整站所有页面改变更新的显示效果。CSS统一了网页的表现层，而不影响网站结构和数据传输。
而CSS的书写方式也因设计师的不同而各有千秋，在此，我们强调CSS的设计关键在于代码的缩略与复用：缩略能使CSS代码更加简明扼要，CSS文件也能缩小体积；复慧蚂握用则是提高代码的利用率，以最少的代码实现最高的重复使用效率。如图3所示，腾讯网的CSS设计就十分优秀。
首先我们来看代码的缩略，很多编辑器生成的CSS代码片段会像图4一样杂乱随意，而实际上这段代码能缩略掉所有不需要的空格，组合起同系列元素，使得代码行读起来更加轻松无负担。
毕竟，编辑器是按照一定的程序运算而提供出来的CSS样式，它能自动实现预期效果的CSS样式，而绝不会自动精简代码。这个过程还是需要人的干预，而且对于不同的应用场合，CSS代码中的缩略方式也会有所不同，而取谁舍谁，则完全看具体情况而定了。
其次，我们来了解CSS的复用。同样是复用，CSS的复用情况和DIV很不同。设计中我们需要尽量实现CSS代码的复用，尽量多利用CSS的继承和层叠，而不是到处定义新的CSS类。在繁琐的CSS设计中，也许会遇见两个大部分属性一致而只有某一两个细节不同的类，那么可以考虑这两个类是否是继承关系，或者说将它们相同的属性提炼出来，形成另一个可供公用的类。
后期整理――代码也可以很美
之前说的都是代码编写的前期规范，而页面完成之后，代码的后期整理对于今后的修改维护“可持续发展”也非常重要。在这里，我们需要注意以下几个方面的内容。
1.样式表统一：样式表分为内联样式表和外联样式表，成型的网站架构要求对样式表统一管理，所有的样式表都需要独立出来，作为一个或几个外联样式表文件；除非是极特殊的情况，该CSS只在这一个页面中出现，不会有另外的页面需要复用它，那么可以考虑使用内联，而内联样式很多时候会被视为极不专业的做法。如图5，色影无忌网站的设计从外观看很符合标准化设计，但从图6我们可以看出色影无忌的代码设计非常混乱。
2.注释：再科学、再规范的代码，也不见得能一眼就被其他人读懂，所以这个时候需要代码注释。CSS的注释很简单，在HTML里的DIV注释因为其层级嵌套关系的问题，需要使用和的方式进行包含处理，这样能使代码更加模块化。如图7所示，新浪的页面注释就很整齐。
3.空格：关于CSS代码中的空格问题一直被激烈地讨论着，我的主张是，在页面发布之前，因为代码的规整而产生的空格是没有问题的，这样更便于编辑与调试，而在网站定稿上线后，可以将CSS类里的空格换行都删除，每个定义类都并成一行代码，这样既能压缩文件空间，也能使所有类的名称整齐划一，便于查找。
4.其他：有些编辑器产生的CSS代码会出现大写字符，建议统一修改成小写，而对color:#666666之类的颜色代码，可以缩写为color:#666。这对维护没增加什么困难，而且确实减小了文件体积。
CSS标准化在页面应用的补充
● 摒弃table布局不是说禁止使用table，table标签仍可以用在容纳表格型数据的场合，而不用于页面布局的目的。
● 页面中的标签都是带有结构含义的，尽量少因为布局的目的引入额外的div标签。
● 页面中的结构与表现完全分离，结构位于html文件中，表现位于css文件中。
● 尽量使用通用的CSS语法，少用特定于某种浏览器的CSS语法。必需要用的，则将这类语法隔离在单独的css文件中，以便日后浏览器升级后删除。
B. 什么是web前端开发标准
对于前端，官方的定义是网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。用自己的话来说，前端是网页给访问网站的人看的内容和页面，那前端开发顾名思义就是这些内容和页面中代码的实现。
现在的前端开发使得现代网页更加美观，交互效果显着，功能更加强大。所以现在的前端开发，运用到的知识面更加广泛，难度也更大。前端开发目前市场需求还是很大的，而且相对来讲比较容易，很适合学习。需要学习的内容也不少，我有全套web前端视频课资料可以发给你自学。
学习内容包括：
①计算机基础以及PS基础
②前端开发基础（HTML5开发、JavaScript基础到高级、jQuery网页特效、Bootstrap框架）
③移动开发
④前端高级开发（ECMAScript6、Veu.js框架开发、webpack、前端页面优化、React框架开发、AngularJS 2.0框架开发等）
⑤小程序开发
⑥全栈开发（MySQL数据库、Python编程语言、Django框架等）
⑦就业拓展（网站SEO与前端安全技术）
互联网行业目前还是最热门的行业之一，学习IT技能之后足够优秀是有机会进入腾讯、阿里、网易等互联网大厂高薪就业的，发展前景非常好，普通人也可以学习。
想要系统学习，你可以考察对比一下开设有相关专业的热门学校，好的学校拥有根据当下企业需求自主研发课程的能力，能够在校期间取得大专或本科学历，中博软件学院、南京课工场、南京北大青鸟等开设相关专业的学校都是不错的，建议实地考察对比一下。
祝你学有所成，望采纳。
C. 网站前端开发都需要掌握哪些知识
我们都知道网站开发分为 前端（客户端）和 后端（服务器端）两个部分。网站开发 后端 更多的是与数据库进行交互以处理相应的业务逻辑。需要考虑的是如何实现功能、数据的存取、平台的稳定性与性能等。至于 前端，在这里泛指Web前端，也就是在Web应用中用户可以看得见碰得着的东西。包括Web页面的结构、Web的外观视觉表现以及Web层面的交互实现。主要负责实现视觉和交互效果，以及与服务器通信，完成业务逻辑。它的核心价值在于实现用户体验，大型互联网公司的用户体验部门，一般会包括用户研究、交互设计、前端技术和视觉设计等方面的内容。
作为一名网站前端开发者，以下的知识是不可或缺的：
1HTMLHTML即HyperText Markup Languag，超级文本标记语言。这是网站开发中最简单的，也是最基础的内容，几乎所有的开发者都必须首先经历这个环节。必须要熟练掌握div、form、table、li 、p、span、font等等标签，这些都是最常用的。其中尤其需要注意div和table这两个，算是用到最多的内容。div用于布局；table用来和数据打交道（虽然table也可以用于布局,但是并不灵活）。
2CSSCSS即Cascading style Sheets层叠样式表，其中css3我们先不谈。CSS主要用于辅助html来布局和展示，我们称之为“css样式”。对于css要掌握的内容主要包括float、position、width、height、overflow、margin、padding等等,这些都是跟布局有关系的样式。不管你用什么工具软件制作网页，其实都有在有意无意地使用CSS。用好CSS能使你的网页更加简炼，为什么同样内容的网页，有的人做出来有几十KB，而高手做出来只有十几KB，CSS在其中的作用是不言而喻的。
3JSJS即JavaScript，作为一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。我们所讲的前两个内容都很基础，接下来的东西可能接受起来有难度，但是事实上js入门算是比较简单的,不需要会很多东西的。基础点的内容只要会根据某个id、或者name拿到网页dom或者样式、或者值,然后会给某个id或者name的元素标签赋值、或者追加数据、追html,这个是跟数据有关系的操作,之后数据逻辑判断。至于效果方面的,无非就是跳转、弹框、隐藏什么的。当然，这些东西单独拿出来比较简单，但是实际中几乎没有这么简单的情况，很多时候都需要把这些各种各样地结合起来。
4JQueryJQuery说白了是一个JavaScript（JS）框架，相当于把js封装了一套的一个js插件，目的就是操作起来更方便,代码写的更少,它支持JS的常规操作以及一些扩展，比如图形等，对JSON格式也能很好的解析，ajax也做了封装，语法也比较简单。功能十分强大。jquery入门也很简单,那些是入门需要学的和js一样,只是换成了jq的代码。不好的地方是它将js语法与开发人员完全隔离，也就说你开发几年JQuery后还会不会用纯 编程都是个问题。
5CSS3+HTML5这是最近比较流行的内容了。HTML5在原有的基础上新增和移除了一些元素，提供了对表单的强大支持。它并非仅仅用来表示Web内容，它的新使命是将Web带入一个成熟的应用平台，在HTML 5平台上，视频，音频，图象，动画，以及同电脑的交互都被标准化。CSS3对于我们Web开发者来说不只是新奇的技术，更重要的是这些全新概念的web应用给我们带来更多无限的可能性，也极大地提高了我们的开发效率。我们将不必再依赖图片或者Javascript 去完成圆角、多背景、用户自定义字体、3D动画、渐变、盒阴影、文字阴影、透明度等提高Web设计质量的特色应用。
6简单后台语言作为一名前端开发者不仅需要掌握上面讲的有关前端的知识，还必须懂一点后台语言,比如java、php等等。因为前台界面的数据都是从后台来的,我们必须知道怎么跟后台交互数据。这样不仅能够节约时间，还可以让前端代码更规范，让后台开发者减少一些不必要的麻烦。否则的话，可能因为前台的写法和后端给来的数据不能结合上,导致前端代码必须重新编写。