wehub-resource-sync
97 lines
3.2 KiB
HTML
97 lines
3.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Test Article: Web Crawling Guide</title>
|
|
<meta name="description" content="A comprehensive guide to web crawling techniques">
|
|
<meta property="article:published_time" content="2024-01-15T10:00:00Z">
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<nav id="site-nav">
|
|
<a href="/home">Home</a>
|
|
<a href="/about">About</a>
|
|
</nav>
|
|
</header>
|
|
|
|
<div class="ads banner">
|
|
<p>Buy our product!</p>
|
|
</div>
|
|
|
|
<article id="main-content">
|
|
<h1>Web Crawling Guide</h1>
|
|
<p>This is the <strong>main content</strong> of the article about web crawling.</p>
|
|
|
|
<h2>Section One: Basics</h2>
|
|
<p>Web crawling involves <em>fetching pages</em> from the internet automatically.</p>
|
|
<p>Here is a <a href="https://example.com/crawling">link to crawling docs</a> and
|
|
another <a href="https://example.org/robots">link about robots.txt</a>.</p>
|
|
|
|
<h2>Section Two: Images</h2>
|
|
<p>Below are some images used in crawling:</p>
|
|
<img src="https://example.com/spider.png" alt="A spider crawling the web">
|
|
<img src="https://example.com/network.jpg" alt="Network diagram">
|
|
<img src="https://example.com/noalt.png">
|
|
|
|
<h2>Section Three: Lists</h2>
|
|
<ul>
|
|
<li>Fetch HTML pages</li>
|
|
<li>Parse links</li>
|
|
<li>Follow links recursively</li>
|
|
</ul>
|
|
|
|
<blockquote>
|
|
<p>The web is a graph, not a tree.</p>
|
|
</blockquote>
|
|
|
|
<h2>Section Four: Code</h2>
|
|
<pre><code>const crawler = new Crawler();
|
|
crawler.start('https://example.com');</code></pre>
|
|
|
|
<h2>Section Five: Tables</h2>
|
|
<table>
|
|
<thead><tr><th>Method</th><th>Speed</th><th>Accuracy</th></tr></thead>
|
|
<tbody>
|
|
<tr><td>Browser</td><td>Slow</td><td>High</td></tr>
|
|
<tr><td>Curl</td><td>Fast</td><td>Medium</td></tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<h2>Section Six: Dividers</h2>
|
|
<p>Content before the rule.</p>
|
|
<hr>
|
|
<p>Content after the rule.</p>
|
|
|
|
<h2>Section Seven: More Resources</h2>
|
|
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="Tiny pixel">
|
|
<p>See also the <a href="/guide/advanced">advanced guide</a> and <a href="sibling-page">sibling page</a>.</p>
|
|
|
|
<h2>Section Eight: Deferred Content</h2>
|
|
<div id="deferred-content" class="loading" data-loaded="false">Loading deferred section, please wait…</div>
|
|
<script>
|
|
// Simulates a lazily-rendered widget: real browsers see the loaded
|
|
// state after ~100ms; HTML-only consumers see the static fallback
|
|
// above. Useful for exercising mutation-idle / wait-for-selector.
|
|
setTimeout(function () {
|
|
var el = document.getElementById('deferred-content');
|
|
if (!el) { return; }
|
|
el.classList.remove('loading');
|
|
el.classList.add('loaded');
|
|
el.setAttribute('data-loaded', 'true');
|
|
el.textContent = 'Deferred content fully loaded after 100ms.';
|
|
}, 100);
|
|
</script>
|
|
</article>
|
|
|
|
<aside class="sidebar">
|
|
<p>Related articles sidebar content</p>
|
|
<a href="https://example.com/related">Related Article</a>
|
|
</aside>
|
|
|
|
<footer>
|
|
<p>Copyright 2024</p>
|
|
<a href="/privacy">Privacy Policy</a>
|
|
</footer>
|
|
</body>
|
|
</html>
|