【愚公系列】2023年03月 其他-Web前端基础面试题（HTML_23道）

前言

HTML (HyperText Markup Language) 是一种用来创建网页的标准标记语言。它使用标签来描述文档的结构和内容，例如标题、段落、图像等。浏览器会读取 HTML 文档并根据其中的标记来显示内容。

HTML 有很多不同的标签，每个标签都有特定的含义。例如， 标签表示段落， 标签表示标题。标签通常是对称的，也就是说，开始标签对应结束标签。例如，一个段落的开始标签是 ，结束标签是 。

HTML 使用属性来提供关于标签的附加信息。例如，图像标签 可以使用 src 属性来指定图像文件的位置。

HTML 是一种基础技术，被广泛用于创建网页和网站。它与其他技术，如 CSS 和 JavaScript，经常配合使用，用于创建复杂的网页和网站。

一、 HTML

1、 对HTML语义化的理解

语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫爬取有效信息，有利于SEO。除此之外，语义类还支持读屏软件，根据文章可以自动生成目录；

对开发者友好，使用语义类标签增强了可读性，结构更加清晰，开发者能清晰的看出网页的结构，便于团队的开发与维护。

常见的语义化标签：

<header></header> 头部
<nav></nav> 导航栏
<section></section> 区块（有语义化的div）
<main></main> 主要区域
<article></article> 主要内容
<aside></aside> 侧边栏
<footer></footer> 底部

2、html document是干嘛的？

HTML即：超文本标记语言，标准通用标记语言的一个应用，“超文本”就是指页面内可以包含图片、链接、甚至音乐、程序等非文字元素。

HTML Document即：HTML Document对象，每个载入浏览器的HTML文档都会成为Document对象

由于Document对象是window对象的一部分，所以可通过window.document属性对其进行访问。

3、DOCTYPE有什么作用

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。

4、什么是严格模式与混杂模式？

严格模式：是以浏览器支持的最高标准运行

混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

5、head 标签有什么作用，其中什么标签必不可少？

head标签用于定义文档的头部，它是所有头部元素的容器。 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。

文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。

下面这些标签可用在 head 部分：<base>, <link>, <meta>, <script>, <style>, <title>。

其中 <title> 定义文档的标题，它是 head 部分中唯一必需的元素。

6、什么是WEB标准？什么是W3C标准？

1、Web标准不是某一个标准，而是一系列标准的集合
web标准简单来说可以分为结构、表现和行为
结构 主要是有HTML标签组成
表现 即指css样式表
行为 主要是有js、dom组成
web标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。
2、W3C对于WEB标准提出了规范化的要求
1）标签和属性名字母要小写
2）标签要闭合
3）标签不允许随意嵌套
4）尽量使用外链css样式表和js脚本。让结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。
5）样式尽量少用行间样式表，使结构与表现分离
6）标签的id和class等属性命名要做到见文知义，更利于seo，代码便于维护

7、HTML 的注释怎样写？

HTML 中的注释也叫"注释标签"。

“<- -” ，表示注释的开始，"- ->" 表示注释的结束。

8、src和href的区别？

src和href都是用来引用外部的资源，它们的区别如下：

src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内，如请求js脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般js脚本会放在页面底部。

href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它他指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在a、link等标签上。

9、常见的块标签和内联标签以及内联块标签的区别？ 空(void)元素有那些？

块级标签：单独占一行，可以设置宽高等样式h1 h2 h3 h4 h5 h6 p div ul li ol dl dt dd

内联标签（行内标签）在同一行显示，不可以设置宽度，宽高由内容撑开strong b em i span

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签：

常见的有：<br>、<hr>、<img>、<input>、<link>、<meta>；

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

strong标签有语义，是起到加重语气的效果，而b标签是没有的，b标签只是一个简单加粗标签。b标签之间的字符都设为粗体，strong标签加强字符的语气都是通过粗体来实现的，而搜索引擎更侧重strong标签。

title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取有很大的影响

i内容展示为斜体，em表示强调的文本

11、 label 的作用是什么？如何使用？

label标签来定义表单控件的关系：当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上。

使用方法1：

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>

使用方法2：

<label>Date:<input type="text"/></label>

12、如何合并表格单元格

rowspan="2"表示从设置的td单元格开始向下合并两个单元格

colspan="2"表示自左向右合并两个单元格。

8、Thead,tbody,tfoot的作用

thead 表格的头 用来放标题之类的东西

tbody 表格的身体 放数据本体

tfoot 表格的脚 放表格的脚注之类

13、标签上title属性与alt属性的区别是什么？

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。

14、标签应该如何合理嵌套？

合理嵌套HTML标签，ul和li是固定嵌套，ul的直接子元素必须是li标签，ol和li是固定嵌套，ol的直接子元素必须是li。Dl,dt，dd是固定嵌套，dl的直接子元素必须是dt和dd,dt和dd是兄弟元素。

块标签可以套其他的标签，但是p标签除外，p标签不能嵌套其他的块标签，内联标签不能嵌套块标签(a标签特殊)，a标签不允许嵌套a标签和其他有交互作用的标签。块级元素与块级元素并列、内嵌元素与内嵌元素并列。

15、png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过webp？

1. png是便携式网络图片（Portable Network Graphics）是一种无损数据压缩位图文件格式.优点是：压缩比高，色彩好。 大多数地方都可以用。

2. jpg是一种针对相片使用的一种失真压缩方法，是一种破坏性的压缩，在色调及颜色平滑变化做的不错。在www上，被用来储存和传输照片的格式。

3. gif是一种位图文件格式，以8位色重现真色彩的图像。可以实现动画效果.

4. webp格式是谷歌在2010年推出的图片格式，压缩率只有jpg的2/3，大小比png小了45%。缺点是压缩的时间更久了，兼容性不好，目前谷歌和opera支持。

16、表单提交中Get和Post方式的区别

Get 一般用于从服务器上获取数据，Post 向服务器传送数据

Get 传输的数据是拼接在Url之后的，对用户是可见的；Post 的传输数据对用户是不可见的

Get 传送的数据量较小，不能大于 2KB。Post 传送的数据量较大，一般被默认为不受限制

Get 安全性非常低，Post 安全性较高

在 FORM 提交的时候，如果不指定 Method，则默认为 Get 请求

17、meta标签的name属性值

name 属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。
meta标签的name属性语法格式是：＜meta name="参数" content="具体的参数值"＞。
其中name属性主要有以下几种参数：
A 、Keywords(关键字)说明：keywords用来告诉搜索引擎你网页的关键字是什么。
B 、description(网站内容描述) 说明：description用来告诉搜索引擎你的网站主要内容.
C 、robots(机器人向导)说明：robots用来告诉搜索机器人哪些页面需要索引，哪些页面不需要索引。
content的参数有all,none,index,noindex,follow,nofollow,默认是all。
举例：＜meta name="robots" content="none"＞D 、author(作者)

18、sass是什么？

sass是css预处理语言，无法直接运行在浏览器，需要其他的编译框架进行二次编译以后才可以在浏览器中运行。sass提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护

二、HTML5

19、HTML5 为什么只需要写 ？

（1）HTML5不基于SGML，因此不需要对DTD进行引用，但是需要DOCTYPE来规范浏览器的行为（让浏览器按照它们应该的方式来运行）；

（2）HTML4.01基于SGML，所以需要对DTD进行引用，才能让浏览器知道该文档所使用的文档类型。

20、Html5 有哪些新特性、移除了哪些元素?

新增元素：

• 绘画canvas

• 用于媒介回放的video 和 audio元素

• 本地离线存储localStorage长期存储数据，浏览器关闭后数据不丢失

• sessionStorage的数据在浏览器关闭后自动删除

• 语义化更好的内容元素，比如 article 、footer、header、nav、section

• 表单控件 ，calendar 、 date 、 time 、 email 、 url 、 search

• 新的技术 webworker 、 websocket 、 Geolocation

移除的元素：

• 纯表现的元素： basefont 、 big 、 center 、 font 、 s 、 strike 、 tt 、 u

• 对可用性产生负面影响的元素： frame 、 frameset 、 noframes

支持 HTML5 新标签：

• IE8/IE7/IE6支持通过 document.createElement方法产生的标签

• 可以利用这一特性让这些浏览器支持 HTML5新标签

• 浏览器支持新标签后，还需要添加标签默认的样式

21、如何区分 HTML 和 HTML5？

(1）在文档类型声明上不同：
HTML是很长的一段代码，很难记住，而HTML5却只有简简单单的声明，方便记忆。
(2）在结构语义上不同：
HTML：没有体现结构语义化的标签，通常都是这样来命名的，这样表示网站的头部。
HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：

22、HTML5的离线储存怎么使用，工作原理解释一下？

localStorage 长期存储数据，浏览器关闭后数据不丢失；
sessionStorage 数据在浏览器关闭后自动删除。

23、HTML5 Canvas元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在HTML上进行图形操作，