【温故而知新】HTML链接a标签/图像img标签

一、概念

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。它被用来描述网页的结构和内容，并且是网页浏览器能够解析和渲染网页的基础。HTML5 是 HTML 的最新版本，增加了许多新的元素和功能，以适应现代网页开发的需求。

HTML5 提供了许多新的元素和 API，使得开发者可以创建更丰富、更交互式的网页和应用。例如，HTML5 引入了视频和音频元素，使得在网页上直接播放多媒体内容变得简单；还引入了 Canvas 和 SVG 元素，用于绘制图形和动画；另外，HTML5 还提供了地理位置 API、文件 API、Web Storage API 等，使得开发者可以轻松地获取和使用用户的地理位置信息、文件内容、本地存储数据等。

除了新增的元素和 API，HTML5 还改进了一些现有的元素和功能。例如，HTML5 改进了表单元素，提供了更多的输入类型（如 email、number、range 等），使得表单的验证和输入更加方便；还改进了语义元素（如 header、footer、article 等），使得网页的结构更加清晰和易于理解。

二、链接

HTML链接是用于在网页间建立链接的元素。链接可以指向其他网页、其他部分的同一网页、外部资源或电子邮件地址。

一个HTML链接的基本语法如下：

<a href="URL">链接文本</a>

其中，<a>是链接元素的起始标签，</a>是链接元素的结束标签。href属性定义了链接的目标，可以是一个URL、一个文件路径或一个锚点。链接文本是在页面上显示的链接文字。

以下是一些常见的HTML链接的示例：

1. 链接到其他网页：

<a href="https://www.example.com">进入示例网站</a>

这个链接将会打开一个新的浏览器窗口，并跳转到https://www.example.com网页。

2. 在同一网页内部建立链接：

<a href="#section1">跳转到第一部分</a>

...

<h2 id="section1">第一部分</h2>
<p>这是第一部分的内容。</p>

这个链接将会在同一个页面内部跳转到id为section1的部分。

3. 链接到外部资源：

<a href="images/example.jpg">查看示例图片</a>

这个链接将会打开images文件夹中的example.jpg图片。

4. 链接到电子邮件地址：

<a href="mailto:example@example.com">给我发送电子邮件</a>

这个链接将会在用户点击时打开默认的邮件客户端，并预填写收件人为example@example.com。

HTML链接还可以通过target属性来指定链接的打开方式。示例如下：

<a href="https://www.example.com" target="_blank">在新标签页打开示例网站</a>

这个链接将会在新的浏览器标签页中打开https://www.example.com网页。

属性	值	描述
charset	char_encoding	HTML5 不支持。规定目标 URL 的字符编码。
coords	coordinates	HTML5 不支持。规定链接的坐标。
download	filename	指定下载链接
href	UR	L 规定链接的目标 URL。
hreflang	language_code	规定目标 URL 的基准语言。仅在 href 属性存在时使用。
media	media_query	规定目标 URL 的媒介类型。默认值：all。仅在 href 属性存在时使用。
name	section_name	HTML5 不支持。规定锚的名称。
rel	alternate、author、bookmark、help、license、next、nofollow、noreferrer、prefetch、prev、search、tag	规定当前文档与目标 URL 之间的关系。仅在 href 属性存在时使用。
rev	text	HTML5 不支持。规定目标 URL 与当前文档之间的关系。
shape	default、rect、circle、poly	HTML5 不支持。规定链接的形状。
target	_blank、_parent、_self、_top、framename	规定在何处打开目标 URL。仅在 href 属性存在时使用。_blank：新窗口打开。_parent：在父窗口中打开链接。_self：默认，当前页面跳转。_top：在当前窗体打开链接，并替换当前的整个窗体(框架页)。
type	MIME_type	规定目标 URL 的 MIME 类型。仅在 href 属性存在时使用。注：MIME = Multipurpose Internet Mail Extensions。

三、图像

在HTML中，使用<img>标签来插入图像。<img>标签是一个自封闭标签，不需要结束标签。以下是插入图像的基本语法：

<img src="image.jpg" alt="图像描述">

其中，src属性指定了图像的文件路径或URL。alt属性用于提供图像的替代文本，当图像无法加载时，替代文本会显示给用户。

以下是一些常见的图像插入的示例：

1. 插入本地图像：

<img src="images/image.jpg" alt="示例图像">

这个示例将会在images文件夹中查找image.jpg图像，并在页面中显示。

2. 插入远程图像：

<img src="https://www.example.com/image.jpg" alt="示例图像">

这个示例将会从https://www.example.com地址加载image.jpg图像，并在页面中显示。

3. 添加图像宽度和高度：

<img src="image.jpg" alt="示例图像" width="200" height="150">

这个示例将会以200像素的宽度和150像素的高度显示图像。

4. 图像链接：

<a href="https://www.example.com">
  <img src="image.jpg" alt="示例图像">
</a>

这个示例将会在点击图像时跳转到https://www.example.com网页。

需要注意的是，建议为每个图像都提供一个有意义的alt属性，以提高可访问性，并为全部图像添加适当的宽度和高度属性，以避免页面加载时的布局问题。

另外，在使用图像时应尽量优化图像大小和格式，以提高页面加载速度。

属性	值	描述
align	top、bottom、middle、left、right	HTML5 不支持。HTML 4.01 已废弃。 规定如何根据周围的文本来排列图像。
loading	eager：立即加载，lazy：延迟加载	指定浏览器是应立即加载图像还是延迟加载图像。
alt	text	规定图像的替代文本。
border	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定图像周围的边框。
crossorigin	anonymous、use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度。
hspace	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定图像左侧和右侧的空白。
ismap	ismap	将图像规定为服务器端图像映射。
longdesc	URL	HTML5 不支持。HTML 4.01 已废弃。 指向包含长的图像描述文档的 URL。
src	URL	规定显示图像的 URL。
usemap	#mapname	将图像定义为客户器端图像映射。
vspace	pixels	HTML5 不支持。HTML 4.01 已废弃。 规定图像顶部和底部的空白。
width	pixels	规定图像的宽度。