在没有 CSS 的情况下在正文中应用图像 - HTML

在HTML中，我们可以使用<img>元素将图像嵌入到网页中。不过在没有CSS的情况下，这些图片膨胀并覆盖网页上的其他内容，使得网页难以阅读或浏览。但是，可以通过使用<figure>和<figcaption>元素来解决这个问题。

使用 <figure> 和 <figcaption> 元素

<figure> 和 <figcaption> 元素可以包裹图像并为其提供说明。这有助于提高图片的可访问性，并使网页更易于理解。下面是一个示例：

<figure>
  <img src="https://example.com/example.jpg" alt="描述图片的文本">
  <figcaption>图片的说明文字</figcaption>
</figure>

在上述代码中，<figure> 元素包含 <img> 元素和 <figcaption> 元素。<img> 元素定义了图像的来源并提供了对图像的文本描述。<figcaption> 元素是图片的说明文字。

图像边框和样式

在没有CSS的情况下，我们不可能为图像添加边框或样式，但是我们可以使用<figure>元素的内置样式来定位图像。下面是一个简单的示例：

<figure style="float:left; margin: 0 1em 1em 0">
  <img src="https://example.com/example.jpg" alt="描述图片的文本">
  <figcaption>图片的说明文字</figcaption>
</figure>

在上述代码中，style属性设置了float: left来将图像浮动到文本的左边。margin属性用于控制元素周围的间距。

总结

在没有CSS的情况下，使用<figure>和<figcaption>元素可以使网页上的图像更具可读性和可访问性。此外，我们可以使用内置样式来对图像进行定位和排版。