前端面试题-每日练习(1)

1. 简述一下你对 HTML 语义化的理解？

通俗的来讲就是从代码上来展示页面的结构。

用正确的标签做正确的事情。

html 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；即使在没有样式 CSS 情况下也以一种文档格式显示，并且是容易阅读的;

搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，利于 SEO;

使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

2. 标签上 title 与 alt 属性的区别是什么？

alt 是给搜索引擎识别，在图像无法显示时的替代文本；

title 是关于元素的注释信息，主要是给用户解读。当鼠标放到文字或是图片上时有 title 文字显示。（因为 IE 不标准）在 IE 浏览器中 alt 起到了 title 的作用，变成文字提示。在定义 img 对象时，将 alt 和 title 属性写全，可以保证在各种浏览器中都能正常使用。

3.iframe的优缺点？

首先让我们了解一下什么是iframe

iframe 是一个 HTML 元素，全称为 “Inline Frame”（内联框架）。它允许你在一个 HTML 文档中嵌入另一个 HTML 文档。iframe 通常用于在当前页面中加载另一个页面，例如嵌入地图、视频、广告等。它的基本用法如下：

<iframe src="https://example.com" width="600" height="400"></iframe>

在这个例子中，src 属性用于指定要嵌入的页面的 URL，width 和 height 属性则分别用于定义 iframe 的宽度和高度。你可以根据需要调整这些属性值。

和直接修改原始html文件有什么区别？

使用 iframe 嵌入一个外部 HTML 文档与直接修改原始 HTML 文件有一些区别。这里是一些主要的差异：

代码隔离：使用 iframe 可以在当前页面中嵌入另一个文档，而不需要直接修改原始 HTML 文件。这有助于保持代码的组织和清晰。嵌入的文档在其自己的窗口或框架内运行，与主文档相互独立，从而实现了代码隔离。

样式隔离：iframe 内的 HTML 文档拥有自己的样式表，与主文档的样式相互独立。这意味着，在iframe内的元素样式不会受到主文档样式的影响，也不会影响到主文档的样式。直接修改原始 HTML 文件时，所有的样式都处于同一个样式表中，可能会导致样式冲突或不必要的覆盖。

本文由“壹伴编辑器”提供技术支持

优点:

• 解决加载缓慢的第三方内容如图标和广告等的加载问题
• Security sandbox
• 并行加载脚本

缺点：

• iframe会阻塞主页面的Onload事件
• 即使内容为空，加载也需要时间
• 没有语意

4. href 与 src的区别

href (Hypertext Reference)指定网络资源的位置，从而在当前元素或者当前文档和由当前属性定义的需要的锚点或资源之间定义一个链接或者关系。（目的不是为了引用资源，而是为了建立联系，让当前标签能够链接到目标地址。）

src source（缩写），指向外部资源的位置，指向的内容将会应用到文档中当前标签所在位置。

href与src的区别

1、请求资源类型不同：href 指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的联系。在请求 src 资源时会将其指向的资源下载并应用到文档中，比如 JavaScript 脚本，img 图片；

2、作用结果不同：href 用于在当前文档和引用资源之间确立联系；src 用于替换当前内容；

3、浏览器解析方式不同：当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，图片和框架等也如此，类似于将所指向资源应用到当前内容。这也是为什么建议把 js 脚本放在底部而不是头部的原因。

5.行内元素和块级元素的区别？

行内元素：不会独立出现在一行，单独使用的时候后面不会有换行符的元素。eg：span, strong, img, a 等。这些元素，默认的高宽，总是其内容的高宽。并且，margin和padding值，只有左右有效。

块级元素：独立在一行的元素，他们后面会自动带有换行符。eg：div , p ,form , ul , li , ol , dl 等。它们的出现，往往独自占领一行。在没有设置宽度的情况下，默认宽度总是其父元素的宽度。

行内元素转换成块元素，只要设置其display属性为block即可，display:block; 。块元素转换成行内元素，只要将其display属性设置为inline即可，display:inline;。

（1）行内元素有：a b span img input select （2）块级元素有：div p ul ol li dl dt dd h1-h6 （3）常见的空元素：br-换行，hr-水平分割线