前端基础div（六）
实例
文档中的一个部分会显示为绿色：
<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 |
|
不赞成使用。请使用样式取而代之。 规定 div 元素中的内容的对齐方式。 |
全局属性
<div> 标签支持 HTML 中的全局属性。
事件属性
<div> 标签支持 HTML 中的事件属性。
详见链接：https://www.w3school.com.cn/tags/tag_div.asp
前端基础div（六）的更多相关文章
- 前端基础进阶(六)-大厂面试题问题:循环闭包与setTimeout
我在上一篇闭包的文章中留下了一个关于setTimeout与循环闭包的思考题. 利用闭包,修改下面的代码,让循环输出的结果依次为1, 2, 3, 4, 5 for (var i = 1; i <= ...
- 进击的Python【第十六章】：Web前端基础之jQuery
进击的Python[第十六章]:Web前端基础之jQuery 一.什么是 jQuery ? jQuery是一个JavaScript函数库. jQuery是一个轻量级的"写的少,做的多&quo ...
- HTML+DIV+CSS+JSweb前端基础
HTML+DIV+CSS+JSweb前端基础 1.<html>和</html> 标签限定了文档的开始和结束点. 属性: (1) dir: 文本的显示方向,默认是从左向右 (2 ...
- 前端基础 之 Bootstrap框架
浏览目录 Bootstrap介绍 为什么要使用Bootstrap? Bootstrap环境搭建 布局容器 栅格系统 Bootstrap全局样式 一.Bootstrap介绍 Bootstrap是Twit ...
- day--42 前端基础小结
前端基础总结 一:前端实现的原理: 小实例: 01:第一步:创建一个socket服务端: import socket server=socket.socket() ip_port=("127 ...
- BAT 前端开发面经 —— 吐血总结 前端相关片段整理——持续更新 前端基础精简总结 Web Storage You don't know js
BAT 前端开发面经 —— 吐血总结 目录 1. Tencent 2. 阿里 3. 百度 更好阅读,请移步这里 聊之前 最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘, ...
- 前端第二篇---前端基础之CSS
前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading ...
- 前端第三篇---前端基础之JavaScript
前端第三篇---前端基础之JavaScript 一.JavaScript概述 二.JavaScript的基础 三.词法分析 四.JavaScript的内置对象和方法 五.BOM对象 六.DOM对象 七 ...
- 前端第四篇---前端基础之jQuery
前端第四篇---前端基础之jQuery 一.jQuery介绍 二.jQuery对象 三.jQuery基础语法 四.事件 五.动画效果 六.补充each 一.jQuery简介 1.jQuery介绍 jQ ...
随机推荐
- 我的N年软件测试感悟
1.前言 大家好!我是Meng前段时间,很荣幸被一合作伙伴邀请发表一篇文章,主题为"这些年,我所从事软件测试的一些感悟",正好趁着这个机会,我也好好总结一下. 2.测试培训 对于软 ...
- 用java实现图书管理系统。
图书管理系统. 一.项目设计到的知识 1.MVC设计模式思想(分包) >项目分包 >MVC简单介绍 2.GUI(图形化界面) 3.JDBC连接MySql数据库 4.I/O流 5.面向对象思 ...
- JVM快速入门(上)
前言 根据狂神说的JVM快速入门做了以下笔记,讲的很好的一个博主,给小伙伴们附上视频链接狂神说JVM快速入门 接下来我按照他所讲的内容给大家记录一些重点! 一.JVM体系结构 .java经由ja ...
- zabbix 发现 vmvare esxi6.7 虚拟主机
1:服务端配置确认 确保 #vi /etc/zabbiz/zabbix-server/zabbix_server.conf ## 确认其中有 StartVMwareCollectors项目 值 > ...
- Vue——v-for动态绑定id的问题
问题:在Vue中,会遇到许多个多选框,倘若数量很庞大那么一个一个input框.label节点寻找,这样操作很繁琐. 直接上解决方案吧: html页面: <ul v-for="(item ...
- PL/SQL连不上,报 ORA-12170:TNS 连接超时
排错步骤: 1.查看网络是否通畅 打开cmd, ping 数据库IP 2. 查看端口是否通畅 打开cmd,tnsping 数据库IP 如果piing不通,可能是防火墙问题 3.检查防火墙状态 #ser ...
- 自动删除n天前的日志(此处用于业务删除xml文件)
Linux应用总结:自动删除n天前的日志 linux是一个很能自动产生文件的系统,日志.邮件.备份等.虽然现在硬盘廉价,我们可以有很多硬盘空间供这些文件浪费,让系统定时清理一些不需要的文件很有一种爽快 ...
- Mybatis学习01：利用mybatis查询数据库
通过mybatis来操作mysql数据库的步骤大致可分为以下几步: 在这里,我们以对下面这个这个表格进行操作为例: 表名:ssm 1 配置依赖 在pom.xml中添加所需要的的依赖 <!-- m ...
- Redis之Sentinel
Redis的主从复制模式下,一旦主节点由于故障不能提供服务,需要人工将从节点晋升为主节点,同时还要通知应用方更新主节点地址,对于很多应用场景这种故障处理的方式是无法接受的.可喜的是Redis从 2.8 ...
- 什么是CAP？
1. 什么是CAP 是一种定理,多用于描述分布式架构,CAP这三个字母对应三种理念,且这三种理念只能两两组合,不能CAP三种理念同时共存(为什么?下面说). C:Consisteny(一致性) A:A ...