web前端面试题整理（HTML篇）

时间：2023-07-22 23:03:01 | 来源：网站运营

时间：2023-07-22 23:03:01 来源：网站运营

web前端面试题整理（HTML篇）：web前端面试题整理（HTML篇）


需要web前端课程工具和电子书，可以加: 33群105601600; 22群120342833

1. h5的改进:

新元素

画布canvas: HTML5<canvas> 元素用于图形的绘制，通过脚本 (通常是JavaScript)来完成

音频audio

视频video

语义性: article, nav, footer, section, aside, hgroup等.

时间time

新属性

拖放: draggable <img draggable="true">

可编辑: contenteditable

新事件

拖放 ondrag ondrop

关闭页面 onunload

窗口大小改变 onresize

取消了一些元素: font center等

新的DOCTYPE声明 <!DOCTYPEhtml>

完全支持CSS3

Video和Audio

2D/3D制图

本地存储

本地SQL数据

Web应用


2. 什么是语义化的html?

what?

根据内容的结构（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

why?

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；

用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；

有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重

方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；

便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

how?

尽可能少的使用无语义的标签div和span；

在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；

不要使用纯样式标签，如：b、font、u等，改用css设置。

需要强调的文本，可以包含在strong或者em标签中（浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗（不要用b），em是斜体（不用i）；

使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；

表单域要用fieldset标签包起来，并用legend标签说明表单的用途；

每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。


3. 从前端角度出发谈谈做好seo需要考虑什么?

语义化html标签

合理的title, description,keywords;

重要的html代码放前面

少用iframe, 搜索引擎不会抓取iframe中的内容

图片加上alt


4. 文档类型(DOCTYPE)

作用:

doctype声明位于文档中最前面的位置，处于标签之前，告知浏览器使用的是哪种规范。

类型:

三种: Strict、Transitional 以及 Frameset

如果不声明: 不写doctype，浏览器会进入quirks mode （混杂模式）。即，如果不声明doctype，浏览器不引入w3c的标准，那么早期的浏览器会按照自己的解析方式渲染页面。浏览器采用自身方式解析页面的行为称为"quirksmode（混杂模式也称怪异模式）"；采用w3c方式解析就是"strict mode（标准模式）"。 如果完全采用strictmode就不会出任何的差错，但这样会降低程序的容错率，加重开发人员的难度

用哪种:

没有doctype声明的采用quirks mode解析

对于有doctype的大多数采用standard mord。

特殊情况：

对于那些浏览器不能识别的doctype,浏览器采用quirksmode；

没有声明DTD或者html版本声明低于4.0采用quirks mode，其他使用standard mode；

ie6中，如果在doctype声明前有一个xml声明(比如:<?xmlversion="1.0" encoding="iso-8859-1"?>)，则采用quirks mode解析

标准模式与怪异模式的区别:

标准模式：浏览器根据规范呈现页面

混杂模式（怪异模式）：页面以一种比较宽松的兼容方式显示。

他们最大的不同是对盒模型的解析。

在strict mode中 ：width是内容宽度 ，也就是说,元素真正的宽度 = margin-left +border-left-width + padding-left + width + padding-right + border-right- width+ margin-right;

在quirks mode中 ：width则是元素的实际宽度 ，内容宽度 = width - (margin-left +margin-right + padding-left + padding-right + border-left-width + 　border-right-width)


5.使用XHTML的局限有哪些?

XHTML较为严格，标签必须闭合，必须要body，head等

如果页面使用 'application/xhtml+xml' 一些老的浏览器并不兼容


6. 如果网页内容需要多语言,要怎么做?

采用统一编码utf-8模式

需要web前端课程工具和电子书，可以加: 33群105601600; 22群120342833

【内容展示有限，可以加群下载，群文件会定期更新学习资料，以及练手小案例】