div和span标签以及标签分类

div标签

什么是div标签

作用：一般用于配合css完成网页基本布局。

span标签

什么是span标签

作用：一般用于配合css修改网页中的一一些局部信息

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>div和span标签</title><style>.conter {width: 1000px;height: 500px;background: #f7fb8f;margin: auto;margin-bottom: 10px;}.footer {width: 1000px;height: 200px;background: #1ef942;margin: auto;margin-bottom: 10px}.header {width: 1000px;height: 80px;background: #c0d8c7;margin: auto;margin-bottom: 10px}.logo {width: 200px;height: 50px;background: pink;float: left;margin: 20px;}.mav {width: 600px;height: 50px;background: pink;float: right;margin: 20px;}.img3 {width: 600px;height: 50px;float: right;}.imgu {width: 200px;height: 50px;float: left;}.article {width: 650px;height: 400px;background: #f3ebf0;float: right;margin: 20px;}.aside {width: 250px;height: 400px;background: purple;float: left;margin: 20px;}.p1 { /*article中的标题*/text-align: center;text-decoration: underline;font-family: '宋体',serif;font-size: 30px;letter-spacing: 1px;}.p1 span {color: #6667ff;font-style: italic;font-size: 30px;}.p2 {text-align: center;text-decoration: none;font-family: '宋体','华文楷体',sans-serif;font-size: 20px;letter-spacing: 1px;}.p2 span {color: #0f1810;font-style: italic;font-size: 20px;}.p3 {text-align: center;font-size: 28px;font-family: "华文行楷",sans-serif;}</style></head>
<body>
<div class="header"><div class="logo"><img src="data:images/up.jpg" alt="不见了" class="imgu"></div><div class="mav"><img src="data:images/1.jpg" alt="找不到了" class="img3"></div>
</div><div class="conter"><div class="aside"></div><div class="article"><p class="p1">木兰花-<span>拟古绝词</span></p><p class="p2">清 &nbsp;<span>纳兰性德</span></p><p class="p3">人生若只如初见，何事秋风悲画扇</p><p class="p3">等却变得故人心，却道故人心易变</p><p class="p3">骊山语罢清宵半，泪雨霖铃终不怨</p><p class="p3">何如薄幸锦衣郎，比翼连枝当日愿</p></div>
</div>
<div class="footer"></div></body>
</html>

它们之间的区别

1。div标签会独占一行，span标签不会。

2.div是一个容器级别的标签，span是一个文本级别的标签

容器级别标签和文本级别标签的区别

容器级别标签可以嵌套所有标签。

文本级别标签只可以嵌套文字/超链接/图片

容器级别标签

div h ul ol dl li dt dd …

文本级标签

span p buis strong em ins del….

一般情况下嵌套在div中, 或按照组标签来嵌套。

CSS中的标签分类

块级元素

会独占一行，所有的容器级元素块级元素，p也是块级元素。

行内元素

不会独占一行，文本级元素除了p，都是行内元素。

块级元素和行内元素区别

块级元素：1.独占一行

2.如果没有设置宽度，那么默认和父元素一样宽。如果设置了就和设置高度和宽度一样。

行内元素：1.不会独占一行

2.如果没有设置宽度，会默认和内容一样宽，且其设置了也不会发生改变。不可设置高度和宽度。

行内块级元素

为了让元素能过不独占一行，又可以设置宽度和高度。img input 。。。

显示模式的转换

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>显示模式转换</title><style>div {display: inline; /*转换为行内显示*/background: #1ef942;width: 200px;height: 150px;}span {display: block;/*转换为块级元素*/background: #6667ff;width: 200px;height: 150px;}.cc {background: aqua;width: 200px;height: 200px;display: inline-block;}</style></head>
<body>
<div>我是div</div>
<div>我是div</div>
<span>我是span</span>
<span >我是span</span>
<p class="cc">我是段落</p>
<b class="cc">我是加粗</b>
</body>
</html>

通过display属性可以转换：

block块级

inline行内

inline-block 行内块级

将div转换为行内，span转化为块级，p转换为行内块级

div和span标签以及标签分类相关推荐

图片标签|| 列表标签||链接标签||div和span|| 语义化标签
图片标签 img:展示图片 * 属性: * src:指定图片的位置相对路径 * 以.开头的路径 ...
HTML中Div、span、label标签的区别
div与span 通俗地讲就是如果里面还有其他标签的时候就用div,如果里面只有文本就应该用span span与label 由于有了以上关于span的说法,那么我们就可以对文本进行span的容器操作了 ...
div、span、label标签的区别
1.div <div> 可定义文档中的分区或节(division/section). <div> 标签可以把文档分割为独立的.不同的部分.它可以用作严格的组织工具,并且不使用任 ...
html5无意义标签,无意义的div和span标签
HTML 元素是块级元素,它是可用于组合其他 HTML 元素的容器. 元素没有特定的含义.除此之外,由于它属于块级元素,浏览器会在其前后显示折行. 如果与 CSS 一同使用, 元素可用于对大的内容块设 ...
html中span跟div属性,HTML 的 div 和 span 标签
这篇文章里会涉及到两个术语,这里先明确一下: 块级元素,block level element 内联元素(或者叫行内元素),inline element 大多数 HTML 元素被定义为块级元素和内联元 ...
CSS块级、行级、行级块标签、display、div、span
文章目录块级标签行级标签行级块标签 display div 和span 块级标签无论内容有多少,都会占据一行; 默认宽:与父级标签一致; 默认高:0 :或者与内容高度一致. 但是可以通过 wi ...
css div下第一个span,CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
无意义”的标签div和span的区别
HTML只是赋予内容的手段,大部分HTML标签都有其意义(例如,标签p创建段落,h1标签创建标题等等)的,然而div和span标签似乎没有任何内容上的意义,听起来就像一个泡沫做成的锤子一样无用.但实际 ...
CSS之div和span标签
div和span是非常重要的标签,div的语义是division"分割": span的语义就是span"范围.跨度". 这两个东西,都是最最重要的"盒 ...
HTML标签之间有什么区别 div 和span？/span
我想问一些简单的例子,显示<div>和<span>的用法. 我已经看到它们都用来用id或class标记页面的一部分,但是我想知道是否有时候有一个优先于另一个. #1楼 Div是 ...