前端面试题搜集之二——HTML

深碍√TFBOYSˉ_ 2022-09-24 10:22 174阅读 0赞

# **前端面试题搜集之二——HTML** #

--------------------

本文为转载文，将原文的四个部分拆开，这是第二个部分，文的最后注明了出处，如需再转载也请注明出处,尊重原创。
     本博客对原博客进行了校对，修改了一些已经失效的网页，为方便大家阅读进行了精心排版。希望对正在找工作的你有所帮助。

--------------------

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

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

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

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。参考《alt和title属性的区别及应用》

--------------------

**2.2、分别写出以下几个HTML标签：文字加粗、下标、居中、字体**

加粗：`<b>`、`<strong>`

下标：`<sub>`

居中：`<center>`

字体：`<font>`、`<basefont>`

> 参考[《HTML标签列表》][HTML]

--------------------

**2.3、请写出至少5个html5新增的标签，并说明其语义和应用场景**

section：定义文档中的一个章节

nav：定义只包含导航链接的章节

header：定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录。

footer：定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。

aside：定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。

> 参考[《HTML5 标签列表》][HTML5]

--------------------

**2.4、请说说你对标签语义化的理解？**

a. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构

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

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

d. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

--------------------

**2.5、Doctype作用? 严格模式与混杂模式如何区分？它们有何意义?**

声明位于文档中的最前面，处于 标签之前。告知浏览器以何种模式来渲染文档。

严格模式的排版和 JS 运作模式是，以该浏览器支持的最高标准运行。

在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。

DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

--------------------

**2.6、你知道多少种Doctype文档类型？**

标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。

XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。

Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，

Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

--------------------

**2.7、HTML与XHTML——二者有什么区别**

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

b. XHTML 元素必须被关闭。

c. 标签名必须用小写字母。

d. XHTML 文档必须拥有根元素。

> 参考[《XHTML 与 HTML 之间的差异》][XHTML _ HTML]

--------------------

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

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

b. 拖拽释放(Drag and drop) API

c. 语义化更好的内容标签（header,nav,footer,aside,article,section）

d. 音频、视频API([audio][],[video][])

e. 画布([Canvas][]) API

f. 地理([Geolocation][]) API

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

h. [sessionStorage][] 的数据在页面会话结束时会被清除

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

j. 新的技术[webworker,][webworker] [websocket][]等

移除的元素：

a. 纯表现的元素：basefont，big，center, s，strike，tt，u；

b. 对可用性产生负面影响的元素：frame，frameset，noframes；

--------------------

2.9、iframe的优缺点？

优点：

a. 解决加载缓慢的第三方内容如图标和广告等的加载问题

b. iframe无刷新文件上传

c. iframe跨域通信

缺点：

a. iframe会阻塞主页面的Onload事件

b. 无法被一些搜索引擎索引到

c. 页面会增加服务器的http请求

d. 会产生很多页面，不容易管理。

> 参考《[iframe的一些记录][iframe]》

--------------------

2.10、Quirks模式是什么？它和Standards模式有什么区别？

在写程序时我们也会经常遇到这样的问题，如何保证原来的接口不变，又提供更强大的功能，尤其是新功能不兼容旧功能时。IE6以前的页面大家都不会去写DTD，所以IE6就假定 如果写了DTD，就意味着这个页面将采用对CSS支持更好的布局，而如果没有，则采用兼容之前的布局方式。这就是Quirks模式（怪癖模式，诡异模式，怪异模式）。

区别：总体会有布局、样式解析和脚本执行三个方面的区别。

a. 盒模型：在W3C标准中，如果设置一个元素的宽度和高度，指的是元素内容的宽度和高度，而在Quirks 模式下，IE的宽度和高度还包含了padding和border。

b. 设置行内元素的高宽：在Standards模式下，给等行内元素设置wdith和height都不会生效，而在quirks模式下，则会生效。

c. 设置百分比的高度：在standards模式下，一个元素的高度是由其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的用

d. 设置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下却会失效。

--------------------

2.11、请阐述table的缺点

a. 太深的嵌套，比如table>tr>td>h3，会导致搜索引擎读取困难，而且，最直接的损失就是大大增加了冗余代码量。

b. 灵活性差，比如要将tr设置border等属性，是不行的，得通过td

c. 代码臃肿，当在table中套用table的时候，阅读代码会显得异常混乱

d. 混乱的colspan与rowspan，用来布局时，频繁使用他们会造成整个文档顺序混乱。

e. table需要多次计算才能确定好其在渲染树中节点的属性，通常要花3倍于同等元素的时间。

f. 不够语义

> 参考《[为什么说table表格布局不好？][table]》

--------------------

2.12、简述一下src与href的区别

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

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置

href是Hypertext Reference的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接

--------------------

> 本文转载自博客园[咖啡机的博客][Link 1]

[HTML]: http://www.w3school.com.cn/tags/index.asp
[HTML5]: https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
[XHTML _ HTML]: http://www.w3school.com.cn/xhtml/xhtml_html.asp
[audio]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio
[video]: https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
[Canvas]: https://developer.mozilla.org/zh-CN/docs/Web/API/Canvas_API
[Geolocation]: https://developer.mozilla.org/zh-CN/docs/Web/API/Geolocation/Using_geolocation
[localStorage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/localStorage
[sessionStorage]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/sessionStorage
[webworker]: https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Workers_API/Using_web_workers
[websocket]: https://developer.mozilla.org/zh-CN/docs/Web/API/WebSocket
[iframe]: http://www.cnblogs.com/strick/p/3814872.html
[table]: http://jo2.org/%E4%B8%BA%E4%BB%80%E4%B9%88%E8%AF%B4table%E8%A1%A8%E6%A0%BC%E5%B8%83%E5%B1%80%E4%B8%8D%E5%A5%BD%EF%BC%9F/
[Link 1]: http://www.cnblogs.com/strick/p/4968200.html