2022前端面经--HTML

Echo$

已于 2022-09-18 23:19:18 修改

阅读量448

点赞数

分类专栏：面经文章标签：前端 html

于 2022-09-18 21:25:39 首次发布

本文链接：https://blog.csdn.net/pretend88/article/details/126923413

版权

面经专栏收录该内容

4 篇文章 1 订阅

订阅专栏

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

title（网页标题，针对搜索引擎和用户）属性没有明确意义只表示是个标题，H1（文章主题，主要面对用户，显示在网页中）则表示层次明确的标题，对页面信息的抓取也有很大的影响;（seo）
strong（逻辑标签）是标明重点内容，有语气加强的含义，使用阅读设备阅读网络时，<strong> 会重读，而<b>（物理标签）是展示强调内容。
i 内容展示为斜体，em表示强调的文本；
em 表示强调， strong 表示更加强烈的强调
em表示局部的强调（段落），strong表示全局的强调（全文）
物理元素是告诉浏览器我应该以何种格式显示文字，逻辑元素告诉浏览器这些文字有怎么样的重要性。

2、WEB标准以及W3C标准是什么?

标签闭合
标签小写
不乱嵌套
使用外链css和js
结构行为表现的分离（HTML结构、CSS表现、JavaScript行为）

3、块级元素和行内元素

块级元素：通常都会独占一行或者是多行，可以对其单独设置高度,宽度以及对齐等属性。

块级元素的特点：

块级元素会独占一行
高度，行高，外边距和内边距都可以单独设置
宽度默认是容器的100%
可以容纳内联元素和其他的块级元素

常见的块级元素有：<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>	等

address – 地址
blockquote – 块引用
center – 举中对齐块
dir – 目录列表
div – 常用块
dl – 定义列表
form – 交互表单
h1 – 大标题
h2 – 副标题
h3 – 3级标题
h4 – 4级标题
h5 – 5级标题
h6 – 6级标题
hr – 水平分隔
menu – 菜单列表
ol – 有序表单
p – 段落
pre – 格式化文本
table – 表格
ul – 无序列表

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。一般不可以设置宽度，高度以及对齐等属性

行内元素的特点：

和相邻的行内元素在一行上
高度和宽度无效，但是水平方向上的padding和margin可以设置，垂直方向上的无效
默认的宽度就是它本身的宽度
行内元素只能容纳纯文本或者是其他的行内元素（a标签除外）

常见的行内元素有：<a>,<strong>,<>input>,<image>,<b>,<em>,<del>,<span>等

a – 锚点
abbr – 缩写
acronym – 首字
b – 粗体(不推荐)
bdo – bidi override
big – 大字体
br – 换行
cite – 引用
code – 计算机代码(在引用源码的时候需要)
dfn – 定义字段
em – 强调
font – 字体设定(不推荐)
i – 斜体
img – 图片
input – 输入框
kbd – 定义键盘文本
label – 表格标签
q – 短引用
s – 中划线(不推荐)
samp – 定义范例计算机代码
select – 项目选择
small – 小字体文本
span – 常用内联容器，定义文本内区块
strike – 中划线
strong – 粗体强调
sub – 下标
sup – 上标
textarea – 多行文本输入框
tt – 电传文本
u – 下划线

行内块级元素

在行内元素中有几个特殊的标签，<img/>,<input/>,<td/>,可以设置它们的宽高度以及对齐属

行内块级元素的特点：

和相邻的行内元素（行内块）在一行上，但是中间会有空白的间隙
默认的宽度就是本身内容的宽度
高度，行高，内边距和外边距都可以设置

转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块元素：display: inline-block;

4、H5的语义化标签以及语义化作用

语义化标签：header, footer, nav, article, aside, section,mark,details,summary

- 简单来说：用正确的标签做正确的事情！
- HTML语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
- 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的。
- 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解

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

- 1. 语义化标签
- 1. 增强型表单
- 1. 视频和音频
- 1. canvas绘图
- 1. svg绘图
- 1. 地理定位
- 1. 拖放API
- 1. webworker
- 1. websocket
- 1. webstorage

HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务等功能的增加

绘画 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新标签
浏览器支持新标签后，还需要添加标签默认的样式
当然也可以直接使用成熟的框架、比如html5shim

5、前端注意哪些SEO?

合理的title、description、keywords：搜索对着三项的权重逐个减小，title值强调重点即可，重要关键词出现不要超过2次，而且要靠前，不同页面title要有所不同；description把页面内容高度概括，长度合适，不可过分堆砌关键词，不同页面description有所不同；keywords列举出重要关键词即可
语义化的HTML代码，符合W3C规范：语义化代码让搜索引擎容易理解网页
重要内容HTML代码放在最前：搜索引擎抓取HTML顺序是从上到下，有的搜索引擎对抓取长度有限制，保证重要内容一定会被抓取
重要内容不要用js输出：爬虫不会执行js获取内容
少用iframe：搜索引擎不会抓取iframe中的内容
非装饰性图片必须加alt
提高网站速度：网站速度是搜索引擎排序的一个重要指标

6、从浏览器地址栏输入url到显示页面的步骤

简略回答

浏览器根据请求的URL交给DNS域名解析，找到真实IP，向服务器发起请求；
服务器交给后台处理完成后返回数据，浏览器接收文件（HTML、JS、CSS、图象等）；
浏览器对加载到的资源（HTML、JS、CSS等）进行语法解析，建立相应的内部数据结构（如HTML的DOM）；
载入解析到的资源文件，渲染页面，完成。

详细回答

从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）
开启网络线程到发出一个完整的HTTP请求（这一部分涉及到dns查询，TCP/IP请求，五层因特网协议栈等知识）
从服务器接收到请求到对应后台接收到请求（这一部分可能涉及到负载均衡，安全拦截以及后台内部的处理等等）
后台和前台的HTTP交互（这一部分包括HTTP头部、响应码、报文结构、cookie等知识，可以提下静态资源的cookie优化，以及编码解码，如gzip压缩等）
单独拎出来的缓存问题，HTTP的缓存（这部分包括http缓存头部，ETag，catch-control等）
浏览器接收到HTTP数据包后的解析流程（解析html-词法分析然后解析成dom树、解析css生成css规则树、合并成render树，然后layout、painting渲染、复合图层的合成、GPU绘制、外链资源的处理、loaded和DOMContentLoaded等）
CSS的可视化格式模型（元素的渲染规则，如包含块，控制框，BFC，IFC等概念）
JS引擎解析过程（JS的解释阶段，预处理阶段，执行阶段生成执行上下文，VO，作用域链、回收机制等等）
其它（可以拓展不同的知识模块，如跨域，web安全，hybrid模式等等内容）

7、如何进行网站性能优化

content 方面

减少HTTP请求：合并文件、CSS精灵、inline Image（内联图片）
减少DNS查询：DNS缓存、将资源分布到恰当数量的主机名
减少DOM元素数量
Cookie 方面

减小cookie大小
Server 方面

使用CDN
配置ETag(实体标签)
对组件使用Gzip压缩
图片 方面

优化图片：根据实际颜色需要选择色深、压缩
优化css精灵
不要在HTML中拉伸图片
css 方面

将样式表放到页面顶部
不使用CSS表达式
使用<link>不使用@import(link是同时加载，import是页面加载完后再加载)
js 方面

将脚本放到页面底部
将javascript和css从外部引入
压缩javascript和css
删除不需要的脚本
减少DOM访问

8、对浏览器内核的理解

主要分成两部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎
渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核
JS引擎则：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

9、页面访问cookie的限制条件

cookie （储存在用户本地终端上的数据）

cookie 指某些网站为了辨别用户身份、进行 session 跟踪而储存在用户本地终端上的数据。cookie 在网络系统中几乎无处不在，当我们浏览以前访问过的网站时，网页中可能会出现：你好 XXX。

1. 跨域问题：

cookie允许Web开发者保留他们的用户的登录状态。但是当你的站点有一个以上的域名时就会出现问题了。在cookie规范上说，一个cookie只能用于一个域名，不能够发给其它的域名。因此，如果在浏览器中对一个域名设置了一个cookie，这个cookie对于其它的域名将无效。

解决：

通过nginx反向代理
jsonp方式请求

2. 设置了HTTP only：

如果在cookie中设置了HttpOnly属性，那么通过程序(JS脚本、Applet等)将无法读取到cookie信息，这样能有效的防止XSS攻击。

10、cookie的作用与弊端

cookie的作用

可以在客户端上保存用户数据，起到简单的缓存和用户身份识别等作用。
保存用户的登陆状态，用户进行登陆，成功登陆后，服务器生成特定的cookie返回给客户端，客户端下次访问该域名下的任何页面，将该cookie的信息发送给服务器，服务器经过检验，来判断用户是否登陆。
记录用户的行为。

cookie弊端

增加流量消耗，每次请求都需要带上cookie信息。
安全性隐患，cookie使用明文传输。如果cookie被人拦截了，那人就可以取得所有的session信息。
Cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉

11、介绍cookie的属性

在chrome控制台中的Application选项卡中可以看到cookie的信息。

一个域名下面可能存在着很多个cookie对象。但一个cookie只能用于一个域名，不能够发给其它的域名。

Name：为一个cookie的名称（用 JavaScript 操作 Cookie 的时候注意对 Value 进行编码处理。）
value：为一个cookie的值（用 JavaScript 操作 Cookie 的时候注意对 Value 进行编码处理。）
Domain：为可以访问此cookie的域名

注：二级域名能读取设置了domain为顶级域名或者自身的cookie，不能读取其他二级域名domain的cookie。所以要想cookie在多个二级域名中共享，需要设置domain为顶级域名，这样就可以在所有二级域名里面获得到这个cookie的值了。

顶级域名只能获取到domain设置为顶级域名的cookie，其他domain设置为二级域名的无法获取。

Path：为可以访问此cookie的页面路径。比如domain是abc.com,path是/test，那么只有/test路径下的页面可以读取此cookie
Expires：字段为此cookie超时时间。若设置其值为一个时间，那么当到达此时间后，此cookie失效。不设置的话默认值是Session，意思是cookie会和session一起失效。当浏览器关闭(不是浏览器标签页，而是整个浏览器) 后，此cookie失效。

Set-Cookie: id=a3fWa; Expires=Wed, 21 Oct 2015 07:28:00 GMT;

当为会话性 Cookie 的时候，值保存在客户端内存中，并在用户关闭浏览器时失效。需要注意的是，有些浏览器提供了会话恢复功能，这种情况下即使关闭了浏览器，会话期 Cookie 也会被保留下来，就好像浏览器从来没有关闭一样。

与会话性 Cookie 相对的是持久性 Cookie，持久性 Cookies 会保存在用户的硬盘中，直至过期或者清除 Cookie。这里值得注意的是，设定的日期和时间只与客户端相关，而不是服务端。

Max-Age：Max-Age用于设置在 Cookie 失效之前需要经过的秒数。比如：

Set-Cookie: id=a3fWa; Max-Age=604800;

Max-Age 可以为正数、负数、甚至是 0。

如果 max-Age 属性为正数时，浏览器会将其持久化，即写到对应的 Cookie 文件中。

当 max-Age 属性为负数，则表示该 Cookie 只是一个会话性 Cookie。

当 max-Age 为 0 时，则会立即删除这个 Cookie。

假如 Expires 和 Max-Age 都存在，Max-Age 优先级更高。

Size：cookie大小
HttpOnly：若此属性为true，则只有在http请求头中会带有此cookie的信息，而不能通过document.cookie来访问此cookie。
Secure：设置是否只能通过https来传递此条cookie。使用 HTTPS 安全协议，可以保护 Cookie 在浏览器和 Web 服务器间的传输过程中不被窃取和篡改。

13、Web Worker和Web Socket

Web Worker: 为JavaScript创造多线程环境

Web worker的作用，就是为JavaScript创造多线程环境，允许主线程创建worker线程，将一些任务分配给后者运行，worker线程可以负担一些计算密集型或高延迟的任务

Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。

注意：

分配给worker线程运行的脚本文件，必须与主线程的脚本文件同源
worker无法操作DOM
worker线程与主线程必须通过消息完成(postMessage, onMessage)
worker线程不能执行alert()方法和confirm()方法
worker线程无法读取本地文件

Web socket: 一种通信协议，服务器可以主动给客户端推送消息

Web Worker 传送门

14、xhtml和html有什么区别?

功能上的差别

主要是XHTML可兼容各大浏览器、手机以及PDA，并且浏览器也能快速正确地编译网页
书写习惯的差别

XHTML 元素必须被正确地嵌套，闭合，区分大小写，文档必须拥有根元素

15、doctype 的作用？严格模式与混杂模式如何区分？它们有何意义？

DOCTYPE是document type (文档类型) 的缩写。 < !DOCTYPE > 声明位于文档的最前面，处于标签之前，它不是html标签。主要作用是告诉浏览器的解析器使用哪种HTML规范或者XHTML规范来解析页面。

严格模式和混杂模式都是浏览器的呈现模式，浏览器究竟使用混杂模式还是严格模式呈现页面与网页中的DTD（文件类型定义）有关，DTD里面包含了文档的规则。比如：loose.dtd

严格模式：又称标准模式，是指浏览器按照W3C标准来解析代码，呈现页面
混杂模式：又称为怪异模式或者兼容模式，是指浏览器按照自己的方式来解析代码，使用一种比较宽松的向后兼容的方式来显示页面。

16、HTML5 为什么只需写< !DOCTYPE HTML> ?

HTML5不基于 SGML （标准通用标记语言），因此不需要对DTD（ DTD 规定了标记语言的规则，这样浏览器才能正确地呈现内容。）进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）。

而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

17、iframe有那些缺点？

iframe会阻塞主页面的Onload事件
搜索引擎的检索程序无法解读这种页面，不利于SEO
- iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载
使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题