`
xu520
  • 浏览: 77410 次
  • 性别: Icon_minigender_1
  • 来自: 金华
社区版块
存档分类
最新评论

HTML <div> 标签

 
阅读更多

定义和用法

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

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

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

用法

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

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

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

实例

文档中的一个部分会显示为绿色：

<div style="color:#00FF00"> <h3>This is a header</h3> <p>This is a paragraph.</p> </div>

TIY

浏览器支持

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

HTML 与 XHTML 之间的差异

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

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

提示和注释：

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

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

案例分析

<body> <h1>NEWS WEBSITE</h1> <p>some text. some text. some text...</p> ... <div class="news"> <h2>News headline 1</h2> <p>some text. some text. some text...</p> ... </div> <div class="news"> <h2>News headline 2</h2> <p>some text. some text. some text...</p> ... </div> ... </body>

例子解释

正如您看到的，上面这段 HTML 模拟了新闻网站的结构。其中的每个 div 把每条新闻的标题和摘要组合在一起，也就是说，div 为文档添加了额外的结构。同时，由于这些 div 属于同一类元素，所以可以使用 class="news" 对这些 div 进行标识，这么做不仅为 div 添加了合适的语义，而且便于进一步使用样式对 div 进行格式化，可谓一举两得。

提示：如需更深入地学习 class 和 id 的用法，请阅《W3school 的结构化标记》这一章中 div、id 和其他帮手 这一节。

可选的属性

属性值描述DTD
align
  • left
  • right
  • center
  • justify

不赞成使用。请使用样式取而代之。

规定 div 元素中的内容的对齐方式。

 TF

标准属性

id, class, title, style, dir, lang, xml:lang

如需完整的描述，请访问标准属性。

事件属性

onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup
分享到：
| JavaReport
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML 5提供了一些新的元素和属性，反映典型的现代用法网站。其中有些是技术上类似<div>和<span>标签，但有一定含义，例如<nav>（网站导航块）和<footer>。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口，如<audio>和<video>标记。[3]

    其中有些是技术上类似&lt;div&gt;和&lt;span&gt;标签，但有一定含义，例如&lt;nav&gt;（网站导航块）和&lt;footer&gt;。这种标签将有利于搜索引擎的索引整理、小屏幕装置和视障人士使用。同时为其他浏览要素提供了新的功能，通过一个标准接口...

    Vue中通过<script></script>引入的Vue.js文件

    我们可以在 Vue.js 的官网上直接下载 vue.min.js 并用 &lt;script&gt; 标签引入。 格式就是： &lt;script src="./js/vue%20(1).js" type="text/javascript" charset="UTF-8"&gt;&lt;/script&gt; src里面的内容根据自己的下载的Vue.js的...

    JQUERY选择器　id选择器<br> 2)　　$('.class')　　css选择器,class类名<br>

    6)　$('div p')　层次选择器,常用的选择器,例如div下面的p标签&lt;br&gt; &lt;hr&gt; 7）　$('div&gt;p')　与上一个层次选择器差不多,但是div下面有子元素,子元素下还有孙元素,该选择器只能选子元素&lt;br&gt; &lt;hr&gt; 8）　$('div+p')　该...

    HTML5 对各个标签的定义与规定：section

    &lt;section&gt;标签是 HTML 5 中的新标签。 W3C定义为： &lt;section&gt; 标签定义文档中的节（section）。比如章节、页眉、页脚或文档中的其他部分。 section元素标签用来表现普通的文档内容或应用区块。一个section通常由...

    html中div不自动换行、强制不换行的具体实现

    1.用&lt;nobr&gt;标签实现不换行 复制代码代码如下: &lt;div&gt;Hello world！&lt;nobr&gt; Hello world!&lt;nobr&gt;&lt;/div&gt; 2.用&lt;用nowrap元素&gt;标签 复制代码代码如下: &lt;div&gt;Hello world! Hello world! Hello world! Hello world!&lt;/...

    html中的各个标签的格式，用法，含义

    3.0 区分的对齐 &lt;DIV ALIGN=LEFT|RIGHT|CENTER|JUSTIFY&gt;&lt;/DIV&gt; 引文区块 &lt;BLOCKQUOTE&gt;&lt;/BLOCKQUOTE&gt; （通常会内缩） 强调 &lt;EM&gt;&lt;/EM&gt; （通常会以斜体显示） 特别强调 &lt;STRONG&gt;&lt;/STRONG&gt; （通常会以加粗显示） ...

    VUE解决 v-html不能触发点击事件的问题

    背景：后端返前端html格式的数据，前端用v-html解析渲染，如：&lt;a&gt;&lt;/a&gt;，a标签能成功渲染，但其绑定的事件无法触发。 原因：vue没有将其作为vue的模板解析渲染 解决方案：不用v-html而是component模板编译 上干货： ...

    js使用循环清空某个div中的input标签值

    &lt;div class=col-xs-9 id=search_songs_a&gt; &lt;table&gt; &lt;tbody&gt; &lt;tr&gt; &lt;th&gt;钢琴曲名称：&lt;/th&gt; &lt;td&gt;&lt;input type=text name=info[gqq_name] id=gqq_name style=width:200px;/&gt;&lt;/td&gt; &lt;th xss=removed&gt;演奏者：&lt;/th&gt; &lt;td...

    Web前端基础：HTML5语义化标签.pptx

    语义化标签优点：为了在没有CSS的情况下，页面也能呈现出很好的内容结构比&lt;div&gt;标签有更加丰富的含义，方便开发与维护方便其他设备解析（移动设备等）有利于合作，遵守W3C标准HTML5语义化标签&lt;article&gt;标签&lt;article&gt;...

    HTML5&CSS3网页制作：div标记.pptx

    （3）大多数HTML标记都可以嵌套在&lt;div&gt;标记中，&lt;div&gt;中还可以嵌套多层&lt;div&gt;。 （4）可以替代大多数的块级文本标记。 div标记定义： div标记 （1）div是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，...

    JS获取元素多层嵌套思路详解

    如果一段html嵌套过多，在js中获取还是比较麻烦的，我写了几套方案，大家可以参考参考，如果你有好的...&lt;div id=box&gt; &lt;span&gt;span&lt;/span&gt; &lt;div&gt; &lt;span&gt;span&lt;/span&gt; &lt;a&gt; &lt;span&gt;1&lt;/span&gt; &lt;/a&gt; &lt;/div&gt; &lt;div&gt; &lt;a&gt; &lt;spa

    JSTL详细标签库介绍

    发生异常时，异常周围信息（抛出对象本身类型）-------------异常处理程序&lt;BR&gt;&lt;BR&gt;12.5一个异常处理的简单实例：除数为0&lt;BR&gt;&lt;BR&gt;需求：使用一个小应用程序，完成两数相除的计算&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;&lt;BR&gt;...

    Web前端基础：HTML5文本标签.pptx

    标题（Heading）是通过 &lt;h1&gt; - &lt;h6&gt; 等标签进行定义的。 &lt;h1&gt; 定义最大的标题。&lt;h6&gt; 定义最小的标题。 2 &lt;hr&gt;将输出一条水平线 文档中的文字格式化标记 字体标记&lt;font&gt; 字符格式化标记&lt;b&gt;、&lt;i&gt;、&lt;u&gt;、&lt;sub&gt;、&lt;sup&gt;,...

    六种常见的HTML5写法误用

    人们在标签使用中最常见到的错误之一就是随意将HTML5的&lt;section&gt;等价于&lt;div&gt;——具体地说，就是直接用作替代品(用于样式)。在XHTML或者HTML4中，我们常看到这样的代码： &lt;!-- HTML 4-style code --&gt; &lt;div id=...

    jQuery输入关键词生成标签.zip

    &lt;p&gt;把你的10个技能标签加在你的个人资料上&lt;/p&gt; &lt;/div&gt; &lt;div class="tagCon clearfix" id="tagcon"&gt; &lt;/div&gt; &lt;div class="addBox clearfix" id="addBox"&gt; &lt;input class="" type="text"&gt; &lt;button&gt;添加&lt;/...

    HTML_CSS学习笔记.docx

    2.5. &lt;div&gt;标签：自定义块 10 2.6. &lt;header&gt;标签：定义头部区域 11 2.7. &lt;footer&gt;标签：定义底部区域 12 2.8. &lt;section&gt;标签：定义区段 12 2.9. &lt;aside&gt;标签：定义侧边栏区域 13 3. HTML5效果标签 14 3.1. &lt;br&gt;标签...

    ASP.Net电子商务网站后台模板

    &lt;li id="now1a"&gt;&lt;a title="标签管理" href="#" target="content3"&gt;&lt;span&gt;标签管理&lt;/span&gt;&lt;/a&gt;&lt;/li&gt; &lt;li id="now1b"&gt;&lt;a title="模板管理" onclick="show_title('生成文件管理')" href="#" target="content3"&gt; ...

    css 导航菜单（标签页）设计

    不错的代码，Enjoy ...&lt;br&gt;&lt;br&gt;html代码部分为&lt;br&gt;&lt;br&gt;&lt;div id="tabsB"&gt;&lt;br&gt;&lt;ul&gt;&lt;br&gt;&lt;li&gt;&lt;a href="#" title="Link 1"&gt;&lt;span&gt;Link 1&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;&lt;br&gt;&lt;li&gt;&lt;a href="#" title="Link 2"&gt;&lt;span&gt;Link 2&lt;/span&gt;&lt;/a&gt;&lt;/li...

    HTML S1 知识点总结

    北大青鸟s1 HTML 知识点总结 HTML5的优势 世界知名浏览器厂商对HTML5的支持:微软 、Google、苹果、Opera、Mozilla 市场的需求 ...没有顺序，每个&lt;dt&gt;标签、&lt;dd&gt;标签独占一行（块元素） 默认没有标记

    使用HTML开发商业网站-CSS元素的类型和转换课件.pptx

    其中&lt;div&gt;标签是最典型的块元素。 元素的类型和转换 &lt;a&gt; &lt;em&gt; 常见的行内元素 &lt;strong&gt; &lt;span&gt; &lt;b&gt; &lt;u&gt; 其中&lt;span&gt;标签最典型的行内元素。 元素的类型和转换 元素的类型和转换 元素的类型和转换 谢谢大家

Magicbox
Global site tag (gtag.js) - Google Analytics