HTML
文章目录
8 HTML <div> 标签
8.1 实例
<html>
<body>
<h3>This is a header</h3>
<p>This is a paragraph.</p>
<div style="color:#00FF00">
<h3>This is a header</h3>
<p>This is a paragraph.</p>
</div>
</body>
</html>
8.2 浏览器支持
所有主流浏览器都支持 <div> 标签。
8.3 定义和用法
8.3.1 定义
<div> 可定义文档中的分区或节(division/section)。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>,那么该标签的作用会变得更加有效。
8.3.2 用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。
实际上,换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id,虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。
这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。
8.4 HTML 与 XHTML 之间的差异
在 HTML 4.01 中,div 元素的 “align” 属性不被赞成使用。
在 XHTML 1.0 Strict DTD 中,div 元素的 “align” 属性不被支持。
8.5 提示和注释
注释:<div> 是一个块级元素,也就是说,浏览器通常会在 div 元素前后放置一个换行符。
**提示:**请使用 <div> 元素来组合块级元素,这样就可以使用样式对它们进行格式化。
8.6 案例分析
<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 进行格式化,可谓一举两得。
8.7 可选的属性
8.8 全局属性
<div> 标签支持 HTML 中的全局属性。
全局属性是可与所有 HTML 元素一起使用的属性。
https://www.w3school.com.cn/tags/html_ref_standardattributes.asp
8.9 事件属性
<div> 标签支持 HTML 中的事件属性。
全局事件属性
HTML 有能力让事件触发浏览器中的动作,例如当用户单击元素时启动 JavaScript。
-
Window 事件属性【针对 window 对象触发的事件(应用到 <body> 标签):】
-
Form 事件【由 HTML 表单内的动作触发的事件(应用到几乎所有 HTML 元素,但最常用在 form 元素中):】
-
Keyboard 事件
-
Mouse 事件【由鼠标或类似用户动作触发的事件:】
-
Media 事件
由媒介(比如视频、图像和音频)触发的事件(适用于所有 HTML 元素,但常见于媒介元素中,比如 <audio>、<embed>、<img>、<object> 以及 <video>):