HTML连载29-div和span标签
一、div标签
1.作用：一般用于配合CSS完成网页的基本布局
2.例子：
<style>
.head{
width: 980px;
height: 100px;
background: red;
margin: auto;
}
.content{
width: 980px;
height: 300px;
background: green;
margin: auto;
}
.footer{
width: 980px;
height: 100px;
background: blue;
margin: auto;
}
.logo{
width: 280px;
height: 50px;
background: purple;
float:left;
margin: auto;
}
.nav{
width: 180px;
height: 20px;
background: yellow;
float:right;
margin: auto;
}
</style>
</head>
<body>
<div class="head">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
</div>
<div class="footer">
</div>
二、span标签
1.作用：一般用于配合css修改网页中的一些局部信息
2.例子：span适用于修改我们单独要求的一块区域的属性
span{
color:red;
}
..........省略代码........
<div class="footer">
<p>我是用来<span>测试span标签</span>的</p>
</div>
三、div和span有什么区别
1.div会单独占领一行
<div>我是div</div> <div>我是div</div> <div>我是div</div> <span>我是span</span> <span>我是span</span> <span>我是span</span>
2.div是容器级的标签，而span是文本级的标签
四、容器级的标签和文本级标签的区别：
容器级的标签是可以嵌套其他所有的标签
文本级的标签只能嵌套文字、超链接、图片
容器级的标签：div\h\ul\ol\li ...
文本级的标签：span\p\buis\stong\em\ins\del.....
举例：容器级别就不举，因为什么都支持；举一下文本级标签的例子
<p>
我是文本级别标签
<h1>我是h1标签</h1>
</p>
从上面的例子可以看出我们的源码在被执行的时候，被浏览器纠正，看一下第二张图，浏览器把h1标签给拿出来了，p标签给补全了。
2.注意点：我们不用去记忆这标签的是哪种类型的，在正式开发环境中要嵌套都是潜逃在div中，或者按照组标签来嵌套
五、源码：
d90_div_and_span_label.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/d90_div_and_span_label.htm
2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包
HTML连载29-div和span标签的更多相关文章
- Div和Span标签显示与隐藏
本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...
- "无意义"的div和span标签
HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...
- CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
- HTML 的 <div> 和 <span> 标签
这篇文章里会涉及到两个术语,这里先明确一下: 块级元素,block level element 内联元素(或者叫行内元素),inline element 大多数 HTML 元素被定义为块级元素和内联元 ...
- div和span标签
------------------------ ------------------------ ------------------------ 块级标签独占一行,不和别的标签在同一行显示:行内标 ...
- div、span绑定内容改变事件
内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...
- IT兄弟连 HTML5教程 “无意义”的HTML元素div和span
HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用.但实际上, ...
- div和span显示在同一行
div和span标签的区别 div 是块级元素标签,独占一行,后面跟的内容换行显示 span 是内联元素标签,后面可以跟其他显示内容,不独占一行 display属性可以改变内联元素和块级元素的状态 ...
- div和span与块级和行内标签
<div>标签: 是一个区块容器标记,<div></div>之间是一个容器, 可以包含段落.表格.图片等各种HTML元素. <span>标签: 没有实际 ...
- 让HTML标签、DIV、SPAN拥有focus事件和blur事件，聚焦和失焦
DIV和其他普通标签是不具有onfocus和onblur事件的.INPUT和A标签为什么拥有?而DIV和SPAN等普通标签却没有?有时候我们习惯性用键盘的TAB来移动光标,仔细看你会发现,光标只在IN ...
随机推荐
- [Zabbix] 安装MySQL5.7, 部署Zabbix到CentOS 7日记
安装环境:CentOS7 64位,安装MySQL5.7 一.安装 MySQL 1.配置YUM源 在MySQL官网中下载YUM源rpm安装包:http://dev.mysql.com/downloads ...
- 【Python】运算符
python是强类型语言,某些场合下需要进行类型转换.关系运算符的结果是true或false.这里介绍一下基本的运算符,和几个使用实例,了解并掌握python中range()函数和math类库的引入和 ...
- Python - 条件控制、循环语句 - 第十二天
Python 条件控制.循环语句 end 关键字 关键字end可以用于将结果输出到同一行,或者在输出的末尾添加不同的字符,实例如下: Python 条件语句是通过一条或多条语句的执行结果(True 或 ...
- Python-函数参数类型及排序问题
Python中函数的参数问题有点复杂,主要是因为参数类型问题导致的情况比较多,下面来分析一下. 参数类型:缺省参数,关键字参数,不定长位置参数,不定长关键字参数. 其实总共可以分为 位置参数和关 ...
- 图书推荐《图解HTTP》
作品简介 本书对互联网基盘——HTTP协议进行了全面系统的介绍.作者由HTTP协议的发展历史娓娓道来,严谨细致地剖析了HTTP协议的结构,列举诸多常见通信场景及实战案例,最后延伸到Web安全.最新技术 ...
- reduce求和真方便
1.reduce的用法. reduce是JavaScript中的一个方法,常用于数组求和,接收两个参数,第一个参数为累加函数,第二个参数为初始值,这个初始值是前面那个累加函数的参数.如果不指定初始值, ...
- 轻量级手绘软件openCanvas免费版，手绘板CG手绘软件
轻量级手绘软件openCanvas免费版,手绘板CG手绘软件 手绘软件通俗一点来说就是用手来绘画的软件,应用很宽泛如建筑,服饰陈列设计.橱窗设计.家居软装设计.空间花艺设计.美术.园林.环艺.摄影.工 ...
- Java实现贪吃蛇游戏(含账号注册登录，排行榜功能)
这是我第一次工程实践的作业,选题很多,但我只对其中的游戏开发感兴趣,可游戏就两三个类型,最终还是选择了贪吃蛇.其实就贪吃蛇本身的代码实现还算是比较简单的,可是实践要求代码行达到一定数量,所以我就额外给 ...
- 新手入门必看：VectorDraw 常见问题整理大全（一）
VectorDraw Developer Framework(VDF)是一个用于应用程序可视化的图形引擎库.有了VDF提供的功能,您可以轻松地创建.编辑.管理.输出.输入和打印2D和3D图形文件.该库 ...
- lf 前后端分离 (6) 支付
支付 import datetime from django.core.exceptions import ObjectDoesNotExist from rest_framework.views i ...