HTML的一些有趣玩意儿

浮华与是非 3/13/2025 HTML

# 什么是HTML5，以及和HTML的区别是什么？

HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

HTML5是由万维网联盟（W3C）和 Web Hypertext Application Technology Working Group 合作创建的HTML新版本。

# HTML5 有哪些新特性？

新增语义化标签：nav、header、footer、aside、section、article
音频、视频标签：audio、video
数据存储：localStorage、sessionStorage
canvas（画布）、Geolocation（地理定位）、websocket（通信协议）

# 区别

# 从文档声明类型上看：

HTML是很长的一段代码，很难记住。如下代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

1
2
3

HTML5却只有简简单单的声明，方便记忆。如下：

<!DOCTYPE html>

# 从语义结构上看：

HTML4.0：没有体现结构语义化的标签，通常都是这样来命名的 <div id="header"></div>，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>。

# 拓展

不输入 <!DOCTYPE html>，浏览器将无法识别html文件，因此html将无法正常工作。

# websocket 是什么？

WebSocket 是一种用于创建持久连接的协议，允许服务器与客户端进行双向通信。它使用 TCP 协议进行通信，允许在连接建立后，任何一方都可以向对方发送数据。常用在需要服务端与客户端持久通信的场景如：实时聊天、在线协作等。

# 如何使用 JavaScript 控制 `<audio>` 和 `<video>` 元素？

在 HTML5 中，我们可以使用 audio和video 的 controls 属性，为元素增加控制器，如播放/暂停、进度条、音量控制等。

<audio id="myAudio" controls>
  <source src="example.mp3" type="audio/mpeg">
  Your browser does not support the audio element.
</audio>

<video id="myVideo" controls>
  <source src="example.mp4" type="video/mp4">
  Your browser does not support the video element.
</video>

1
2
3
4
5
6
7
8
9

下面则是通过JavaScript调用API方式来控制音频和视频的播放：

首先，我们需要获取 <audio> 或 <video> 元素的引用。我们可以使用 document.getElementById() 方法来获取元素。

<audio id="myAudio" src="example.mp3"></audio>
<video id="myVideo" src="example.mp4"></video>

1
2

const audio = document.getElementById('myAudio');
const video = document.getElementById('myVideo');

1
2

HTMLAudioElement 和 HTMLVideoElement 提供了许多方法来控制音频和视频。例如，我们可以使用 play() 方法来播放音频或视频，使用 pause() 方法来暂停音频或视频，使用 currentTime 属性来设置当前播放位置，使用 volume 属性来设置音量等。

audio.play();
audio.pause();
audio.currentTime = 10;
audio.volume = 0.5;
video.play();
video.pause();
video.currentTime = 10;
video.volume = 0.5;

1
2
3
4
5
6
7
8

HTMLAudioElement 和 HTMLVideoElement 还提供了许多事件，我们可以使用它们来监听音频或视频的状态变化。例如，我们可以使用 onplay 事件来监听音频或视频的播放开始，使用 onpause 事件来监听音频或视频的暂停，使用 onended 事件来监听音频或视频的播放结束等。

audio.onplay = function() {
  console.log('Audio is playing');
}
audio.onpause = function() {
  console.log('Audio is paused');
}
audio.onended = function() {
  console.log('Audio has ended');
}
video.onplay = function() {
  console.log('Video is playing');
}
video.onpause = function() {
  console.log('Video is paused');
}
video.onended = function() {
  console.log('Video has ended');
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

在实际应用中，我们可以使用这些方法来可以监听各种事件来响应用户的交互或媒体状态的变化。

// 当音频播放时执行函数
audio.addEventListener('play', function() {
  console.log('Audio is playing');
});

// 当视频结束时执行函数
video.addEventListener('ended', function() {
  console.log('Video has ended');
});
video.addEventListener('timeupdate', function() {
  console.log(video.currentTime)
})

1
2
3
4
5
6
7
8
9
10
11
12

常用的有

play：当播放开始时触发。
pause：当播放暂停时触发。
ended：当播放结束时触发。
timeupdate：当播放位置改变时定期触发。

# html5的video如何附带字幕？

HTML5 的 <video> 元素可以通过 <track> 元素来添加字幕。<track> 元素允许你指定包含字幕数据的外部文件，并让浏览器根据用户的设置或 JavaScript 代码来控制字幕的显示。这是最常用的方法，字幕文件可以是 WebVTT (.vtt) 或 SRT (.srt) 格式。

<video width="640" height="360" controls>
  <source src="video.mp4" type="video/mp4">
  <track src="subtitles_zh.vtt" kind="subtitles" srclang="zh" label="中文" default>
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en" label="English">
  <p>Your browser doesn't support HTML5 video. Here is a <a href="video.mp4">link to the video</a> instead.</p>
</video>

1
2
3
4
5
6

src 属性: 指向字幕文件的 URL。
kind 属性: 指定轨道的类型。常用的值为 subtitles (字幕), captions (隐藏式字幕，包含非对话信息，例如声音描述) 和 descriptions (音频描述)。
srclang 属性: 指定字幕的语言，使用两字母的语言代码 (例如 "en" 表示英语, "zh" 表示中文)。
label 属性: 显示在字幕选择菜单中的名称。
default 属性: 指定默认显示的字幕轨道。

# title与h1的区别、b与strong的区别、i与em的区别？

# title与h1的区别

用途不同：title 标签用于定义 HTML 文档的标题，通常会显示在浏览器的标签页上或者窗口的标题栏上，对于搜索引擎优化（SEO）也非常重要。而 h1 标签用于表示文档的主标题，通常显示在页面内容区域的顶部。
所在位置不同：title 标签应该放在
标签内，而 h1 标签则应该放在标签内。

# b与strong的区别

语义不同：b 标签用于表示粗体文本，而 strong 标签则表示强调文本。

# i与em的区别

语义不同：i 标签用于表示斜体文本，而 em 标签则表示强调文本。

在 HTML5 中，b 和 i 标记已经被废弃，推荐使用 strong 和 em 标记来代替。

# 页面统计数据中，常用的 PV、UV 指标分别是什么？

PV（page views）页面访问量，用户每1次对网站中的每个网页访问均被记录1个PV。

用户对同一页面的多次访问，访问量累计，用以衡量网站用户访问的网页数量。

UV（unique visitors）独立访客，指通过互联网访问、浏览这个网页的自然人。访问您网站的一台电脑客户端为一个访客。00:00-24:00内相同的客户端只被计算一次。

# HTML 标签中的 src 和 href 有什么区别

# 应用场景

src 属性用于加载外部资源的URL，通常是 img图片地址，audio音频地址、video视频地址或者 scriptJS地址等资源。
href 属性用于指定链接的URL，通常是 a 标签的地址、 link 标签的CSS样式等。

# 资源加载方式

当 html 解析遇到 script 标签时，会暂停解析并加载运行JS代码，但是 audio 和 video好像只会下载部分资源，然后点击播放的时候下载剩余资源。(后续，先卖个关-- http state 206)
当遇到 href 时，不会暂停解析，如果是link标签会并行请求CSS资源，如果是a标签则会在用户点击时进行导航或者加载资源。

# 说说你对 SSG 的理解

SSG（Static Site Generation，静态网站生成）是指在构建时预先生成静态页面，并将这些页面部署到 CDN 或者其他存储服务中，以提升 Web 应用的性能和用户体验。

具体来说，SSG 的实现方式通常包括以下几个步骤：

在开发阶段，使用模板引擎等技术创建静态页面模板；
将需要展示的数据从后台 API 中获取或者通过其他渠道获取，并将其填充到静态页面模板中，生成完整的 HTML 页面；
使用构建工具（例如 Gatsby、Next.js 等）对静态页面进行构建，生成静态 HTML、CSS 和 JavaScript 文件；
部署生成好的静态文件到服务器或者 CDN 上，以供用户访问。

相比于传统的动态网页，SSG 具有如下优势：

加载速度快：由于不需要每次请求都动态地渲染页面，SSG 可以减少页面加载时间，从而提高用户体验和搜索引擎排名；
安全性高：由于没有后台代码和数据库，SSG 不容易受到 SQL 注入等攻击；
成本低：由于不需要动态服务器等设备，SSG 可以降低网站的运维成本和服务器负担。

需要注意的是，SSG 不适用于频繁更新的内容和动态交互等场景，但对于内容较为稳定和更新较少的网站则是一个性能优化的好选择。

# 渐进式jpg有了解过吗？

渐进式 JPEG（Progressive JPEG），即PJPEG，是该标准的三种流行压缩模式之一。

渐进式 JPEG 以特定方式压缩照片和图形，与基线 JPEG 不同，PJPEG 在 Web 浏览器中呈现时，会首先给出模糊图像的外观。然后一点一点地开始图片渲染，直到它显示完全渲染的图像。浏览器实际上是逐行解释图像，但在占位符中提供了完整图像的模糊预览。随着 Web 浏览器的渲染引擎处理数据，图像的对比度开始变得更清晰、更详细。直到最后渲染完毕，用户将看到完整的清晰图像。

PJPEG 能够起到一种很有意义的心理效果，让用户有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。

PJPEG 适用于大部分常用的浏览器，包括 Chrome、Firefox 和 Internet Explorer 9 及更高版本。旧版本的 Internet Explorer 在显示渐进式 JPEG 时存在一些问题，不过这只是很小一部分用户。而不支持渐进式 JPEG 格式的浏览器会像普通 JPEG 一样加载照片。

# 如何实现SEO优化

# 何为SEO

SEO既搜索引擎优化，是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式，可以提供网站的访问量从而获取更多的流量。

# 如何优化

# 1.内部优化

META 标签优化：例如：TITLE，KEYWORDS，DESCRIPTION （TDK）等的优化
内部链接的优化，包括相关性链接（Tag 标签），锚文本链接，各导航链接，及图片链接
网站内容更新：每天保持站内的更新(主要是文章的更新等)
服务器端渲染（SSR）

# 2.外部优化

外部链接类别：博客、论坛、B2B、新闻、分类信息、贴吧、知道、百科、相关信息网等尽量保持链接的多样性
外链运营：每天添加一定数量的外部链接，使关键词排名稳定提升。
外链选择：与一些和你网站相关性比较高,整体质量比较好的网站交换友情链接,巩固稳定关键词排名

# img的srcset属性的作⽤？

响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的srcset属性。srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。用法如下：

<img src="image-128.png" srcset="image-256.png 2x" />

使用上面的代码，就能实现在屏幕密度为1x的情况下加载image-128.png, 屏幕密度为2x时加载image-256.png。

按照上面的实现，不同的屏幕密度都要设置图片地址，目前的屏幕密度有1x,2x,3x,4x四种，如果每一个图片都设置4张图片，加载就会很慢。所以就有了新的srcset标准。代码如下：

<img src="image-128.png"
     srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w"
     sizes="(max-width: 360px) 340px, 128px" />

1
2
3

其中srcset指定图片的地址和对应的图片质量。sizes用来设置图片的尺寸零界点。对于 srcset 中的 w 单位，可以理解成图片质量。如果可视区域小于这个质量的值，就可以使用。浏览器会自动选择一个最小的可用图片。

sizes语法如下：

sizes="[media query] [length], [media query] [length] ... "

sizes就是指默认显示128px, 如果视区宽度大于360px, 则显示340px。

# 使用input标签上传图片时，怎样触发默认拍照功能？

capture 属性用于指定文件上传控件中媒体拍摄的方式。

可选值：

user 前置
environment 后置
camera 相机
camcorder 摄像机
microphone 录音

<input type='file' accept='image/*;' capture='camera'>

# 如何禁止input展示输入的历史记录？

在输入input时会提示原来输入过的内容，还会出现下拉的历史记录，禁止这种情况只需在input中加入： autocomplete=“off” 即可。

# 什么是 DOM 和 BOM？

DOM（Document Object Model）和 BOM（Browser Object Model）是 JavaScript 中常用的两个概念，用于描述浏览器中的不同对象模型。

# DOM（Document Object Model）:

DOM 是表示 HTML 和 XML 文档的标准的对象模型。它将文档中的每个组件（如元素、属性、文本等）都看作是一个对象，开发者可以使用 JavaScript 来操作这些对象，从而动态地改变页面的内容、结构和样式。
DOM 以树状结构组织文档的内容，其中树的根节点是 document 对象，它代表整个文档。document 对象有各种方法和属性，可以用来访问和修改文档的内容和结构。

# BOM（Browser Object Model）:

BOM 是表示浏览器窗口及其各个组件的对象模型。它提供了一组对象，用于访问和控制浏览器窗口及其各个部分，如地址栏、历史记录等。
BOM 的核心对象是 window 对象，它表示浏览器窗口，并且是 JavaScript 中的全局对象。window 对象提供了许多属性和方法，用于控制浏览器窗口的各个方面，如页面导航、定时器、对话框等。
BOM 还提供了其他一些对象，如 navigator（提供浏览器相关信息）、location（提供当前文档的 URL 信息）、history（提供浏览器历史记录）、screen（提供屏幕信息）等。

总的来说，DOM 是用于访问和操作网页文档的对象模型，而 BOM 是用于控制浏览器窗口及其各个组件的对象模型。在 JavaScript 编程中，开发者通常会同时使用 DOM 和 BOM 来完成各种任务，如操作网页元素、导航控制、事件处理等。

# 什么是渐进增强和优雅降级？

渐进增强（progressive enhancement）：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。

优雅降级 graceful degradation：一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

# 区别

优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；
优雅降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。

# 页面导入样式时，使用link和@import有什么区别？

link属于HTML标签，而@import是css提供的；

页面被加载时，link会同时被加载，而@import引用的css会等到页面被加载完再加载；

@import只在IE5以上才能识别，而link是XHTML标签，无兼容问题；

link方式的样式的权重高于@import的权重。

# script 标签的 defer 和 async 有什么区别？

浏览器解析html时，在默认情况下遇到script标签会阻塞解析，直到script的内容加载并运行完后继续进行解析。而在 script 外连资源时，可以使用 defer 和 async 属性来异步加载资源。

# 区别

defer告诉浏览器不要等待脚本下载，而是继续解析HTML，等整个文档解析完成之后，再按照脚本出现的顺序执行它们。也就是说，带有defer的脚本不会阻塞页面的渲染，而且多个defer脚本会按顺序执行。
async的作用是让脚本异步加载，即浏览器在下载脚本的同时继续解析HTML。不过，一旦脚本下载完成，浏览器会立即执行它，这时候可能会中断HTML的解析。多个async脚本之间不能保证执行顺序，谁先下载完谁就先执行。
根据HTML5规范，当async存在时，defer会被忽略，所以这种情况下浏览器会优先使用async的行为。

# 行为对比表

特性	`defer`	`async`	默认（无属性）
加载时机	异步加载（不阻塞 HTML 解析）	异步加载（不阻塞 HTML 解析）	同步加载（阻塞 HTML 解析）
执行时机	HTML 解析完成后，按脚本顺序执行	脚本下载完成后立即执行（可能中断 HTML 解析）	下载完成后立即执行（阻塞解析）
执行顺序	按文档中脚本的声明顺序执行	按脚本下载完成顺序执行（无序）	按文档顺序执行
适用场景	依赖 DOM 或需要按顺序执行的脚本	独立脚本（如统计代码、广告）	无特殊优化需求

# 常用的 meta 元素有哪些？

<meta> 元素标签是提供有关HTML文档的元数据，元数据不会显示在页面上，但是能够被机器识别。总而言之, meta标签是用来让机器识别的，同时它对SEO起着重要的作用。

# charset

指定了html文档的编码格式，常用的是utf-8(Unicode的字符编码)

# name & content

指定元数据的名称(这部分对SEO非常有用)

author——定义了页面的作者

<meta name="author" content="Tony">

keywords——为搜索引擎提供关键字

<meta name="keywords" content="HTML, CSS, JavaScript">

description——对网页整体的描述

<meta name="description" content="My tutorials on HTML, CSS and JavaScript">

viewport——定义了网页的显示方式，比如宽度、高度、缩放比例等。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minmum-scale=1.0">

width=device-width——将页面宽度设置为跟随屏幕宽度变化而变化
initial-scale=1.0——设置浏览器首次加载页面时的初始缩放比例(0.0-10.0正数)
maximum-scale=1.0——允许用户缩放的最大比例(0.0-10.0正数)，必须大于等于minimum-scale
minimum-scale=1.0——允许用户缩放的最小比例(0.0-10.0正数)，必须小于等于maximum-scale
user-scalable=no——是否允许用户手动缩放(yes或者no)

1
2
3
4
5

generator——包含生成页面软件的标识符
theme-color——定义主题颜色
http-equiv & content
- refresh——每30s刷新一次文档 <meta http-equiv="refresh" content="30">
- X-UA-Compatible——告知浏览器以何种版本渲染界面。<meta http-equiv="X-UA-Compatible" content="ie=edge">

# 有哪些方法可以实现回到顶部的功能？

# 1、锚点

使用锚点链接是一种简单的返回顶部的功能实现。

该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置。

<body style="height:2000px;">
    <div id="topAnchor"></div>
    <a href="#topAnchor" style="position:fixed;right:0;bottom:0">回到顶部</a>
</body>

1
2
3
4

# 2、scrollTop

scrollTop属性表示被隐藏在内容区域上方的像素数。

元素未滚动时，scrollTop的值为0，如果元素被垂直滚动了，scrollTop的值大于0，且表示元素上方不可见内容的像素宽度

由于scrollTop是可写的，可以利用scrollTop来实现回到顶部的功能

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    <script>
        test.onclick = function(){
            document.body.scrollTop = document.documentElement.scrollTop = 0;
        }
    </script>
</body>

1
2
3
4
5
6
7
8

# 3、scrollTo

scrollTo(x,y)方法滚动当前window中显示的文档，让文档中由坐标x和y指定的点位于显示区域的左上角

设置scrollTo(0,0)可以实现回到顶部的效果

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    <script>
        test.onclick = function(){
            scrollTo(0,0);
        }
    </script>
</body>

1
2
3
4
5
6
7
8

# 4、scrollBy()

scrollBy(x,y)方法滚动当前window中显示的文档，x和y指定滚动的相对量

只要把当前页面的滚动长度作为参数，逆向滚动，则可以实现回到顶部的效果

<body style="height:2000px;">
    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    <script>
        test.onclick = function(){
            var top = document.body.scrollTop || document.documentElement.scrollTop
            scrollBy(0,-top);
        }
    </script>
</body>

1
2
3
4
5
6
7
8
9

# 5、scrollIntoView()

Element.scrollIntoView方法滚动当前元素，进入浏览器的可见区域

该方法可以接受一个布尔值作为参数。如果为true，表示元素的顶部与当前区域的可见部分的顶部对齐（前提是当前区域可滚动）；如果为false，表示元素的底部与当前区域的可见部分的尾部对齐（前提是当前区域可滚动）。如果没有提供该参数，默认为true

使用该方法的原理与使用锚点的原理类似，在页面最上方设置目标元素，当页面滚动时，目标元素被滚动到页面区域以外，点击回到顶部按钮，使目标元素重新回到原来位置，则达到预期效果

<body style="height:2000px;">
    <div id="target"></div>
    <button id="test" style="position:fixed;right:0;bottom:0">回到顶部</button>
    <script>
        test.onclick = function(){
            target.scrollIntoView();
        }
    </script>
</body>

1
2
3
4
5
6
7
8
9

# HTML 页面的生命周期

DOMContentLoaded —— 浏览器已完全加载 HTML，并构建了 DOM 树，但像和样式表之类的外部资源可能尚未加载完成。
load —— 浏览器不仅加载完成了 HTML，还加载完成了所有外部资源：图片，样式等。
beforeunload/unload —— 当用户正在离开页面时。

浮华与是非