向大家介绍这些应该遵循的Web前端开发原则。
1、善用DIV来布局
当开发一个Web页面时，要考虑第一件事就是区分页面重点。将这些内容用DIV标签包含起来，页面的代码会呈现出整洁、缩进良好的风格。
2、将HTML标签和CSS样式表分割开来
好的页面应该将HTML标签和CSS样式表分割开来。这是每一个Web开发者在首次接触Web开发时就应该知道的一条原则。然而，直到今天，仍然有很多开发者没有严格遵循这一原则。
不要在HTML标签里内嵌样式表代码。开发者应该养成习惯，单独建立文件，用以存放CSS样式表。而这也将方便其他开发者在修改你的代码时，能迅速完成工作。
3、优化CSS代码
现如今，为网站添加多个CSS文件的做法已经很普遍。但是，当网站包含的CSS文件过多时，会降低网站的响应速度。解决办法是：精简代码并对多个CSS文件进行优化，将其合并成一个文件。这个办法能显著提升网站的加载速度。此外，有很多工具可以用来优化CSS文件，例如CSS Optimizer、Clean CSS等。
4、优化JavaScript文件，并将其放到页面底部
和CSS一样，为页面添加多个Javascript文件也是很普遍的做法。但这同样会降低网站的响应速度。为此，开发者应该精简、优化这些Javascript文件。
但有一点和CSS不同，浏览器通常不支持并行加载。这也就是说，当浏览器加载Javascript文件时，将不再同时加载其它内容。而这就导致了网页的加载速度好像变慢了。
一个好的解决办法是：将Javascript文件的加载顺序放在最后。为了实现这一目标，开发者可以把Javascript代码放在HTML文档的底部，而最好的位置是放在接近</body>标签的地方。
5、善用标题元素
<h1>到 <h6>这些元素用来突出页面的重点内容。这有助于用户更加关注页面的重点部分。对于博客，推荐使用<h1>标签来突出博客标题。因为，博客标题几乎是页面中最重要的部分。
6、在合适的地方使用合适的HTML标签
HTML标签是构造规范内容结构的关键。例如，<em>标签用来强调重点内容。<p>标签适用于突出文章段落。如果想要在段落间加空行，就不要使用<br />标签。
对于一组相关的元素，建议使用<ul>、<ol>或 <dl>标签。但是，不要错误的使用<blockquote>标签，因为它原本是用来定义块应用的。
7、避免滥用<div>标签
并不是所有块元素都应该用<div>标签来创建。例如，可以在内联元素的属性里添加display:block，将其以块元素的方式显示。
8、使用列表创建导航
使用<ul>列表标签，再配以相应的CSS样式，可以创建美观的导航菜单。
9、别忘了封闭标签
现在，每当我回忆起在大学里学到的关于Web开发的第一堂课时，教授提到的HTML结构的重要性总是浮现在我的脑海。根据W3C标准，标签应该被封闭。那是因为，在一些浏览器下，如果没有按照标准来将标签封闭，会出现显示不正常的问题。而这一情况在IE6、7和8里尤为明显。
10、标签小写语法
标签采用小写语法是一项行业标准。虽然大写语法并不影响页面的显示效果，但是，代码的可读性很差。下面这段代码可读性就非常差：
11、为图片标签添加alt属性
在<img>标签里，alt属性通常非常有用。因为搜索引擎通常无法直接抓取图片文件。但是，如果开发者在alt属性里添加了图片的描述内容，将会方便搜索引擎的抓取。
12、在表格里使用<label>和<fieldset>
为了提高代码质量，并让用户容易理解表格内容，我们应该用<label>和 <fieldset>标签创建表格元素。
13、将浏览器兼容代码标明信息并相互分开
对一名Web开发者来说，跨浏览器兼容是一个被重点关注的问题。通常，开发者会针对不同的浏览器来编码，也即是CSS hack。但是，如果开发者在编码时，能注明代码为哪一个版本的浏览器所写，会为以后的维护工作带来极大方便。下面就是一个很好的示例：
14、避免过度注释
作为一名开发者，在代码中添加注释是一个好习惯，能方便理解并易于维护。这在其它编程语言如PHP、JAVA 和 C#里很普遍。但是，HTML/XHTML是文本标记语言，非常容易理解。因此，无需为每行代码都添加注释。
15、测试代码
推荐开发者使用W3C文本标记验证服务来测试代码。它是一个高效的测试工具，能帮助你发现页面中存在的错误。而且，它还能从页面错误出发，帮你定位到相应的代码。这一点通常在编码完成后很难做到。但开发者需要注意的是，验证通过的代码并非就是性能优异的代码。
以上就是分享的Web前端开发中应该遵循的开发原则。希望这些开发语言对从事Web前端的小伙伴们有帮助。
HTML的主要语法是元素和标签。
元素是符合DTD（文档类型定义）的文档组成部分，如title（文档标题）、IMG（图象）、table（表格）等等。
元素名不区分大小写的。
杭州北大青鸟http://www.kmbdqn.cn/建议HTML用标签来规定元素的属性和它在文档中的位置。
标签分单独出现的标签和成对出现的标签两中。
大多数的标签是成对出现的，有首标签和尾标签组成。
首标签的格式为<元素名>，尾标签的格式为</元素名>。
成对标签用于规定元素所含的范围，如<title>和</title>标签用来界定标题元素的范围，也就是说。
<title>**</title>之间的部分是该HTML文档的标题。
单独标签的格式为<元素名>，它的作用是在相应的位置插入元素。
如<BR>标签表示在该标签所在位置插入一个换行符。
1，<HTML>标签是文档标识符，它是成对出现的，首标签<HTML>和尾标签</HTML>分别位于文档的最前面和最后面，明确地表示文档是以超文本标识语言（HTML)编写的。
该标签不带有任何的属性。
事实上，我们现在所用的浏览器是自动识别HTML文档的，并不要求有<HTML>标签的出现。
也不对它进行任何的操作。
但是，为了提高文档的适用性，还是应该养成用这个标签的习惯。
2，<HEAD>标签。
习惯上我们把HTML文档分为文档头和文档主题两个部分。
文档的主题部分就是我们在浏览器用户区中看到的内容了。
而文档头部分用来规定该文档的标题（出现在浏览器窗口的标题栏中）和文档的一写属性。
HTML文档的标签是可以嵌套的，即在一对标签中可以嵌套另一对子标签。
用来规定母标签所含范围的属性和其中某一部分内容，嵌套在<HEAD>标签中使用的子标签主要有<title>和<isindex>。
<title>标签是成对的。
用来规定HTML文档的标题。
在<title>和</title>之间的内容将显示在WEB浏览器窗口的标题栏中。
例如：<html> <head> <title>这是一个测试页</title> </head> </html> <isindex>标签是一个单独的标签，它是用来规定文档的属性，说明该文档是可以按关键字索引的，下面我们用一段简单的代码来说明该标签的作用。
你可以将该代码copy到你自己的浏览器中看效果。
<html> <head> <title>这是一个"ISINNDEX"事例</title> <isindex> </head> <body> 其中“可搜索该索引。
请键入要搜索的关键字”是IE浏览器自动加上去的。
浏览者在空白文本条内键入要查询的关键字并按回车按确认后，光标就会移动到该关键字或包含这个关键字的词处。
此时，与关键字相匹配的字符呈亮蓝色。
3，<BODY>标签。
<body>标签是成对标签。
在<body></body>之间的内容将显示在浏览器窗口的用户区内，它是HTML文档的主体部分。
在<body>标签中可以规定整个文档的一些基本属性： ·"bgcolor"。
指定html文档的背景色。
·"text"。
指定html文档中文字的颜色。
·"link"。
指定html文档中待连接超链接对象的颜色。
·"alink"。
指定html文档中连接中超链接对象的颜色。
·"vlink"。
指定html文档中以连接超链接对象的颜色。
·"background"。
指定html文档的背景文件。
1、 元素属性值必须包含在双引号中；<font color=”#000000” size=”3” face=”Arial”>
2、 form 中必须加action属性，并且不能为空。
<form action=”/r/add.cgi” method=”post”>
如果不需要使用action属性，也必须定义：
<form action=”no” >
3、 img的alt属性不可以缺少；
<img src="/q/img/btn_style.gif" border="0" alt="Select”>
4、 head与</head>之间必须有title；
<head>
……
<title>your title </title>
……
</head>
5、 tr、td必须定义在table之间；
6、 button按钮必须定义在form之间，否则netscape不支持；
<form action=”……” method=”post”>
<input type=”button” name=”but” value=”back”>
</form>
7、 在javascript中的字符串中出现的“/”前要用转义符“\”：
<script type=”text/javascript”>
<!—
function check(str) {
var str=”\/r\/add.cgi”
……
}
-->
</script>
8、 onclick 属性必须和 onkeypress 成对写( onmousedown + onkeydown、onmouseup + onkeyup)
mm
9、 用URL传值时直接写&是不可以的，可用&替换：
四、缩近规则：
中,等必须保持严格的缩近规则，以"Tab"键为准：
五、为了检验您的HTML代码是否合法，您可以到W3的HTML Validator工具中进行检验，支持URI输入，上传文件和直接输入代码三种方式进行检验
HTML元素参考手册 表示超链接的起始或目的位置。
acronym
表示取首字母的缩写词。
address
表示特定信息，如地址、签名、作者、文档信息。
applet
在页面上放置可执行内容。
area
定义一个客户端图像映射中一个超级链接区域的形状、坐标和关联 URL。
b
指定文本应以粗体显示。（不建议使用）
base
指定一个显式 URL 用于解析对于外部源的链接和引用，如图像和样式表。
basefont
设置显示文本时作为默认字体的基础字体值。（不建议使用）
bdo
允许作者为选定文本片断禁用双向法则。
bgsound
使页面能够带有背景声音或配音。
big
指定所含文本要以比当前字体稍大的字体显示。
blockquote
表示文本中的一段引用语。
body
指明文档主体的开始和结束。
br
插入一个换行符。
button
指定一个容器，其中所含的 HTML 会被显示为一个按钮。
caption
表格的标题，对表格的简单描述。
center
将指定文本和图像居中显示。（不建议使用）
cite
用斜体显示标明引文。（不建议使用）
code
表示代码范例。
col
说明基于列的表格缺省属性。
colgroup
说明表格中一列或一组列的缺省属性。
comment
表示不可见的注释。防止所包含的文本或者HTML源代码被浏览器解析和显示。
dd
在定义列表中表示定义。定义通常在定义列表中缩进显示。
del
表示文本已经从文档中删除。
dfn
表示术语的定义。（不建议使用）
dir
表示目录列表。（不建议使用）
div
表示一块可显示 HTML 的区域
dl
表示定义列表。
dt
在定义列表中表示定义术语。
em
强调文本，通常以斜体显示。
embed
允许嵌入任何类型的文档。
fieldset
在字段集包含的文本和其它元素外面画一个方框。
font
用于说明所包含文本的新字体、大小和颜色。
form
说明所包含的控件是某个表单的组成部分。
frame
在 FRAMESET 元素内表示单个框架。
frameset
表示一个框架集，用于组织多个框架和嵌套框架集。
head
提供了关于文档的无序信息集合。
h1-h6
这实际上是6个标签，他们以标题样式显示文本，h1最大，h6最小。
hr
水平线。
html
表明文档包含 HTML 元素。
