在最流行的网站都在使用DIV+CSS的编码去编写，这种编码方便，而且兼容各种浏览器，并且在修改网站的时候也更加便捷。在今天的内容中，小编将介绍下DIV标签使用的一些规则。

DIV是一个块级元素，它后面经常跟随着class或者id这样的元素。主要的差异是class用于元素组，而id用于标识唯一的元素。常规的网站架构通常为：

1.定义一个头部通用。为规范化，通常命名为header。

2.定义主题框架，为规范化，通常命名为content或者wrapper。

3.定义脚步框架，为规范化，同化成命名为footer。

在定义为header的div中应出现一个h1标签，用于诠释整个网站的内容，应包括网站的主关键词。接着用ul无序标签做导航排列列表。h2标签来说可以出现1-3次，接着就是权重依次降低的h3标签，在主页可用于小版块的标题。

最后小编提醒大家，使用DIV设计网站时也需要注意一些细节的问题，只用将代码写的更好，网站效果才能被展现的更合理。

原创文章出自畅想网络，转载地址：http://www.e-wkj.cn/xw/2197.html

以通过 <div> 和 <span> 将 HTML 元素组合起来。

HTML 块元素

大多数 HTML 元素被定义为块级元素或内联元素。

编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。

块级元素在浏览器显示时，通常会以新行来开始（和结束）。

例子：<h1>, <p>, <ul>, <table>

HTML 内联元素

内联元素在显示时通常不会以新行开始。

例子：<b>, <td>, <a>, <img>

HTML <div> 元素

HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。

<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。

如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。

<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。

HTML <span> 元素

HTML <span> 元素是内联元素，可用作文本的容器。

<span> 元素也没有特定的含义。

当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。

HTML 分组标签

标签 描述

<div> 定义文档中的分区或节（division/section）。

<span> 定义 span，用来组合文档中的行内元素。

么写一个优质的div+css页面

1.margin属性容易在低版本的IE中出现兼容性问题，尽量少用，可以选用padding或position方式代替。

2.在宽高固定、子元素比较多、子元素位置杂乱，子元素类型较多的区域中，尽量用定位方法来做，比如美团左侧的产品区块，如 果用margin来做，不同版本IE浏览器下的表现可能会让你崩溃的。

3.能设置具体宽高的区块尽量设置具体的宽高。

4.需要设置背景图的元素尽量设置具体的宽高。

5.用常见的标签和css属性，尽量别用另类的用法。

6.放文字的标签一定要设置行高

7.不要用行级标签（a标签、span标签等）和文字标签（p标签等）当做划分区域的标签。

8.尽量不要在行级标签内嵌套块级标签

9.了解自己写的每一个标签，每个标签的大小范围、属性、嵌套层级都要很清楚才行，其实就是深入理解盒子模型。

10.深化区块的概念，把页面严格的分成不同的区块，尽量避免不同区块之间的冲突。

11.不知道不认识的属性和标签一定不要乱用

12.写页面的时候写一点就测一下兼容性，发现问题及时改正，不要想着等到全写完后统一调试兼容性。

13.前端开发最忌讳直接参考别人的标签和写法，一定要有自己的开发思路，不要怕麻烦，一旦被别人的思路绑架，你会很痛苦的。

14.一般来说，开发两个国美、京东规模的页面就算入门了，开发五个以上就能体会到一定的开发技巧。开发的页面数量越多，就越 熟练，hack用的也会越来越少。SO，动手去做吧！

透明度

•opacity: 0.5;

• w3c标准属性，火狐等浏览器支持。取值范围：0-1

•filter:alpha(opacity=50);

• IE浏览器支持的，取值范围：0-100，取整数

visibility属性

visibility 用来控制元素的隐藏和显示状态

visible 当前元素为显示状态

hidden 当前元素为隐藏状态

用visibility隐藏的元素，元素原来所占的空间位置还在。

取消li标签默认圆点

浏览器会默认给li标签前面加一个黑圆点样式，这种默认的样式对现在的开发者来说已经没有太大的用处了， 一般我们会取消掉这个默认的样式，方法如下：

list-style：none;

CSS命名规范

对于页面中具有唯一性、结构性的模块，使用id选择器，其他一般采用class选择器

• 选择器命名一律使用小写字母

• 要有合理的注释

• 结构上有父子包含关系的样式，应通过命名体现。

• 命名使用驼峰结构+横线，即同一对象的命名如果需要多个单词， 使用驼峰命名法则，如：boxMusic

• 名字不能以数字开头

• 命名的时候一定要有意义