html div怎么命名,DIV的用法及命名

HTML中的DIV标签的用法

想要了解DIV标签，就先要了解网页中“层”的含义，层采用的是一种分块控制网页内容的方法，我们也称它为网页中的块级元素，元素中可以包含所有其他的html代码，我们可以在网页中定义层级关系，通过对层的控制来改变层中内容在网页中的相应位置，各层之间可以彼此叠加，Z坐标的次序也可以改变，在不同的层里还可以定义不同的数据块，而div标签的作用就是用来定义这些块级元素。更多详情可以参考《DIV+CSS的优点》这篇文章。

DIV标签的介绍

DIV标签是一个块级元素，这也意味着它的内容会自动在新的一行开始，DIV的全称DIVision，它是html中的区隔标签，是层叠样式表中的定位技术，用于区分HTML中其它元素及内容的摆放位置，可以把HTML文档分割为独立的、不同的部分，通过设置相应的宽、高、边距属性来组成结构上的布局，还可以通过DIV标签中自带的属性或为其设定相应的CSS属性，来控制里面内容的展示效果。

在编写一个html文件时，如果单独的使用了DIV，而不加其他属性或CSS样式，那么它在网中显示时是看不到任何效果的，请看下方两个简单的例子↓

例1：我们在一对div标签中写上HTML标签的博客，随后打开浏览器进行浏览，语法为：＜div＞HTML标签的博客＜/div＞

从上图中我们可以看到内容写在一对div标签中，而没有为div设置任何属性，所以再打开浏览器时，我们只是看到了里面的文字，而不会看到div的本身的任何效果。

例2：我们同样在一对div标签中写上HTML标签的博客，并在这对div中嵌入CSS样式，分别规定该div的宽为240像素、高为80像素、背景为黑色，字体为白色，代码书写：div

style="background:#000; color:#fff" 随后浏览该DIV在页面中的显示效果

这样明显看到div在页面中的变化，黑色区域为240像素宽，80像素高，背景黑，文字白，这便是我们在网页中设置的其中一个div的效果，除此之外，我们还可以在div里设定更多的样式属性，如margin来控制div的外边距，padding来控制div的内边距，position来控制div的显示位置等。

DIV标签的命名

很多时候一个网页中会用到多个DIV元素来对不同的内容进行划分，这个时候我们就需要对不同类型的DIV进行命名，以便能更好的对某一个或某一类的div元素进行单独控制，而这就需要通过“id”和“class”的命名方式，将不同类别的DIV区分开来，在CSS样式表中，再分别对这些名称设定样式，从而达到“盒子模型”的效果。

id

用于标识单独的、唯一的元素，也就是说一个id名称只能在同一个页面里出现一次，所以网页中比较大的模块，或是比较特别的局部盒子，我们可以为其设定id名称，在CSS样式表中为该名称设定所需要的样式，这样就能达到对某个div或其它元素的单独控制，例如我们要对网页中的导航条进行单独控制，为其命名为“nav”的id名称，写法：div

id="nav"。

class

在同个页面中可以重复使用，这也表示假如在一个网页中，有几处用到的是同样的布局效果，我们就可以为这些相同的div或相同的其它元素给予一个相同的class名称，这样的好处是能在页面中重复的去引用CSS样式，从而大大的减少了工作量和代码量，不但节省了浏览器的读取时间，还可以让我们通过CSS样式表同时控制多个元素的相同风格，例如我们对网页中多个图片列表设定统一样式，为其设置相同的“piclist”为class名称，为写法：div

class="piclist" 。

今天主要是对div标签的介绍及使用，通过本文的讲解，你对html标签中的div标签是否有了认识？关于div标签中包含的其它属性，将在接下来的教程中再做详细介绍！

本文为《HTML标签_新浪博客》的原创文章，网址：http://blog.sina.com.cn/htmlcss3。如需转载，请注明出处！