HTML高频八股

此处记录个人笔记，一些AI拓展阅读可以到网站笔记上进行阅读

飞书文档思维导图

1.<script>标签的defer和async属性有什么区别？

八股链接 MDN文档

从三个方面区别：

1. 加载方式
2. 执行顺序
3. 适用场景

1.1 加载方式的区别

普通script

普通的script标签在被浏览器解析到时，会阻塞当前的parse，加载这个脚本并执行后再继续进行解析

async

当async脚本被浏览器解析到时，会创建一个异步请求加载这个脚本并执行，加载过程不会阻塞当前的parse，加载后暂停HTML解析器并立即执行

defer

当defer脚本被浏览器解析到时，也会创建一个异步请求加载这个脚本，但不会立刻执行，而是在页面内容全部加载完毕后再执行

1.2 执行顺序的区别

普通script

普通的script标签会根据页面加载顺序下的标签顺序顺序加载执行

async

async脚本根据页面顺序加载，并创建异步请求进行加载，加载后立刻执行，由于加载速度和开始时间不同，最终的执行顺序是不确定的

defer

defer脚本根据页面顺序加载，并创建异步请求进行加载，加载后不立刻执行，等待页面内容加载完成后按照在文档中出现的顺序来执行

1.3 适用场景的区别

普通script

一般不需要异步执行的脚本和不需要操作dom的脚本可以用

async

async脚本适用于与脚本与当前页面元素无关的情况下使用

defer

defer脚本适用于那些脚本需要操作页面元素的情况下使用，只有页面元素加载完成后才可以使用

2.请简述块级元素和行内元素的区别

八股链接 MDN链接display

块级元素(block)

典型标签：div p 默认独占一行，宽度占满父容器，高度由内容决定 可以用css设置宽高，padding，margin和border，设置这些都会改变布局

行内元素(inline)

典型标签：span a img 内容决定宽高，并且可以和其他行内元素在一行 无法使用css设置宽高，仍由内容决定 水平方向上设置的padding，margin和border会影响布局 垂直方向上设置不会改变布局，设置垂直padding和border后能看到元素超出本行，但是行高仍不变 垂直方向设置margin无效

拓展：行内块元素（inline-block）

通过设置display为inline-block实现 综合了块级元素可以使用css设置样式改变布局的特性 同时保留了行内元素不会独占一行的特性,可以和其他inlien和inline-blcok元素在一行

嵌套规则

通俗理解

你可以把 HTML 元素想象成“盒子”：

• 块级元素就像“大箱子”，可以装“小箱子”和“小物件”。
• 行内元素就像“小物件”，只能放“小物件”，不能放“大箱子”。
• inline-block 元素是“可以定制大小的小物件”，它属于“小物件”的范畴，所以可以放在行内元素中。

3.请列举至少三种HTML5中的语义化标签。

八股链接 MDN-HTML语义

首先理解为什么要有这个概念

比如我们现在开发一个博客页面

我们要有文章的标题区，导航区，内容区，页脚

有时还要更细分出文章部分，章节部分，侧边部分

使用语义化标签可以更好的帮助程序员写出结构清晰的代码

同时对于搜索引擎来说可以更好地检索

对于屏幕阅读器来说可以辅助阅读，无障碍更好

所以语义化很重要

那么有哪些常见的语义化标签呢？

就从一个博客demo说起

首先要有header，这里面是组织了文章的标题信息等

header里还可以有nav，用来组织导航内容

下面就是主要部分,可以用main标签组织

main标签里又可以细分出article和section用来组织不同的独立的内容

在底部比如备案信息等可以用footer标签来组织

有时需要侧边栏，就可以用aside标签

语义标签有很多，选择合适的来组织页面架构

4.HTML5 有哪些新特性、移除了那些元素？

八股链接 MDN:HTML5

1. h5增加了很多语义化标签，参考高频3
2. 增加了多媒体支持，比如vedio，audio，还有一个字幕track
3. 增加了图形和效果，canvas，svg（可直接嵌入h5）
4. 表单增强
5. 增加了localStorage和sessionStorage
6. 可以通过Geolocation API获取地理位置
7. 增加了websocket
8. 移除了一些可以用css样式取代的行内样式标签，比如marquee滚动文本

5.请解释HTML中的<meta>标签及其常见用途。

八股链接 MDN:meta

指定字符集charset，比如UTF-8

<meta charset="UTF-8">

页面描述信息，有利于搜索引擎显示你的描述

<meta name="description" content="这是一个关于HTML的介绍页面。">

网站关键词，同样是有助于搜索引擎SEO，但现代搜索引擎已经降低了这个权重

<meta name="keywords" content="HTML, 标签, 元数据">

网站作者信息

<meta name="author" content="张三">

移动端视口设置，这个在很多HTML模版里都很常见

<meta name="viewport" content="width=device-width, initial-scale=1">

搜索引擎爬虫设置

<meta name="robots" content="index, follow">

http-equiv(alent)，刷新页面、重定向等操作

<meta http-equiv="refresh" content="30">

描述网页语言

<meta http-equiv="Content-Language" content="zh-CN">

6.HTML标签分为哪两类？它们之间有什么区别？

八股链接

我看到这个第一眼是有点懵的，然后把两类改成几类后问了一下AI，然后给我一个很长的回答

如果不限定分类数量，那么回答的角度就有很多

但是如果限定为两类，那么角度就比较唯一

就是块级元素和行内元素

那么参考高频2即可