一、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标签的更多相关文章

  1. Div和Span标签显示与隐藏

    本实例中,学习jQuery的知识,显示与隐藏网页上的div或是span标签. 实际环境中,也许是根据某些条件进行,符合条件时,对某个或是某个div或是span标签时行显示与隐藏. 主要是学习jQuer ...

  2. "无意义"的div和span标签

    HTML <div> 元素是块级元素,它是可用于组合其他 HTML 元素的容器.<div>元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行.如果与 C ...

  3. CSS之div和span标签

    div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...

  4. HTML 的 <div> 和 <span> 标签

    这篇文章里会涉及到两个术语,这里先明确一下: 块级元素,block level element 内联元素(或者叫行内元素),inline element 大多数 HTML 元素被定义为块级元素和内联元 ...

  5. div和span标签

    ------------------------ ------------------------ ------------------------ 块级标签独占一行,不和别的标签在同一行显示:行内标 ...

  6. div、span绑定内容改变事件

    内容改变事件onchange只适用于form表单标签(input.select.textarea) 当需要对div.span标签进行内容改变监听则无法适用,查阅了一些资料发现jquery有针对的方法, ...

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

    HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签a创建链接,标签h1创建标题等),然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用.但实际上, ...

  8. div和span显示在同一行

    div和span标签的区别 div  是块级元素标签,独占一行,后面跟的内容换行显示 span  是内联元素标签,后面可以跟其他显示内容,不独占一行 display属性可以改变内联元素和块级元素的状态 ...

  9. div和span与块级和行内标签

    <div>标签: 是一个区块容器标记,<div></div>之间是一个容器, 可以包含段落.表格.图片等各种HTML元素. <span>标签: 没有实际 ...

  10. 让HTML标签、DIV、SPAN拥有focus事件和blur事件，聚焦和失焦

    DIV和其他普通标签是不具有onfocus和onblur事件的.INPUT和A标签为什么拥有?而DIV和SPAN等普通标签却没有?有时候我们习惯性用键盘的TAB来移动光标,仔细看你会发现,光标只在IN ...

随机推荐

  1. linux内核级同步机制--futex

    在面试中关于多线程同步,你必须要思考的问题 一文中,我们知道glibc的pthread_cond_timedwait底层是用linux futex机制实现的. 理想的同步机制应该是没有锁冲突时在用户态 ...

  2. EntityUtils.toString(entity)处理字符集问题解决

    爬取51Job和猎聘网的信息,想处理字符集问题(51job为gbk,猎聘为utf-8), 找到两个网站字符集信息都在同一标签下 就想先把网页保存成String,解析一遍获取字符集,然后将网页转换成对应 ...

  3. python3之利用字典和列表实现城市多级菜单

    利用字典和列表实现城市多级菜单 #coding:utf-8 #利用字典和列表实现城市多级菜单 addrIndex = {":"福建"} addrDict = {" ...

  4. scrapy框架抓取表情包/(python爬虫学习)

    抓取网址:https://www.doutula.com/photo/list/?page=1 1.创建爬虫项目:scrapy startproject biaoqingbaoSpider 2.创建爬 ...

  5. 剑指offer 9-10:青蛙跳台阶与Fibonacii数列

    题目描述 一只青蛙一次可以跳上1级台阶,也可以跳上2级.求该青蛙跳上一个n级的台阶总共有多少种跳法(先后次序不同算不同的结果). 问题分析 我们将跳法个数y与台阶数n视为一个函数关系,即y=f(n). ...

  6. JavaScript中this究竟指向什么？

    摘要: 神奇的this! 原文:JS 中 this 在各个场景下的指向 译者:前端小智 Fundebug经授权转载,版权归原作者所有. 1. this 的奥秘 很多时候, JS 中的 this 对于咱 ...

  7. ES6之Proxy 的巧用

    摘要: Proxy的骚操作. 作者:前端小智 原文:Proxy 的巧用 Fundebug经授权转载,版权归原作者所有. Proxy 介绍 使用Proxy,你可以将一只猫伪装成一只老虎.下面大约有6个例 ...

  8. RequestsDependencyWarning: urllib3 (1.25.7) or chardet (2.2.1) doesn't match a supported version

    /usr/lib/python2.7/site-packages/requests/__init__.py:91: RequestsDependencyWarning: urllib3 (1.25.7 ...

  9. 【java集合总结】-- ArrayList源码解析

    一.前言 要想深入的了解集合就必须要通过分析源码来了解它,那如何来看源码,要看什么东西呢?主要从三个方面: 1.看继承结构 看这个类的继承结构,处于一个什么位置,不需要背记,有个大概的感觉就可以,我自 ...

  10. 张兴盼-201871010131《面向对象程序设计（Java）》第七周学习总结

    张兴盼-201871010131<面向对象程序设计(Java)>第七周学习总结 项目 内容 这个作业属于哪个课程 http://www.cnblogs.com/nwnu-daizh/ 这个 ...