【更新中】前端常见面试题汇总（含答案详解）

【HTML篇】

1. HTML语义化的目的是什么？简述一下你对HTML语义化的理解

（1）根据内容的语义化，选择合适的标签。便于开发人员阅读和写出更优雅的代码，也便于团队后期的开发和维护；

（2）在没有CSS，或者CSS尚未加载的时候，页面也能够呈现出很好的内容结构、代码结构（如标题和正文分开）；

（3）有利于搜索引擎优化。搜索引擎依赖于标签来确定上下文和各个关键字的权重，语义化标签，有助于爬虫获取到更多有效的信息

2.HTML5有哪些新标签、新特性？

（1）canvas 标签，可以实现使用 javascript 在网页上绘制图像，如坐标轴、折线图；

（2）支持 svg（可伸缩矢量图形），svg 图像在放大的时候图像质量不会降低；

（3）新增 Geolocation API，可以获取用户的地理位置；

（4）新增 Local Storage（本地离线存储），使得 web 应用程序可以在本地浏览器中长期存储数据，关闭浏览器后数据不会删除；

3.href、url、src 的区别是什么？

（1）href，标签属性，Hypertext Reference，超文本引用，用来建立当前文档和引用文档之间的链接。

        可以是绝对、相对URL。 常用于 <link> <a> 等标签。如：

<link rel="stylesheet" herf="style.css" type="text/css" />
// 告诉浏览器此处有一个“样式表”的资源，资源地址是当前目录的xx文件

（2）src 标签属性，sorce，指向【嵌入】到当前标签位置的资源的地址。

        可以为绝对、相对 url。常用于 <img> <script> 等标签。如：        

<img src="./images/test.jpg" alt="测试图片” />
// 告诉浏览器，在此处嵌入一张图片，图片地址是xxx.jpg

（3）url，值类型，Uniform Resource Location，统一资源定位符，描述互联网资源的位置及访问方法，也就是网址，组成：

协议类型:主机host.域名domain:端口port/路径path/资源名称filename

https:baike.baidu.com/item/hello

        url 分为 “绝对url” 和 “相对url” 。

绝对 url：资源在网络上的完整路径

                如：https:baike.baidu.com/item/hello

相对 url：路径以包含该 url 的文件所处的文件夹为参考点，目标资源需要在同一服务器上

                如：./images/test.jpg

注：url 不是HTML中某个标签的属性，而是部分属性（如 href、src）的值类型

        如 <img> 标签 alt 属性的值类型是 text，即文本

            <input> 标签 minlength 属性的值类型是 number，即数字

            <img> 标签 src 属性的值类型是 url，即网址