HTML 链接和图片

HTML (HyperText Markup Language) 用于创建和设计网页内容。在 HTML 中,链接和图片是两种常见的元素,它们可以增加网页的互动性和视觉吸引力。在网页设计和开发中,正确使用链接和图片对于创建富有吸引力、易于导航和SEO友好的网站至关重要。它们共同作用于提升网站的功能性、美观和用户体验。

1、链接 (Hyperlinks)

链接或超链接可以将用户从当前页面导向另一个页面或网站,或者是同一页面内的不同部分。使用 <a> 标签来创建链接。

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

href 属性指定链接的目的地。

"链接文本"是用户看到的可点击文本。

要创建指向 cjavapy 的链接:

<a href="https://www.cjavapy.com">访问 cjavapy</a>

2、图片 (Images)

图片标签 <img> 用于在网页上嵌入图片。不像其他HTML标签,<img> 是一个空标签,意味着它不需要闭合标签。

<img src="图片地址" alt="替代文本">

src 属性指定图片的路径或URL

alt 属性提供图片的替代文本,当图片无法显示时会显示此文本。

要嵌入一个图片:

<img src="image.jpg" alt="描述性文本">

3、链接(<a>元素)的高级用法

1)在新窗口中打开链接

使用 target 属性的 _blank 值可以在新窗口或标签页中打开链接:

<a href="https://www.cjavapy.com" target="_blank">在新窗口中访问 cjavapy</a>

2)下载链接

通过download属性,指示浏览器下载链接目标而不是导航到它。

<a href="/path/to/file" download>下载文件</a>

3)锚点链接

用于页面内导航,跳转到同一页面的指定部分。

<!-- 跳转到页面内id为"section1"的部分 -->
<a href="#section1">跳至第一节</a>
<!-- 目标部分 -->
<div id="section1">第一节内容</div>

4)使用JavaScript

href属性可以执行JavaScript代码,实现更复杂的交互。

<a href="javascript:alert('Hello World!')">点击弹出欢迎信息</a>

4、图片(<img>元素)的高级用法

1)响应式图片

使用srcset和sizes属性,根据设备的屏幕大小加载不同大小的图片。

<img srcset="example-small.jpg 500w, example-large.jpg 800w"
     sizes="(max-width: 600px) 500px, 800px"
     src="example.jpg"
     alt="示例图片">

2)图片作为链接

可以将图片包含在 <a> 标签中,使图片成为可点击的链接:

<a href="目标URL">
    <img src="image.jpg" alt="替代文本">
</a>

3)图片懒加载

loading="lazy"属性让浏览器延迟加载非视口(用户可见区域)内的图片,以提高页面加载速度。

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

4)图像映射

使用<map><area>元素定义图片上的可点击区域,为图片的不同部分设置不同的链接。

<img src="planets.gif" width="145" height="126" alt="行星" usemap="#planetmap">
<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="太阳">
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="水星">
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="金星">
</map>

5、使用示例

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>高级HTML使用示例</title>
</head>
<body>
    <h1>欢迎来到我的网站</h1>
    <a href="https://www.cjavapy.com" target="_blank">访问例子网站</a><br>
    <a href="/path/to/file" download>下载文件</a><br>
    <a href="#section1">跳至第一节</a><br>
    <a href="javascript:alert('Hello World!')">点击弹出欢迎信息</a>

    <h2 id="section1">图片示例</h2>
    <img srcset="example-small.jpg 500w, example-large.jpg 800w"
         sizes="(max-width: 600px) 500px, 800px"
         src="example.jpg"
         alt="示例图片">
    <img src="example.jpg" alt="示例图片" loading="lazy">

    <img src="planets.gif" width="145" height="126" alt="行星" usemap="#planetmap">
    <map name="planetmap">
      <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="太阳">
      <area shape="circle" coords="90,58,3" href="mercur.htm" alt="水星">
      <area shape="circle" coords="124,58,8" href="venus.htm" alt="金星">
    </map>
</body>
</html>
推荐阅读
cjavapy编程之路首页