Cao Note

外观

HTML 链接与多媒体 ​

链接 ​

基本链接 ​

html
<a href="https://www.example.com">访问示例网站</a>
<a href="https://www.example.com">访问示例网站</a>

链接属性 ​

html
<!-- 在新窗口打开 -->
<a href="https://www.example.com" target="_blank">新窗口打开</a>
<!-- 添加标题 -->
<a href="https://www.example.com" title="示例网站">悬停查看标题</a>
<!-- 链接到页面内锚点 -->
<a href="#section1">跳转到第一部分</a>
<h2 id="section1">第一部分</h2>
<!-- 下载链接 -->
<a href="document.pdf" download>下载文档</a>
<!-- 在新窗口打开 -->
<a href="https://www.example.com" target="_blank">新窗口打开</a>
<!-- 添加标题 -->
<a href="https://www.example.com" title="示例网站">悬停查看标题</a>
<!-- 链接到页面内锚点 -->
<a href="#section1">跳转到第一部分</a>
<h2 id="section1">第一部分</h2>
<!-- 下载链接 -->
<a href="document.pdf" download>下载文档</a>

图片链接 ​

html
<a href="https://www.example.com">
    <img src="image.jpg" alt="图片描述">
</a>
<a href="https://www.example.com">
    <img src="image.jpg" alt="图片描述">
</a>

图片 ​

基本图片 ​

html
<img src="image.jpg" alt="图片描述" width="300" height="200">
<img src="image.jpg" alt="图片描述" width="300" height="200">

图片属性 ​

属性描述
src图片源 URL
alt图片替代文本
width / height图片宽高
title悬停时显示的文本

图片格式 ​

格式描述扩展名
JPEG有损压缩，适合照片.jpg, .jpeg
PNG无损压缩，支持透明.png
GIF支持动画.gif
WebP现代格式，压缩率高.webp
SVG矢量图形，缩放不失真.svg

响应式图片 ​

html
<!-- 使用 srcset 提供不同分辨率 -->
<img srcset="image-320w.jpg 320w, image-640w.jpg 640w"
     sizes="(max-width: 600px) 320px, 640px"
     src="image-640w.jpg" alt="响应式图片">

<!-- 使用 picture 元素根据条件加载 -->
<picture>
    <source media="(min-width: 600px)" srcset="large.jpg">
    <source media="(min-width: 300px)" srcset="medium.jpg">
    <img src="small.jpg" alt="条件图片">
</picture>
<!-- 使用 srcset 提供不同分辨率 -->
<img srcset="image-320w.jpg 320w, image-640w.jpg 640w"
     sizes="(max-width: 600px) 320px, 640px"
     src="image-640w.jpg" alt="响应式图片">

<!-- 使用 picture 元素根据条件加载 -->
<picture>
    <source media="(min-width: 600px)" srcset="large.jpg">
    <source media="(min-width: 300px)" srcset="medium.jpg">
    <img src="small.jpg" alt="条件图片">
</picture>

多媒体 ​

音频 ​

html
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>
<audio controls>
    <source src="audio.mp3" type="audio/mpeg">
    <source src="audio.ogg" type="audio/ogg">
    您的浏览器不支持音频播放。
</audio>

视频 ​

html
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>
<video controls width="640" height="360">
    <source src="video.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
    您的浏览器不支持视频播放。
</video>

多媒体属性 ​

属性描述
controls显示播放控件
autoplay自动播放
loop循环播放
muted静音
preload预加载设置：auto, metadata, none
poster视频封面图片

Copyright © 2024-present xiaocao