mysql添加图像如何添加_如何使用HTML将图像添加到您的网页

男娘i 2022-11-28 15:23 269阅读 0赞

mysql添加图像如何添加

**[How To Build a Website With HTML][] [如何使用HTML构建网站][How To Build a Website With HTML]**

This tutorial series will guide you through creating and further customizing [this website][] using HTML, the standard markup language used to display documents in a web browser. No prior coding experience is necessary but we recommend you start at the [beginning of the series][How To Build a Website With HTML] if you wish to recreate the demonstration website.

本教程系列将指导您使用HTML(用于在Web浏览器中显示文档的标准标记语言)创建和进一步自定义[此网站][this website] 。 不需要任何编码经验，但是如果您希望重新创建演示网站，建议您从[本系列][How To Build a Website With HTML]的[开头开始][How To Build a Website With HTML] 。

At the end of this series, you should have a website ready to deploy to the cloud and a basic familiarity with HTML. Knowing how to write HTML will provide a strong foundation for learning additional front-end web development skills, such as CSS and JavaScript.

在本系列的最后，您应该拥有一个可以部署到云的网站，并且对HTML有了基本的了解。 知道如何编写HTML将为学习其他前端Web开发技能(例如CSS和JavaScript)奠定坚实的基础。

In this tutorial, we’ll learn how to use HTML to add images on a website. We’ll also learn how to add alternate text to images to improve accessibility for site visitors who use screen readers.

在本教程中，我们将学习如何使用HTML在网站上添加图像。 我们还将学习如何向图像添加替代文本，以提高使用屏幕阅读器的网站访问者的可访问性。

Images are added to an HTML document using the `<img>` element. The `<img>` element requires the attribute `src` which allows you to set the location of the file where the image is stored. An image element is written like this:

使用`<img>`元素将图像添加到HTML文档中。 `<img>`元素需要属性`src` ，该属性允许您设置图像存储文件的位置。 一个图像元素是这样写的：

Note that the `<img>` element does *not* use a closing `</img>` tag. To try using the `<img>` element, download [our image of Sammy the Shark][] and place it in your project directory `html-practice.`

需要注意的是`<img>`元素*不*使用的关闭`</img>`标记。 要尝试使用`<img>`元素，请下载[我们的《鲨鱼鲨》图片][our image of Sammy the Shark] ，并将其放在您的项目目录`html-practice.`

**Note**: To download the image of Sammy the Shark, visit [the link][our image of Sammy the Shark] and `CTRL + Left Click` (on Macs) or `Right Click` (on Windows) on the image and select “Save Image As” and save it as `small-profile.jpeg` to your project directory.

**注意** ：要下载鲨鱼Sammy的图像，请访问[链接，][our image of Sammy the Shark]然后在图像上`CTRL + Left Click` (在Mac上)或`Right Click` (在Windows上)，然后选择“将图像另存为”并将其另存为`small-profile.jpeg` 。您的项目目录。

Next, erase the content of your `index.html` file and paste `<img src=”Image_Location”>` into the file. (If you have not been following the tutorial series, you can review instructions for setting up an `index.html` file in our tutorial [Setting Up Your HTML Project][].

接下来，清除`index.html`文件的内容，然后将`<img src=”Image_Location”>`粘贴到文件中。 (如果您还没有按照教程系列进行操作，则可以在我们的教程[设置HTML项目中][Setting Up Your HTML Project]查看有关设置`index.html`文件的说明。

Then, copy the file path of the image and replace `Image_Location` with the location of your saved image. If you are using the Visual Studio Code text editor, you can copy the file path by using `CTRL + Left Click` (on Macs) or `Right Click` (on Windows) on the image file `small-profile.jpeg` in the left-hand panel and selecting “Copy Path.” For an illustration of the process, please see the gif below:

然后，复制图像的文件路径，并将`Image_Location`替换为保存的图像的位置。 如果您使用的是Visual Studio Code文本编辑器，则可以通过使用`CTRL + Left Click` (在Mac上)或`Right Click` (在Windows上)来复制文件路径，该文件位于左侧面板中，位于图像文件`small-profile.jpeg`中，选择“复制路径”。 有关该过程的说明，请参见下面的gif：

**Note**: Make sure to copy the *relative* or *project* file path of the image rather than the *absolute* or full file path of the image. The relative path refers to the file location relative to the current working directory (as opposed to the *absolute* path, which refers to the file location relative to the root directory.) While both paths will work in this instance, only the *relative* path would work if we decided to publish our website online. Since our end goal is to create a publishable website, we will start using relative paths now when adding `<img>` elements to our document.

**注意** ：请确保复制图像的*相对*或*项目*文件路径，而不是图像的*绝对*或完整文件路径。 相对路径是指相对于当前工作目录的文件位置(相对于*绝对*路径，它是指相对于根目录的文件位置。)虽然这两个路径在此实例中都可以使用，但只有*相对*路径才可以使用如果我们决定在线发布我们的网站。 由于我们的最终目标是创建一个可发布的网站，因此当在文档中添加`<img>`元素时，我们将开始使用相对路径。

Save your `index.html` file and reload it in your browser. You should receive something like this:

保存`index.html`文件，然后将其重新加载到浏览器中。 您应该会收到以下信息：

Technically, you can also use links to images hosted online as file paths. To understand how this works, try replacing the image location with a link to our image of Sammy the Shark like this:

从技术上讲，您还可以使用指向在线托管图像的链接作为文件路径。 要了解它是如何工作的，请尝试使用以下链接替换我们的鲨鱼Sammy的图像的图像位置：

Save your file and reload it in the browser. The image should still load in your web document, but this time the image is being sourced from its online location rather than your local project directory. You can experiment with adding other online images by using their location links as the `src` attribute in the `<img>` tag.

保存文件，然后将其重新加载到浏览器中。 该图像仍应加载到您的Web文档中，但是这次图像是从其在线位置而不是本地项目目录中获取的。 您可以通过使用其他在线图像的位置链接作为`<img>`标记中的`src`属性来尝试添加其他在线图像。

However, when building a website it is generally better to host your images in your project directory to ensure the sustainability of the site. If the image is taken down by its host or if its address changes, it will no longer render on your site.

但是，在构建网站时，通常最好将图像托管在项目目录中，以确保网站的可持续性。 如果图像被其主机删除或地址更改，它将不再在您的网站上呈现。

### 辅助功能的替代文本 **(**Alternative Text for Accessibility**)** ###

HTML provides an option for adding alternative text to images to improve accessibility to site visitors who are visually impaired or use screen readers. This text should describe the content of the image and is added with the `alt` attribute:

HTML提供了向图像添加替代文本的选项，以提高视力障碍者或使用屏幕阅读器的站点访问者的可访问性。 该文本应描述图像的内容，并添加`alt`属性：

You should now have familiarity with how to add images to your HTML document and how to add alternative text to aid with accessibility. We’ll learn how to change the image size and style in the tutorial [How To Add a Profile Image To Your Webpage][] later on in the series. In the next tutorial, we’ll learn how to add links to an HTML document.

现在，您应该熟悉如何向HTML文档中添加图像以及如何添加替代文本以辅助可访问性。 我们将在本系列后面的教程“ [如何向您的网页中添加配置文件图像”中][How To Add a Profile Image To Your Webpage]学习如何更改图像大小和样式。 在下一个教程中，我们将学习如何向HTML文档添加链接。

> 翻译自: [https://www.digitalocean.com/community/tutorials/how-to-add-images-to-your-webpage-using-html][https_www.digitalocean.com_community_tutorials_how-to-add-images-to-your-webpage-using-html]

mysql添加图像如何添加

[How To Build a Website With HTML]: https://www.digitalocean.com/community/tutorial_series/how-to-build-a-website-with-html
[this website]: http://html.sammy-codes.com/
[our image of Sammy the Shark]: https://html.sammy-codes.com/images/small-profile.jpeg
[Setting Up Your HTML Project]: https://www.digitalocean.com/community/tutorials/setting-up-your-html-project
[How To Add a Profile Image To Your Webpage]: https://www.digitalocean.com/community/tutorials/adding-a-profile-image-to-your-webpage-with-html
[https_www.digitalocean.com_community_tutorials_how-to-add-images-to-your-webpage-using-html]: https://www.digitalocean.com/community/tutorials/how-to-add-images-to-your-webpage-using-html