Div与Span标签详解

简介: Div与Span标签详解

一、DIV

1.简介

在html中布局使用最多标签为div,
我们通常将网页重构说成div css制作。
Div本身没有什么特别之处,只是div标签替代了以前table标签布局。
我们通过对div标签对象设置不同样式实现我们要的美化效果。
通常一对未设置任何样式的div,独占一行。

2.作用

Div起分割作用,是分割内容常使用的标签。DIV+CSS更是起到分割与设置对应样式作用。

3.案例

<!DOCTYPE html>
<html>
<head>
</head>
<body>
    <div>第一个div</div>
    <div>第二个div</div>
    <div>第三个div</div>
</body>
</html>

二、span

1.简介

  • 在HTML中,除了使用div标签布局外,我们也常常使用span标签布局。
  • span本身没有什么特别之处,通常网页布局都可以使用此标签布局。
  • 我们也可以通过对span标签对象设置不同样式实现我们要的美化效果。
  • 特性,通常一对未设置任何样式的span,高宽是自适应内容,多容多少,此标签就占用多少距离空间。

2.语法

在span标签内部加我们所需要的内容即可

3.案例


<!DOCTYPE html>
<html>
<head>
</head>
<body>
<span>我是span标签</span>
<span>我是span标签AAA</span> 
</body>
</html>
相关文章
|
7月前
|
前端开发
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
css div覆盖样式(一个div想覆盖掉另一个div在他上面进行显示)
116 0
|
4月前
|
容器
div标记
【8月更文挑战第26天】div标记。
37 4
|
4月前
|
前端开发
el-form-item label中的字体样式设置格式
这篇文章介绍了如何在Element UI的`el-form-item`组件中自定义`label`标签的样式,通过使用`slot`属性和内联CSS来改变字体颜色和加粗显示。
el-form-item label中的字体样式设置格式
|
7月前
|
JavaScript
为什么把script标签放在div下面?
为什么把script标签放在div下面?
HTML <input> 标签的 autocomplete 属性
HTML <input> 标签的 autocomplete 属性
117 0
|
JavaScript Java
el标签
el标签
85 0
|
前端开发
div标签中的span标签,多行文字水平,垂直居中
div标签中的span标签,多行文字水平,垂直居中
233 0
|
前端开发 开发者 容器
DIV 和 SPAN 标签介绍| 学习笔记
快速学习 DIV 和 SPAN 标签介绍。
DIV 和 SPAN 标签介绍| 学习笔记
|
前端开发 JavaScript 开发者
style 标签|学习笔记
快速学习 style 标签
|
开发者
title 标签|学习笔记
快速学习 title 标签