HTML的div、span标签是什么以及怎么用

News:
我的编程学习笔记仓库已经出炉上线,正在快速维护中……
地址:https://github.com/Github-Programer/LeetCode-Notes

学习HTML去网上搜索,<div>标签和<span>标签都没有详细解释,我仔细看了W3Cschool和菜鸟教程才明白,我来说一下

Div和Span目录:

<div>标签

菜鸟教程中这一章叫做‘区块’,第一反应是区块链,第二次看才明白是设定区域

大多数 HTML 元素被定义为块级元素或内联元素。

块级元素在浏览器显示时,通常会以新行来开始(和结束)。

实例:
文档中的一个区域将显示为蓝色:

<div style="color:#0000FF">
  <h3>这是一个在 div 元素中的标题。</h3>
  <p>这是一个在 div 元素中的文本。</p>
</div>

在这里插入图片描述
div标签的浏览器支持
在这里插入图片描述
再来一个实例:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<div id="container" style="width:500px">

<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>

<div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>

<div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
内容在这里</div>

<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>

</div>
 
</body>
</html>

在这里插入图片描述

<span>标签

实例: 使用 <span> 元素对文本中的一部分进行着色:
<p>我的母亲有 <span style="color:blue">蓝色</span> 的眼睛。</p>

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/cool99781/article/details/105937770
今日推荐