Openlayers Demo：
1 <html>
2 <head>
3 <title>OpenLayers Example</title>
4 <script src="OpenLayers.js"></script>
5 </head>
6 <body>
7 <style type="text/css">
8 .Third{
9 margin: 10px 0;
10 padding: 6px 20px;
11 font-family: 'Microsoft Yahei';
12 margin: 15px 0;
13 font-size: 16px;
14 color: fff;
15 background: #C6EFD2;
16 color: #999;
17 border-radius: 4px;
18 clear: both;}
19 .Highlighter{
20 border: solid 1px #ccc;
21 clear: both;}
22 </style>
23 <div class="Third"><h1>欢迎来到我的世界!</h1></div>
24 <div class="Highlighter" style="100%; height:100%" id="map"></div>
25 <script defer="defer" type="text/javascript">
26 var map = new OpenLayers.Map('map');
27 var bounds = new OpenLayers.Bounds(
28 -124.73142200000001, 24.955967,
29 -66.969849, 49.371735
30 );
31 var wms = new OpenLayers.Layer.WMS( "WMS Layer",
32 "http://localhost:8080/geoserver/topp/wms", {LAYERS: 'topp:states'} );
33 //var osm = new OpenLayers.Layer.OSM();
34 //map.addLayer(osm);
35 map.addLayer(wms);
36 map.zoomToExtent(bounds);
37 //map.zoomToMaxExtent();
38 </script>
39 </body>
40 </html>
Openlayers版本：OpenLayers-2.13.1
效果截图：
阅读：
OGC标准地图服务介绍 http://blog.csdn.net/wildboy2001/article/details/7743350