前端面试HTML

目录

1、HTML语义化理解？

2、XHTML 和 HTML 有什么区别？

3、DocType作用？严格模式和混杂模式区别？

4、对于 WEB 标准以及 W3C 的理解？

5、前端页面有哪三层构成，分别是什么？作用是什么？

6、HTML5新特性

7、webworker和websocket

8、前端绘图方式Canvas和SVG区别

9、优雅降级和渐进增强？

10、简述一下 src 与 href 的区别？

其他

1、img 上 title 与 alt？

2、div+css 的布局较 table 布局有什么优点？

3、网页验证码是干嘛的，是为了解决什么安全问题？

4、iframe 框架有那些优缺点？

5、为什么用多个域名存储网站资源更有效？

6、浏览器内核？

1、HTML语义化理解？

（1）让人更容易读懂，增加代码可读性。

（3）让搜索引擎更容易读懂，利于SEO

2、XHTML 和 HTML 有什么区别？

一、基础语言不同

（1）XHTML是基于可扩展标记语言（XML）。

（2）HTML是基于标准通用标记语言（SGML）。

二、语法严格程度不同

1、XHTML语法比较严格，存在DTD定义规则。

2、HTML语法要求比较松散，这样对网页编写者来说，比较方便。

三、书写习惯的差别

XHTML 元素必须被正确地嵌套。

XHTML 元素必须有相应的结束标签。

标签的元素和属性的名字必须小写。

属性值加“ ”。

属性值不能简写。

3、DocType作用？严格模式和混杂模式区别？

参考：Doctype作用？严格模式（标准模式）和混杂模式（怪异模式、兼容模式）区别？

4、对于 WEB 标准以及 W3C 的理解？

web 标准简单来说可以分为结构、表现和行为。其中结构主要是有 HTML 标签组成。或许通俗点说，在页面 body 里面我们写入的标签都是为了页面的结构。表现即指 css 样式表，通过 css 可以是页面的结构标签更具美感。行为是指页面和用户具有一定的交互，同时页面结构或者表现发生变化，主要是有 js 组成。

web 标准一般是将该三部分独立分开，使其更具有模块化。但一般产生行为时，就会有结构或者表现的变化，也使这三者的界限并不那么清晰。

W3C 对 web 标准提出了规范化的要求，也就是在实际编程中的一些代码规范：包含如下几点

1.对于结构要求：（标签规范可以提高搜索引擎对页面的抓取效率，对 SEO 很有帮助）

1）标签字母要小写

2）标签要闭合

3）标签不允许随意嵌套

2.对于 css 和 js 来说

1）尽量使用外链 css 样式表和 js 脚本。是结构、表现和行为分为三块，符合规范。同时提高页面渲染速度，提高用户的体验。

2）样式尽量少用行间样式表，使结构与表现分离，标签的 id 和 class 等属性命名要做到见文知义，标签越少，加载越快，用户体验提高，代码维护简单，便于改版

3）不需要变动页面内容，便可提供打印版本而不需要复制内容，提高网站易用性。

5、前端页面有哪三层构成，分别是什么？作用是什么？

结构层、表示层、行为层。

（1）结构层（structural layer）

由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

（2）表示层（presentation layer）

由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

（3）行为层（behaviorlayer）

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

6、HTML5新特性

语义化更好的内容标签 header、footer、nav、aside、article、section

音视频API audio、video

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

本地离线存储 localStorage和sessionStorage

画布Canvas API

新的技术webｗorker、websocket

参考：html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

7、webworker和websocket

Web Worker让JS有了多线程的能力，可以将复杂耗时的操作都交付给Worker线程处理。

WebSocket让web端与服务端维持一个有效的长连接，实现服务端主动推送数据。

参考：WebWorker与WebSocket实现前端消息总线

8、前端绘图方式Canvas和SVG区别

echarts 底层基于canvas ,highcharts 底层基于svg

1、绘制的图片格式不同

Canvas像素图（位图，依赖分辨率），能够以 .png 或 .jpg 格式保存结果图像；SVG矢量图（不依赖分辨率，放大不失帧）

2、Canvas不支持事件处理器，SVG支持事件处理器

Canvas 绘制的图像都在Canvas这个画布里面，是Canvas的一部分，不能用js获取已经绘制好的图形元素；SVG绘图每个图形都是以DOM节点的形式插入到页面中，可以用js或其他方法直接操作。SVG 每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。

3、适用范围不同

由于Canvas 和 SVG 的工作机制不同，Canvas是逐像素进行渲染的，一旦图形绘制完成，就不会继续被浏览器关注。如果其位置发生变化，那么整个场景也需要重新绘制；而SVG是通过DOM操作来显示的。

所以Canvas的文本渲染能力弱，Canvas 最适合有许多对象要被频繁重绘的图形密集型游戏；SVG由于DOM操作，在复杂度高的游戏应用中会减慢渲染速度。所以不适合在游戏应用。适合带有大型渲染区域的应用程序，比如地图。

参考：前端绘图方式Canvas和SVG的区别

9、优雅降级和渐进增强？

优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后再针对低版本浏览器进行兼容。比如一开始使用 CSS3 的特性构建了一个应用，然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

10、简述一下 src 与 href 的区别？

src用于替换当前元素，href用于在当前文档和引用资源之间确立联系。

src指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求src资源时会将其指向的资源下载并应用到文档内，例如js脚本，img图片和frame等元素。 当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕。（建议将js脚本放在底部而不是头部 ）

href指向网络资源所在位置，建立和当前元素（锚点<a>）或当前文档（链接<link>）之间的链接。并行下载资源并且不会停止对当前文档的处理。（建议使用link方式来加载css，而不是使用@import方式）

其他

1、img 上 title 与 alt？

alt 是图片加载失败时显示在网页上的替代文字。

title 是鼠标放在图片上面时显示的文字，title 是对图片的描述和进一步的说明。

alt 是 img 必要的属性，而 title 不是。搜索引擎对图片意思的判断，主要是靠 alt 属性。

2、div+css 的布局较 table 布局有什么优点？

• 改版的时候更方便 只要改 css 文件。
• 页面加载速度更快、结构化清晰、页面显示简洁。
• 表现与结构相分离。
• 易于优化（seo）搜索引擎更友好，排名更容易靠前

3、网页验证码是干嘛的，是为了解决什么安全问题？

1. 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水
2. 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

4、iframe 框架有那些优缺点？

优点：

（1）iframe 能够原封不动的把嵌入的网页展现出来。

（2）如果有多个网页引用 iframe，那么你只需要修改 iframe 的内容，就可以实现调用的每一个页面内容的更改，方便快捷。

（3）网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用 iframe 来嵌套，可以增加代码的可重用。

（3）如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由 iframe 来解决。

缺点：

（1）iframe 会阻塞主页面的 Onload 事件。

（2）iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载。

（3）搜索引擎的检索程序无法解读这种页面，不利于 SEO。

（4）框架结构中出现各种滚动条。

5、为什么用多个域名存储网站资源更有效？

• CDN 缓存更方便；

• 突破浏览器并发限制；

• 节约 cookie 带宽；

• 节约主域名的连接数，优化页面响应速度；

• 防止不必要的安全问题。

6、浏览器内核？

五大主流浏览器，四大内核

IE 浏览器: Trident;

Chrome浏览器 : 以前是Webkit内核，现在是Webkit的分支Blink内核；

Firefox浏览器：Gecko内核;

Opera 浏览器： 最初是自己的Presto内核，后来是Webkit，现在是Blink内核;

Safari苹果浏览器：Webkit内核；

最后

以上就是粗犷耳机为你收集整理的前端面试HTML的全部内容，希望文章能够帮你解决前端面试HTML所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。