HTML标签优先级

HTML（HyperText Markup Language）标签的位置对于页面的结构、性能以及可维护性至关重要。合理安排标签的位置不仅有助于提高网页的加载速度，还能使得代码更加清晰易懂。以下是一些关于HTML标签放置的基本规则和建议：

1. 文档类型声明（DOCTYPE）

文档类型声明总是位于HTML文档的第一行，它告诉浏览器使用哪种HTML标准来解析页面。例如：

<!DOCTYPE html>

2. `<html>` 标签

<html> 标签是所有HTML文档的根元素，所有的内容都应该在这个标签内进行定义。

3. `<head>` 标签

<head> 包含了页面的元信息，如标题、样式表、脚本文件链接等，这些内容通常对用户来说是非可见的。 <head> 内容可以包括：

<title>：文档的标题。
<meta>：提供元数据，例如字符集设置、视口设置等。
<link>：引入外部CSS文件。
<script>：可以用来引入外部JavaScript文件，但通常建议将脚本放在文档的底部。

4. `<body>` 标签

<body> 是文档中所有可见内容的容器，包括文本、图像、表格、列表等。

脚本的位置

文档顶部：将 <script> 标签放在 <head> 中可能导致浏览器在下载并执行脚本之前暂停渲染页面。这会增加首屏渲染的时间。
文档底部：为了提高用户体验，推荐将 <script> 标签放在 <body> 的末尾，即在 </body> 之前。这样可以确保页面的主要内容先加载出来，然后再加载脚本。

5. `<script>` 标签的最佳实践

异步加载：使用 async 或者 defer 属性可以让脚本异步加载，从而避免阻塞页面渲染。
- async：脚本会被立即执行，且可能在其他脚本之前或之后执行。
- defer：脚本会在DOM加载完成后按顺序执行。

示例代码

以下是一个典型的HTML文档结构示例：

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>示例页面</title><link rel="stylesheet" href="styles.css">
</head>
<body><header><h1>欢迎来到我的网站</h1></header><main><p>这里是页面的主要内容。</p></main><footer><p>版权所有 © 2024</p></footer><!-- 文档底部加载脚本 --><script src="scripts.js"></script>
</body>
</html>

通过合理安排HTML标签的位置，可以有效地提升页面的性能表现，并使代码更易于理解和维护。同时，遵循良好的编码习惯也有助于团队合作开发项目时保持一致性。

错误的示例

如果HTML标签组织不合理，浏览器无法正常解析HTML文件，如下是一个使用highcharts来绘制柱状图的一个页面：

<html>
<body>
<h1>123123123</h1>
<div id="container" style="width:100%; height:400px;"></div><script src="https://code.highcharts.com/highcharts.js"></script>document.addEventListener('DOMContentLoaded', function () {const chart = Highcharts.chart('container', {chart: {type: 'bar'},title: {text: 'Fruit Consumption'},xAxis: {categories: ['Apples', 'Bananas', 'Oranges']},yAxis: {title: {text: 'Fruit eaten'}},series: [{name: 'Jane',data: [1, 0, 4]}, {name: 'John',data: [5, 7, 3]}]});});</body></html>

很多初学者容易犯的问题，打开文件看一下：
在这里插入图片描述

浏览器没有展示图表，显然不符合我们的预期，我们按照标签优先级调整一下HTML代码：

<!DOCTYPE html>
<html>
<head><script src="https://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<h1>123123123</h1>
<div id="container" style="width:100%; height:400px;"></div><script>document.addEventListener('DOMContentLoaded', function () {Highcharts.chart('container', {chart: {type: 'bar'},title: {text: 'Fruit Consumption'},xAxis: {categories: ['Apples', 'Bananas', 'Oranges']},yAxis: {title: {text: 'Fruit eaten'}},series: [{name: 'Jane',data: [1, 0, 4]}, {name: 'John',data: [5, 7, 3]}]});});
</script></body>
</html>