前端面试知识点整理——HTML

前端面试知识点整理——HTML

1.src与href区别

src：对资源的引用，img、script标签使用，解析到该元素时会阻塞其他资源的下载
href：超文本引用，只想一些网络资源，a、link使用，可以并行下载，不会阻塞当前文档

2.html语义化

p、h、title……
header、nav、article、section、aside、footer
使用正确的标签做正确的事情
好处：利于爬虫、增强可读性和易维护性

3.DOCTYPE的作用

文档类型声明，告诉浏览器以什么文档类型解析文档，决定浏览器的渲染模式：有标准模式和怪异模式
标准模式：默认模式，使用W3C标准解析渲染页面，浏览器以其支持的最高标准呈现页面
怪异模式：浏览器使用自己的怪异模式解析渲染页面，以一种比较宽松的向后兼容的方式显示

4.defer和async

都是异步加载，async是加载完之后立即执行，会阻塞页面的解析，defer是当文档所有元素解析完成之后，DOMContentLoaded事件触发之前执行
多个async不能保证顺序加载，多个defer可以保证顺序加载

5.meta标签

<meta chatset="UTF-8">
<meta name="keywords" content="关键词" />
<meta name="description" content="描述" />
<meta http-equiv="refresh" content="0;url=" />
<meta name=viewpoint" content="width=device-width,initial-scale=1,maximum-scale=1" >
<meta name="robots" content="index,follow" />

6.html5的更新

（1）语义化标签：header、nav、article、section、aside、footer
（2）媒体标签：audio、video
有一些controls（播放控件）、autoplay（自动播放）、loop、muted（静音播放）
（3）表单类型：number、tel、search、date…
（4）表单属性：placeholder、required、multiple…
（5）querySelector、querySelectorAll
（6）本地存储：localStorage、sessionStorage

7.srcset属性

<img src="image-128.png" srcset="image-256.png 2x" />

8.html5的离线储存：manifest

9.标签区别

title & h1：title可以表示文档的标题、也可以用作图片的标题； 而h1表示层次明确的标题，对页面信息的抓取有很大的影响
b & strong：b展示内容为加粗，只是样式上的体现，而strong标明重点内容，即便去掉加粗样式
i & em：i展示内容为斜体，em表示强调文本 （同上）

10.iframe优缺点

优点：可以用来加载速度较慢的内容（广告）、可以使脚本并行下载、可以实现跨子域通信
缺点：会阻塞主页面的onload事件、无法被一些搜索引擎识别、会产生很多页面不易管理

11.label标签

当用户选择label标签时，浏览器会自动将焦点转到和label标签相关的表单控件上

<label for="mobile">Number:</label>
<input type="text" id="mobile" />

12.Canvas和SVG有什么区别？

Canvas 是一种通过 JavaScript 来绘制 2D 图形的方法。Canvas 是逐像素来进行渲染的，因此当我们对 Canvas 进行缩放时，会出现锯齿或者失真的情况。
SVG 是一种使用 XML 描述 2D 图形的语言。SVG 基于 XML，这意味着 SVG DOM 中的每个元素都是可用的。我们可以为某个元素附加 JavaScript 事件监听函数。并且 SVG 保存的是图形的绘制方法，因此当 SVG 图形缩放时并不会失真。

13.head标签中必不可少的是？

title
其他可用：base、link、meta、script、style、title

14.html 中的块级元素、行内元素分别有哪些

块级元素：p、h、div、form、ul、li、ol、thead、tbody……
行内元素：span、a、img、input、strong、i……
img、input是可替换元素，实际上就可以把他们看作行内块元素，他们可以设置宽高

15.异步加载 script 的js 代码

1.defer

<script defer src="example.js"></script>

2.asyns

<script async src="example.js"></script>

3.动态创建dom方式

function jsload() {
	var script = document.createElement('script');
	script.src = 'example.js';
	document.body.appendchild(script);
}

if(window.addEventListener) {
	window.addEventListener("load", jsload, false);
}
else if(window.attachEvent)  {
	window.attachEvent("onload", jsload);
}
else {
	window.onload = jsload;
}

4.settimeout延时加载
5.js放在最后

参考：「2021」高频前端面试题汇总之HTML篇