HTML面经

1.src与href的区别

src用于替换当前元素，如script标签，img标签等。当html解析到这些标签时，会暂停解析，将指定的资源下载下来，嵌入到所在位置内。href的话则是一个当前页面与引用资源之间的链接，如link标签。

2.HTML语义化

语义化是指根据内容的结构化（即内容语义化），选择合适的标签（代码语义化），通俗来说就是用正确的标签做正确的事情。

语义化的优点如下：

• 对机器友好，带有语义的文字表现力丰富，更适合搜索引擎的爬虫去爬取有效的信息，有利于SEO，还支持读屏软件，可以根据文章自动生成目录。

• 对开发者友好，使用语义类标签增强了代码可读性，让结构更加清晰，有利于团队的开发和维护。同时在css未加载出来时，也能使页面保持一定的结构。

3.DOCTYPE（文档类型）的作用

DOCTYPE是HTML5中的一种标准通用标记语言的文档类型声明。它的目的是告诉浏览器应该以什么样的文档类型定义来解析文档。不同的渲染模式会影响浏览器对css文件甚至js文件的解析。

渲染模式有CSS1Compat和BackCompat两种。

CSS1Compatible是标准模式，浏览器会以w3c标准以他所支持的最高的标准渲染页面，BackCompat是怪异模式，浏览器会以一种比较宽松的向后兼容的方式显示。

检查浏览器渲染模式方法：

document.compatMode();

4.script标签中的defer和async

defer和async属性都是去异步加载外部的JS脚本文件，他们都不会阻塞页面的解析

不同：

1. 脚本是否并行执行：async属性表示后续文档的加载和执行与js脚本的加载和执行是并行进行的，即异步执行；defer属性加载后续文档的过程和js脚本的加载是并行进行的，js脚本需要等到文档所有元素解析完成后才执行，DOMContentLoaded事件触发执行之前。

2. 多个脚本时执行顺序不同：多个async属性的标签，不能保证加载的顺序，但是多个defer属性的标签，可以按照加载顺序执行

5.常见的meta标签有哪些

meta标签由name和content属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等。常见的meta标签有：

• charset 用来描述html文档的编码类型

• keywords 页面关键词，与seo有关

• description 页面描述，与seo有关

• refresh 页面重定向和刷新

• viewport 适配移动端，可以通过这个控制视口的大小和比例

6.HTML5有哪些更新

1. 语义化标签

2. 媒体标签

3. canvas标签SVG标签

4. web存储(sessionStorage和localStorage)

5. drag拖放

7.img的srcset属性的作用

可以根据页面密度的不同设置不同的图片

8.行内元素有哪些?块级元素有哪些?空(void)元素有那些?

●行内元素有: a b span img input select strong ;

●块级元素有:divulollidldtddh1h2h3h4h5h6p;

空元素，即没有内容的HTML元素。空元素是在开始标签中关闭的，也就是空元素没有闭合标签: .

●常见的有:

<br> <hr>、<img>、<input>、<link>、<meta> ;

9.webwoker

在HTML页面中，如果在执行脚本时，页面是不可响应的，直到脚本执行完成，页面才可以响应。webwoker是运行在后台的js代码，独立于其他脚本，不会影响页面的性能，并且通过postMessage将结果传输回主线程。这样在进行复杂的操作的时候，就不会阻塞主线程了。

使用：

1. 创建

   let webworker = new Worker('myworker.js')

   返回的是webwoker实例对象，该对象是主线程与其他线程通讯桥梁。主线程和其他线程可以通过

   onmessage: 监听事件 
   postmessage: 传送事件
   

   案例如下：

   //主线程 main.js
   var worker = new Worker("worker.js");
   worker.onmessage = function(event){// 主线程收到子线程的消息
   };
   // 主线程向子线程发送消息
   worker.postMessage({type: "start",value: 12345
   });
   ​
   //web worker.js
   onmessage = function(event){// 收到
   };
   postMessage({type: "debug",message: "Starting processing..."
   });

2. 终止：

   // 方式一 main.js 在主线程停止方式 
   var worker = new Worker('./worker.js');
   ...
   worker.terminate();
   // 方式二、worker.js
   self.close()

10.页面导入样式时，使用link和@import有什么区别？

区别一：link先有，后有@import（兼容性link比@import兼容）；
区别二：加载顺序差别，浏览器先加载的标签link，后加载@import

11.title与h1的区别、b与strong的区别、i与em的区别？

title与h1的区别：

定义：
    title：概括了网站信息，可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
    h1：文章主题内容，告诉蜘蛛我们的网站内容最主要是什么
区别：
    title他是显示在网页标题上、h1是显示在网页内容上
    title比h1添加的重要 (title > h1 ) ==》对于seo的了解
场景：
    网站的logo都是用h1标签包裹的   

b与strong的区别：

定义：
    b：实体标签，用来给文字加粗的。
    strong：逻辑标签，用来加强字符语气的。
区别：
    b标签只有加粗的样式，没有实际含义。
    strong表示标签内字符比较重要，用以强调的。

i与em的区别：

定义：
    i:实体标签，用来做文字倾斜的。
    em：是逻辑标签，用来强调文字内容的
区别：
    i只是一个倾斜标签，没有实际含义。
    em表示标签内字符重要，用以强调的。

img标签的title和alt有什么区别？

区别一：
    title ： 鼠标移入到图片显示的值
    alt   ： 图片无法加载时显示的值
区别二：
    在seo的层面上，爬虫抓取不到图片的内容，所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。