为什么这里的HTML被倒过来输出了
为什么这里的HTML被倒过来输出了?不应该是写在前面的输出在前面吗？
最直观的就是
那里，br应该是将近在最末未出现的，结果浏览器居然在前面就给显示了出来.
虽然问题不大但是还是想改回来，那么应该怎么改？还去帮忙改正谢谢。
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="www.frebsite.nl" />
<meta name="viewport" content="width=device-width minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" />
<title>mmenu light demo</title>
<link type="text/css" rel="stylesheet" href="static/css/demo.css" />
<link type="text/css" rel="stylesheet" href="static/css/mmenu-light.css" />
</head>
<body>
<div id="page">
<div class="header">
<a href="#menu"><span></span></a>
Demo
<nav id="menu">
<ul>
<li class="Selected"><a href="#">Home</a></li>
<li><span>About us</span>
<ul>
<li><a href="#about/history">History</a></li>
<li><span>The team</span>
<ul>
<li><a href="#about/team/management">Management</a></li>
<li><a href="#about/team/sales">Sales</a></li>
<li><a href="#about/team/development">Development</a></li>
</ul>
</li>
<li><a href="#about/address">Our address</a></li>
</ul>
</li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<div style="position: absolute; top: 0; right: 0;">555</div>
</div>
</div>
<script src="static/js/mmenu-light.js"></script>
<br /><br /><br /><br /><br />
<script>
var menu = new MmenuLight(document.querySelector('#menu'), 'all');
var navigator = menu.navigation({});
var drawer = menu.offcanvas({});
document.querySelector('a[href="#menu"]')
.addEventListener('click', evnt => {
evnt.preventDefault();
drawer.open();
});
</script>
</body>
</html>
! function(t) {
var e = {};
function n(i) {
if (e[i]) return e[i].exports;
var s = e[i] = {
i: i,
l: !1,
exports: {}
};
return t[i].call(s.exports, s, s.exports, n), s.l = !0, s.exports
}
n.m = t, n.c = e, n.d = function(t, e, i) {
n.o(t, e) || Object.defineProperty(t, e, {
enumerable: !0,
get: i
})
}, n.r = function(t) {
"undefined" != typeof Symbol && Symbol.toStringTag && Object.defineProperty(t, Symbol.toStringTag, {
value: "Module"
}), Object.defineProperty(t, "__esModule", {
value: !0
})
}, n.t = function(t, e) {
if (1 & e && (t = n(t)), 8 & e) return t;
if (4 & e && "object" == typeof t && t && t.__esModule) return t;
var i = Object.create(null);
if (n.r(i), Object.defineProperty(i, "default", {
enumerable: !0,
value: t
}), 2 & e && "string" != typeof t)
for (var s in t) n.d(i, s, function(e) {
return t[e]
}.bind(null, s));
return i
}, n.n = function(t) {
var e = t && t.__esModule ? function() {
return t.default
} : function() {
return t
};
return n.d(e, "a", e), e
}, n.o = function(t, e) {
return Object.prototype.hasOwnProperty.call(t, e)
}, n.p = "", n(n.s = 0)
}([function(t, e, n) {
"use strict";
n.r(e);
var i = function() {
function t(t) {
var e = this;
this.listener = function(t) {
(t.matches ? e.matchFns : e.unmatchFns).forEach((function(t) {
t()
}))
}, this.toggler = window.matchMedia(t), this.toggler.addListener(this.listener), this
.matchFns = [], this.unmatchFns = []
}
return t.prototype.add = function(t, e) {
this.matchFns.push(t), this.unmatchFns.push(e), (this.toggler.matches ? t : e)()
}, t
}(),
s = function(t) {
return Array.prototype.slice.call(t)
},
o = function(t, e) {
return s((e || document).querySelectorAll(t))
},
r = ("ontouchstart" in window || navigator.msMaxTouchPoints, navigator.userAgent.indexOf("MSIE") > -1 ||
navigator.appVersion.indexOf("Trident/") > -1),
a = "mm-spn",
c = function() {
function t(t, e, n, i, s) {
this.node = t, this.title = e, this.slidingSubmenus = i, this.selectedClass = n, this.node
.classList.add(a), r && (this.slidingSubmenus = !1), this.node.classList.add(a + "--" + s),
this.node.classList.add(a + "--" + (this.slidingSubmenus ? "navbar" : "vertical")), this
._setSelectedl(), this._initAnchors()
}
return Object.defineProperty(t.prototype, "prefix", {
get: function() {
return a
},
enumerable: !1,
configurable: !0
}), t.prototype.openPanel = function(t) {
var e = t.parentElement;
if (this.slidingSubmenus) {
var n = t.dataset.mmSpnTitle;
e === this.node ? this.node.classList.add(a + "--main") : (this.node.classList.remove(
a + "--main"), n || s(e.children).forEach((function(t) {
t.matches("a, span") && (n = t.textContent)
}))), n || (n = this.title), this.node.dataset.mmSpnTitle = n, o("." + a + "--open",
this.node).forEach((function(t) {
t.classList.remove(a + "--open"), t.classList.remove(a + "--parent")
})), t.classList.add(a + "--open"), t.classList.remove(a + "--parent");
for (var i = t.parentElement.closest("ul"); i;) i.classList.add(a + "--open"), i
.classList.add(a + "--parent"), i = i.parentElement.closest("ul")
} else {
var r = t.matches("." + a + "--open");
o("." + a + "--open", this.node).forEach((function(t) {
t.classList.remove(a + "--open")
})), t.classList[r ? "remove" : "add"](a + "--open");
for (var c = t.parentElement.closest("ul"); c;) c.classList.add(a + "--open"), c = c
.parentElement.closest("ul")
}
}, t.prototype._setSelectedl = function() {
var t = o("." + this.selectedClass, this.node),
e = t[t.length - 1],
n = null;
e && (n = e.closest("ul")), n || (n = this.node.querySelector("ul")), this.openPanel(n)
}, t.prototype._initAnchors = function() {
var t = this;
this.node.addEventListener("click", (function(e) {
var n = e.target,
i = !1;
(i = (i = (i = i || function(t) {
return !!t.matches("a")
}(n)) || function(e) {
var n;
return !!(n = e.closest("span") ? e.parentElement : !!e.closest(
"li") && e) && (s(n.children).forEach((function(e) {
e.matches("ul") && t.openPanel(e)
})), !0)
}(n)) || function(e) {
var n = o("." + a + "--open", e),
i = n[n.length - 1];
if (i) {
var s = i.parentElement.closest("ul");
if (s) return t.openPanel(s), !0
}
return !1
}(n)) && e.stopImmediatePropagation()
}))
}, t
}(),
d = "mm-ocd",
u = function() {
function t(t, e) {
var n = this;
void 0 === t && (t = null), this.wrapper = document.createElement("div"), this.wrapper.classList
.add("" + d), this.wrapper.classList.add(d + "--" + e), this.content = document
.createElement("div"), this.content.classList.add(d + "__content"), this.wrapper.append(this
.content), this.backdrop = document.createElement("div"), this.backdrop.classList.add(
d + "__backdrop"), this.wrapper.append(this.backdrop), document.body.append(this
.wrapper), t && this.content.append(t);
var i = function(t) {
n.close(), t.stopImmediatePropagation()
};
this.backdrop.addEventListener("touchstart", i, {
passive: !0
}), this.backdrop.addEventListener("mousedown", i, {
passive: !0
})
}
return Object.defineProperty(t.prototype, "prefix", {
get: function() {
return d
},
enumerable: !1,
configurable: !0
}), t.prototype.open = function() {
this.wrapper.classList.add(d + "--open"), document.body.classList.add(d + "-opened")
}, t.prototype.close = function() {
this.wrapper.classList.remove(d + "--open"), document.body.classList.remove(d + "-opened")
}, t
}(),
l = function() {
function t(t, e) {
void 0 === e && (e = "all"), this.menu = t, this.toggler = new i(e)
}
return t.prototype.navigation = function(t) {
var e = this;
if (!this.navigator) {
var n = (t = t || {}).title,
i = void 0 === n ? "Menu" : n,
s = t.selectedClass,
o = void 0 === s ? "Selected" : s,
r = t.slidingSubmenus,
a = void 0 === r || r,
d = t.theme,
u = void 0 === d ? "light" : d;
this.navigator = new c(this.menu, i, o, a, u), this.toggler.add((function() {
return e.menu.classList.add(e.navigator.prefix)
}), (function() {
return e.menu.classList.remove(e.navigator.prefix)
}))
}
return this.navigator
}, t.prototype.offcanvas = function(t) {
var e = this;
if (!this.drawer) {
var n = (t = t || {}).position,
i = void 0 === n ? "left" : n;
this.drawer = new u(null, i);
var s = document.createComment("original menu location");
this.menu.after(s), this.toggler.add((function() {
e.drawer.content.append(e.menu)
}), (function() {
e.drawer.close(), s.after(e.menu)
}))
}
return this.drawer
}, t
}();
e.default = l;
window.MmenuLight = l
}]);;
```
使用谷歌浏览器是ok的
script 写咋body 外试试
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
99
</body>
<script></script>
</html>