HTML（Hypertext Markup Language），即超文本标记语言，是一种用于描述网页文档的标记语言。
HTML是学习网页制作的基础，制作简单，但是功能强大。这篇文章是针对初学者学习网页制作的，简明扼要，通俗易懂。
一、使用 html的基本规则，只做第一个页面。
<html>
<head>
<title>我的第一个网页</title>
……
</head>
<body>
……
</body>
</html>
html语言以< >开始，以</ >结束，我们称之为一对标签。每个网页都是由无数对标签组成的，多数网页都是按照上面的这个格式来编程的，在省略号的地方我们可以添加一些其他的样式，丰富我们的网页内容。
首先，复制上面的代码到一个记事本，然后另存为text.html文件，就成了一个网页文档。
然后，以记事本方式打开，在<body>之间加上“欢迎进入我的第一个页面”，保存。
最后，用浏览器打开这个文件，你会看到这样的效果图：
二、在页面中添加链接
记事本格式打开刚才的文件，将“欢迎进入我的第一个页面”改为“进入淘宝”，然后在的“进入淘宝”前后加上标记<a> ，变为 <a href=>进入淘宝</a>,保存。
这就是我们平时上网看到的超链接了，随意变换网址就可以到不同的链接。
三、 网页结构
如果你上网时注意的话，其实网页都是分块的，如图所示：
当然这只是一个大致的结构，你还可以根据需要分成很多块，分块主要是为了修改方面及确定各自的表现样式。
这主要通过<div></div>标记来实现，下面我在 “首页”加上<div>标记试试：
<div>
<a href=>首页</a>
</div>
保存，在打开试试，什么效果呢？
是不是还是和修改之前一样呢，下面我们为其加上一些修饰：
<div style=”width:200px;height:100px;border-style:solid;” >
在运行，我们标记的这一块就以蓝色背景表示出来啦！
在加入很多的<div></div>块就可以将网页大卸八块了，呵呵，然后在你每个块里放上你想放的东西即可。
当然，很多个<div>都加上style=””，如果这些style设置都差不多的话，我们每一个设置就太麻烦了，我们一般将style这些放在另外的。css文件（控制网页中各标记的显示样式）中，然后进行需要调用的地方进行调用，下面来试试
新建一个记事本，重命名为c.css然后打开，写入：
#header{width:200px;height:100px;border-style:solid;}
并将其在a.html里删掉
然后再</head>前加入 <link rel="stylesheet" type="text/css" href="" />
也就是将c.css这个文件引入进来。将css放入单独的文件好处是：如果很多地方都引用了这个样式，我们只要修改这一个地方，就全部都变化了，不然我们得手动修改每一处，不利于后期维护。
最后将a.html的<div> 改为<div id=header>
效果是不是和之前一样呢？
差不多，到这里，应该“不会作诗也会吟”了吧，这篇文章主要是为了让大家从总体上对html有个了解，知道大概是怎么回事，还有很多标记都没涉及到，这个就需要你找本网页设计的书来看一看，背一背了。
转载请保留原文地址：
1 写在前面的
以下内容是平时工作中所积累形成的，其中不乏带有个人感情色彩。在此只是阐述及归纳。
2 整体阐述
当你是一个从业多年的WEB前端人员，或是开发过大量的页面，就会发现一个现象，即使不是同一个网站，所定义的CSS中也很多相同的类，当然，不是同一网站没法合并，倘若是同一个网站，每个频道，或是一个频道的每个页面要都是一套CSS样式，是不是太浪费了。那么是不是该把这CSS掰开、揉碎好好的说道说道。CSS架构，这个学术性的名称就被我引用了。
在讨论整个CSS架构前，我想先来说说CSS本身。众所周知，CSS的诞生，就是样式与结构的分离，就代表着精简与重用。
在多年前，人们开发网站是，样式都是写在html代码中，维护起来那个繁琐是不言而喻的，有了CSS后，当需要定义一个字体颜色时，就可以：。red { color: #F00; } 页面中凡需要字体为红色时，都可以引用，修改起来也就是一步的事情。同时解放了html代码。
可随着网站内容日益丰富，我们已经不能单单只停留在初级的样式与结构的分离层面。需要对CSS进行解剖，因为只有深层次的了解它，才能更好的驾驭。
在对CSS处理的问题上，各个网站的做法都不尽相同。有整个站点就一个CSS文件的，一般符合web2.0标准的，如开心网；有分为页眉，页脚，主体不同部分的；有按个频道页面建立样式的；亦有几个公共样式表，其余视不同页面建立的。更有所有CSS都放在页面head中的。
所有这些，并无正确错误之分，只有是否适合，毕竟一切做法为的都是更为高效简洁的代码。
这里我想说说自己的做法。一个站点CSS文件分为：CSS重置库；通用样式库；公共样式库；布局样式库；按钮、图标、表单库；模块库；私有库。
除了最后一个，其余都是公共的库。这样做虽然是单个页面的连接数有所增加，但是对于门户型网站，其整体的开发成本会有大大的降低。不过实现这种开发模式有几个前提，样式分离；样式合并；前后台通力合作。
3 CSS样式分离3.1 CSS分离
前面提到过当一个页面需要一个红色的样式时，定义。red { color: #F00; }，然后引用就可以了，而这里说的CSS分离，是一个个不同的CSS文件，由多个不同的页面引用，如一个网站的head样式单独一个文件每个页面都引用。不过，这种做法大家都知道，我也不会单单的说这点，这里想说的CSS重用的概念。
人们都知道钱币只有1元、5元、10元，以前还有2元，但是不会出现，4、6、7等等，因为通过前面几个就可以组合使用了。这个道理很简单。那么我们是不是也可以把CSS的属性拆开。这样每当需要哪些就引用什么。
如<span class=”more”>更多</span>
。more { display: inline; float: right; margin-right: 10px; color: #F00; font-weight: normal; }
而拆分后，
<div class=”fr red fwn mr10”>更多</div>，样式为：
。fr { display: inline; float: right; }
。red { color: #F00; }
。fwn { font-weight: normal; }
。mr10 { margin-right: 10px; }
以上4个类有两个属于通用类（。fr和。fwn），属性是没有变量的，当需要右浮动和非粗体时就用此两个类。而像此种类别的还有不少，在此列出我平时使用的。
。fl { display: inline; float: left; }
。fr { display: inline; float: right; }
。db { display: block; }
。di { display: inline-block; }
。cl { clear: left; }
。cr { clear: right; }
。cb { clear: both; }
。fwb { font-weight: bolder; }
。fwn { font-weight: normal; }
。tdn { text-decoration:: none; }
。tdu { text-decoration: underline; }
。n1 { text-align: center; }
。n2 { text-align: left; }
。n3 { text-align: right; }
。vm { vertical-align: middle; }
。vt { vertical-align: top; }
。vb { vertical-align: bottom; }
。fa { font-family: Arial; }
。mo { font-family: "宋体" ; }
。fa1 { font-family: "黑体" ; }
。wsn { white-space: normal; }
。re { position: relative; }
。ov { overflow: hidden; zoom: 1; }
这样需要上述的效果时，就可以自由组合的了。样式拆分，有助于精简CSS文件。每个CSS样式的重用性都发挥到极致。后期维护也会轻松多。同时，除了这些类以外，还有颜色，外边距，内间距，这些也是可以单独定义出来的，只是它们的值是变量的。如之前的。mr10 { margin-right: 10px; }
说了这些，不难发现，CSS样式越是分离，就可以使每个类重用性发挥到极最大化，CSS代码就越精简！不过凡事都不是绝对的，所谓此消彼长，当CSS样式分离的多了，自然html的代码就会增加。如：tab选项卡，每个的宽度是自适应的，还有定位的出现，那么html的代码就夸张了，且繁琐，不易维护。这时我们就不能只有CSS分离了；又如一组展示商品页，所有的li左浮动，若在每处加上的话，显然不合适。从而，并非是所有的地方都适合使用分离独立的样式。从而需要权衡，而具体该怎么做，如何权衡？说的玄乎点，凭经验，其实，这确实是一个凭借经验来判断的。
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery