前端第一步——HTML

前端第一步——HTML

最近对web前端颇有兴趣，便决定开始慢慢的研究前端了。

那么，到底什么是WEB前端工程师呢？TA的主要职责是什么呢？TA需要懂哪些技术或是知识要点呢？

首先，我们得明白：为什么会有这个职位？说白了，就是用户体验。关于用户体验，这里就不深入了，总之，一句话：用户体验做得好的网站就是能吸引用户，能让用户觉得舒适，但就是找不出什么原因让用户觉得好。

Web前端工程师是做什么的呢？毋庸置疑——用户体验。就是利用(X)HTML/CSS/JavaScript/DOM/Flash等各种Web技术进行产品的界面开发。制作标准优化的代码，并增加交互动态功能，开发JavaScript以及Flash模块，同时结合后台开发技术模拟整体效果，进行丰富互联网的Web开发，致力于通过技术改善用户体验。所以，需要用到的技术以及知识点也已经很明了了。

前端第一站——HTML(超文本标记语言)

关于HTML的历史以及描述，这里就不赘述了。详细请见百度百科HTML.

如果要完全遵照XML来创建XHTML文件，则必须牢记一些严格个规则：

1)网页的开头处要有文档类型申明(DOCTYPE)。

2)标签和标签属性必须用小写字母。

3)标签属性必须用双引号标记。

4) 所有标签(甚至空标签)都必须关闭。如果没有关闭标签的标签，则需要在该标签的结尾处加上一个正斜杠符号，如<br />

学习HTML规范，我们需要了解很多的HTML标签，像一些常见的HTML标签文本段落标签<p>,创建无序列表的<ul>等就不一一列出了。

在写页面的时候，能写出一个页面很容易，并且方法也很多。但要写处好的页面，写出高效的页面，却还要不断的深入学习。HTML越简单，对搜索引擎越有好。例如使用特殊标签（<font>）这种过时的HTML方法，以及在网页设计中使用的大量的表格，这些都阻碍了搜索引擎的工作。事实上，有些搜索引擎在读取了一定量的字符之后就不再读取页面的HTML了。因此，如果仅仅为了设计而使用大量的HTML，搜索引擎就有可能漏掉网页上的重要内容，甚至完全漏掉对该网页的排名。

相比之下，内容简洁、结构清晰的HTML则很容易被搜索引擎读取和索引。用一个<h1>标签来表示该网页最重要的主题（而不是只将文字变大变粗）就是一个很好的方法，因为搜索引擎在索引这个网页时，它会对该标签中的内容给予更大的权重。

学习HTML，就要养成一个好的编程习惯，在这里，我把我最近学到的一些习惯拿出来与大家分享一下，欢迎指正。

1) 不要使用过时的标签，如<font>,<b>,<i>等，因为这些标签都可以通过CSS中的相关属性来控制。如果你一定要强调某一个字或短语，可以用<strong>标签，但对于次要的文字，则使用<em>标签进行强调。

【备注：浏览器会将<strong>标签内的文本显示为粗体；将<em>标签内部的内容显示为斜体；如果为了将标题显示为斜体，<cite>标签既可以把标题变成斜体，还可以给标题坐上标记，使之便于被搜索引擎搜索。】

2) 不要用表格对网页进行布局。用<table>标签布局曾经也风靡过一段时间，后来被DIV+CSS布局所取代，一来用表格布局比较繁琐，增加了带宽消耗和成本且维护起来比较麻烦，二来表格布局由于表现形式的要求，经常会出现表格的多重嵌套，不利于浏览器的解析，影响网页打开的速度，从而影响用户体验。

3) 不要滥用<br/>换行标签，对于段落可以使用<p>标签来替代。

4) 用好<h1>系列标签。每页只要使用一个<h1>标签来标示该页面的主题。这样做的好处是，有助于网页被搜索引擎恰当的索引到。一般来说，按顺序使用标头，尽量不要跳号，例如，不要在<h2>下面就使用<h4>标签。

5) 有序列表和无序列表。对于包含几个相关项目的列表，建议使用无序列表<ul>，比如导航连接、标题等；如果用来描述一个过程或是步骤，或者定义一组项目的顺序，建议使用有序列表<ol>。

6) 如果要创建一个术语表及其定义或描述，则用<dl>标签，此标签用来定义列表，并结合使用<dt>及<dd>标签。【<dt>表示定义的术语，<dd>表示定义的描述】

7) 如果要包含一段引用语，如一段名人名言，一段书评等，对于长段落，建议使用<blockquote>标签，对那些简短的则可以使用<q>标签。还可以用<cite>标签累引用书的标题、新闻报道或网站，用<address>标签来标示和提供该网页作者的联系信息或者是该网站的版权信息等。

8) 补充一点：对于IE系列的浏览器兼容性的问题，建议在网也头部（<title>标签下方比较好）添加一个META标签，让IE8忽略Compatibility View 和Compatibility View List，并始终使用它最兼容各标准的模式显示网页。

<meta http-equiv=”X-UA-Compatible”content=”IE=edge”/>标签中的”IE=edge”会让IE8之后的IE版本也用他们的标准模式显示网页。

以上是我对HTML深入学习的一些总结和知识点的整理，在页面设计中，我们要尽量减少HTML的代码量，要做到为CSS来编写HTML代码。文中有错误之处或是缺陷之处，欢迎指正。

原创作品，欢迎转载，转载时请注明地址：http://blog.csdn.net/yima1006/article/details/7585286