前端面试题之HTML篇

1、src 和 href 的区别

具有src的标签有：script、img、iframe

具有href的标签有：link、a

区别
src 是source的缩写。表示源的意思，指向资源的地址并下载应用到文档中。会阻塞文档的渲染，也就是为什么js脚本放在底部而不是头部的原因。

javascript 复制代码

<script src="./index.js"></script>
<img src="./cat.jpeg" alt="">
<iframe src="./iframe-page.html"></iframe>

href 是hypertext reference 的缩写。表示超文本引用。用来引用外部的资源。不会阻塞文档的渲染。

javascript 复制代码

<link rel="stylesheet" href="./index.css">
<a href="https://baidu.com">跳转</a>

@import 和 link 的区别

link 在文档加载的时候一并加载，@import在页面完全加载之后加载。
@import 只能加载css，link还可以定义RSS等其他事务；
link是XHTML标签，无兼容问题；@import是在CSS2.1提出的，低版本的浏览器不支持。
link 支持使用js控制dom改变样式，而@import不支持。

2、DOCTYPE（文档类型）的作用

必须写在HTML文件的第一行，例如：<!DOCTYPE html>，用来告诉浏览器应该以什么方式（html或者xhtml）解析页面，不同的渲染方式会影响css甚至Javascript的解析。

浏览器渲染页面有两种模式（可用通过document.compatMode获取）：

CSS1Compat（HTML strick mode 标准模式）：大多数网页都是这个模式，浏览器使用W3C的标准来渲染页面，在标准模式中，浏览器使用其支持的最高标准来渲染页面。
BackCompat（XHTML Quirk mode 怪异模式）：浏览器使用自己的怪异模式来渲染页面，在怪异模式中，浏览器使用比较宽松的向后兼容的方式显示。

3、script 中defer 和 async的区别

javascript 复制代码

    <script src="./index.js"></script>
    <script async src="./index-async.js"></script>
    <script defer src="./index-defer.js"></script>

如果没有defer或者async，浏览器会立即加载并执行js脚本，会阻塞页面的渲染，如果文件比较大或者脚本比较耗时的话，页面就会出现卡顿的情况。

下面这张图可以直观看出它们的区别：

绿色：表示页面渲染。蓝色：表示资源加载。红色：表示js脚本执行。

从图中不难看出，<script>会立即加载并执行脚本，阻塞了页面的渲染。<script defer>和<script async>加载资源 的时候不会阻塞页面渲染，但是<script async>资源加载完成之后会立即执行js脚本。<script defer>是页面渲染完成之后（DOMContentLoaded事件出发之前）执行脚本。

<script async>和<script defer>的区别

<script async>多个带async标签是异步加载，也就是并行下载。脚本也是并行执行。
<script defer>多个带defer标签是异步下载，按加载顺序执行。

4、iframe 有哪些优点和缺点

优点：

用来加载速度较慢的内容（如广告）
可以使脚本并行下载
可以实现跨子域通信

缺点：

会阻塞页面的onload事件
无法被一些搜索引擎识别到
会产生很多页面，不易管理

5、label 标签的使用

label标签用来定义表单控件的关系，当用户点击label标签时，浏览器会自动将焦点转到和label标签关联的表单控件。

用法一：

javascript 复制代码

    <label for="username">点我聚焦：</label>
    <input type="text" id="username">

用法二：

javascript 复制代码

    <label for="password">密码:
        <input type="password" id="password">
    </label>

6、Canvas 和 SVG的区别

SVG

SVG 是可缩放矢量图形，是基于可扩展标记语言XML描述的2D图形，基于XML意味着每个DOM都是可用的，可以为每个元素附加Javascript事件处理器，在SVG中，每个绘制的图形叫做对象，对象的属性发生变化时，浏览器会自动重现图形。

特点：

不依赖分辨率（可做一些logo之类）
支持Javascript事件处理器
最适合做大型渲染区域的页面（比如google地图）
过于复杂会减缓渲染速度（任何基于 DOM的应用都不快）
不适合做游戏应用

Canvas

通过Javascript来绘制图形，是逐像素进行渲染的，其位置发生改变，就会重新进行绘制。

特点

依赖分辨率
弱文本渲染能力
不支持事件处理能力
能够以.png或者.jpg 保存图像
最适合做大型密集型游戏，其中很多对象会频繁重绘

7、浏览器乱码的原因是什么？如何解决

网页源代码使用GBK编码，而内容中的中文使用的是UTF-8编码，就会出现乱码，反之亦然。

解决办法就是将编码格式转化成一致的编码。

8、title和h1、strong和b、i和em的区别？

title和h1 ：title表示文档的标题，h1 有明确的层级意义，对页面的抓取有很大的影响。
strong和b ：strong 有具体的语义，具有加重语气的效果。而b只是简单的字体加粗，搜索引擎更侧重于strong标签。
i和em：i 是斜体，em表示强调文本。