码迷,mamicode.com
首页 > Web开发 > 详细

web前端入门到实战:HTML-div和span标签

时间:2019-12-29 09:18:21      阅读:132      评论:0      收藏:0      [点我收藏+]

标签:color   20px   布局   实战   margin   测试   级别   分享   正式   

一、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>

web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

技术图片

二、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>
web前端开发学习Q-q-u-n: ⑦⑧④-⑦⑧③-零①②,分享学习的方法和需要注意的小细节,不停更新最新的教程和学习方法(详细的前端项目实战教学视频)

技术图片

2.div是容器级的标签,而span是文本级的标签

四、容器级的标签和文本级标签的区别:

容器级的标签是可以嵌套其他所有的标签

文本级的标签只能嵌套文字、超链接、图片

容器级的标签:div\h\ul\ol\li ...

文本级的标签:span\p\buis\stong\em\ins\del.....

举例:容器级别就不举,因为什么都支持;举一下文本级标签的例子


<p> 我是文本级别标签 <h1>我是h1标签</h1>

</p>

技术图片

技术图片

从上面的例子可以看出我们的源码在被执行的时候,被浏览器纠正,看一下第二张图,浏览器把h1标签给拿出来了,p标签给补全了?。

2.?注意点:我们不用去记忆这标签的是哪种类型的,在正式开发环境中要嵌套都是潜逃在div中,或者按照组标签来嵌套

web前端入门到实战:HTML-div和span标签

标签:color   20px   布局   实战   margin   测试   级别   分享   正式   

原文地址:https://blog.51cto.com/14592820/2462760

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!