HTML链接与图片

超链接

创建链接：<a> 标签

链接通过标签<a>创建：

<a href = "#"> 网页中显示的链接名称</a>
<!-- 前面说到过，#是空链接的意思 -->

链接的属性：href、target

href:href用于指定链接目标的url。

target：target属性用于指定链接的打开方式，即在何处打开链接目标。

​ 常见的target属性的值包括：

​ _self：在当前窗口或标签页中打开链接（默认值）。

​ _blank：在新窗口或新标签页中打开链接。

​ _parent：在父框架中打开链接（在嵌套框架的情况下）。

​ _top：在整个窗口中打开链接，取消所有嵌套的框架。

绝对路径与相对路径：

绝对路径：绝对路径包含完整的url。

相对路径：相对路径即相对于当前文件的路径。

​ 如果目标文件与当前文件在同一文件夹下，可以直接使用文件名

​ 如果在子文件夹下，可以使用子文件夹名/文件

​ 如果在父文件夹下，可以使用../文件

​ 子文件夹与父文件夹语法可以重复使用

锚链接和跳转

锚链接

锚链接用于在同一页面内进行跳转，通常用于导航到页面内的特定部分。锚链接通过href属性指定页面内的ID作为目标。

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

<h2 id="section1">第1部分</h2>

<!-- #section1是CSS选择器语法，会在CSS相关内容中详细讲解 -->

跳转链接

跳转链接是指通过点击链接，用户会被带到不同的页面或网站。这个过程通常由href属性来控制。

<a href="https://www.example.com">跳转到Example网站</a>

外部链接和内部链接

外部链接：指向其他网站或域名的链接，例如：<a href="https://www.google.com">访问Google</a>。

内部链接：指向同一网站内其他页面的链接，例如：<a href="/contact">联系我们</a>。

图像

插入图片：<img> 标签

插入图片通过标签<img>实现：

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

图片的属性

src:用于指定图像的路径或者URL，浏览器通过这个属性获得并加载图像

alt:图像替代文本，当图像无法正常显示时，该文本将被显示。

width和height：指定图像的显示尺寸，可以设置为像素或百分比。

​ 如果不指定，图像将以原始尺寸显示。

title：为图像提供额外的描述，当用户将鼠标悬停在图像上时，会显示title的内容作为提示

loading:控制图像的加载方式，值可以是lazy（延迟加载）或eager（立即加载）。延迟加载的图像在用户滚动到图像位置时才会加载，有助于提高页面加载性能。

srcset和sizes：用于响应式图像，根据设备的屏幕尺寸和分辨率自动选择最合适的图像。

srcset指定图像的不同版本，sizes指定每种屏幕尺寸下的显示规则。

srcset属性允许指定一组图像文件及其对应的分辨率或宽度，以便于浏览器根据设备的显示特性自动选择最适合的图像。

<img src = "example.jpg" 
     srcset = “image-480w.jpg 480w,image-800w.jpg 800w,image-1200w 1200w" 
     sizes = "(max-width: 600px) 480px, (max-width: 1200px) 800px, 100vw"
>
  <!-- 这里image-480w.jpg的宽度为480px，另外两个同理 -->
  <!-- 浏览器会先查看sizes属性，再根据sizes属性选择srcset中合适的图片进行展示 -->
  <!-- (max-width: 600px) 480px含义是当设备视图为600px时，图片显示大小为480px -->

图片格式与优化

在网页开发中，选择合适的图片格式和进行图像优化是提升网页性能和用户体验的关键步骤。以下是常见的图片格式及其优化方法：

1. 常见图片格式

• JPEG/JPG：
  • 适用场景：适合用于复杂、细节丰富的图片，如照片。JPEG支持高压缩比，但它是有损压缩，意味着会丢失部分图像质量。
  • 优化建议：使用高压缩比的JPEG图片，以减少文件大小，但需在质量和文件大小之间找到平衡。
• PNG：
  • 适用场景：适合用于需要透明背景的图片或图像质量要求高的场景。PNG是无损压缩，保留图像的全部细节。
  • 优化建议：对于图标、标志等简单图像，使用PNG-8格式（256色）以减小文件大小；对颜色丰富的图像使用PNG-24。
• GIF：
  • 适用场景：适合用于简单的动画和少量颜色的图像（如小图标、低帧率动画）。GIF格式限制颜色数量（最多256色），不适合复杂图像。
  • 优化建议：仅在需要动画或少量颜色的场景下使用GIF，并限制帧数和颜色数量。
• SVG：
  • 适用场景：适合用于矢量图形，如图标、标志等。SVG格式具有无限缩放、不失真的特点，文件大小通常较小。
  • 优化建议：尽量使用SVG替代PNG或JPEG图标，以减少文件大小并提升可扩展性。
• WebP：
  • 适用场景：由Google开发的图像格式，支持有损和无损压缩，通常比JPEG和PNG格式更小。WebP适合大多数图像类型，尤其是希望在保持图像质量的前提下减小文件大小的场景。
  • 优化建议：在支持的浏览器中使用WebP格式，作为其他格式的替代，以减少图像文件的大小。

2. 图像优化技术

• 图像压缩：
  • 工具：使用图像压缩工具，如TinyPNG、JPEGoptim、ImageOptim等，可以在不明显影响图像质量的情况下，显著减小文件大小。
  • 自动化：可以在开发流程中集成自动化图像压缩工具，如Webpack的image-webpack-loader插件。
• 响应式图像：
  • 使用srcset和sizes属性，根据不同设备的屏幕尺寸和分辨率加载合适的图像版本，避免加载过大的图像。
• 延迟加载（Lazy Loading）：
  • 使用loading="lazy"属性，推迟加载页面中不在视口范围内的图像，直到用户滚动到这些图像位置。这有助于加快页面初次加载时间。
• 使用CDN（内容分发网络）：
  • 将图像托管在CDN上，缩短用户与服务器之间的物理距离，加快图像的加载速度。
  • 优势：CDN通常会提供自动图像优化和压缩服务，以及对各种格式的支持，进一步提升图像加载性能。
• 减少图像尺寸：
  • 确保图像尺寸适应网页布局，避免加载过大尺寸的图像。使用CSS或HTML属性定义图像的合适显示大小。
• 避免使用过多图像：
  • 精简网页设计，避免不必要的图像资源。尽量通过CSS实现背景和装饰效果，减少图片的使用。