JS 复制页面源代码和复制页面内容

<div id="div1">
    <img src="http://www.google.com.hk/logos/2011/labariceporridgefestival11-hp.jpg" />
</div>

 

页面上有这样一个div,现在采用两种方式复制div中的内容:

 

1  复制源代码

 

 

2  复制显示内容

 

分别执行完上面两端代码,并打开word,按下Ctrl + V 发现:

方式1 得到的结果是img的源代码:

方式2得到的是一张展示出来的图片:

 

 

 

使用方式1 复制的是页面源代码,即文本;方式2复制的页面内容即文档对象;

 

类似于在线编辑器的源代码视图和效果视图一样。 (以上效果仅仅在IE中验证)

 

 

 

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的个人网页源代码,包括HTML、CSS、JS和图片。你可以将代码复制到一个新建的HTML文件中,并将图片文件保存在同一目录下。 HTML代码: ``` <!DOCTYPE html> <html> <head> <title>个人网页</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <header> <h1>个人网页</h1> </header> <nav> <ul> <li><a href="#">首页</a></li> <li><a href="#">作品展示</a></li> <li><a href="#">个人介绍</a></li> <li><a href="#">联系方式</a></li> </ul> </nav> <main> <section> <h2>欢迎来到我的个人网页</h2> <p>这里是我的作品展示和个人介绍,希望你会喜欢。</p> <img src="myphoto.jpg" alt="我的照片"> </section> <section> <h2>作品展示</h2> <ul> <li><a href="#">作品1</a></li> <li><a href="#">作品2</a></li> <li><a href="#">作品3</a></li> </ul> </section> <section> <h2>个人介绍</h2> <p>我是一个热爱设计和编程的人,希望能在这个领域做出自己的贡献。</p> </section> <section> <h2>联系方式</h2> <p>邮箱:[email protected]</p> <p>电话:1234567890</p> </section> </main> <footer> <p>版权所有 © 2021</p> </footer> </body> </html> ``` CSS代码(保存为style.css文件): ``` body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 20px; text-align: center; } nav { background-color: #777; color: #fff; padding: 10px; } nav ul { list-style: none; margin: 0; padding: 0; } nav li { display: inline-block; margin-right: 20px; } nav a { color: #fff; text-decoration: none; } nav a:hover { color: #fff; text-decoration: underline; } main { margin: 20px; } section { margin-bottom: 20px; } h2 { color: #333; font-size: 24px; margin-bottom: 10px; } ul { list-style: none; margin: 0; padding: 0; } li { margin-bottom: 10px; } img { max-width: 100%; height: auto; } footer { background-color: #333; color: #fff; padding: 10px; text-align: center; } ``` JS代码(保存为script.js文件): ``` // 暂无脚本 ``` 图片文件: 请将一张名为myphoto.jpg的照片保存在同一目录下。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值