美工之家
  • 首页
  • 素材
    • 图标
    • 作品
    • 源码
    • PSD素材
    • 设计模板
  • 简历
  • 技术
  • 问答
登录
当前位置:美工之家 > 技术分享 > HTML
标签
runslyrunsly 技术分享 2020-05-18

HTML
标签

标签:网站   this   其它   enter   通过   式表   header   tps   attr   

实例

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

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

亲自试一试

浏览器支持

IE Firefox Chrome Safari Opera
         

所有主流浏览器都支持 <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 中的事件属性。

以上就是 HTML <div> 标签 的详细内容,更多请关注w3school其它相关文章!




重庆代孕【徽信13022337922】、成都代孕【徽信13022337922】、长沙代孕【徽信13022337922】、

武汉代孕【徽信13022337922】、贵阳代孕【徽信13022337922】、昆明代孕【徽信13022337922】

HTML <div> 标签

标签:网站   this   其它   enter   通过   式表   header   tps   attr   

原文地址:https://www.cnblogs.com/yuya669/p/12868149.html

Web开发
runsly

runsly 普通

分享到:
上一篇
Js 之封装replaceAll
下一篇
HTML
标签

相关推荐

避免重复提交?分布式服务的幂等性设计! 架构文摘 今天 点击蓝色“架构文摘”关注我哟 加个“星标”,每天上午 09:25,干货推送! 来源:https://www.cnblogs.com/QG-whz/p/10372458.html 作者:melonstreet

避免重复提交?分布式服务的幂等性设计! 架构文摘 今天 点击蓝色“架构文摘”关注我哟 加个“星标”,每天上午 09:25,干货推送! 来源:https://www.cnblogs.com/QG-whz/p/10372458.html 作者:melonstreet

MVCC多版本并发控制

MVCC多版本并发控制

PHP 太空船运算符(组合比较符)

PHP 太空船运算符(组合比较符)

centos7 平台搭建网页版源码阅读器

centos7 平台搭建网页版源码阅读器

最新动态
个人英文简历模板2页
个人英文简历模板2页
教师求职信范文例子word
教师求职信范文例子word
立体字,通过PS制作色彩缤纷拖尾立体字效果
立体字,通过PS制作色彩缤纷拖尾立体字效果
立体字,用PS制作绿叶构成的3D立体字
立体字,用PS制作绿叶构成的3D立体字
立体文字,在PS中制作绚丽悬空潮流立体文字
立体文字,在PS中制作绚丽悬空潮流立体文字
字体制作,在ps中设计立体的翘边剪纸文字
字体制作,在ps中设计立体的翘边剪纸文字
标签
9款餐饮标签 AI格式 APP模板 dedecms EPS EPS格式 jQuery LOGO设计 PSD PSD分层素材 sketch Web开发 丝带 人物 创意设计 单车 图标 夏季 妇女节 山 帝国cms教程 帽子 护照 披萨 拖拉机 标志 标志设计 标签 树木 照相机 爱心 直播APP模板 矢量图 矢量图下载 矢量素材 科技 简历模板 织梦学院 织梦教程 苹果 行李箱 设计素材 返回顶部 飞机 香槟酒
分类
  • 作品 (12)
  • 技术分享 (589)
  • 教程 (5)
    • 3D (5)
  • 简历 (18)
    • 单页简历 (18)
  • 精品资源 (28)
  • 素材 (129)
    • PSD素材 (2)
    • 图标 (23)
    • 在线客服 (17)
    • 设计模板 (15)
近期文章
  • 个人英文简历模板2页
  • 教师求职信范文例子word
  • 立体字,通过PS制作色彩缤纷拖尾立体字效果
  • 立体字,用PS制作绿叶构成的3D立体字
  • 立体文字,在PS中制作绚丽悬空潮流立体文字
  • 字体制作,在ps中设计立体的翘边剪纸文字
文章归档
  • 2021年4月
  • 2021年3月
  • 2021年2月
  • 2021年1月
  • 2020年12月
  • 2020年11月
  • 2020年10月
  • 2020年9月
  • 2020年8月
  • 2020年7月
  • 2020年6月
  • 2020年5月
美工之家

美工之家会员发布作品/付费下载/查看/余额管理/自定义积分,集成支付,卡密,推广奖励等。

本站导航
  • 精品资源
  • 美工素材
  • 个人作品
友情链接
  • 高端源码
  • 威海生活网
  • 一起解密
快速搜索
美工之家-全国美工行业首选平台
© 2020 9502669.com All rights reserved. 美工之家 版权所有 鲁ICP备18023744号-2 京公网安备 188888888
美工之家
  • 登录
  • 注册
or
仅开放社交账号登录
or
仅开放社交账号注册
忘记密码?
美工之家
源码模板
美工素材
免费外链
一起解密
建站QQ
美工之家