html里怎么添加图片和文字

在HTML中添加图片是很常见的操作，无论是为了美化网页还是为了展示信息，我们都需要使用到图片，下面我将详细介绍如何在HTML中添加图片。

1、使用<img>标签

在HTML中，我们可以使用<img>标签来添加图片。<img>标签有一个必需的属性src，用于指定图片的路径。

<img src="example.jpg" alt="示例图片">

在这个例子中，src属性的值是图片的路径，alt属性的值是当图片无法显示时，浏览器会显示的替代文本。

2、设置图片的大小

默认情况下，<img>标签会根据图片的实际大小来显示，我们也可以通过设置width和height属性来改变图片的大小。

<img src="example.jpg" alt="示例图片" width="200" height="200">

在这个例子中，width和height属性的值都是200像素，所以图片会被缩放到200x200像素的大小。

3、设置图片的边框

我们还可以通过设置border属性来为图片添加一个边框。

<img src="example.jpg" alt="示例图片" width="200" height="200" border="5">

在这个例子中，border属性的值是5像素，所以图片会被添加一个5像素的边框。

4、设置图片的对齐方式

我们可以通过设置align属性来改变图片的对齐方式。

<p align="center">
  <img src="example.jpg" alt="示例图片" width="200" height="200">
</p>

在这个例子中，align属性的值是center，所以图片会在段落中居中显示。

5、设置图片的浮动效果

我们还可以通过设置CSS的float属性来改变图片的浮动效果。

<style>
  img {float: right;}
</style>
<img src="example.jpg" alt="示例图片" width="200" height="200">

在这个例子中，我们在样式表中设置了img元素的float属性为right，所以图片会向右浮动。

以上就是在HTML中添加图片的基本方法，需要注意的是，虽然我们可以通过设置width和height属性来改变图片的大小，但是这可能会导致图片失真，如果需要保持图片的比例不变，我们应该使用CSS的max-width和max-height属性。

<img src="example.jpg" alt="示例图片" width="200" height="200" style="max-width:100%; max-height:100%;">

在这个例子中，我们使用了内联样式表来设置max-width和max-height属性，使得图片的最大宽度和高度都不超过其容器的宽度和高度，从而保持了图片的比例不变。

相关问题与解答

1、HTML中的哪些元素可以包含其他元素？

答：HTML中的块级元素和行内元素都可以包含其他元素，块级元素如<div>, <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <li>, <dl>, <dt>, <dd>, <table>, <form>, <fieldset>, <blockquote>, <address>, <hr>, <pre>, <code>, <samp>, <kbd>, <var>, <strong>, <em>, <dfn>, <cite>, <abbr>, <acronym>, <bdo>, <ins>, <del>, <sub>, <sup>, <i>, <b>, <u>, <mark>, <ruby>, <rt>, <rp>, <bdi>, <wbr>等；行内元素如<a>, <span>, <img>, <input>, <label>, <button>, <select>, <textarea>, <video>, <audio>, <object>, <embed>, <iframe>等。

2、HTML中的哪些属性可以改变图片的大小？

答：HTML中的width和height属性可以改变图片的大小，这两个属性的值可以是像素（px）或者百分比（%）。