html - スタイルタグはヘッドでエラーを引き起こします

Question

<head>タグを入れたときのビルド方法の問題を理解しようとしてい<style>ますが、でエラーが発生しました</head>、<body onload="initialize()">これらのタグはページソースに赤で書かれています。ただし、関数initialize()は正しく呼び出され、CSS スタイルが適用されますが、ページの上部に 2 つの空の行が表示されます。<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">&nbsp;S&nbsp;</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>

score 2 · Accepted Answer

ここで回答を参照してください:なぜなのか私のHTMLに表示されますか？

あなたのhtmlに悪い文字が含まれていると思います。上記のソースをテキストエディターにコピーアンドペーストして、エラーが解消されたかどうかを確認してください。

FF、Chrome、または IE では、このエラーや余分なスペースは表示されません。

html - スタイルタグはヘッドでエラーを引き起こします

1 に答える 1

Related

Reference