DEV Community

Zflpapa
Zflpapa

Posted on

qrcode

<!DOCTYPE html>









Original Code Page

<br>
function copyCodeToClipboard() {<br>
// 要复制的代码<br>
var code = <code>&lt;!DOCTYPE html&gt;<br>
&lt;html lang=&quot;en&quot;&gt;<br>
&lt;head&gt;<br>
&lt;meta charset=&quot;UTF-8&quot;&gt;<br>
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;<br>
&lt;title&gt;简单的网页示例&lt;/title&gt;<br>
&lt;style&gt;<br>
body {<br>
font-family: Arial, sans-serif;<br>
margin: 0;<br>
padding: 0;<br>
background-color: #f7f7f7;<br>
}<br>
.container {<br>
width: 80%;<br>
margin: auto;<br>
overflow: hidden;<br>
}<br>
header {<br>
background: #333;<br>
color: white;<br>
padding: 20px;<br>
text-align: center;<br>
}<br>
nav {<br>
background: #555;<br>
color: white;<br>
padding: 10px 0;<br>
text-align: center;<br>
}<br>
nav a {<br>
color: white;<br>
text-decoration: none;<br>
margin: 0 15px;<br>
}<br>
nav a:hover {<br>
text-decoration: underline;<br>
}<br>
.content {<br>
padding: 20px;<br>
}<br>
footer {<br>
background: #333;<br>
color: white;<br>
text-align: center;<br>
padding: 10px;<br>
position: fixed;<br>
bottom: 0;<br>
width: 100%;<br>
}<br>
&lt;/style&gt;<br>
&lt;/head&gt;<br>
&lt;body&gt;<br>
&lt;header&gt;<br>
&lt;h1&gt;我的网页标题&lt;/h1&gt;<br>
&lt;/header&gt;<br>
&lt;nav&gt;<br>
&lt;a href=&quot;#&quot;&gt;首页&lt;/a&gt;<br>
&lt;a href=&quot;#&quot;&gt;关于我们&lt;/a&gt;<br>
&lt;a href=&quot;#&quot;&gt;服务&lt;/a&gt;<br>
&lt;a href=&quot;#&quot;&gt;联系我们&lt;/a&gt;<br>
&lt;/nav&gt;<br>
&lt;div class=&quot;container&quot;&gt;<br>
&lt;div class=&quot;content&quot;&gt;<br>
&lt;h2&gt;欢迎来到我的网页&lt;/h2&gt;<br>
&lt;p&gt;这是一个简单的 HTML 网页示例。您可以根据需要修改和扩展这个模板。&lt;/p&gt;<br>
&lt;img src=&quot;https://via.placeholder.com/150&amp;quot; alt=&quot;示例图片&quot;&gt;<br>
&lt;h3&gt;列表示例&lt;/h3&gt;<br>
&lt;ul&gt;<br>
&lt;li&gt;列表项一&lt;/li&gt;<br>
&lt;li&gt;列表项二&lt;/li&gt;<br>
&lt;li&gt;列表项三&lt;/li&gt;<br>
&lt;/ul&gt;<br>
&lt;h3&gt;有序列表示例&lt;/h3&gt;<br>
&lt;ol&gt;<br>
&lt;li&gt;有序列表项一&lt;/li&gt;<br>
&lt;li&gt;有序列表项二&lt;/li&gt;<br>
&lt;li&gt;有序列表项三&lt;/li&gt;<br>
&lt;/ol&gt;<br>
&lt;/div&gt;<br>
&lt;/div&gt;<br>
&lt;footer&gt;<br>
&lt;p&gt;版权所有 &amp;copy; 2024 简单网页&lt;/p&gt;<br>
&lt;/footer&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;</code>;</p>
<div class="highlight"><pre class="highlight plaintext"><code> // 将代码复制到剪贴板
navigator.clipboard.writeText(code).then(function() {
alert("代码已复制到剪贴板。");
}, function() {
alert("复制到剪贴板失败,请手动复制。");
});
}
function goToW3CSchool() {
    // 跳转到 w3cschool 的在线编译器页面
    window.location.href = "https://www.w3cschool.cn/tryrun/runcode?lang=html";   
}
Enter fullscreen mode Exit fullscreen mode

&lt;/script&gt;
</code></pre></div>
<p></head><br>
<body><br>
<h1>请复制以下代码到 w3cschool 的在线编译器中:</h1><br>
<p><textarea readonly style="width: 100%; height: 150px;"><br>
&lt;!DOCTYPE html&gt;<br>
<html><br>
<head><br>
<title>Hello World Example</title><br>
</head><br>
<body><br>
<h1>Hello World</h1><br>
</body><br>
</html><br>
</textarea></p><br>
<button onclick="copyCodeToClipboard()">复制代码</button><br>
<button onclick="goToW3CSchool()">跳转到 w3cschool 在线编译器</button><br>
</body><br>
</html></p>

Top comments (0)