标记语言——图片替换

当我们在编写网页时，经常需要在页面中插入一些图片。这时候我们需要使用标记语言来完成图片的显示，即通过在文本中插入图片标记，让页面显示对应的图片。

1. 插入图片标记

我们可以使用标记来插入一张图片。具体格式如下：

<img src="图片地址" alt="替代文本">

其中，src属性用于指定图片地址，可以是本地文件夹中的图片路径，也可以是在线图片的链接地址。alt属性用于指定如果图片无法显示时的替代文本。通常情况下，替代文本会显示为图片的名称或者一些描述性文字。

示例一：插入本地图片

假设我们有一张名为logo.png的本地图片，存放在当前工作目录下的images文件夹中，那么在markdown文本中，我们可以这样插入图片：

<img src="images/logo.png" alt="Logo">

这样，在页面中就会显示出名为logo.png的图片。

示例二：插入在线图片

假设我们需要插入一张在线图片，在markdown文本中，我们可以这样插入图片：

<img src="http://example.com/images/pic.jpg" alt="示例图片">

这样，在页面中就会显示出地址为http://example.com/images/pic.jpg的图片。

需要注意的是，如果图片地址是一个相对路径，那么它相对的是markdown文件所在的文件夹，与运行markdown文件时的工作目录无关。因此，如果需要引用本地图片，建议使用绝对路径或者以站点根目录为起点的相对路径，这样可以确保图片在任何情况下都能正确显示。

2. 设置图片大小

可以使用width和height属性来指定图片的大小。这两个属性的值可以是像素值px、百分比%或者自适应大小auto。具体格式如下：

<img src="图片地址" alt="替代文本" width="宽度" height="高度">

示例三：设置固定宽高像素的图片

假设我们需要设置一张宽度为200像素，高度为100像素的本地图片，那么在markdown文本中，我们可以这样插入图片：

<img src="images/pic.png" alt="示例图片" width="200px" height="100px">

这样，在页面中就会显示出宽度为200像素，高度为100像素的pic.png图片。

示例四：设置自适应大小的图片

如果我们设置宽度或高度为auto，那么图片会根据实际大小自动缩放以适应容器。例如，我们可以这样设置一张自适应大小的图片：

<img src="images/pic.png" alt="示例图片" width="50%" height="auto">

这样，在页面中就会显示出宽度为容器的50%，高度根据宽度自动缩放的pic.png图片。

3. 其他属性

除了src、alt、width和height属性外，还可以添加其他属性来调整图片的显示效果，例如：

• title属性：用于指定图片的标题；
• align属性：用于设置图片的对齐方式，可以是left、right、center中的一种；
• style属性：用于设置CSS样式；
• border属性：用于设置图片边框。

示例五：设置图片样式

我们可以通过设置style属性来改变图片的样式，例如设置边框、圆角和阴影。例如，我们可以这样设置一张带有圆角和阴影的图片：

<img src="images/pic.png" alt="示例图片" style="border: 1px solid gray; border-radius: 10px; box-shadow: 2px 2px 5px gray">

这样，在页面中就会显示出带有圆角和阴影效果的pic.png图片。