定义和用法：

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

<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。

如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。

用法：

<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。

不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。

可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。

HTML 与 XHTML 之间的差异

在 HTML 4.01 中，div 元素的 "align" 属性不被赞成使用。

在 XHTML 1.0 Strict DTD 中，div 元素的 "align" 属性不被支持。

HTML 4.01 与 HTML 5 之间的差异

HTML 4.01 中的 "align" 是不赞成使用的，在 HTML 5 中不支持该属性。

提示和注释：

注释：<div> 是一个块级元素，也就是说，浏览器通常会在 div 元素前后放置一个换行符。

提示：请使用 <div> 元素来组合块级元素，这样就可以使用样式对它们进行格式化。

div的属性
主要设置如下：
　　overflow（溢出控制）：visible（默认，可见）、auto（自动）、scroll（显示滚动条）；
　　width（宽度）：数值；
　　height（高度）：数值；
　　color（字体颜色）：色彩代码；
　　font-size（字体大小）：数值；
　　line-height（行高）：数值；
　　border（边框）：宽度、类型和颜色，类型主要支持以下几种：none,dotted,dashed,solid,double,groove,ridge,inset,window-inset,outset；
　　font-weight（字体粗细）：normal、bold、bolder、lighter；
　　font-family（字体类型）：Arial、Tahoma、Verdana、仿宋_GB2312、黑体、楷体_GB2312、隶书、宋体、幼圆；
　　background（背景颜色）：色彩代码；
　　scrollbar-base-color,scrollbar-face-color,scrollbar-track-color,scrollbar -darkshadow-color,scrollbar-highlight-color,scrollbar-shadow-color,scrollbar -3dlight-color,scrollbar-arrow-color（滚动条各部分的颜色）：色彩代码；
　　filter:chroma(COLOR=转换成透明的颜色)（chroma过滤器）：色彩代码，该颜色将转换成透明效果；
　　word-break（断字）：normal（默认，正常断字）、keep-all（严格不断字）、break-all（严格断字）；
　　direction（文字方向）：ltr（默认，从左向右）、rtl（从右向左）。
HTML中的Div分区属性
基本属性：width, height, left, top, background-color（当设置为transparent时表示透明）
2、定位属性：position: absolute/relative
absolute时，位置固定；relative时，位置会随着内容的实际情况进行浮动
3、显示属性：display: block/none
block为默认状态，表示显示；none为隐藏
4、优先属性：z-index:n
n表示一个整数（正负均可），有多个Div时n越大，则越靠前显示；
z-index可以理解为z轴的坐标（x,y轴控制左右、上下方位，z轴控制层叠div的前后方位）
只有用绝对定位（position:absolute）时，属性z-index才起作用；
未设置绝对定位（position:absolute）的div，其z-index永远为0；
未设定优先属性（z-index）的div，按照声明的顺序层叠，后声明的盖住先声明的，如果有两个Div属于父子关系，则子div覆盖父div；
5、透明属性：opacity:0.3;（firefox专用）；filter:alpha(opacity=30)（IE专用）
两者一起用的时候就将两种主流浏览器都兼容了；上面例子是将Div的透明度设置为30％，可以看出两者的设置稍有不同；Div的文本与背景色均能被透明化！

 如何让DIV标签居中显示？

在经典论坛上面搜了些老贴子看，大都说的是用text-align:center加在BODY中，然后DIV标签相对于BODY而居中对齐。这样有个缺点就是文章中所有的对象都会居中对齐（包括文字、图像等），这样文档中要靠左的对象就需要另加代码，这方法不行。

而如果直接加上：width:200PX;margin:0 atuo;，这样的话只是在FireFox浏览器中会居中对齐，而IE里面就不行。
搞了大半天，问题又回到标准上来了，在学习网页标准的时候，首先就是了解DOCTYPE的设置，因为这是至关重要的。
而DIV居中的问题所在，就是你的DOCTYPE部份：

程序代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

当你加入这句声明以后：

程序代码

.div-1{
  width:200px;
  margin:0 auto;
}

tops:
margin属性用于控制对象的上/右/下/左4个方向的外边距,使用两个参数时,第一个参数表示为上下边距,第二个参数表示为左右边距.除了直接使用数值外,margin还支持一个值叫auto,auto值是让浏览器自动判断边距.
这样的语句在IE和FF浏览器中都可以让DIV居中。
呵呵，开始搞了半天，甚至想用论坛上说的JS方法，后来找到一个贴子，才搞懂原来是DOCTYPE的问题。
PS：而有些朋友在做某些网页的时候，是不能加这句声明的，嘿，这时候就只能用文章开头所说的在BODY中加入text-align:center的方法了。

如何隐藏div标签

document.getElementById("DIV的ID").style.display="none";//隐藏
document.getElementById("DIV的ID").style.display="block";//显示

点击div实现a标签的跳转效果

下面是一个div
<div ></div>，（这个有css，我暂时不在这里写上，但这个div有背景）。我要的效果是：当我把鼠标移到这个div上（或背景上），并点一下它，它就会像a标签那样跳转到某个页面。前提是div里面不能有任何东西，div外面也不能有a标签，可以用js，请问如何才能达到我的效果？
<div id="ttt" style="width:100px; height:100px; background-color:#ccc;"></div>
window.onload = function(){

    var obj = document.getElementById('ttt');

    obj.onclick=function(){

        window.location.href="跳转的地址";

     }

 }

HTML <div> 标签的更多相关文章

  1. HTML <del> 标签

    HTML <del> 标签 什么是<del> 标签? 定义文档中已被删除的文本. 实例 a month  is <del>25</del> 30 day ...

  2. HTML——b i del a p img h1 h2 h3 h4 h5 h6 hr ol ul 标签的使用方法详解

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. 来吧，HTML5之基础标签(上)

    什么是html5 HTML 5 是下一代的 HTML.HTML5 仍处于完善之中.然而,大部分现代浏览器已经具备了某些 HTML5 支持. 学习过程中标签的理解 <a>标签  定义超链接, ...

  4. Html标签的语义化

    为了使我们的网站更好的被搜索引擎抓取收录,更自然的获得更高的流量,网站标签的语义化就显得尤为重要.所谓标签语义化,就是指标签的含义. 为了更好的理解标签的语义化,先看下面这个例子: 1 <tab ...

  5. HTML 文本格式化<b><big><em><i><small><strong><sub><sup><ins><del>

    <b> 标签-粗体 定义和用法: <b>标签规定粗体文本. 提示和注释 注释:根据 HTML5 规范,在没有其他合适标签更合适时,才应该把 <b> 标签作为最后的选 ...

  6. html5标签集结1

    1.<bdo>标签:覆盖默认的文本方向. <bdo dir="ltr">Here is some text</bdo>  显示结果(从左到右): ...

  7. HTML标签语义化

    标签语义化 Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解. 如果可以在合适的位置使用恰当的标签,那么写出来的页面语义明确,结构清晰,搜索引擎也可 ...

  8. <jsp:include page="">和<%@include page=""%> 标签学习

    <jsp:include page=""><jsp:param value=""name=""/><DEL&g ...

  9. 前端基础HTML以及常用的标签

    cs模式:--- c:client  server bs模式:---Browser server 1.WEB标准的概念及组成 网页主要有三部分组成: a:结构   --  主要标准:XHTML和XML ...

  10. HTML标签参考（一）

    hi,小哥哥小姐姐们,我们今天要说的是前端的入门,却也是十分重要的意识的培养哦! • html中的标签数量是很多的,据人统计大概有300个左右,并且每年都会以20-30个的速度增加着,但是这么多的标签 ...

随机推荐

  1. PHP三元运算符 isset($_GET['id']) ? $_GET['id'] : ”

    $id = isset($_GET['id']) ? $_GET['id'] : ''; ?> 这是一个php的三元运算符 (条件) ? (值1):(值2); 解释:如果条件成立(为真),则执行 ...

  2. Android静默安装实现方案

    之前有很多朋友都问过我,在Android系统中怎样才能实现静默安装呢?所谓的静默安装,就是不用弹出系统的安装界面,在不影响用户任何操作的情况下不知不觉地将程序装好.虽说这种方式看上去不打搅用户,但是却 ...

  3. HQL查询——HQL查询的基本用法

    HQL查询--HQL查询的基本用法 1.HQL语法类似于SQL语法,但是需要注意的是,HQL是一种完全面向对象的查询语言.SQL语言操作的对象是数据表.列等数据库对象,而HQL语言的操作对象是类.实例 ...

  4. 关于ios苹果系统的中的右键事件，查遍了全网都没有的小技巧。

    前阵子公司要求写一套手机端,兼容各种平台和系统,当然,pc端也没有放过. 我用了bootstrap框架和jq.在安卓中的右键事件只需要取消浏览器默认事件,然后长按就可以触发pc端的右键事件,非常好,一 ...

  5. html热力图的操作(点击图片的不同位置操作不同的事件)适合说明文档

    页面核心代码 <div class="first_top"> <div class="back"> <img src=" ...

  6. 安装php-amqplib（RabbitMQ的phpAPI）

    历史经验告诉我们,装逼没有好下场. 总结一下之前composer安装php-amqplib包失败的原因: composer安装的时候需要指定PHP执行文件的位置: PHP安装路径:/usr/local ...

  7. WARNING: REMOTE HOST IDENTIFICATION HAS CHANGED

    原文地址:http://linuxme.blog.51cto.com/1850814/375752 今天将阿里云服务器更换了一下系统盘,重启成功后,再次通过终端访问阿里云的公网IP报以下信息: @@@ ...

  8. DuiLib 源码分析之解析xml类CMarkup & CMarkupNode 头文件

    xml使用的还是比较多的,duilib界面也是通过xml配置实现的 duilib提供了CMarkkup和CMarkupNode类解析xml,使用起来也是比较方便的,比较好奇它是怎么实现的,如果自己来写 ...

  9. 给博客添加Flash时钟

    依稀记得在cnblogs很多大牛的博客里见到过大牛的新闻公告栏里那种动感十足的Flash时钟控件,先上图: 作为一名刚的接触博客菜鸟,自然免不了一番好奇.博客设置选项里翻来覆去找(以为是cnblogs ...

  10. Java学习路线图，专为新手定制的Java学习计划建议

    怎么学习Java,这是很多新手经常会问我的问题,现在我简单描述下一个Java初学者到就业要学到的一些东西:    首先要明白Java体系设计到得三个方面:J2SE,J2EE,J2ME(KJAVA).J ...