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>