如何获取到html页面源代码数据

html-css018

如何获取到html页面源代码数据,第1张

WebBrowser += DocumentCompleted=new.....

 

这里DocumentCompleted才能获取

if(((WebBrowser)sender).ReadyState == WebBrowserReadyState.Completed)

{

   string txt = webBrowserContent.Document.Body.InnerHtml

}

先看效果:

代码:

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>书店</title>

<style type="text/css">

*{

  padding:0

  margin:0

  box-sizing:border-box

}

li{

  list-style:none

}

.wrap{

  width:960px

  margin:0 auto

}

.header{

  overflow:hidden

  margin:10px auto

}

.logo{

  font-size:20px

  color:#00F

  text-align:center

  line-height:100px

  height:100px

  width:20%

  float:left

}

.banner{

  height:100px

  width:80%

  float:left

  border:1px solid #00F

  font-size:30px

  text-align:center

  line-height:100px

  background:#990

}

.nav ul{

  width:100%

  background:#6CC

  overflow:hidden

}

.nav ul li{

  float:left

  line-height:30px

  margin-right:15px

}

.nav ul li a{

  color:#000000

  text-decoration:underline

}

.main{

  margin-top:20px

  overflow:hidden

}

.sidebar{

  width:200px

  float:left

}

.login{

  border:1px solid #06F

}

.login h2{

  line-height:24px

  background:#6CC

  color:#000000

  text-align:center

  font-size:18px

  font-weight:normal

}

.login p{

  margin:10px 10px

}

.login p input{

  width:100px

}

.login button{

  background:none

  border:1px solid #000000

  padding:5px 10px

  margin:15px

}

.car{

  margin:30px auto

  width:50px

  height:50px

  border-radius:50%

  background:#C90

  line-height:50px

  text-align:center

}

.book{

  width:750px

  float:right

}

.book ul li{

  border:1px solid #069

  padding:10px

  overflow:hidden

  margin-bottom:20px

}

.book ul li img{

  float:left

  width:100px

  height:120px

  border:1px solid #999

  margin-right:10px

}

.book ul li .info{

  float:left

}

.book ul li .info p{

  margin-bottom:10px

}

.book ul li .more{

  margin-top:20px

}

.book ul li .more a{

  color:#000000

  text-decoration:underline

}

.book ul li .more .buy{

  padding:3px 5px

  background:#FC0

  color:#000000

  border:1px solid #000000

  border-radius:3px

  text-decoration:none

  margin-left:15px

}

</style>

</head>

<body>

<div class="wrap">

<div class="header">

    <div class="logo"><h1>网上书店</h1></div>

        <div class="banner">欢迎访问</div>

    </div>

    <div class="nav">

    <ul>

        <li><a href="#">首页</a></li>

            <li><a href="#">文学类</a></li>

            <li><a href="#">计算机类</a></li>

            <li><a href="#">英语类</a></li>

            <li><a href="#">动态啥类</a></li>

        </ul>

    </div>

    <div class="main">

    <div class="sidebar">

        <div class="login">

                <h2>用户登录</h2>

                <form method="post">

                    <p>用户名:<input type="text" /></p>

                    <p>密 码:<input type="password" /></p>

                    <button>登录</button>

                    <button>注册</button>

                </form>

            </div>

            <div class="car">

            购物车

            </div>

        </div>

        <div class="book">

        <ul>

            <li>

                <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg">

                    <div class="info">

                    <p>名称:图灵</p>

                        <p>作者:言小鱼</p>

                        <p>价格:无价</p>

                        <p class="more"><a href="#">详细信息</a><a href="#" class="buy">购买</a></p>

                    </div>

                </li>

                <li>

                <img src="http://himg.bdimg.com/sys/portrait/item/9b7fe5889de590bbe7bc980729.jpg">

                    <div class="info">

                    <p>名称:图灵</p>

                        <p>作者:言小鱼</p>

                        <p>价格:无价</p>

                        <p class="more"><a href="#">详细信息</a><a href="#" class="buy">购买</a></p>

                    </div>

                </li>

            </ul>

        </div>

    </div>

</div>

</body>

</html>

满意请采纳~

网页源代码直接复制保存没有效果的原因:

①网页代码的head部分有引用别的文件,包括js以及css样式。如果你没有对应的文件。网页上的样式和一些js写出来的效果是没有的。你的问题应该就是这个原因造成的。

②网页的代码中有一些是要依靠相应的web服务才能展示出来的。你如果没有相应的web服务器。例如iis或者Apache或者tomcat。你是没法看到相应的页面应该有的效果的。

从一般的浏览器上只是下载了页面源代码和图片,缺少js和css文件而导致的排版错乱。

解决方法:

步骤1、下载一个火狐浏览器。

步骤2、打开哈佛官网首页。

步骤3、鼠标右击点击将页面另存为,下载完毕你会发现不止有一个源代码页面,还有一个文件夹,文件夹内就有你缺少的js和css文件。

下载完毕后直接打开下载下的那个HTML页面即可,切记不要移动下载下的文件和文件夹,如果你移动了文件或者文件夹的位置,有可能会导致源代码读取路径不正确而排版错乱。