HTML标签分类总结

2023-02-18 17:48:02html-css010

HTML标签分类总结,第1张

要回家了有点按捺不住心里的躁动，来点简单轻松的话题。

这是个有趣的问题，应该有不少人搜过，我也搜过。出现这个问题主要还是滥用块级元素，或者是不会使用一些小技巧。举个例子，有时候我们想实现如下表单效果：

但有时候写着写着会变成下面的样子：

按我从以前遇到过情况来说，出现上面的情况的原因，可能有2个：

第一，就是可能在某个地方<label>被设置块级元素包住了

解决方法： 在外部样式使用 display: inline-block

第二，就是<label>的样式使用了 display: block

所以如果以后在写表单的时候，出现这个问题，可以从上面2个方向去查找原因，以及找出相应的解决方法。

（1）、<!DOCTYPE>声明位于位于HTML文档中的第一行，处于 <html>标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。使用 <!Doctype>会让文档中的所有盒子模型以w3c标准盒子模型呈现。

（2）、标准模式的排版和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。

在HTML与CSS的标准化未完成之前，各个浏览器对于HTML和CSS的解析有各自不同的实现，而有很多旧的网页都是按照这些非标准的实现去设计的。在HTML与CSS标准确定之后，浏览器一方面要按照标准去实现对HTML与CSS的支持，另一方面又要保证对非标准的旧网页设计的后向兼容性。因此，现代的浏览器一般都有两种渲染模式： 标准模式 和 怪异模式 。在 标准模式 下，浏览器按照HTML与CSS标准对文档进行解析和渲染；而在 怪异模式 下，浏览器则按照旧有的非标准的实现方式对文档进行解析和渲染。这样的话，对于旧有的网页，浏览器启动怪异模式，就能够使得旧网页正常显示；对于新的网页，则可以启动标准模式，使得新网页能够使用HTML与CSS的标准特性。

Reference1 - h5新增标签

Reference2 - HTML元素分类

Reference3 - html标签分类及常用元素

Reference4 - HTML5常用标签分类

语义类标签是纯文字的补充，如标题、自然段、章节、列表等。<section>、<p>、<nav>。

现代互联网产品中，HTML描述"软件界面"多过"富文本"，而软件界面里的东西，几乎是没有语义的。在任何"软件界面的场景中"，可以直接使用div和span。

语义标签的优点：在很多工作场景里，正确地使用语义标签可以带来很多好处：

作为自然语言和纯文本的补充，用来表达一定的结构或消除歧义

<ruby>、<rt>、<rp>、

<em>

HTML应支持文章的结构的区分。语义化的HTML能够支持自动生成目录结构。

一篇文档会有一个属性的目录结构，由各级标题组成，此树形结构可能与HTML元素的嵌套关系不一致。

越来越多的浏览器退出的"阅读模式"，以及各种非浏览器终端的出现，语义化的HTML适合机器阅读的特性变得越来越重要。能让浏览器很好的支持"阅读视图功能"，提升搜索引擎的命中率，对视障用户的读屏软件更加友好。

所谓 元信息 ，是指描述自身的信息，

元信息类标签就是HTML用以描述文档自身的一类标签。通常在head标签中，不会在页面中显示出来。

元信息类标签多数情况下是给浏览器、搜索引擎等机器阅读的，有时这些信息会在页面之外展示给用户。

必须是html标签中的第一个标签（若head前面有标签，浏览器解析的时候，head标签中的内容会被移到body中），

内容需包含一个title标签（文档作为iframe或有其他方式指定了文档标题时，可不包含title）（多个title时只有一第一个生效），

最多只能包含一个base（页面中所有相对链接的基准URL）（多个base时只有第一个生效）。

可以改变全局的相对链接地址。不建议使用哦。

meta标签是一组键值对，是一种通用的元信息表示标签。

meta标签中的name表示元信息名，content表示元信息的值

有http-equiv属性的meta标签，表示执行一个命令，不需要name属性

除了content-type，还有以下几种命令：

没有在HTML标准中定义，却是移动端开发的事实标准

说起HTML标签，前端工程师会非常的有发言权，因为在平时开发中一定会用到，可以说是前端的入门必备知识。但往往在意更多的是页面的渲染效果及交互方式，也就是页面可见的部分，比如导航栏，菜单栏，列表，图文等。

其实还有一些页面上没有呈现出来却非常重要的标签，这些标签大部分在页面的头部head标签内，虽然在页面上看不见摸不着，但如果在特定的场景下，会产生意想不到的效果。下面我将从交互优化，性能优化，搜索优化三个方面并结合场景来聊聊被“忽视”的HTML标签。

交互优化

meta 标签：自动跳转/刷新

假设要实现一个类似自动播放的页面，首先我们第一反应会想到用js定时器控制页面跳转来完成。但是其实有更加简便的方法，通过meta标签的refresh功能来实现。

上面的代码会在 10s 之后自动跳转到同域下的 view2.html 页面。我们要实现自动播放的功能，只需要在每个页面的 meta 标签内设置好下一个页面的地址即可。

如果要实现定时刷新的功能，只要去除后面url即可：

注意，用meta标签实现刷新/跳转的过程是不可取消的，所以需要手动取消的还是得老老实实使用js的定时器，但是对于简单的定时刷新或跳转，还是可以去亲自实践meta的用法。

title 标签：消息提醒

消息提醒功能实现在HTML5标准发布之前，浏览器还没有开放图标闪烁、音频播放，弹出系统消息之类的api，只能借助其他非常规的手段，比如修改title 标签来达到类似的效果。

下面的代码通过定时修改title标签的内容，实现了消息提醒的功能，可以让用户在浏览其他页面时候，及时发现服务端返回的消息。

当然，动态修改title标签的用途不仅仅是消息提醒，还可以显示一些异步进行的任务，比如下载进度，上传进度等。

性能优化

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

不知道你们有没有过这样的体验：当在浏览器打开某个页面时，发现页面一直在loading转圈，或者等了好长的时间页面才有响应。这一现象，除了网络网速的原因外，大多数都是由于页面结构设计不合理导致加载时间过长。因此，如果想要提升页面的渲染速度，就需要了解浏览器页面的渲染过程是怎样的，从根本上来解决问题。

浏览器在加载页面的时候会用到 GUI 渲染线程和 JavaScript 引擎线程。其中，GUI 渲染线程负责渲染浏览器界面 HTML 元素，JavaScript 引擎线程主要负责处理 JavaScript 脚本程序。由于 JavaScript 在执行过程中还可能会改动界面结构和样式，因此它们之间被设计为互斥的关系。也就是说，当 JavaScript 引擎执行时，GUI 线程会被挂起，等执行完 JavaScript 的脚本程序后又会切换 GUI 线程继续渲染页面。

所以我们可以知道页面渲染过程中包含了请求脚本文件以及执行脚本文件的时间，但页面的首次渲染可能并不需要执行完全部的文件，这些请求和执行文件的动作反而延长了用户看到页面的时间，从而降低了用户体验。

为了快速将内容呈现给用户，减少用户等待时间，可以借助script标签的3个属性来实现：

async ：表示立即请求脚本文件，但不阻塞 GUI 渲染引擎，而是文件加载完毕后阻塞 GUI 渲染引擎并立即执行文件内容。

defer 。立即请求脚本脚本，但不阻塞 GUI 渲染引擎，等到解析完 HTML 之后再执行文件内容。

HTML5 标准 type ，对应值为“module”。让浏览器按照 ECMA Script 6 标准将文件当作模块进行解析，默认阻塞效果同 defer，也可以配合 async 在请求完成后立即执行。

所以可以得知，采用defer 属性以及 type="module" 情况下能保证渲染引擎的优先执行，从而减少执行文件内容消耗的时间，让用户更快地看见页面（即使这些页面内容可能并没有完全地显示）。除此外还要知道，当渲染引擎解析 HTML 遇到 script 标签引入文件时，会立即进行一次渲染，这就是为什么会把引用JavaScript 代码的 script 标签放入到 body 标签底部。

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

在我们对中大型项目进行性能优化时，往往会对资源做减法（gzip压缩，缓存等）或除法（按需打包，按需加载），可是如果能想到 link 标签的 rel 属性值来进行预加载，也能加快页面的渲染速度。

dns-prefetch 。当 link 标签的 rel 属性值为“dns-prefetch”时，浏览器会对某个域名预先进行 DNS 解析并缓存。这样，当浏览器在请求同域名资源的时候，能省去从域名查询 IP 的过程（DNS查询），从而减少时间损耗。（注意：这个属性还在实验阶段，部分浏览器的部分版本支持）

preconnect 。让浏览器在一个 HTTP 请求正式发给服务器前预先执行一些操作，这包括 DNS 解析、TLS 协商、TCP 握手，通过消除往返延迟来为用户节省时间。（注意：这个属性还在实验阶段，部分浏览器的部分版本支持）

prefetch/preload 。两个值都是让浏览器预先下载并缓存某个资源，但不同的是，prefetch 可能会在浏览器忙时被忽略，而 preload 则是一定会被预先下载。

prerender 。浏览器不仅会加载资源，还会解析执行页面，进行预渲染。（注意：这个属性还在实验阶段，部分浏览器的部分版本支持）

搜索优化

你所写的前端代码，除了要让浏览器更好执行，有时候也要考虑更方便其他程序（如搜索引擎）理解。合理地使用 meta 标签和 link 标签，恰好能让搜索引擎更好地理解和收录我们的页面。

meta 标签：提取关键信息

通过 meta 标签可以设置页面的描述信息，从而让搜索引擎更好地展示搜索结果。

例如，在百度中搜索“淘宝”，就会发现网站的描述信息，这些描述信息就是通过 meta 标签专门为搜索引擎设置的，目的是方便用户预览搜索到的结果。

为了让搜索引擎更好地识别页面，除了描述信息description之外还可以使用关键字，这样即使页面其他地方没有包含搜索内容，也可以被搜索到（当然搜索引擎有自己的权重和算法，如果滥用关键字是会被降权的，比如 Google 引擎就会对堆砌大量相同关键词的网页进行惩罚，降低它被搜索到的权重）。

当我们搜索关键字“安全购物”的时候搜索结果会显示淘宝网的信息，虽然显示的搜索内容上并没有看到“安全购物”字样，这就是因为淘宝网页面中设置了这个关键字。

对应代码如下：

在实际工作中，推荐使用一些关键字工具来挑选，比如