图片和属性

目前我们编写的博客页面还缺少一些图片。这节课我们来学习下如何在网页中插入图片。我们来看下我已经做完的演示页面，我们看到这里有两张图片, 大一点的图片是与文章内容相关的，小一点的图片是文章作者的头像。

图片标签 `<img />`

我们打开vs code的资源管理，这里可以看见post-banner.png和author.png 这两张图片，在vs code中点击它们也可以预览。那我们怎么样才能在html中插入图片呢？根据之前的经验，我们可以猜到如果不使用英文简写的方式，那么标签应该就是图片的英文单词 <image>, 简写后就变成了<img>. 对了，要在网页中插入图片，我们使用的就是<img>标签。

不过<img>标签比较特殊，像我们之前学习的标签，在标签中都是有内容的，比如说<p>我是内容</p>。而<img>标签中是没有内容的，比如: <img>这里没有要显示的内容</img> 。我们想要显示的图片是一个图片文件，并不是文本的内容。所以对于<img>这种标签，它不需要有</img>这样的闭合标签。你可以直接写<img>, 不过更规范的写法是这样的，我们在标签的末尾加一个反斜杠<img />.

`<img />`标签的`src`属性

那我们怎么样把需要的图片文件关联到<img />这个标签上呢？为了解决这个问题，我们在html中引入了标签的属性 Attribute这个概念。属性其实可以说是用来描述或者是扩展这个标签的功能的。在html中有许多不同的属性。对于<img />标签，它就存在一个src 属性。 source 的简写，翻译成中文有源头，来源的意思.

我们通过代码来讲解下<img src="post-banner.png" />, 我们有一个<img />标签，然后我们告诉浏览器要显示的图片来源src是当前目录下的post-banner.png图片文件。这时候我们刷新网页，已经能正常显示出我们的图片了。

`<img />`标签的`alt`属性

<img />还有一个比较重要的属性叫做alt, 英文全称alternative text, 替代文本的意思，也就是说当你把src中的图片名写错了，或者是图片文件不存在了，导致图片无法加载的时候，浏览器会用alt的文字来替代这个图片的显示。我们可以试下, 把<img src="post-banner.png" /> 故意写错为 <img src="post-banner111.png" />, 然后加上alt 属性. <img src="post-banner111.png" alt="电脑屏幕上显示HTML代码" />。我们可以刷新下网页看看现在的展示效果。

alt 属性在编写代码的时候尽可能的加上，它有以下几个功能：

1. 图片不显示的时候可以替代图片显示文本
1. 搜索引擎会收录alt中的文字内容，这样用户在搜索引擎搜索文字时就有可能搜索到你的图片，从而给你的站点带来流量
1. 对于一些使用屏幕阅读器，当他看不见图像的时候，可以读取替代文本，比如说盲人阅读你网站的时候，知道这张图片描述了什么内容。

`<img />`标签的宽度`width`和高度`height`属性

我们还可以对图片的宽度和高度进行自定义设置，目前我们这张post-banner.png图片的原始宽度和高度是 1000像素*560像素, 至于像素这个单位我们暂时不去管它，在css部分我们会详细讲解。现在你就知道现在图片的宽和高是1000*560就可以了。

给图片设置宽度，属性名称很好猜，就是英文单词width, 我们来设置下<img src="post-banner.png" alt="电脑屏幕上显示HTML代码" width="500"/>, 我们如果只设置宽度，不设置高度的话。图片是会等比例缩放的，可以刷新浏览器看下。接下来我们设置图片的高度，属性名称也是高度的英文单词height. 高度我们设置为280, 因为宽度我们刚才缩小了一半，那么高度也缩小一半，以保证图片原有的宽高比。 <img src="post-banner.png" alt="电脑屏幕上显示HTML代码" width="500" height="280"/>. 当然你也可以设置图片高度为别的值，不过那样的话，图片就会变形了。

接下来我们要在<h2>构建网页的基础语言：HTML</h2> 这个元素下面添加作者的图片，写上图片的描述（替代文本），并设置图片的宽度和高度都是50像素,现在你可以自己动手做一下。下面是代码：

html

<img src="author.png" alt="Deepseek Logo" width="50" height="50"/>

好了，现在我们知道如果在网页中插入图片了，并且知道了什么是标签的属性，我们刚才也动手写了几个图片标签<img />的属性。

指定网页语言属性和文档字符集

html中的标签还有很多别的属性，其中<html>这个标签就有一个很重要的属性，就是指定这个网页的语言，如果你的网页内容都是英文的，你可以这么写 <html lang="en">。 lang 就是语言英文单词language的简写。en 代表的是英文，我们现在网页中的内容是中文的，我们使用zh代表中文。我们也可以写的更细致一点，比如我们现在写的是简体中文，那么可以使用zh-CN。<html lang=""zh-CN>

另外我们还要指定下我们这个html文件的文档编码方式，关于编码我们先不用过多的了解，我们现在只要知道现在我们的文档基本都是用utf-8来编码存储的，我们打开这个文档也需要使用utf-8这个编码。

我们需要一个新的标签来描述文档的信息，这个标签叫做<meta>。元数据的意思，英文全称是Metadata. 所谓元数据（Metadata）就是 "关于数据的数据"，它本身不直接显示给用户，但提供了与内容相关的关键信息，帮助计算机系统（如浏览器、搜索引擎、社交媒体平台等）更好地理解和处理数据。如果实在不能理解什么是元数据，就不用去理解了，等你代码敲的多了，就自然而然的知道了。

我们之前也说过，网页上<body>中的内容是显示在浏览器中的，给人看的。而<head>中的内容多数是给浏览器看的，比如现在我们就要告诉浏览器我们这张页面使用的是UTF-8编码。我们通过<meta charset="UTF-8" /> 这句代码就可以了。 charset 是字符集的意思， UTF-8 是我们这个网页的存储编码，我们这句话是告诉浏览器你要使用UTF-8的编码来打开我们的网页。

最后下面是我们这节课后完成的所有代码：

html

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <title>构建网页的基础语言：HTML</title>
  </head>

  <body>
    <!--
    <h1>构建网页的基础语言：HTML</h1>
    <h2>构建网页的基础语言：HTML</h2>
    <h3>构建网页的基础语言：HTML</h3>
    <h4>构建网页的基础语言：HTML</h4>
    <h5>构建网页的基础语言：HTML</h5>
    <h6>构建网页的基础语言：HTML</h6>
    -->

    <h1>📖 艺兔的编程博客</h1>

    <h2>构建网页的基础语言：HTML</h2>
    <img src="author.png" alt="Deepseek Logo" width="50" height="50" />
    <p>作者：<strong>Deepseek</strong> 本文生成于：2055年2月30日（星期八）。</p>

    <img
      src="post-banner.png"
      alt="电脑屏幕上显示HTML代码"
      width="500"
      height="280"
    />

    <p>
      现代网站和网页应用的<em>核心技术</em>由 HTML、CSS 和 JavaScript
      构成：HTML负责网页的结构与内容，CSS控制样式与布局，而JavaScript则实现交互与动态功能，三者协同工作，共同支撑起万维网的开发基础，无论是简单的静态页面还是复杂的在线应用，最终都依赖于这三种基础语言在浏览器中的运行。
    </p>

    <p>
      在这篇文章中，
      我们主要讲解HTML。我们将学习什么是HTML以及我们为什么要学习HTML。
    </p>

    <h3>什么是HTML？</h3>
    <p>
      HTML是超文本标记语言，英文全称：<strong>H</strong>yper<strong>T</strong>ext
      <strong>M</strong>arkup
      <strong>L</strong
      >anguage。是开发者用来结构化和描述网页内容的标记语言（注意：并非编程语言）。
    </p>
    <p>
      HTML通过元素定义内容类型：段落、链接、标题、图片、视频等。浏览器能解析HTML代码并将其呈现为可视化网页。
    </p>
    <p>在HTLML中，大多数元素都是由三部分组成:</p>

    <ol>
      <li>开始标签</li>
      <li>结束标签</li>
      <li>元素内容</li>
    </ol>

    <p>更多内容可查阅 MDN Web 文档</p>

    <h3>我们为什么要学习HTML?</h3>
    <p>掌握这门语言的理由有很多，大致我想到有以下五大原因：</p>

    <ul>
      <li>html是网页开发最基础的语言</li>
      <li>你能够按照自己的想法做出自己想要的页面（告别WordPress）</li>
      <li>为将来开发真正的网页应用程序打下坚实的基础</li>
      <li>可以在朋友面前装X 😃</li>
      <li>作为自己的一个兴趣爱好，享受编程的快乐</li>
    </ul>

    <p>希望本文让你有所收获，我们下次见！</p>
  </body>
</html>

图片和属性 ​

图片标签 <img /> ​

<img />标签的src属性 ​

<img />标签的alt属性 ​

<img />标签的宽度width和高度height属性 ​