网站前端开发的核心理念与必备技能解析

　　作为一名前端开发工程师设置div边框颜色，对于网站前端开发需要具备什么核心思想？

　　前端开发核心思想?

　　1、表现、内容和行为的分离

　　2、标记应该是结构良好、语义正确 以及 普遍合法 设置div边框颜色。

　　3、Javascript应该起到渐进式增强用户体验的作用 设置div边框颜色。

　　总体原则?

　　1、缩进?

　　对于所有编程语言，我们要求缩进必须是软tab（用空格字符）设置div边框颜色。在你的文本编辑器里敲 Tab 应该等于 4个空格 。

　　2、可读性 vs 压缩?

　　对于维护现有文件，我们认为可读性比节省文件大小更重要设置div边框颜色。大量空白和适当的ASCII艺术都是受鼓励的。任何开发者都不必故意去压缩HTML或CSS，也不必把Javascript代码最小化得面目全非。

　　我们会在服务器端或build过程中自动最小化并gzip压缩所有的静态客户端文件，例如CSS和JS设置div边框颜色。

　　3、标记?

　　任何网页的首要组件就是基于标签的HTML标记语言设置div边框颜色。标记定义了文档的结构和纲要，并提供结构化的内容。除了最基本的概念（例如标题、段落和列表）之外，标记并不是用来定义页面上内容的外观和体验的。HTML的表现属性都已经被废弃了，有关样式的定义应该被包含在 样式表中。

　　4、HTML5?

　　Doctype?标记中必须总是使用合适的Doctype来指示浏览器触发标准模式. 永远要避免Quirks模式设置div边框颜色。

　　HTML5特别好的一个方面就是它简化了Doctype需要的代码设置div边框颜色。无意义的属性被弃用了，DOCTYPE 声明也被显著地简化了。另外，也无需再用 CDATA 对内联Javascript代码进行转义，而这在此之前为了让XHTML符合XML的严密性是必需的。

　　HTML5 Doctype

　　4.1、

　　字符编码?

　　所有标记必须通过UTF-8编码传递，因为这种编码方式是对国际化最友好的设置div边框颜色。必须在部分都指定这种编码。

　　设定字符编码是通过 标签进行设置div边框颜色。

　　如果是HTML5设置div边框颜色，则只需要写：

　　4.2、标记的总体原则?

　　编写HTML标记的总体原则设置div边框颜色。提醒大家一点，在创建的HTML文档里总是要使用能够代表内容语义的标记。

　　段落分隔符要使用实际对应的

元素，而不是用多个
标签设置div边框颜色。

　　在合适的条件下，充分利用

（定义列表）和

标签设置div边框颜色。

　　列表中的条目必须总是放置于

、
或

中，永远不要用一组

或

来表示设置div边框颜色。

　　给每个表单里的字段加上 标签，其中的 for属性必须和对应的输入字段对应，这样用户就可以点击标签设置div边框颜色。同理，给标签加上 cursor:pointer; 样式也是明智的做法。

　　不用使用输入字段中的 size 属性设置div边框颜色。该属性是和输入字段里文本的 font-size 相关的。应该使用CSS宽度。

　　在某些闭合的

标签旁边加上一段html注释，说明这里闭合的是什么元素设置div边框颜色。这在有大量嵌套和缩进的情况下会很有用。

　　不要把表格用于页面布局设置div边框颜色。

　　在合适的条件下，利用 microformats 和/或者 Microdata ，具体说是 hCard 和 adr设置div边框颜色。

　　在合适的条件下，利用 、和标签 (以及Scope属性）设置div边框颜色。

　　具备恰当语法结构(THEAD,TBODY,TH [scope])的 Table 标记

　　01.

　　02.

　　03.

　　04.

　　05.

　　06.

　　07.

　　08.

　　09.

　　10.

　　11.

　　12.

　　13.

　　14.

Table header 1	Table header 2
Table data 1	Table data 2

　　对于页眉和标题，永远使用首字母大写格式设置div边框颜色。不要在标记中使用全部大写或小写的标题，而是应用CSS属性 text-transform:uppercase/lowercase 。

　　属性加引号?

　　在HTML5规范里并没有严格要求属性值两边加引号设置div边框颜色。但考虑到一些属性可以接受空白值，为了保持一致性，我们要求所有属性值必须加上引号。

　　

Thi s is my paragraph of special text.

　　CSS?

　　1.网页的第二个组件就是在层叠样式表（CSS）中包含的表现信息设置div边框颜色。Web浏览器成功实现CSS后，整整一代web开发者对他们网站的外观和体验拥有了全部的控制权。CSS 从表现方面则是通过对视觉属性的定义来描述网页。CSS 的强大之处在于，这些属性可以混合并通过各种标示符匹配，它可以通过样式规则的分层（”层叠“）来控制页面的布局和视觉特征。

　　2.从外部文件加载CSS，尽可能减少文件数设置div边框颜色。加载标签必须放在文件的 HEAD 部分。用 LINK 标签加载，永远不要用@import。

　　3.加载样式表

　　

　　4.不要用内联式样式

　　

This is poor form, I say

　　5.不要在文件中用内联式引入的样式，不管它是定义在样式标签里还是直接定义在元素上设置div边框颜色。这样会很难追踪样式规则。

　　6.使用 normalize.css 让渲染效果在不同浏览器中更一致设置div边框颜色。

　　7.使用类似 YUI fonts.css 的字体规格化文件设置div边框颜色。

　　8.定义样式的时候，对样式在页面只出现一次的元素用id，其他的用class设置div边框颜色。

　　9.理解层叠和选择器的明确度 ，这样你就可以写出非常简洁且高效的代码设置div边框颜色。

　　10.编写性能优化的选择器设置div边框颜色。尽可能避免使用开销大的CSS选择器。例如，避免 * 通配符选择器，也不要叠加限定条件到 ID 选择器（例如 div#myid）或 class 选择器（例如 table.results）上。这对于速度至上并包含了成千上万个DOM元素的web应用来说尤为重要。

　　CSS盒子模型?

　　代码要求最低要求：选择器单独占一行，每个属性占一行设置div边框颜色。属性声明要有缩进。

　　作为提高的要求，关联或孩子样式要增加2-4个空格的缩进设置div边框颜色。这样有利于分层查看和组织，产生（对某些人来说）可读性更好的样式表。

　　另外，在给一个样式指定多个选择器的时候，把每个选择器单独放一行是个好主意设置div边框颜色。这样可以避免一行变得太长，也能提高可读性及版本控制流程。

　　01..post-list li a{

　　02. color:#A8A8A8;

　　03.}

　　04. .post-list li a:hover{

　　05. color:#000;

　　06. text-decoration:none;

　　07. }

　　08. .post-list li .author a,

　　09. .post-list li .author a:hover{

　　10. color:#F30;

　　11. text-transform:uppercase;

　　12. }

　　在多个开发者协作环境下，避免用单行CSS格式，因为这样会给版本控制带来问题设置div边框颜色。

　　字母排序?

　　如果你对性能情有独钟， 对CSS属性进行字母排序有利于在GZIP压缩中识别大量可重复的特征设置div边框颜色。

　　Classes vs. IDs?

　　对于所用的样式只出现一次的元素，给它设一个id属性设置div边框颜色。这个属性只会应用于该元素，不会用到其他地方。Class属性则可以用到多个具有相同样式属性的元素上。具有相同外观和表现的元素可以具有相同的class名。

　　1.

　　2.

• Category 1

　　3.

• Category 2

　　4.

• Category 3

　　5.

　　选择器命名的惯例?

　　无论是 ID 还是 class，对任何东西最好总是根据它是什么而不是它看上去是什么样子来命名设置div边框颜色。 比如一个页面上的特别提示的 class 名是 bigBlueText （大蓝字），可它的样式早就被改成红色小字体，这个名字就没意义了。使用更聪明的惯例如 noteText （提示文字）就好多了，因为即使视觉样式改变了，它也还是管用的。

　　选择器?

　　CSS3 选择器 规格引入了一整套对于更好地选择元素极其有用的 CSS 选择器设置div边框颜色。

　　伪类?

　　伪类 使你能动态地修饰网页内容的样式设置div边框颜色。有些伪类从CSS1 （:visited, :hover等） 和 CSS2 （:first-child, :lang）那时候开始就有了。CSS3又往列表里加入了16个新的伪类，这些伪类对于动态地修饰网页内容的样式特别有用。 学习如何深度使用伪类。

　　组合及属性选择器?



　　组合选择器 提供了为特定元素选择其后代元素、孩子元素或兄弟元素的快捷方式设置div边框颜色。

　　属性选择器 适用于具有特定属性 和/或 特定值的元素设置div边框颜色。正则表达式的知识对属性选择大有帮助。

　　明确度?

　　浏览器会通过计算选择器的明确度设置div边框颜色。来决定应用哪个CSS规则。如果两个选择器都适用于同样的元素，具有更高明确度的那个会胜出。ID 选择器比属性选择器明确度高，class 选择器比任何数量的元素选择器明确度高。尽量使用 ID 选择器来提高明确度。有时候我们可能会想方设法给一个元素应用一条CSS规则，但用尽方法也不能如愿。这种情况有可能是因为我们使用的选择器比另外一个的明确度低，所以明确度高的另一个选择器里的属性就比我们想应用的选择器优先了。这种情况在更大或更复杂的样式表里更为常见。在小一些的项目里，通常这不是大问题。

　　计算明确度?

　　当你在一个很大很复杂的样式表上干活的时候，知道如何计算选择器的明确度会有很大帮助，会节约你的时间，并让你的选择器更有效率设置div边框颜色。

　　明确度的计算方式是对你的CSS的各种组件计数，并用 (a,b,c,d) 格式表达出来设置div边框颜色。

　　元素设置div边框颜色，伪元素: d = 1 – (0,0,0,1)

　　类设置div边框颜色，伪类，属性: c = 1 – (0,0,1,0)

　　Id: b = 1 – (0,1,0,0)

　　内联样式: a = 1 – (1,0,0,0)

　　不过，也许使用现成的明确度计算器更好一些设置div边框颜色。

　　明确度计算器

　　设置div边框颜色你应该了解的关于明确度的一些事

　　IE 明确度 bugs

　　使用 !important 会覆盖掉所有的明确度，不管它有多高设置div边框颜色。因此我们倾向于避免使用它。大部分时候是没必要用它的。即使你需要覆盖某个你访问不到的样式表里的选择器，往往也会有其他的办法去覆盖。尽可能避免使用它。

　　像素 vs. Em?

　　我们使用 px 作为定义 font size 的度量单位，因为它能提供对文本的绝对控制设置div边框颜色。我们知道为字体大小使用 em 单位一度很流行，这样可以解决 IE6 无法改变基于像素的文本大小的问题。不过，现在所有的主流浏览器（包括 IE7 和 IE8）都支持基于像素单位的文本大小 和/或 整页缩放。既然 IE6 被广泛认为已废弃，用像素定义文本尺寸更好。另外，无单位的 line-height 也应该优先考虑，因为它不会从父元素继承一个百分比值，而是基于 font-size 的一个乘数。

　　正确

　　1.#selector {

　　2. font-size: 13px;

　　3. line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Rounds to 20px. */

　　4.}

　　不正确

　　1./* Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */

　　2.#selector {

　　3. font-size: 0.813em;

　　4. line-height: 1.25em;

　　5.}

　　IE Bugs?

　　不可避免地，当所有其他浏览器看起来都正常工作的时候，各种版本的IE浏览器就会冒出一些莫名其妙的bug，让部署一拖再拖设置div边框颜色。虽然我们鼓励排除问题，产出无需打补丁就能在所有浏览器上运行的代码，有时候为了在样式表中使用CSS钩子，还是有必要用到CSS if IE 条件注释。从 paulirish.com 了解更多信息。

　　修复 IE

　　1.

　　2.

　　3.

　　4.

　　5.

　　1..box { float: left; margin-left: 20px; }



　　2..ie6 .box { margin-left: 10px; }

　　如果你在用HTML5（以及 HTML5 Boilerplate）设置div边框颜色， 我们推荐使用 Modernizer Javascript库和下列模式：

　　1.

　　2.

　　3.

　　4.

　　5.

　　速记格式?

　　一般情况下要优先使用CSS速记格式，一是因为它的简洁，二是用它也可以扩充已有的值，例如margin和padding的情况设置div边框颜色。 开发者必须注意TRBL 缩写，它表示元素的各边按顺时针方向定义的顺序：上、右、下、左。如果bottom没有定义，它就会从top继承值。同理，如果left未定义，它从right继承值。如果只有top的值有定义，所有的边都会继承那一个值。

　　下面是关于减少样式表代码冗余和使用CSS速记格式的更多内容：

　　

　　

　　

　　图片?

　　对于（用于背景的）重复图片设置div边框颜色，要使用 比 1×1 像素大的图片

　　永远不要用空白图片设置div边框颜色。

　　多使用 CSS精灵（sprites）设置div边框颜色。它会使悬停状态更简单，改善页面加载速度，并减少二氧化碳的排放。

　　一般情况下，所有的图片都应该切成带透明背景（PNG8），并裁减成紧密贴合图片外边框设置div边框颜色。

　　不过，logo必须总是带有背景遮片，并在裁减内容之外留出内边框设置div边框颜色。

　　颜色管理?

　　确认团队所有成员都有一致的颜色管理设置设置div边框颜色。

　　任意两台显示器显示的颜色很可能会有所不同，但必须使用sRGB颜色作为缺省配置设置div边框颜色。

　　当你在Photoshop打开文件时，要注意颜色配置警告，当Photoshop建议把图片转换到另一个配置时，要通知其他团队成员设置div边框颜色。

　　永远不要把颜色配置嵌入到图片里设置div边框颜色。

　　当你从Photoshop保存图片时，务必去掉”Embed Color Profile”选项的勾选设置div边框颜色。

　　通用的文本和字体样式?

　　标题?

　　要给 h1-h6 标题 — 包括作为链接的标题 — 定义缺省样式设置div边框颜色。在你的CSS文档顶部定义它们，在必要时修改它们以保持整个站点的一致性。

　　标题必须有层次，能表明从大到小不同级别的重要性，h1具有最大的字体大小设置div边框颜色。

　　SEO：要大致地了解页面的层次组织和阅读效果，在开发者工具里关闭CSS效果，你会看到一个基于文字的视图，包括所有的 h1-h6 ， strong， em 等标签设置div边框颜色。

　　链接?

　　必须定义链接的缺省样式，样式要和主要的文字样式不同，载悬停状态下也要有不同的样式设置div边框颜色。

　　当给链接加下划线样式时，使用 border-bottom 并用 text-decoration: none; 加点内边框设置div边框颜色。这样看起来更好一些。

　　深入学习和理解CSS及基于浏览器的盒子模型，对于掌握CSS布局的基础是非常必要的设置div边框颜色。

　　网站前端开发核心思想