实例

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

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

浏览器支持

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

定义和用法

<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" 属性不被支持。

提示和注释:

注释:<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 和其他帮手 这一节。

可选的属性

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

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

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

全局属性

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

事件属性

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

详见链接:https://www.w3school.com.cn/tags/tag_div.asp

前端基础div(六)的更多相关文章

  1. 前端基础进阶(六)-大厂面试题问题:循环闭包与setTimeout

    我在上一篇闭包的文章中留下了一个关于setTimeout与循环闭包的思考题. 利用闭包,修改下面的代码,让循环输出的结果依次为1, 2, 3, 4, 5 for (var i = 1; i <= ...

  2. 进击的Python【第十六章】:Web前端基础之jQuery

    进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...

  3. HTML+DIV+CSS+JSweb前端基础

    HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1)  dir: 文本的显示方向,默认是从左向右 (2 ...

  4. 前端基础 之 Bootstrap框架

    浏览目录 Bootstrap介绍 为什么要使用Bootstrap? Bootstrap环境搭建 布局容器 栅格系统 Bootstrap全局样式 一.Bootstrap介绍 Bootstrap是Twit ...

  5. day--42 前端基础小结

    前端基础总结 一:前端实现的原理: 小实例: 01:第一步:创建一个socket服务端: import socket server=socket.socket() ip_port=("127 ...

  6. BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js

    BAT 前端开发面经 —— 吐血总结   目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...

  7. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  8. 前端第三篇---前端基础之JavaScript

    前端第三篇---前端基础之JavaScript 一.JavaScript概述 二.JavaScript的基础 三.词法分析 四.JavaScript的内置对象和方法 五.BOM对象 六.DOM对象 七 ...

  9. 前端第四篇---前端基础之jQuery

    前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...

随机推荐

  1. P5132 Cozy Glow之拯救小马国

    题目描述 Cozy Glow偷偷摸摸的造了一个魔法阵,这个魔法阵在吸取小马国的魔力,所以你得赶紧把它毁掉. 这个魔法阵由若干个神器组成,每个神器都有一个法力值,每两个神器之间也都有一个关联值.你要依次 ...

  2. csp-s模拟测试58「Divisors」·「Market」·「Dash Speed」

    A. Divisors   大概平均下来每个数也就几千约数吧....,直接筛 B. Market 可以把时间离线下来, 考试没有想到将询问离线,用数组存算了算只能过200的点,拿了70 事实上背包后直 ...

  3. redis不完整的事务实现Transaction

    使用场景 redis一个命令执行是单线程的,不用担心并发冲突,如果你想有几个命令想像一个命令一样,在这几个命令执行过程中不会执行别的客户端发来的命令 ,也就是原子性,就可以用 redis Transa ...

  4. 关于Excel中表格转Markdown格式的技巧

    背景介绍 Excel文件转Markdown格式的Table是经常会遇到的场景. Visual Studio Code插件 - Excel to Markdown table Excel to Mark ...

  5. <5人公司极简研发方案

    人过35,被年轻人卷走了一大半,还停留在这个行业的,不是在创业,就是在创业的路上. 创业很难,刚开始没钱没人,啥都要自己干,一个字累.好处是地基是自己搭的,心里有底.不过博主最近健忘的毛病愈发严重了, ...

  6. 关于vim

    全部删除:按esc后,然后dG全部复制:按esc后,然后ggyG全选高亮显示:按esc后,然后ggvG或者ggVG 在win中使用<C-a>是全选,如果需要在vim中使用<C-a&g ...

  7. 整理!企业选择好用的CRM系统的要点(上)

    随着市场经济的发展,对任何行业的企业来说,客户都是非常重要的一个部分.CRM系统帮助企业做到以客户为中心,它可以根据客户的具体要求进行跟进和反馈,在很大程度上提高公司的客户服务水平和客户满意度,进而提 ...

  8. centos 8.3系统调优参数配置

    临时设置 最大虚拟内存 [root@Sonnarqube-dev ~]# sysctl -w vm.max_map_count=262144 执行结果 vm.max_map_count = 26214 ...

  9. webpack(9)plugin插件功能的使用

    plugin 插件是 webpack 的支柱功能.webpack 自身也是构建于你在 webpack 配置中用到的相同的插件系统之上! 插件目的在于解决 loader 无法实现的其他事. 常用的插件 ...

  10. 第三章 - CPU缓存结构和java内存模型

    CPU 缓存结构原理 CPU 缓存结构 查看 cpu 缓存 速度比较 查看 cpu 缓存行 cpu 拿到的内存地址格式是这样的 CPU 缓存读 根据低位,计算在缓存中的索引 判断是否有效 0 去内存读 ...