你真的精通HTML吗？——那些“看不见”的HTML标签及其使用场景

最新推荐文章于 2023-06-14 00:25:03 发布

ExMaterial

最新推荐文章于 2023-06-14 00:25:03 发布

阅读量436

点赞数

分类专栏：学习笔记面试准备文章标签：前端 html

本文链接：https://blog.csdn.net/weixin_49172439/article/details/126042548

版权

学习笔记同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

面试准备

18 篇文章 1 订阅

订阅专栏

提到HTML，前端工程师的第一反应肯定是这么简单的语言，有什么不会的？如果你还抱有上述看法，建议你接着看下去。

meta标签：自动刷新/跳转

你应该不止到meta标签还可以控制页面自动跳转吧？在同一目录下新建两个文件index.html和page2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta http-equiv="refresh" content="5; URL=page2.html">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Index</h1>
</body>
</html>

<!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>
    <h1>page 2</h1>
</body>
</html>

通过这短短一行代码

<meta http-equiv="Refresh" content="5; URL=page2.html">

就可以实现五秒后自动跳转至page2.html。

另一种场景，每隔六十秒自动刷新页面，也可以通过一行代码实现

<meta http-equiv="Refresh" content="60">

title标签与Hack手段：消息提醒

相信你也曾经有过这种好奇，切至其它页面后，之前打开的页面还可以通过标签页显示新的消息通知或者闪烁。接下来我就告诉你该如何实现这些效果。

<!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>
    <script>
        let msgNum = 1
        let cnt = 0
        const interval = setInterval(() => {
            cnt = (cnt+1) % 2
            if (msgNum === 0) {
                document.title += '聊天页面'
                clearInterval(interval)
                return
            }
            const prefix = cnt % 2 ? `新消息(${msgNum})` : ''
            document.title = `${prefix}聊天页面`
        }, 1000)
    </script>
</body>
</html>

动态修改 title 标签的用途不仅在于消息提醒，你还可以将一些关键信息显示到标签上（比如下载时的进度、当前操作步骤），从而提升用户体验。

性能优化

性能问题无外乎两方面原因：渲染速度慢、请求时间长。通过合理使用标签，就可以在一定程度上提升渲染速度以及减少请求时间。

script 标签：调整加载顺序提升渲染速度

由于浏览器的架构设计，当渲染页面时，如果遇到js文件则会暂停当前页面渲染（因为js可以操作DOM来改变页面结构），但页面的首次渲染可能并不需要这些文件，所以此时js的异步加载就显得尤为重要。有一位大佬曾经说过，100ms的延迟就会让人眼感到明显的卡顿。

为了减少首次渲染时间，加载js文件可以借助这三个属性来实现。

async属性。立即请求文件，但不阻塞渲染引擎，而是文件加载完毕后阻塞渲染引擎并立即执行文件内容。
```
<script src="./main.js" async></script>
```
defer属性。立即请求文件，但不阻塞渲染引擎，等到解析完 HTML 之后再执行文件内容。
```
<script src="./main.js" defer></script>
```
module属性。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析。
```
<script src="./main.js" type="module"></script>
```

link 标签：通过预处理提升渲染速度

**dns-prefetch。**浏览器会对该域名预先进行 DNS 解析并缓存。
**preconnect。**提前进行TCP连接。
**prefetch/preload。**提前下载并缓存某个资源。不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。
**prerender。**浏览器不仅会加载资源，还会解析执行页面，进行预渲染。

搜索优化

meta 标签：提取关键信息

这里以CSDN官网为例。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fJb398Hi-1659008971763)(attachment:09520b6c97305e702a156178b4390fb7)]

link 标签：减少重复

有时候为了用户访问方便或者出于历史原因，对于同一个页面会有多个网址，又或者存在某些重定向页面。那么可以在这些页面中这样设置

<link href="https://lagou.com/a.html" rel="canonical">