IT兄弟连 HTML5教程 “无意义”的HTML元素div和span

HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用。但实际上,与CSS结合起来后,它们的应用十分广泛。需要记住的是,div和span是“无意义”的标签,它们的存在纯粹是为了应用CSS样式,所以当样式表失效时,它们就没有了任何作用。
它们被用来组合成一大块的HTML代码并赋予一定的信息,大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于,span是内联的(行内标记),用在一小块的内联HTML中;而div(division)元素是块级的(简单地说,它等同于其前后有断行),用于组合一大块的代码,为HTML文档内大块的内容提供结构和背景的元素,可以包含段落、标题、表格甚至其他部分,这使得div便于建立不同集成的类。

div的起始标签和结束标签之间的所有内容都是用来构成这个块的,其中所包含的元素的特性由div标签的属性来控制,或者通过使用样式表格式化这个块来进行控制。
IT兄弟连 HTML5教程 “无意义”的HTML元素div和span的更多相关文章
- IT兄弟连 HTML5教程 HTML文档头部元素head
HTML头部标记是<head>,主要包括页面的一些基本描述语句,以及CSS和JavaScript,一般都可以定义在头部元素中.它用于包含当前文档的有关信息,例如网页标题和关键字等.通常位于 ...
- IT兄弟连 HTML5教程 HTML5表单 HTML5新增表单元素
HTML5有一些新的表单元素:<datalist>.<keygen>.<output>.不是所有的浏览器都支持HTML5新的表单元素,但即使浏览器不支持该表单属性, ...
- IT兄弟连 HTML5教程 HTML5的基本语法 小结及习题
小结 一个完整的HTML文件由标题.段落.列表.表格.文本,即嵌入的各种对象所组成,这些逻辑上统一的对象称为元素.HTML文档主体结构分为两部分,一部分是定义文档类型,另一部分则是定义文档主体的结构框 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局 小结及习题
小结 DIV+CSS布局页面的优势:表现和内容相分离.代码简洁,提高页面浏览速度.易于维护和改版.提高搜索引擎对网页的索引效率.每个HTML元素都可以看作一个区块,类似于装了东西的盒子,称为盒子模式. ...
- IT兄弟连 HTML5教程 DIV+CSS网站首页布局示例
首页的设计直接影响网站的整体形象,虽然没有一个统一的规范,但最好将其设计为大众化的,只要信息内容能够合理地编排即可,使用户可以方便地找到需要的信息.另外,首页的高度最好不要超过三个屏幕,页面中使用的颜 ...
- IT兄弟连 HTML5教程 DIV+CSS网页标准化布局的优势
标准的网页都需要对内容进行布局,以前都是采用表格的定位技术,从2005年开始逐步转向DIV+CSS的布局方式,目前绝大多数的网站都是采用这种布局方式.使用DIV+CSS对网站进行布局符合W3C标准,采 ...
- IT兄弟连 HTML5教程 多媒体应用 新增多媒体播放元素
在HTML5之前,要在网站上展示视频.音频.动画等多媒体信息,除了使用第三方自主开发的播放器,使用最多的工具应该算是Flash了,但是它们都需要在浏览器中安装各种插件才能使用,有时速度很慢.HTML5 ...
- IT兄弟连 HTML5教程 CSS3揭秘 小结及习题
小结 CSS3对于开发者来说,给web应用带来了更多的可能性,极大提高了开发效率.CSS3在选择器上的支持可谓是丰富多彩,使得我们能够灵活的控制样式,而不必为元素进行规范化的命名.CSS3支持的动画类 ...
- IT兄弟连 HTML5教程 多媒体应用 小结及习题
小结 在互联网上,图像和链接则是通过URL唯一确定信息资源的位置.URL分为绝对URL和相对URL.通过使用<img />标记在浏览器中显示一张图像.超文本具有的链接能力,可层层链接相关文 ...
随机推荐
- plot()与dev 函数族的使用
1. plot()的类型选择 plot()函数,属于graphics包中. plot(a,b,type="value") type:以什么样的形式来画a,b之间的关系: ·&quo ...
- 【限时免费】从入门到实战,5节课玩转Kafka!赢音箱、书籍好礼!
欢迎添加华为云小助手微信(微信号:HWCloud002 或 HWCloud003),输入关键字"加群",加入华为云线上技术讨论群:输入关键字"最新活动",获取华 ...
- MySQL必知必会(Select, Where子句)
SELECT prod_name, prod_price FROM products WHERE prod_price = 2.5; SELECT prod_name, prod_price FROM ...
- 洛谷 题解 P5595 【【XR-4】歌唱比赛】
本蒟蒻又双叒叕被爆踩了. 考试时一遍过 其实这题还是很简单的,难度不会大于普及组T1. CSP 2019 RP++ 看开始看到题目,觉得特别长,不想看... 我来和你们分析分析题目,你们就都可以秒了. ...
- 快速搭建 Serverless 在线图片处理应用
作者:倚贤 首先介绍下在本文出现的几个比较重要的概念: 函数计算(Function Compute):函数计算是一个事件驱动的服务,通过函数计算,用户无需管理服务器等运行情况,只需编写代码并上传.函数 ...
- [TimLinux] TCP全连接队列满
0. TCP三次握手 该图来自:TCP SOCKET中backlog参数的用途是什么? syns queue: 半连接队列 accept queue: 全连接队列 控制参数存放在文件:/proc/sy ...
- 2019ICPC 上海网络赛 G题 Substring(哈希)
题意: 给了一个母串S, 每次循环给了一个模板串,问模板串在母 串中“匹配”了多少次?“匹配”的意思就是首字母和尾字母一样, 中间字母顺序可以换. 题解: 字符串hash.我们将询问字符串的首尾特殊h ...
- HDU2255 奔小康赚小钱钱(二分图-最大带权匹配)
传说在遥远的地方有一个非常富裕的村落,有一天,村长决定进行制度改革:重新分配房子. 这可是一件大事,关系到人民的住房问题啊.村里共有n间房间,刚好有n家老百姓,考虑到每家都要有房住(如果有老百姓没房子 ...
- ARTS-S docker安装miniconda
FROM centos:centos7.3.1611 MAINTAINER zhouyang3 <aaa@qq.com> WORKDIR /usr/local ADD ./ /usr/lo ...
- Orleans的生产环境部署
这一章非常简单 只要照着官方文档做就行了 文档地址 打好NUGET包后 Sql脚本是在项目下的OrleansAdoNetContent