整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
今日小知识】：div和span的作用及用法，希望可以帮到正在学习HTML的你噢~~~
一般用于配合css完成网页基本布局。<div>标签可定义文档中的分区或节 。可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。如果用 id 或 class 来标记 ，那么该标签的作用会变得更加有效。class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。class可以在页面里面重复使用，id由于在页面里面只能出现一次，所以不能重复使用，所以尽量用class来写，这样能在页面里面重复引用你写的css，减小工作量和代码量。
一般用于配合css修改网页中的一些局部信息。它其实就是用来组合文档中的行内元素，也就是将内容放在span标签之中。span没有固定的格式表现，如果需要，可以添加属性来表现形式
1.div标签会独占一行，span标签不会。
2.div是一个容器级别的标签，span是一个文本级别的标签。
3.div基本上与span相似，或者说具有span所有的功能，此外还具有span不及的特色。div是一个块，也就是所谓的"容器"，它具有自己独立的段落，独立的标题，独立的表格。
4.div是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而span是行内元素，span的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用span。
容器级别标签可以嵌套所有标签，文本级别标签只可以嵌套文字/超链接/图片。
div h ul ol dl li dt dd …
span p buis strong em ins del….
希望以上内容可以帮助到在学习HTML的你们噢~~~如有补充可以私聊我噢~~~我们一起学习~~~
大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
html程序员们都知道的<div> 和 <span>，你知道吗？
内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。
<div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。
定义和用法
<div> 可定义文档中的分区或节（division/section）。
<div> 标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具，并且不使用任何格式与其关联。
如果用 id 或 class 来标记 <div>，那么该标签的作用会变得更加有效。
用法
<div> 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 <div> 固有的唯一格式表现。可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
HTML <span> 元素是内联元素，可用作文本的容器。
<span> 元素也没有特定的含义。
当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。
定义和用法
<span> 标签被用来组合文档中的行内元素。
如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会任何视觉上的差异。尽管如此。
可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。
可以对同一个 <span> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
HTML:
<p class="tip"><span>提示：</span>... ... ...</p>
CSS:
p.tip span {
font-weight:bold;
color:#ff9955;
}
希望以上可以解决你们心中的一些疑惑，其中可能会有不对的地方或是需要改进的地方，欢迎留言纠正。感觉还不错欢迎关注收藏转载哦
天我们说下HTML标签中的div、span和图像标签。其实div和span是上一节就要讲的标签内容，但是当时时间比较晚了，就没有说。
<div>和<span>是没有语义的，就是一个盒子，用来装内容的。这和android开发中的font很像，也是一个个的盒子，将内部包起来。可以这么来写:
<div>这是头部</div> <span>我是内容</span> 两个都是双标签。
div是division的缩写，表示分割分区(竖着); span意为跨度、跨距(横着)。div单独占一行，实例如下: 理解为一个大盒子
看下HTML代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一个div标签，我自己独占一行</div>
<div>我是一个div标签，我自己独占一行</div>
</body>
</html>
可以看到，写了两个<div>标签，一个占一行
<span>一行可以放很多个标签，理解为 小盒子，举例如下:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<div>我是一个div标签，我自己独占一行</div>
<div>我是一个div标签，我自己独占一行</div>
<span>我是一个span标签</span>
<span>我是一个span标签</span>
</body>
</html>
效果如下:
接下来说一个很重要的标签---图像标签
HTML标签中，使用<img>标签用于定义HTML页面中的图像，是一个单标签。img是image的缩写，src是<img>标签的必须属性，用于指定图像文件的路径和文件名。属性，指的是属于这个图像标签的特性。对于图片，需要将图片和html文件放到一起。
代码图示：
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg"/><br />
<!-- <img src="HTML5.jpeg"> -->
</body>
</html>
效果如下:
如果我们再加入同样的一行代码，看看显示(加上换行)
代码如图:
代码内容如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg"/><br />
<img src="HTML5.jpeg">
</body>
</html>
效果如下:
可以看到<img src="xxx"> 后面不写 / 也是可以的，<br />后面不写斜杠也行，即使都是用单个的情况。src是source的缩写。
接下来说下图像标签的其他属性:
alt 替换文本，图像不能显示的文字
title 文本，提示文本，鼠标放到图像上，显示的文字，类似于 hover
width 像素，设置图像的宽度(和android中的差不多)
height 像素，设置图像的高度(和android中的差不多)
border 像素，设置图像的边框粗细
具体我们看下实例:
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg" />
<br />
alt替换文本，图像显示不出来的时候用文本代替<br />
<img src="HTML5.jpeg" alt="图像不展示时，使用文本展示">
</body>
</html>
看下展示效果:
发现 alt后替换文本并没有起作用，图像还是显示的。这是为什么呢？
其实原因很简单，就是先判断src后的图像是否存在，如果存在，就展示图像，如果不存在，就展示文本。上面语句中，图像的地址是正确的，所以会展示图像。可以将图像地址进行修改。我们再试下
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
<img src="HTML5.jpeg" />
<br />
alt替换文本，图像显示不出来的时候用文本代替<br />
<img src="HTML51.jpeg" alt="图像不展示时，使用文本展示">
</body>
</html>
我们来看看效果，alt后的文本是否能展示
说明我们的测试是正确的。
2.title 提示文本
先看效果:
看下代码和代码展示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>20210819_六</title>
</head>
<body>
title提示文本<br />
<img src="HTML5.jpeg" title="鼠标hover上，就展示了" />
<br />
</body>
</html>
好的，今天先到这里，一会我们继续。
*请认真填写需求信息，我们会在24小时内与您取得联系。
