我试图了解<head>当我将标签放入其中时我构建的方式有什么问题，我在and中<style>出现错误，这些标签在页面源代码中以红色写成。但是，该函数被正确调用并应用了 CSS 样式，但在页面顶部呈现了两条空行。删除标签后，错误和线条消失。</head><body onload="initialize()">initialize()<style>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title> - EzMapping</title>
<link rel="stylesheet" type="text/css" href="/static/main/css/base.css" />
<link rel="stylesheet" type="text/css" href="/static/main/css/forms.css" />
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.4.0/ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.4.0/resources/css/ext-all.css" />
<script type="text/javascript" src="/static/GeoExt/lib/GeoExt.js"></script>
<script type="text/javascript" src="/static/OpenLayers-2.13.1/lib/OpenLayers.js"></script>
<link rel="stylesheet" type="text/css" href="/static/OpenLayers-2.13.1/theme/default/style.css" />
<script type="text/javascript" src="/static/main/js/jsi18n.js"></script>
<script type="text/javascript" src="/static/main/js/jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="/static/main/js/jquery.init.js"></script>
<script type="text/javascript" src="/static/main/js/radioSelect.js"></script>
<script type="text/javascript" src="/static/main/js/layersOrder.js"></script>
<script type="text/javascript" src="/static/main/js/collapse.js"></script>
<style type="text/css">
.styleIcon_1 {
border: 1px solid #ffffff;
}
</style>
<script type="text/javascript">
var map;
function initialize(){
Ext.onReady(function() {
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
map = new OpenLayers.Map('mappanel',
{ projection: new OpenLayers.Projection("EPSG:900913"),
units: 'm',
maxExtent: new OpenLayers.Bounds(-20037508.34,-20037508.34,20037508.34,20037508.34),
maxResolution: 156543.0399,
numZoomLevels: 21});
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
var fromProjection = new OpenLayers.Projection("EPSG:4326"); // Transform from WGS 1984
var toProjection = new OpenLayers.Projection("EPSG:900913"); // to Spherical Mercator Projection
map.addControl(new OpenLayers.Control.LayerSwitcher());
var osm = new OpenLayers.Layer.OSM("OSM"
);
var road = new OpenLayers.Layer.Bing({
name: "Road",
key: apiKey,
type: "Road",
});
var hybrid = new OpenLayers.Layer.Bing({
name: "Hybrid",
key: apiKey,
type: "AerialWithLabels",
});
var aerial = new OpenLayers.Layer.Bing({
name: "Aerial",
key: apiKey,
type: "Aerial"
});
var tiledLayer = new OpenLayers.Layer.XYZ('TMS',
"http://127.0.0.1:8000/ezmapping/tms/1.0/map/1/${z}/${x}/${y}.png", {isBaseLayer: false}
);
map.addLayers([tiledLayer, osm, road, hybrid, aerial]);
map.setCenter(new OpenLayers.LonLat(-70.0, 55.0),4)
new Ext.Window({
title: "Map: test",
x: 500,
y: 85,
//stateId: "ezMap1",
height: 400,
width: 400,
layout: "fit",
collapsible: true,
closable: false,
bodyBorder: false,
shadowOffset: 6,
items: [{
xtype: "gx_mappanel",
map: map,
center: new OpenLayers.LonLat(-70.0, 55.0).transform(fromProjection , toProjection),
zoom: 4
}]
}).show();
mapPanel = Ext.getCmp("mappanel");
});
}
</script>
</head>
<body onload="initialize()">
<ul id="nav">
<li><a class="" href="/">Home</a></li>
<li><a class="" href="/ezmapping/manage/">Manage</a>
<ul>
<li><a class="" href="/ezmapping/manage/profile/">Profile</a></li>
<li><a class="" href="/ezmapping/manage/options/">Options</a></li>
<li><a class="" href="/ezmapping/manage/account/">Account</a></li>
</ul>
</li>
<li><a class="active" href="/ezmapping/map/">Maps</a></li>
<li><a class="" href="/ezmapping/layer/">Layers</a></li>
<li><a class="" href="/ezmapping/manage/upload/shapefile/">Upload</a></li>
<a class="logged-in" href="/accounts/logout/">Logout</a>
</ul>
<div style="margin-left:10px">
<form method="post" action="" encrypt="multipart/form-data"><input type='hidden' name='csrfmiddlewaretoken' value='rc37O0qQtZvzgaDTGElOIQzaKOLwrwXS' />
<table>
<tr><td>
<p><h4>Map name: test</h4>
<fieldset class="module collapse ">
<h2>Map Options</h2>
<ul>
<fieldset class="module">
<h2>Map window:</h2>
<ul>
<li class="required">
<label for="id_zoom_level">Default zoom level</label>
<input id="id_zoom_level" name="zoom_level" type="text" value="4" />
</li>
<li class="required">
<label for="id_center_lat">Latitude of map center point</label>
<input id="id_center_lat" name="center_lat" type="text" value="55.0" />
</li>
<li class="required">
<label for="id_center_long">Longitude of map center point</label>
<input id="id_center_long" name="center_long" type="text" value="-70.0" />
</li>
<li class="required">
<label for="id_map_width">Map width (in px)</label>
<input id="id_map_width" name="map_width" type="text" value="400" />
</li>
<li class="required">
<label for="id_map_height">Map height (in px)</label>
<input id="id_map_height" name="map_height" type="text" value="400" />
</li>
</ul>
</fieldset>
</ul>
<ul>
<fieldset class="module collapse">
<h2>Other Options:</h2>
<ul>
<li class="optional">
<label for="id_useLayerBounds">Overide map zoom with layer extent</label>
<input id="id_useLayerBounds" name="useLayerBounds" type="checkbox" />
</li>
</ul>
</fieldset>
</ul>
</fieldset>
</td></tr>
<tr><td>
<fieldset class="module collapse">
<h2>Layers Options</h2>
<table id="sortable">
<thead>
<tr>
<td></td>
<td><img src="/static/main/img/view.png"></td>
<td></td>
<td><img src="/static/main/img/trash.png"></td>
<td>S</td>
</tr>
</thead>
<tbody>
<input id="id_form-TOTAL_FORMS" name="form-TOTAL_FORMS" type="hidden" value="1" /><input id="id_form-INITIAL_FORMS" name="form-INITIAL_FORMS" type="hidden" value="1" /><input id="id_form-MAX_NUM_FORMS" name="form-MAX_NUM_FORMS" type="hidden" value="1000" />
<tr>
<td><a href="/ezmapping/layer/edit/1">lignes_test.shp, LineString</a></td>
<td><input checked="checked" id="id_form-0-visible" name="form-0-visible" type="checkbox" /></td>
<td><input id="id_form-0-id" name="form-0-id" type="hidden" value="1" /></td>
<td><input id="id_form-0-DELETE" name="form-0-DELETE" type="checkbox" /></td>
<td><a class="styleIcon_1" href="/ezmapping/map/test/LayerStyle/1"> S </a></td>
<input class="layer_pk" type="hidden" id="layer_pk_" name="layer_pk_" value="1" />
</tr>
</tbody>
<tr><td><a href="/ezmapping/map/test/addLayers">Add layers to map</a></td></tr>
</table>
</fieldset>
</td></tr>
</table>
<input type="hidden" id="layersOrder" name="layersOrder" value="" />
<br><input type="submit" value="Submit">
</form>
<a href="#" id='fix_map'>Fix map center</a>
<a href="/ezmapping/publish/11/">Publish map link</a>
</div>
<div id="messageBoard">
<table frame=box border=1>
<tbody>
<tbody>
</table>
</div>
</body>
</html>