HTML标签优先级

news2024/9/22 15:38:47

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>