前端面试常见问题之HTML_常见问题html demo-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40781291/article/details/104148364

本文全面解析前端面试常见问题，涵盖cookie、WebStorage、HTML语义化、浏览器特性、元素类型及网页验证码等核心知识点，助你提升表达能力，备战前端面试。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

总结一些常见的面试问题，来查缺补漏

前言

总结一些常见的面试问题，查缺补漏也锻炼锻炼自己的表达能力，每天都会更新，用心来看，相信会有收获。作者只是一枚大三的学生，如有错误还往指正，感激不尽。如果觉得写还阔以，请万万不要吝啬手中的赞。据说不点赞都会变成下图。闪人~
在这里插入图片描述

谈一谈cookie

cookie简介
cookie是什么：cookie是一个小文本文件，用于在客户端和服务器之间通信时保存客户端状态。（比如登录信息等）
cookie的作用：为了解决HTTP1.0不能够保存客户端状态的问题从而设置cookie。
cookie工作流程：
来直接看图吧，客户端发起需要记录的请求后，服务器响应返回set-cookie字段，标记客户端，再下一次的请求时就可以在请求头中携带该cookie。
cookie的弊端
数量和大小限制：一般一个域名下最多只有20个cookie。对于浏览器而言cookie不一致，IE6或更低最多设置20个cookie，IE7以上最多可设置50个。Firefox最多可设置50个。Safari和Chrome无限制。每个cookie最大为4KB，超过部分会被截掉。
资源占用：多个cookie可能会占用资源。
安全性问题：cookie一旦被人拦截，即使加密也没有作用，拦截者只需要转发cookie就可以利用客户端状态。（这一点可以控制cookie生命周期，使拦截者可能会获取过期的cookie）。
cookie的属性
如何查看cookie？
可以在控制台使用doucment.cookie（只能获取未设置HttpOnly的cookie）
如何改变cookie？
在控制台document.cookie = "name = value "
也可以在开发者工具中存储查看，如图所示：

主要说明HttpOnly和Secure这两个属性
HttpOnly可防止XSS攻击，只能由服务器端设置，一旦设置客户端将不能改变cookie。
Secure设置即表示只有安全下才发送cookie，仅用于HTTPS协议

谈一谈WebStorage

HTML5中提供了浏览器的本地存储，即WebStorage，最大的大小为5M，包括以下两种：localStorage和sessionStorage

localStorage：本地存储。只能客户端主动删除或封装失效时间。
sessionStorage：本地回话存储，结束回话（跳转或关闭网页）则删除。

对比cookie和WebStorage

失效时间
cookie可设置最大失效时间
localStorage需要封装失效时间或主动删除
sessionStorage结束回话即失效
大小
cookie最大为20KB
WebStorage最大可5M
与服务器交互
cookie数据会在浏览器和服务器之间交互
WebStorage只会存储在客户端，不予服务器交互
API
cookie需要自己封装方法
WebStorage有已封装方法如：getItem,setItem,deleteItem。

HTML篇

谈一谈HTML语义化

解释：用正确的标签做正确的事。
作用：

对人：增强可读性，开发人员不需要CSS样式也能够理解网页内容和样式。
对机器：利于SEO，使得搜索引擎爬虫更好的爬取有效信息。爬虫可以依赖于标签来确定权重和上下文；还利于读屏软件。

HTML语义化例子：

<p>标签表示段落
<header>标签表示介绍性元素
<footer>标签表示尾部元素
<address>,<strong>,<time>等

区分一下几个标签

title和h1
两者都会展示成标题的样式。
title标签只单纯表示标题，并无其他意义。
h1标签则表示层次明确的标题。
b和strong
两者都会展示成加粗样式。
b标签表示加粗显示。
strong标签表示语义强调，朗读设备中会重读。
em和i
两者都展示成斜体样式。
i标签表示斜体展示。
em标签表示语义强调，但也是斜体展示。

谈谈常见的浏览器

Chrome
Google推出，Webkit内核，内置强大的JavaScript引擎——V8引擎。自动更新。
Safari
Apple推出，Webkit内核。
Firefox
Mozilla推出，Gecko内核，OdinMonkey引擎。自动更新。
IE
微软推出，Trident 内核，W3C支持较差，IE10启才开始支持ES6。

谈谈块级元素、行内元素和空元素

CSS规范规定，每个元素都有他的display属性来确定元素的类型。比如div元素的display属性就是block，也就是块级元素。再比如span元素的display属性就是inline，也就是行内元素。而对于本身并没有内容（结束标签）的元素也就是空元素。
常见块级元素:<div>,<p>,<h1~h6>,<ol>,<ul>,<li>,<dl>,<dt>,<dd>
常见行内元素:<span>,<img>,<strong>,<input>,<select>
常见空元素:<img>,<\br>,<hr>,<input>,<keygen>,<embaed>

谈谈网页验证码

为了验证是否是真人操作而设置的验证码，由客户端请求验证码，服务端返回，客户端再次请求验证码是否正确，最后由服务器端进行验证（并非浏览器端）。

谈谈文档标记类型

<!DOCTYPE>的作用
文档标记类型<!DOCTYPE>，处于HTML文档的第一行。用于声明正确的HTML版本，使得浏览器正确解析并显示网页内容。
区分标准模式和兼容模式
标准模式：样式与Js运作模式均以浏览器支持的最高标准运行。
兼容模式：页面向后兼容的方式运行，将会模拟老式浏览器的行为防止网站无法运行。
注：如果文档标记类型<DOCTYPE>声明错误，文档将以兼容模式呈现。
为什么HTML5只需要写<!DOCTYPE HTML>
HTML5不基于SGML，因此不需要对DTD进行引用，但也需要对文档声明来规范浏览器行为。
HTML4.0.1基于SGML，因此需要对DTD进行引用。

谈谈`<iframe>`标签有什么作用？有什么缺点？

<iframe>是HTML5新增，用于创建包含另一文档的内联框架。
<iframe>的缺点

阻塞主页面的onLoad()事件
window的onload事件只有当<iframe>加载完时才可以触发，在Chrome和Safari中可以动态设置<iframe>的src来解决这一问题。
搜索引擎无法处理，不利于SEO
与主页面共享连接池
浏览器对相同域有连接池的限制，增加<iframe>将会占用连接池，影响性能。

多数用AJAX来代替<iframe>

谈谈`<label>`标签

<label>标签可作为表单中的简单标记，还可以控制表单内的焦点。
方法就是通过<label>标签中的for属性与其他元素的id属性相关联。

HTML5中表单如何关闭自动完成功能

autocomplete = off

谈谈`<input>`标签和`<textarea>`标签的区别

类型设置
input标签可以通过type来自定义类型，而textarea标签只能够输入文字。
大小宽度
input标签为单行标签，而textarea标签为多行标签，可以通过rows和cols来设置宽度和高度。并支持拖拽大小
标签对比
input标签为空标签，没有关闭标签；textarea标签有闭合标签

如何用`<div>`来模拟`<textarea>`标签

谈谈`WebSocket`如何兼容低浏览器

使用轮询或长连接的方式实现伪Websocket通信。
通过flash来实现Websocket的客户端。

如何实现浏览器内多个标签页的通信

基于Websocket的全双共通信
基于cookie和setInterval方法
基于localStorage的storage方法
基于HTML5提供的SharedWorked

谈谈HTML5的离线存储

建立离线存储
建立同名的.manifest文件，在<html>标签中引入
小demo:
页面为index.html，建立缓存文件index.manifest
<html lang="en" manifest="index.manifest"></html>
离线存储和WebStorage的区别

WebStorage不能够跨越不同浏览器，只能存储字符串类型的对象。生命周期不一致
manifest可跨越不同浏览器，能够存储CSS,HTML,img等类型的文件。一般由后端进行修改。

谈谈HTML5新特性

HTML5新特性：HTML5是下一代的HTML，不基于SGML。

语义化标签
表单功能更加丰富
视频audio和音频video等媒体应用
新的图形化标签:Canvas和SVG
地理位置
可拖放的API
新的技术:WebStorage, WebSocket,WebWorker

谈谈HTML5新标签的兼容性

针对老式浏览器：会将H5新元素作为inline元素处理，需要设置其CSS样式为block
针对傻缺IE8及以下的浏览器不允许未知元素

通过document.createElement(' ');来自定义标签，并设置其CSS样式。
还可以用<script>引入通用的HTML5框架。

<!--[If It IE 9]><script scr="url"> <script><![endif]-->

谈谈HTML5移除的元素

列举常见的

移除元素	替代元素
`<big>`	CSS样式
`<center>`	CSS样式
`<font>`	CSS样式
`<acronym>`字母缩写	`<abbr>`
`<frame>`,`<frameset>`,`<noframes>`	`<iframe>`

如何区分HTML和HTML5？

通过结构样式表的声明!DOCTYPE
语义化标签

谈谈.html文件和.htm文件的区别

没有本质区别，只适用于不同环境
.htm文件为兼容早起DOS系统(8+3)
Linux系统必须为.html文件
优先解释.html文件

如何在移动端忽略页面数字识别成电话号码？忽略自动识别邮件呢？忽略自动跳转地图呢？

<meta name="fomat-detection" content="telephone=no,email=noadddress=no">