• HTML <!--...--> 注释标签
  • HTML <!DOCTYPE> 声明
  • HTML <a> 标签
  • HTML <abbr> 标签
  • HTML <acronym> 标签 - HTML5 不支持
  • HTML <address> 标签
  • HTML <applet> 标签 - HTML5 不支持
  • HTML <area> 标签
  • HTML <article> 标签
  • HTML <aside> 标签
  • HTML <audio> 标签
  • HTML <b> 标签
  • HTML <base> 标签
  • HTML <basefont> 标签 - HTML5 不支持
  • HTML <bdi> 标签
  • HTML <bdo> 标签
  • HTML <big> 标签 - HTML5 不支持
  • HTML <blockquote> 标签
  • HTML <br> 标签
  • HTML <button> 标签
  • HTML <canvas> 标签
  • HTML <caption> 标签
  • HTML <body> 标签
  • HTML <center> 标签 - HTML5 不支持
  • HTML <cite> 标签
  • HTML <code> 标签
  • HTML <col> 标签
  • HTML <colgroup> 标签
  • HTML <command> 标签
  • HTML <datalist> 标签
  • HTML <dd> 标签
  • HTML <dl> 标签
  • HTML <dt> 标签
  • HTML <del> 标签
  • HTML <details> 标签
  • HTML <dfn> 标签
  • HTML <dialog> 标签
  • HTML <dir> 标签 - HTML5 不支持
  • HTML <div> 标签
  • HTML <embed> 标签
  • HTML <fieldset> 标签
  • HTML <figcaption> 标签
  • HTML <figure> 标签
  • HTML <font> 标签 - HTML5 不支持
  • HTML <footer> 标签
  • HTML <frame> 标签 - HTML5 不支持
  • HTML <frameset> 标签 - HTML5 不支持
  • HTML <head> 标签
  • HTML <header> 标签
  • HTML <hgroup> 标签
  • HTML <h1> - <h6> 标签
  • HTML <hr> 标签
  • HTML <em> 标签
  • HTML <i> 标签
  • HTML <iframe> 标签
  • HTML <img> 标签
  • HTML <input> 标签
  • HTML <ins> 标签
  • HTML <kbd> 标签
  • HTML <keygen> 标签
  • HTML <label> 标签
  • HTML <legend> 标签
  • HTML <li> 标签
  • HTML <link> 标签
  • HTML <map> 标签
  • HTML5 <mark> 标签
  • HTML <menu> 标签
  • HTML <meta> 标签
  • HTML <meter> 标签
  • HTML <nav> 标签
  • HTML <noframes> 标签HTML5不支持该标签
  • HTML <noscript> 标签
  • HTML <object> 标签
  • HTML <ol> 标签
  • HTML <optgroup> 标签
  • HTML <output> 标签
  • HTML <option> 标签
  • HTML <p> 标签
  • HTML <param> 标签
  • HTML <form> 标签
  • HTML <pre> 标签
  • HTML <html> 标签
  • HTML5 <progress> 标签
  • HTML <q> 标签
  • HTML <rp> 标签
  • HTML <rt> 标签
  • HTML <ruby> 标签
  • HTML <s> 标签
  • HTML <samp> 标签
  • HTML <script> 标签
  • HTML <section> 标签
  • HTML <select> 标签
  • HTML <small> 标签
  • HTML <source> 标签
  • HTML <span> 标签
  • HTML <strike> 标签 - HTML5 不支持
  • HTML <strong> 标签
  • HTML <style> 标签
  • HTML <sub> 标签
  • HTML <summary> 标签
  • HTML <sup> 标签
  • HTML <table> 标签
  • HTML <tbody> 标签
  • HTML <td> 标签
  • HTML <textarea> 标签
  • HTML <tfoot> 标签
  • HTML <th> 标签
  • HTML <thead> 标签
  • HTML <time> 标签
  • HTML <title> 标签
  • HTML <tr> 标签
  • HTML <track> 标签
  • HTML <tt> 标签 - HTML5 不支持
  • HTML <u> 标签
  • HTML <ul> 标签
  • HTML <var> 标签
  • HTML <video> 标签
  • HTML <wbr> 标签
  •  
    当前位置:  教程>HTML标签参考手册

    HTML <div> 标签

     
        发布时间:2017-1-15  


        本文导语: HTML<div>标签html div+css 布局DIV+CSS布局中主要CSS属性介绍:Float: Float属性是DIV+CSS布局中最基本也是最常用的属性,用于实现多列功能,我们知道<div>标签默认一行只能显示一个,而使用Float...

     

    HTML <内联 iis7站长之家> 标签

    html div+css 布局

    DIV+CSS布局中主要CSS属性介绍:

    Float:

    Margin:

           Margin属性用于设置两个元素之间的距离。

    Padding:

           Padding属性用于设置一个元素的边框与其内容的距离。

    Clear:

           使用Float属性设置一行有多个DIV后(多列),最好在下一行开始之前使用Clear属性清楚一下浮动,否则上面的布局会影响到下面。


    <div>实例

    文档中的一个区域将显示为蓝色:

    <div style="color:#0000FF">  <h3>这是一个在 div 元素中的标题。</h3>  <p>这是一个在 div 元素中的文本。</p></div>


    浏览器支持

    Internet Explorer Firefox Opera Google Chrome Safari

    所有主流浏览器都支持 <div> 标签。


    标签定义及使用说明

    <div> 标签定义 HTML 文档中的一个分隔区块或者一个区域部分。

    <div>标签常用组合块级元素,以便通过 CSS 来对这些元素进行格式化

    如何使用CSS让DIV居中显示,让div水平居中有哪些CSS样式呢?

    需要的主要css代码有两个,一个为text-align:center(内容居中),另外一个为margin:0 auto;其两个样式需要配合使用才能实现div盒子的居中显示排版

    首先我们对body设置text-align:center,再对需要居中的div盒子设置css样式margin:0 auto,这样即可让对应div水平居中。

    实例讲解div居中代码应用,为了观察div居中效果,我们对div设置一个div命名为“.div”在html中div标签内使用class=“div”,设置其宽度为400px;高度为100px,边框为红色。以便我们观察效果。

    <!DOCTYPE html> 
    <html> 
    <head> 
    <meta charset="utf-8" /> 
    <title>div水平居中演示 www.</title> 
    <style> 
    body{ text-align:center} 
    .div{ margin:0 auto; width:400px; height:100px; border:1px solid #F00} 
    /* css注释:为了观察效果设置宽度 边框 高度等样式 */ 
    </style> 
    </head> 
    <body> 
    <div class="div"> 
    DIV水平居中显示CSS实例
    </div> 
    </body> 
    </html>



    提示注释

    提示:<div> 元素经常与 CSS 一起使用,用来布局网页。

    注释:默认情况下,浏览器通常会在 <div> 元素前后放置一个换行符。然而,您可以通过使用 CSS 改变这种情况。


    HTML 4.01 与 HTML5之间的差异

    HTML5 中不支持 align 属性。

    在 HTML 4.01 中,align 属性 已废弃


    属性

    属性描述
    alignleft
    right
    center
    justify
    HTML5 不支持。HTML 4.01 已废弃。 规定 <div> 元素中的内容的对齐方式。



    全局属性

    <div> 标签支持 HTML 的全局属性。


    事件属性

    <div> 标签支持 HTML 的事件属性。



    HTML <div> 和 <span>

    可以通过 <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加一个边框border样式的八种方法

    一、虚线与实线边框

    边框虚线样式:dashed

    边框实现样式:solid

    border:1px dashed #000

    代表设置对象边框宽度为1px黑色虚线边框

    border:1px solid #000

    代表设置对象边框宽度为1px黑色实现边框

    二、对div上边加边框

    我们给div上边加1px黑色边框

    div{border-top:1px solid #000} 

    三、给div底部加边框

    给div盒子底部加2px虚线红色边框

    div{border-bottom:2px dashed #f00} 

    四、在div盒子左侧加边框

    给一个css选择器 css命名为“.divcss5”盒子左侧加一个蓝色1px实线边框

    .divcss5{ border-left:1px solid #00f} 

    DIV代码:

    <div class="divcss5">此DIV盒子左侧为1px实线蓝边框</div> 

    五、在盒子div右侧加边框

    div对象右侧加1px红色实线边框

    div{ border-right:1px solid #f00} 

    六、在盒子上下加边框

    给盒子上下加1px实现黑色边框

    div{border-top:1px solid #000;border-bottom:1px solid #000} 

    七、给div盒子左右加边框

    给盒子左右加2px虚线绿色边框

    div{ border-left:2px dashed #0F0;border-right:2px dashed #0F0} 

    八、给div四边加上一个边框

    给一个DIV四边加上3px实现黑色边框

    div{ border:3px solid #000} 

    以上是如何给一个div加边框,各种加边框样式方法教程。根据需要对选择器进行重新命名,即可使用class或id在html的div引入调用,灵活运用并掌握对一个对象加边框样式方法。


    • 本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
      本站(WWW.)站内文章除注明原创外,均为转载,整理或搜集自网络.欢迎任何形式的转载,转载请注明出处.
      转载请注明:文章转载自:[169IT-IT技术资讯]
      本文标题:HTML <div> 标签
    相关文章推荐:


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3