零基础html＋css网页设计之页面布局类36个常用标签

HTML网页设计常用的标签经过总结其实不会超过20个，其实大部分的标签我们几乎很少用或者根本不会用到，现在HTML5标签简化了之前的代码写法，所以更加便捷，本文所列出的标签均支持主流的浏览器和IE9（包含ie9）以上的IE浏览器。因为HTML5已经是必然的选择，而IE8及以下的IE浏览器已在淘汰中，所以我们不再兼容IE8及以下的IE版本，这些标签均是常用的对所有主流浏览器均支持的常用标签，有必要熟悉并记住他们都用在什么地方，什么情况下使用。

一、常用的内容布局标签。

有如下15个，这些标签我做了相应的简单说明，前面8个是经常用的，后面的几乎很少用到，了解即可。

需要特别说明的是如

标签后面的一个/“斜杠”结束，有没有斜杠效果都是一样的，区别是有斜杠的写法才是规范的，符合w3c标准的写法，没有斜杆则属于不规范的写法。特别注意上面7和8的加粗与斜体标签均有2个标签输出的效果都一样，但是我们推荐使用具有表示强调的一个，上面有说明。

二、引用文件类标签有如下2个，这是常用的2个标签。

：常用于引用外部js文件

：用于引用外部或单独的css文件

三、页面区块布局类标签5个

常用div、ul这2个标签来实现布局，div通常用于各种区块布局，支持多层嵌套。

1.

：区块布局

2.

：有序排列。默认纵向显示，可用css控制其横线显示，需和

标签一起使用

3.：无序排列，类似ul标签，需和

标签一起使用。

4.：列表标签。需和与标签配合使用

5.：表格。通常用于布局，但目前流行div+css布局，一般都不使用table来布局了

四、导航及按钮类标签11个，说不常用，但是也会总用，所以了解就可以。

五、使用较广泛的标签2个

：布局，可用于任何需要的地方。

：HTML注释。对某段代码或某行代码写注释，如

关于标签详解：

1）、在DIV+CSS切图布局重构技术中，除了常常使用div标签外也常常使用span标签布局

2）、span本身没有什么特别之处，通常然后布局都可以使用此标签布局。

3）、他们也可以通过对span标签对象设置不同样式实现我们要的美化效果。

4）、特性，通常一对未设置任何样式的span，高宽是自适应内容，多容多少，此标签就占用多少距离空间。

span在html中常用的布局标签,与div标签区别在于，span随内容而占用高宽空间（紧贴内容），而一对div标签却占用一行。

六、CSS常用单位4个，重点记住rem和px这2个单位即可。

1、rem：相对长度单位。相对于根元素(即html元素)font-size计算值的倍数；流行的使用广泛的HTML5单位

2、em：相对长度单位。相对于当前对象内文本的字体尺寸。几乎不用

3、px：相对长度单位。像素（Pixels）。正在被淘汰的常用单位

4、pt：点（Points）。绝对长度单位。几乎不用

在HTML5以前，常用px来设置字体或容器（如div）的大小，现在也还有很多网站依然使用px（像素）作为单位。由于px的一些弊端，目前已逐渐弃用这一单位而改用rem。自适应网页、APP及手机网站几乎都使用rem作为单位，而现在的PC端网页设计，尤其是HTML5+css3的结合，rem更是成为主流。所以只要记住我们使用rem作为单位，偶尔需要的时候会用一下px来辅助，其他的几乎不用，不必去管。

其实我们设计网页的时候几乎都是div+css布局，在加上span、p、ul、a及img，配合少量的其他标签，一个网页就搞定了，一点都不复杂，超级简单，搞定上面的标签随便也能写个漂亮的网页来。

上面总计40个标签，除去几个没用的剩余36个，而这36个中，我上面都做了重点说明需要记住的总计就是15个！够少了吧，其实网页设计超级简单，主要是要弄清原理，搞清楚这点，其他都是依样画葫芦了，一通百通。现在看不懂没关系，先把我们后面需要用到的标签列出来，后面我们在使用中你会心领神会的~我不建议一个标签一个标签去学习，那样难以入门，最好的办法就是先全部走一遍，接下来直接写网页，在实战中学懂他们真正的含义，当您完成一两个网页的设计你也许比我做的还要好！

后面的教程部分采用录制视频的方式，因为录制的视频上传以后清晰度大大降低，所以尽量写图文，也尽量把源码贴出来。