前端HTML面试题（紧张！！！）

1.HTML的src和href属性有什么区别？

src（source）作用是：指定要加载的资源路径，出现在< script>,< img>,< audio>,< video>,< iframe>等标签中，用于加载JavaScript脚本，图片，音频，大概嵌入的网页，资源加载方式：壅闭加载 ，当浏览器解析到使用 src 属性的标签(比如< script>)时，会停息其他资源的下载和处置惩罚，直到将该资源加载、编译、执行完成。以是一般发起将 JavaScript 脚本放在页面底部。(这里要注意仅指的是脚本，像图片加载和渲染是异步的，不会壅闭 HTML 的解析)
href（hyperlink reference超链接引用），作用是指定超链接的目标地址或大概关联外部资源，出现在< a>,< link>,< area>等标签中，资源加载方式：非壅闭加载，当浏览器辨认到适用于 href 属性的标签(比如< a>和)时，会并行下载资源，不会制止对当前文档的处置惩罚。浏览器可以同时处置惩罚超链接或引入样式表。
2.什么是语义化？

语义化通俗来说，就是用正确的的标签做正确的事，根据内容的结构和含义，选择符合的html标签
语义化优点：
1.有利于SEO优化（让搜索引擎更轻易理解网页内容，搜索一个网页的时候，排名靠前）
2.屏幕阅读器，可以通过语义化标签更好地朗读网页内容，帮助视障人群浏览网页。
3.加强代码可读性，有利于团队协作和维护项目
3.Document（文档类型的作用）

告诉浏览器应该以什么样的文档类型界说来解析文档，< !DOCTYPE>不是一个HTML标签，是一个指令，负责告诉浏览器页面使用那个HTML版本编写
作用：启动浏览器的标准模式或怪异模式
标准模式：W3C标准严酷解析代码
怪异模式：假如文档缺少DOCTYPE或使用错误的DOCTYPE,浏览器就大概使用这种模式
4.HTML 的 script 标签中 defer 和 async 有什么区别?

async和defer 用于控制脚本的加载和执行，都是异步加载外部的js脚本文件，都不会壅闭html的解析
区别：
defer：
执行顺序区别：defer包管脚本按照在html中出现的顺序执行，一般是在html解析完成后执行，
使用场景：defer 适用于需要在 HTML 完全解析后才华运行的 JS 脚本，尤其是依赖于DOM 的 JS 脚本。它包管了脚本执行的顺序性和依赖关系，适适用于包含多个脚本的页面。
async：
执行顺序区别：async谁先下载完成谁先执行，async大概会阻断html解析以执行脚本。
使用场景：async 适合不依赖于其他脚本且不被其他脚本依赖的独立模块例如:计数器或广告加载。
5.常用的meta标签有哪些？

< meta >标签由 name 和 content 属性界说，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了 HTTP 标准固定了一些 name 作为大家使用的共识，还可以自界说 name。
name 属性在< meta >标签中用来指定元数据的名称，想描述的信息类型。content属性用来提供与 name 属性对应的现实数据或信息。值是具体的内容可以是文本、网址或其他数据。
声明文档使用的字符编码（一般是utf-8）

1. <meta charset="UTF-8">

复制代码

viewport 是为了响应式设计而设置的，确保页面在差别设备上正确缩放和渲染。width=device-width 使页面宽度等于设备的屏幕宽度，initial-scale=1.0设置初始缩放比例。

1. <meta name="viewport" content="width=device-width, initial-scale=1.0">

复制代码

6.HTml5相比力HTML有那些更新？

1)新增语义化更强的 HTML元素。引入如 article、section、nav、header 和footer 等元素，帮助创建结构更清晰、语义明确的网页，有利于 SEO 和内容的可访问性。
2)新增多种表单类型(如 email、date)，直接支持数据验证，极大地提高了表单的易用性和功能性，使得网络和验证用户更加方便。
3)提供音视频支持。原生支持音频(audio)和视频(video)内容，无需依赖外部插件，提高了多媒体内容的访问速度和兼容性。
4)引入多个强大的APl,支持更复杂的网页应用。如 < img draggable=“true” />，允许用户拖放文件直接到网页，
5)提供了更先进的数据存储方案(localStorage和 sessionStorage)和实时通信本领(WebSockets)，让网页应用更像传统的桌面应用。
6）引入进度条。progress显示操作的进度
7.sessionStorage 和 localStorage

都生存在客户端
localStorage 存储持久数据，浏览器关闭后数据不丢失除非自动删除数据；
sessionStorage 数据在当前浏览器窗口关闭后自动删除。
8.img标签中srcset属性的作用是什么？

设置图像在差别设备上的显示效果，允许为img标签指定多个原图像，并根据屏幕的大小和分辨率来选择最符合的图像，好处：避免在小屏设备上加载过大的图像，节流带宽并提升页面的加载速度。

1. <img  
2.   src="small.jpg"
3.   srcset="small.jpg 500w,
4.   medium.jpg 1000w,
5.   large.jpg 1500w"
6.   alt="示例图片"
7. />

复制代码

屏幕宽度接近500像素时，加载small.pbg…根据设备宽度，选择一个最符合的来显示。
一般情况下，srcset 和 sizes 属性一起使用，因为 sizes 可以帮助浏览器更准确地知道在差别视图下应该显示多大的图像，这样浏览器在选择图像时就更加精准了。

1. <img
2.   src="small.jpg"
3.   srcset="small.jpg 500w,
4.   medium.jpg 1000w,
5.   large.jpg 1500w"
6.   sizes="(max-width: 600px) 500px, (max-width: 900px) 1000px, 1500px"
7.   alt="示例图像"
8. >

复制代码

9.HTML行内元素有那些？块级元素有那些？

行内元素：不会导致文本换行，设置宽高不起作用

1. img，a，span，b加粗，i倾斜，input，select表单中的下拉选择菜单，strong加粗

复制代码

块级元素：换行，可以设置宽高

1. div，p，h1，ul li无序列表，ol li有序列表

复制代码

空元素：没有结束标签，只有开始标签的元素，因为他们不包含任何内容

1. img，br换行，hr水平线，input ，meta提供关于HTML文档的元数据，如定义字符集，页面描述等,link链接外部资源，如css

复制代码

10.HTML中，title和h1标签的区别是什么？

title用于界说整个网页的的标题，h1用于界说网页中的主要标题，标识主要内容，
可见性：title在页面外可见，h1在页面内可见
SEO：title影响搜索引擎结果页中如何展示网页，h1影响搜索引擎对页面内容的理解
11.HTML中，b和strong标签的区别是什么

都能够是文本加粗，strong比b多了元素语义化，保举使用strong，在屏幕阅读器会加重语气来表示文本夸大
12. i和em标签的区别是什么？

都可以使文本倾斜，em多了元素语义化，保举使用em，在屏幕阅读器会改变语调来表示文本夸大
13.iframe有那些优点和缺点

优点：ifream可以在当前网页嵌套另一个独立的网页，不影响主页面的样式和脚本，比如视频，地图
缺点：ifream大概嵌入来自不信托源的内容，该内容大概包含恶意脚本，导致跨站脚本攻击（XSS），
每个ifream都需要独立的http请，ifream使用过多会影响加载速度，不利于SEO，影响搜索排名，
对屏幕阅读器不友爱，需要得当的标题和描述，
跨域题目
14.跨域

跨域就是指浏览器无法访问域名、协议、端口差别的资源，这种行为是浏览器的同源策略保护机制引起的
举例：如果在http://www.baidu.com上运行的网页，尝试请求http://api.baidu.com数据，就会被浏览器的同源策略组织，因为这两个域名差别
办理跨域题目的方法：
1.使用代理服务器，通过vue cli提供的devServer选项配置代理，代理服务器会将请求转发到目标服务器，从而绕过同源政策，通常在vue.config.js文件中配置：

1. // vue.config.js
2. module.exports = {
3.   devServer: {
4.     proxy: 'http://api.example.com'
5.   }
6. }

复制代码

2.CORS（跨域资源共享）：目标服务器设置允许跨域请求的CORS头信息，然后后端服务器配合，在响应头中增加Access-Control-Allow-Origin:

1. Access-Control-Allow-Origin: *

复制代码

3.JSONP：是一种跨域数据交互的方式，通常用于加载跨域的脚本文件，但它只支持get请求
15.HTML中，label标签的作用是什么，如何使用

用于提升表单的可用性和可访问性，把文本标签和相应的表单控件关联起来，当用户点击文本标签时，输入焦点自动跳转到相应控件中
使用方法：
1.label标签包裹表单控件
2.通过for属性，将label标签和表单控件的id关联

1. <label for="username">用户名:</label>
2. <input type="text" id="username" name="username">

复制代码

16.Canvas和SVG有什么区别？

都是用于在网页上绘制图形的技能，Canvas是基于像素的即时绘制技能，适合频繁跟新和复杂动画，SVG是基于矢量的图像格式，适合无损缩放和高分辨率的静态图形
1、渲染方式：Canvas：像素渲染，适合实时动态绘制；
2、SVG：基于矢量描述，适合静态和简单的动态绘制
性能：Canvas:高性能，适合频繁更新的图形和复杂动画。SVG:在处置惩罚复杂图形时，性能大概会下降。
3、交互和 DOM 集成
Canvas:不具备内置的 DOM 交互，需要额外的变乱处置惩罚代码。
SVG:每个图形元素都是 DOM 节点，天然支持交互和变乱处置惩罚
4、使用场景
Canvas:游戏开辟、实时数据可视化、复杂动画。
SVG:图标、标记、图表、需要高分辨率和可缩放性的图形。
Canvas 的主要特点及优缺点
特点
1)基于像素:Canvas 画图是逐像素操作，雷同于在位图画布上绘制。
2)马上渲染:一旦图形绘制完成，就无法直接访问或修改其内容，除非重新绘制
3)不具备DOM特性:绘制在 Canvas 上的图形不是 DOM 元素，不能通过DOM 直接访问和修改。
4)动态画图:非常适合需要频繁更新和复杂图形操作的应用，如游戏、动态数
17.HTML的head标签有什么作用，此中那些标签必不可少？

< head >标签用于包含文档的元数据，这些元数据不会在页面上直接显示，但对页面的设置、SEO、样式、脚本和其他行为有紧张影响,
主要作用
1)界说文档标题:使用< title >标签界说页面在浏览器标签中的标题。
2)引入样式和脚本:使用< link >标签引入外部CSS文件，使用< style >标签界说内联CSS，使用< script >标签引入和界说JavaScript 脚本。
3)提供文档元数据:使用标签提供关于文档的描述、作者、关键词、字符集等信息。
4)链接图标:使用< link >标签界说网站图标(favicon)。
此中< title >标签和< meta >标签是必不可少的。
< head >部分，包含了标题、字符集界说、视口设置、描述、样式表链接、图标链接和脚本文件。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告