【 HTML&CSS 课程】03 块级标签和行内标签
【 HTML&CSS 课程】03 块级标签和行内标签
站长建议：视频只是作为知识点补充，不要一开始就直接看视频，最好是在阅读之后，带着疑问去看视频。
运行方式：浏览器打开即可
运行效果：
image.png
步骤1：问候一下div标签
首先，让我们一起认识一下div标签，这是一个极为常用的块级标签。所谓的块级标签，就是高度为0，宽度100%的标签，也就是说，它是独占一行的！比如有下面的代码
<!DOCTYPE html>
<html>
<head>
<title>第三讲</title>
</head>
<body>
<div></div>
</body>
</html>效果是，一片空白？？哈哈，表面上看是的。但是如果你按一下F12，浏览器就会进入调试界面，我们在调试界面查看这个div，会怎么样呢？
image.png
image.png
我们可以清楚地看到，div的宽度是1021，高度为0。现在，让我们移动一下调试工具的宽。像这样：
image.png
image.png
咦？宽度变成576了，这说明，div的宽度是100%，永远占满页面的宽度！好的，现在，我们给div里面加点料！
<div>请问怎样才能停止散发魅力？帮朋友问的。 </div>在看div的情况：
image.png
哦，当div里面有东西的时候，会根据div里面内容的高度撑起来。
步骤2：问候一下span标签
span是行内标签，啥叫行内标签呢？行内标签就是一种皮包骨的标签！（哈哈，够精辟了）
首先，我们在页面中加一个空的span标签。
<span></span>用刚才的方法去调试看看，span是啥？
image.png
image.png
我靠，真TM惨，宽度和高度都是0，这个标签是HTML捡来的么？别急，我们给span标签里面加一点料。
<span>听说双拾壹什么都便宜，那你能不能跟我在一起，就当便宜我。</span>效果：
image.png
原来如此，span标签里面有什么，宽度和高度会根据里面的内容自己撑起来，还真是皮包骨呢。还有，跟div标签不同的是，span标签不会独占一行。
步骤3：图片img是什么标签
网页中是可以引入图片的，在html中，我们用img标签来引入图片。<img> 标签有两个必需的属性：src 和 alt。src用来指定图片的地址，alt规定图像的替代文本。我们就记住src属性便可，一般用的最多的，也就是src属性啦。
根据上面的步骤，我们知道div是独占一行的，而span的宽度完全根据内容来决定，这个就是区分块级元素和行内元素的试金石。现在我们引入一张图片：
image.png
我们要引入1.jpg，只需要在html中加入这一行代码。
<img src="1.jpg">效果：
image.png
如果你觉得图片太大，可以给img添加行内样式（在标签里面加上style属性），设置宽度。
<img style="width: 300px;" src="1.jpg">
image.png
我们看到，图片跟在了span的右边，这说明img和span一样，都是行内标签。如果你希望span和img换行，请看步骤四。
步骤4：行内标签与块级标签的转换
首先，继续上一个问题，怎样让行内标签换行，最简单的办法：div不是块级标签吗？那直接在外面套一层div不就好了？
<!DOCTYPE html>
<html>
<head>
<title>第三讲</title>
</head>
<body>
<div>请问怎样才能停止散发魅力？帮朋友问的。</div>
<div>
<span>听说双拾壹什么都便宜，那你能不能跟我在一起，就当便宜我。</span>
</div>
<div>
<img style="width: 300px;" src="1.jpg">
</div>
</body>
</html>效果：
image.png
简单粗暴，但是实用！当然，还有一种方法，就是给标签设置display的css样式，这个我不打算单独拆成知识点来讲，以后在我们学着做项目的时候，会一一讲到的。