Web前端开发笔记4——div、span、图像

#本节我分享一下div和span标签的相关使用，以及图像标签。

1.div和span是没有语义的，它们是一个盒子，用来装内容。

• 特点：div标签用来布局，但是现在一行只能放一个div。

<div>123</div>123
<div>456</div>456
<span>1</span><span>2</span><span>3</span>

（其中div占一整行，而span占一格）

2.图像标签

在HTML中，img标签用于定义HTML页面中图像。

<img src="图像url"/>

上面这个示例中src是img的必须属性，用于指定图片文件的路径和文件名。

所谓属性：即使属于定义标签的一种特性。

比如说下面这个图，我想要应用到我的网页中：

<img src="./res/JHOri.png"/>

上面是一个实例，而路径是怎么来的呢？请看下图：

（这就是一种简单的示例）

而显示出来则是：(图片较大，仔细看左上角)

同时，图像标签还有一些属性：

• alt：当图像无法显示时的显示文字。
• title：当鼠标悬至图片上，显示的文字。
• width，height：设置图像的宽、高。
• border：设置图像的边框粗细。

<img src="./res/JHOri.png" alt="无法显示此图片" title="这是提示信息" width="100px" height="100px" border="10px" />

显示如下：

如果无法显示图片呢？如下：

#值得注意的是：设置长宽的时候默认填的数字，单位是像素。

• 属性一定要写到标签后面，属性先后部分，但是必须使用空格隔开。
• 属性采取键值对的格式，如key="value"的格式，属性=”属性值“。