包含图片的HTML示例
包含图片的HTML源代码示例，用于测试提取
📝 基础HTML图片
🟢 simple
带有标准img标签的简单HTML页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Basic HTML Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<img src="https://example.com/logo.png" alt="Company Logo">
<p>This is a paragraph with an inline image <img src="/images/icon.png" alt="Icon"> in the middle.</p>
<div>
<img src="./images/photo.jpg" alt="Photo" width="300" height="200">
<img src="../assets/banner.gif" alt="Banner">
</div>
<footer>
<img src="/footer/logo-small.png" alt="Footer Logo">
</footer>
</body>
</html>📝 电商产品页面
🟢 simple
真实世界的电商产品页面，包含多张图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Product - SuperStore</title>
</head>
<body>
<header>
<img src="https://cdn.superstore.com/logo.svg" alt="SuperStore Logo">
<img src="https://cdn.superstore.com/search-icon.png" alt="Search">
</header>
<main>
<div class="product">
<!-- Main product image -->
<img src="https://images.superstore.com/products/12345-main.jpg"
alt="Product Main Image"
id="main-product-image">
<!-- Thumbnail gallery -->
<div class="thumbnails">
<img src="https://images.superstore.com/products/12345-thumb-1.jpg" data-full="https://images.superstore.com/products/12345-full-1.jpg" alt="View 1">
<img src="https://images.superstore.com/products/12345-thumb-2.jpg" data-full="https://images.superstore.com/products/12345-full-2.jpg" alt="View 2">
<img src="https://images.superstore.com/products/12345-thumb-3.jpg" data-full="https://images.superstore.com/products/12345-full-3.jpg" alt="View 3">
<img src="https://images.superstore.com/products/12345-thumb-4.jpg" data-full="https://images.superstore.com/products/12345-full-4.jpg" alt="View 4">
</div>
</div>
<div class="product-info">
<h1>Awesome Product</h1>
<img src="/media/stars-5.png" alt="5 Star Rating">
<p>$99.99</p>
<img src="/media/badges/best-seller.png" alt="Best Seller Badge">
</div>
</main>
<aside class="recommendations">
<h3>You may also like</h3>
<img src="https://images.superstore.com/products/67890.jpg" alt="Related Product 1">
<img src="https://images.superstore.com/products/67891.jpg" alt="Related Product 2">
<img src="https://images.superstore.com/products/67892.jpg" alt="Related Product 3">
</aside>
<footer>
<img src="https://cdn.superstore.com/payment-methods.png" alt="Payment Methods">
<img src="/media/social-icons.png" alt="Social Media Icons">
</footer>
</body>
</html>📝 博客文章
🟢 simple
包含各种图片类型和位置的博客文章
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>My Awesome Blog Post</title>
</head>
<body>
<article>
<header>
<h1>How to Build Amazing Websites</h1>
<img src="https://blog.example.com/author-john.jpg" alt="Author John Doe" class="author-avatar">
<p>By John Doe on December 29, 2024</p>
</header>
<div class="featured-image">
<img src="https://blog.example.com/posts/web-design-hero.jpg"
alt="Web Design Featured Image"
class="featured">
</div>
<div class="content">
<p>Welcome to this amazing tutorial!</p>
<h2>Getting Started</h2>
<img src="/images/step1.png" alt="Step 1 Diagram">
<h2>Advanced Techniques</h2>
<img src="https://cdn.blog.example.com/diagrams/architecture.png" alt="Architecture Diagram">
<blockquote>
<img src="/media/quote-icon.png" alt="Quote Icon">
"Code is poetry"
</blockquote>
<h2>Screenshot Examples</h2>
<img src="https://screenshots.example.com/dashboard.png" alt="Dashboard Screenshot">
<img src="https://screenshots.example.com/settings.png" alt="Settings Screenshot">
</div>
<footer>
<h3>About the Author</h3>
<img src="https://blog.example.com/authors/john-large.jpg" alt="John Doe Large">
<p>John is a web developer with 10 years of experience.</p>
<img src="/social/twitter-icon.png" alt="Twitter">
<img src="/social/github-icon.png" alt="GitHub">
</footer>
</article>
</body>
</html>📝 懒加载图片
🟡 intermediate
带有data-src属性的懒加载HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazy Loading Example</title>
</head>
<body>
<h1>Image Gallery with Lazy Loading</h1>
<!-- Lazy loaded images -->
<div class="gallery">
<img data-src="https://cdn.example.com/image1.jpg" class="lazy" alt="Image 1">
<img data-src="https://cdn.example.com/image2.jpg" class="lazy" alt="Image 2">
<img data-src="https://cdn.example.com/image3.jpg" class="lazy" alt="Image 3">
</div>
<!-- Mixed regular and lazy images -->
<img src="https://example.com/hero-image.jpg" alt="Hero (not lazy)">
<img data-src="https://example.com/content-image.jpg" class="lazy" alt="Content (lazy)">
<!-- Lazy loading with placeholder -->
<img src="https://example.com/placeholder.jpg" data-src="https://example.com/actual-image.jpg" alt="With placeholder">
<!-- Background images with data attributes -->
<div data-bg="https://example.com/background.jpg" class="lazy-bg"></div>
<div data-bg="/images/gradient.png" class="lazy-bg"></div>
</body>
</html>📝 响应式图片
🟡 intermediate
带有srcset和sizes属性的响应式图片HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Responsive Images</title>
</head>
<body>
<h1>Responsive Image Examples</h1>
<!-- Basic srcset -->
<img src="https://example.com/image-small.jpg"
srcset="https://example.com/image-small.jpg 320w,
https://example.com/image-medium.jpg 640w,
https://example.com/image-large.jpg 1024w"
sizes="(max-width: 320px) 280px,
(max-width: 640px) 580px,
1000px"
alt="Responsive Image">
<!-- Srcset with density descriptors -->
<img src="https://example.com/photo.jpg"
srcset="https://example.com/photo.jpg 1x,
https://example.com/photo-2x.jpg 2x,
https://example.com/photo-3x.jpg 3x"
alt="High DPI Image">
<!-- Picture element with multiple sources -->
<picture>
<source media="(min-width: 1024px)" srcset="https://example.com/desktop.jpg">
<source media="(min-width: 768px)" srcset="https://example.com/tablet.jpg">
<source media="(min-width: 480px)" srcset="https://example.com/mobile.jpg">
<img src="https://example.com/fallback.jpg" alt="Responsive with Picture">
</picture>
<!-- Multiple formats in picture element -->
<picture>
<source srcset="https://example.com/image.webp" type="image/webp">
<source srcset="https://example.com/image.jp2" type="image/jp2">
<img src="https://example.com/image.jpg" alt="Multiple formats">
</picture>
<!-- Srcset with relative paths -->
<img src="/images/default.jpg"
srcset="/images/small.jpg 480w,
/images/medium.jpg 768w,
/images/large.jpg 1200w"
alt="Relative paths">
</body>
</html>📝 混合绝对和相对URL
🟡 intermediate
包含各种URL格式的HTML（绝对、相对、协议相对）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Mixed URL Examples</title>
</head>
<body>
<!-- Absolute URLs with https -->
<img src="https://example.com/image1.jpg" alt="HTTPS Image">
<img src="https://cdn.example.com/assets/image2.png" alt="HTTPS CDN">
<!-- Absolute URLs with http -->
<img src="http://example.com/image3.jpg" alt="HTTP Image">
<img src="http://legacy.example.com/photos/pic.gif" alt="HTTP Legacy">
<!-- Protocol-relative URLs -->
<img src="//cdn.example.com/image4.jpg" alt="Protocol-relative 1">
<img src="//example.com/assets/image5.png" alt="Protocol-relative 2">
<!-- Root-relative paths -->
<img src="/images/logo.png" alt="Root-relative 1">
<img src="/assets/icons/icon.svg" alt="Root-relative 2">
<img src="/static/img/banner.jpg" alt="Root-relative 3">
<!-- Relative paths -->
<img src="image.jpg" alt="Same directory">
<img src="./photo.png" alt="Explicit current directory">
<img src="../images/pic.gif" alt="Parent directory">
<img src="../../assets/logo.svg" alt="Grandparent directory">
<!-- Complex relative paths -->
<img src="../img/subfolder/deep/nested/image.png" alt="Complex relative">
<img src="./../../assets/../static/img.jpg" alt="Very complex relative">
<!-- Absolute paths with domain variations -->
<img src="https://subdomain.example.com/image.jpg" alt="Subdomain">
<img src="https://example.co.uk/photo.png" alt="Different TLD">
<img src="https://example.com:8080/image.gif" alt="With port">
<!-- Query strings and fragments -->
<img src="/image.jpg?v=1" alt="With query string">
<img src="https://example.com/img.png#section" alt="With fragment">
<img src="/photo.jpg?width=300&height=200&quality=90" alt="Multiple params">
<!-- Edge cases -->
<img src="IMAGE.JPG" alt="Uppercase extension">
<img src="image.jpeg" alt="JPEG extension">
<img src="photo.svg" alt="SVG format">
<img src="graphic.webp" alt="WebP format">
<img src="animation.gif" alt="GIF format">
<img src="banner.bmp" alt="BMP format">
</body>
</html>📝 重复图片
🟡 intermediate
包含重复图片URL的HTML，用于测试去重
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Duplicate Images Test</title>
</head>
<body>
<!-- Exact duplicates -->
<img src="https://example.com/logo.png" alt="Logo 1">
<img src="https://example.com/logo.png" alt="Logo 2">
<img src="https://example.com/logo.png" alt="Logo 3">
<!-- Case variations (same URL) -->
<img src="/images/Photo.JPG" alt="Photo 1">
<img src="/images/Photo.jpg" alt="Photo 2">
<!-- Query string variations -->
<img src="https://cdn.example.com/image.jpg" alt="Original">
<img src="https://cdn.example.com/image.jpg?v=1" alt="With version">
<img src="https://cdn.example.com/image.jpg?v=2" alt="Different version">
<img src="https://cdn.example.com/image.jpg?cache=1234" alt="With cache">
<!-- Multiple uses of same image -->
<img src="/icons/star.png" alt="Star rating 1">
<img src="/icons/star.png" alt="Star rating 2">
<img src="/icons/star.png" alt="Star rating 3">
<img src="/icons/star.png" alt="Star rating 4">
<img src="/icons/star.png" alt="Star rating 5">
<!-- Different paths pointing to same logical image -->
<img src="/images/logo.png" alt="Logo absolute">
<img src="./images/logo.png" alt="Logo relative">
<img src="../current/images/logo.png" alt="Logo parent relative">
<!-- CDN duplicates with different hosts -->
<img src="https://cdn1.example.com/image.jpg" alt="CDN 1">
<img src="https://cdn2.example.com/image.jpg" alt="CDN 2">
<img src="https://cdn3.example.com/image.jpg" alt="CDN 3">
<!-- Protocol-relative duplicates -->
<img src="https://example.com/pic.png" alt="HTTPS">
<img src="//example.com/pic.png" alt="Protocol-relative">
<!-- Repeated in different sections -->
<section>
<img src="/media/banner.jpg" alt="Banner">
</section>
<section>
<img src="/media/banner.jpg" alt="Banner Again">
</section>
<footer>
<img src="/media/banner.jpg" alt="Banner Footer">
</footer>
</body>
</html>