一.标签上 title 与 alt 属性的区别？
title属性和alt属性都是用于提供额外信息的HTML属性，但它们的作用和使用场景有所不同。
1.title属性
title属性用于提供关于元素的额外提示信息，当鼠标悬停在元素上时，浏览器会显示该提示信息。通常用于提供对元素的解释、补充或简短描述。title属性可以用于多种HTML元素，如链接（<a>元素）、图像（<img>元素）、表单元素等。
<a href="https://www.example.com" title="点击访问示例网站">示例网站</a>
<img src="image.jpg" alt="示例图像" title="这是一个示例图像">
2.alt属性
alt属性用于为图像元素（<img>）提供替代文本，当图像无法显示时，替代文本会被浏览器显示。它的主要目的是为了提供对图像内容的文字描述，以增强可访问性和辅助技术的支持。alt属性对于视觉障碍者或图像无法加载的情况下，能够传达图像的关键信息。
<img src="image.jpg" alt="示例图像">
需要注意的是，alt属性在图像元素中是必需的，并且应该尽可能地准确和有意义，以便为用户提供有用的描述。而title属性是可选的，用于提供额外的补充信息，但不应该被视为替代alt属性的作用。
二.href 与 src的区别?
href和src是HTML中常用的属性，它们在用途和适用的元素上有所不同。
1.href属性
- 用途：
href属性用于指定链接的目标资源的URL，它通常用于<a>（锚点）元素、<link>元素、<area>元素等。
<a href="https://www.example.com">Example</a>
<link href="styles.css" rel="stylesheet">
<area href="image.jpg" alt="Image" shape="rect" coords="0,0,100,100">
2.src属性
- 用途：
src属性用于指定引入的资源的URL，它通常用于<img>（图像）、<script>（脚本）、<iframe>（内联框架）等。
<img src="image.jpg" alt="Image">
<script src="script.js"></script>
<iframe src="https://www.example.com"></iframe>
总结区别
href是用于指定链接的目标资源的URL，用于在浏览器中导航到其他页面或资源。src是用于指定引入的资源的URL，用于在页面中嵌入图像、脚本、框架等内容。
需要注意的是，虽然href和src在功能和用途上有所区别，但在某些情况下，它们可以用来指向相同的URL。例如，当引入外部资源（如CSS文件或JavaScript文件）时，可以使用<link>元素的href属性或<script>元素的src属性来指定相同的URL。
三.iframe
Iframe（Inline Frame）是HTML中的一个元素，用于在网页中嵌入其他网页或内容。它可以在一个网页中创建一个独立的浏览上下文，将另一个网页或外部内容嵌入到当前页面中的一个矩形框架中。
通过使用iframe，可以将其他网页、视频、地图、广告等内容嵌入到主页面中，以实现内容的展示和集成。嵌入的内容可以来自同一域名下的页面，也可以是来自不同域名的外部内容，例如嵌入其他网站的页面或广告。
使用iframe时，可以通过指定源网页的URL或直接在iframe内部插入内容来定义要嵌入的内容。
<iframe src="https://www.example.com"></iframe>
在这个示例中，iframe被用来显示https://www.example.com网页的内容。浏览器会在页面加载时创建一个独立的浏览上下文来展示这个网页，并将其显示在iframe的区域内。
通过调整iframe的属性，可以控制嵌入内容的尺寸、边框、滚动条等样式和行为。可以设置iframe的宽度和高度，或使用CSS来对其进行样式化。
需要注意的是，由于安全性和隐私问题，浏览器实施了一些限制，限制跨域请求和访问iframe中的内容。这是为了防止恶意网站滥用iframe来进行攻击或窃取用户信息。
四.iframe的优缺点？
Iframes（内联框架）是HTML中的一种元素，用于在网页中嵌入其他网页或内容。它们具有一些优点和缺点，下面是对它们的简要描述：
优点：
1. 内容隔离：使用iframe可以将嵌入的内容与主页面进行隔离。这意味着嵌入的内容的CSS和JavaScript不会与主页面的CSS和JavaScript发生冲突，从而减少相互之间的干扰。
2. 代码复用：通过使用iframe，可以将复杂的功能或内容封装在单独的页面中，并在多个页面中重复使用。这样可以减少代码的冗余，并提高维护性和可重用性。
3. 并行加载：页面中的iframe可以并行加载，这意味着它们可以在主页面加载过程中同时加载。这有助于提高页面加载性能，特别是当嵌入的内容相对较大或需要较长时间加载时。
缺点：
1. 安全性问题：由于iframe允许嵌入外部内容，存在安全风险。恶意网站可以使用iframe来欺骗用户或进行钓鱼攻击。因此，在使用iframe时需要谨慎，并确保嵌入的内容是可信的。
2. SEO 问题：搜索引擎对于页面中的iframe处理有限。搜索引擎可能无法正确解析或索引iframe中的内容，从而影响网页的搜索引擎优化（SEO）效果。
3. 高度自适应问题：由于iframe的内容是独立的，其高度通常需要手动设置或使用JavaScript进行调整。这可能导致在不同设备或屏幕尺寸上显示不一致的问题。
4. 无法直接访问内部内容：由于跨域安全策略的限制，主页面的JavaScript无法直接访问嵌入的iframe中的内容，除非两者具有相同的域名或使用特定的跨域通信技术（如postMessage）。
综上所述，尽管iframe在某些情况下具有一定的优势，但它们也存在一些潜在的安全、SEO和可维护性问题。因此，在使用iframe时需要权衡其优点和缺点，并根据具体情况进行决策。
四.CSS link 与 @import 的区别和用法？
CSS中的link和@import都是用于引入外部样式表（CSS文件）的方法，但它们有一些区别和不同的用法。
1.link标签
- 用法：
link标签通过在HTML文档的<head>部分使用<link>元素来引入外部样式表。它是XHTML和HTML5推荐的标准方法。
示例
<link rel="stylesheet" href="styles.css">
特点
link标签可以在HTML文档加载过程中并行下载外部样式表，不会阻塞页面的渲染。- 可以通过
rel属性指定与外部样式表的关系，如stylesheet表示引入的是样式表。 link标签允许在一个HTML文档中引入多个外部样式表。- 外部样式表的URL是直接指定在
href属性中。 - 样式表可以缓存并重复使用，适用于大型或经常被多个页面使用的样式。
2. @import规则
用法
@import规则通过在CSS文件中使用@import来引入外部样式表。它是CSS2引入的方法。
示例
@import url("styles.css");
特点
@import规则必须写在CSS文件的顶部。@import规则会在HTML文档加载完成后再加载外部样式表，因此会导致页面的渲染被阻塞。- 只能引入一个外部样式表，无法同时引入多个。
- 外部样式表的URL是指定在
url()中。 @import规则适用于较小规模的样式表或在特定条件下需要延迟加载样式表的情况。
总结区别
link是HTML标签，@import是CSS规则。link标签在HTML文档中使用，@import规则在CSS文件中使用。link标签可以在HTML文档加载过程中并行下载外部样式表，@import规则会在CSS文件加载过程中阻塞页面的渲染。link标签允许同时引入多个外部样式表，@import规则只能引入一个。link标签更常用且更灵活，是推荐的使用方式。@import规则适用于某些特定情况，如在特定条件下延迟加载样式表。
364
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
