本文主要为编者读书笔记，在文章里面很多话是掺杂了编者自己的见解，如果有哪里出现错误或者用词不严谨，请友善留言，编者会及时去更改。
第零章 前言
web 前端开发是从网页制作演变而来的，在名称上有很明显的时代特征。
网页制作是 Web1.0时代的产物，网站内容主要是静态的，用户使用网站的行为也以浏览为主。
2005年进入 Web2.0时代，网页不再只承载单一的文字和图片，网页上软件化的交互形式为用户提供了更好的使用体验，这些都是基于前端技术实现的。
以前会 PS 和 Dreamweaver 就可以进行开发，而现在的网页制作更接近传统的网站后台开发，所以现在叫做 Web 前端开发。
Web 前端开发人员
主要职责：把网站的界面更好的呈现给用户
1.掌握基本的 web 前端开发技术 HTML CSS DOM BOM Ajax JS 还需要清楚的了解它们在不同浏览器中的兼容情况，渲染原理以及存在的 BUG 2.一名合格的前端工程师知识结构中 网站性能优化 SEO 服务器端基础知识 3.学会运用各种工具进行辅助开发 4.除了掌握技术层面知识，还需要掌握理论层面的知识 代码的可维护性 组件的易用性 分层语义模板 浏览器分级支持
之前包括新浪，搜狐，BAT 等各种规模公司都对自己的网站进行了重构,因为如下两点原因。
1.根据 W3C 标准结构重构之后，可以让前端代码组织更有序，显著改善网站的性能，还可以提高可维护性，对搜索引擎也更友好；
2.重构后的网站能带来更好的用户体验，重构之后的网站，文件更小，下载速度更快
而我们的 DHTML 让用户操作更炫，Ajax 可以实现无刷新的数据交换，操作更流畅，这也给我们现在的前端开发带来了新的体验。
第一章：从网站重构说起
Web 标准 ——— 结构，样式和行为的分离
分割成 .html .css .js 三个文件
而我们现在前端开发的现状
浏览器层面 各大浏览器之间存在非常多的差异问题 技术层面 标准出现时间不长，对某些效果没有特定的解决方案，每个人对好的网站标准都不一致 团队合作层面 合作不好，页面可能出现各种漏洞，需要不停的打补丁，到最后代码千疮百孔，没人愿意去维护
而我们在混乱的浏览器环境下，我们依旧要去打造高品质前端代码，提高代码的可维护性，想要做到提高品质我们可以从以下三点出发。
精简：减小文件体积，帮助客户端更快下载 重用：代码更精简，提升开发速度 有序：更清晰组织代码，使代码更易维护，有效应对变化
而具体如何去做到 HTML 代码的精简，提高重用，做到有序，我们会在之后的代码中一一给大家解释。
第二章：团队合作
首先我们先来揭秘一下，什么是前端开发工程师？
2.1 CSS 布局是前端开发工程师的基本功
日常工作中 CSS 的使用比重占到了所有技能的50%~70%，甚至有的公司要求会用 CSS，但是需要注意兼容问题
2.2 对 JS 使用有要求
不仅仅会原生 JS,还要会使用 JS 类库和 Ajax
JS：浏览器默认支持的脚本语言Ajax：一种利用 JS 和 XMLHttpRequest 对象在客户端和服务器端传送数据的技术，因为 XMLHttpRequest 对象也是用 JS 去创建的对象，所以某种意义上来说，Ajax 是 JS 的一个子集注意：Ajax 只是一种提交数据的方式，与传统的表单提交方式确实有所不同，但是核心的内容非常少，学起来并不难JS 类库：浏览器默认支持的 JS 会因为浏览器的不同而有所差异，同时 JS 原生提供的方法有些不那么好用，所以出现了 JS 类库这个东西，JS类库只是在原生 JS 中封装了跨浏览器兼容的特性并拓展了一些原生 JS 没有的功能
2.3 要了解后台语言
1.知道服务器端工程师在生产页面时会如何去进行输出，以便方便他们套脚本的模版2.在写 Ajax 应用的是时候，可以自己模拟服务器端 输出，方便调试3.对前端和服务器端如何配合有清晰的大局观认识，了解数据传递的整个流程，以配合工程师共同制定复杂效果的实现方案
2.4 欲精一行，先通十行
2.5 增加代码的可读性——注释
直接团队合作间接团队合作
2.6 提高重用性——公共组件和私有组件的维护
避免 A 为了实现某种效果，去写了一段代码，而 B 又去从新写了一遍
提升代码的重用度
公共组件 保持接口弹性 高度模块化 使用人比较多，不要轻易修改 给其他人只读的权限，例如 SVN 私有组件 自己用，但是还是要注意代码可读性
2.7 冗余和精简的矛盾——选择集中还是分散
所有公共组件全部放在一起，统一去加载，但是会造成冗余代码 例如 JQuery所有组件精确划分，之后按需求去加载，但是使用太麻烦 例如 YUI
YUI—-雅虎的前端框架
第三章：高质量的 HTML
3.1 标签的语义
3.2 为什么使用语义化标签
搜索引擎看不到视觉效果，看到的只是代码，只能通过标签来判断内容的语义
3.3 如何判断你的标签是否语义良好
去掉样式，看网页结构是否组织良好有序，是否仍然有很好的可读性推荐一个FireFox插件，WebDeveloper，可以去掉界面中的 CSS 样式，以此来查看你的代码的稳定程度
3.4 语义化标签应注意的一些其他问题
尽可能的少使用无语义标签 div 和 span在语义不明显，既可以用p 也可以使用 div 的地方，尽量用 p ，因为 p 默认情况下有上下间距，去掉样式后可读性更好，对兼容特殊终端有利不要使用纯样式标签，如 b,font,u 等，改用 CSS 设置
第四章：高质量的 CSS
4.1 为了确保向后兼容，浏览器厂商发明了标准模式和怪异模式这两种方法来解析网页
怪异模式通常模拟老式浏览器以防止老站点无法工作
4.2 怪异模式如何被触发？
与 DTD 有关，即文档定义类型，例如下面介绍的几种。
4.2.1 html:4s HTML4.01严格型Document4.2.2 html:xt XHTML严格型
Document
如果漏写 DTD 声明，Firefox 仍然会按照标准模式来解析网页，但是在 IE6/7/8 中会触发怪异模式
4.3 如何组织 CSS
一部分是 CCSS 的 API,重点是如何控制页面内元素的样式,但是这些知识都是基础，有对错的明显区别。
另外一部分是 CSS 框架，重点是对 CSS 进行组织，相反，这些则是一些高级的用法，没有明显的对错，只有更加优化。
4.4 常见组织CSS 的方式
4.4.1 一般形式控制字体：font.css控制颜色：color.css控制布局：layout.css4.4.2 另外一种形式
头部样式：head.css底部样式：foot.css侧边栏样式：sidebar.css主题样式：main.css4.4.3 推荐形式
page.css
三者中重用度最低的内容，高度重用的内容我们会放在 common 中， 而一般重用度低的内容我们放在 page 中。 page 层专门用于提供页面级别的样式内容，可以根据页面中的内容去任意修改，增添 page 可以根据个人用户的需求去任意添加，但是需要注意命名的规范， 不要多个人使用了相同的名字
common.css
三者中间层，提供组件级的 CSS 类 我们在设计 common 类的时候，首先需要将我们的界面里面的内容进行“模块化”， 有一些模块是很少去使用的，而另外一些是经常会使用的内容， 而我们则需要将里面的内容进行提取出来，放在 common 中 common 一般是网站级别的，不同的网站有不同的基础样式风格， 所以我们的 common 一般推荐由团队中的某一个人去进行维护，统一管理
base.css
三者最低层，用于提供 reset 功能和粒度最小的通用类———原子类 这一层会被所有界面引用，是页面样式所有需依赖的最底层 base 层设计的内容会被不同的页面共同使用，所以代码内容一定要通用性强，精简 base 层相对稳定，基本不需要进行维护
例子：帮助理解
base 是房子的地基，一旦确定，轻易不会去进行更改 common 是房子内部的一些基础组件，例如门的形状，窗户的大小等这些会经常被使用， 但是不同的房子，使用的样式有各不相同的内容 page 是我们房子内部使用的具体内容，例如我们使用的灯是什么样子的，我们使用的桌子 是什么样子的，这些都是我们根据我们具体的页面需要去进行特定的设置的内容4.4.4 page.css 中需要注意的内容
首先是进行 reset
不要去使用通配符，首先性能很低，其次会导致 css 的继承性， 设置样式的时候会多写很多额外的代码
其次是进行 通用原子类
例如： .f12{font-size:12px} 通用性：任何页面都可以使用 原子性：一个类只设置一个样式，不可再分 特殊说明
.fl 和 .fr 类 (float：left float:right)
在设置浮动的同时还需要进行设置，display:inline 为了解决 IE6 的双倍边距 BUG 在 IE 6之下，对元素设置了浮动， 又设置了 margin-left 或者 margin-right 的时候， 我们的 margin 会加倍
.bc 类 （.blockCenter）
在使块级元素进行居中的时候，我们直接使用并不足以让内容居中， 我们还需要设置宽度，需要与其他设置了宽度的类去进行连用
查看更多关于编写高质量的HTML代码_html/css_WEB-ITnose的详细内容...
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did112242