前端HTML基础面试题

2024-10-30 17:27

image-20241030141539270

iframe有哪些缺点?

iframe是一种框架,也是一种很常见的网页嵌入方式。

「iframe的优点」

  • iframe能够原封不动的把嵌入的网页展现出来。

  • 如果有多个网页引用iframe,那么你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改,方便快捷。

  • 网页如果为了统一风格,头部和版本都是一样的,就可以写成一个页面,用iframe来嵌套,可以增加代码的可重用。

  • 如果遇到加载缓慢的第三方内容如图标和广告,这些问题可以由iframe来解决。

「iframe的缺点」

  • 会产生很多页面,不容易管理。

  • iframe框架结构有时会让人感到迷惑,如果框架个数多的话,可能会出现上下、左右滚动条,会分散访问者的注意力,用户体验度差。

  • 代码复杂,无法被一些搜索引擎索引到,这一点很关键,现在的搜索引擎爬虫还不能很好的处理iframe中的内容,所以使用iframe会不利于搜索引擎优化。

  • 很多的移动设备(PDA 手机)无法完全显示框架,设备兼容性差。

  • iframe框架页面会增加服务器的http请求,对于大型网站是不可取的。

  • 现在基本上都是用Ajax来代替iframe,所以iframe已经渐渐的退出了前端开发。

label的作用是什么?是怎么用的?

例子1: 点击" 用户名:" 就可以定位光标到输入框

<form><label for="myid "> 用户名:</label>
<input type="text" id="myid" /></form>  

例子2: 点击" 用户名:" 或按键alt+1, 都可以定位光标到输入框

<form>
    <label for="myid" accesskey="1"> 用户名:</label>
    <input type="text" id="myid" tabindex="1" />
</form>  

for 属性功能:表示Label 标签要绑定的HTML 元素,你点击这个标签的时候,所绑定的元素将获取焦点。

acesskey 属性

功能:表示访问Label 标签所绑定的元素的热键,当您按下热键,所绑定的元素将获取焦点。

局限性:accessKey 属性所设置的快捷键不能与浏览器的快捷键冲突,否则将优先激活浏览器的快捷键。

HTML5的form如何关闭自动完成功能?

HTML的输入框可以拥有自动完成的功能,当你往输入框输入内容的时候,浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面,这样就不用全部输入进去了,直接选择列表中的项目就可以了。

但有时候我们希望关闭输入框的自动完成功能,例如当用户输入内容的时候,我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

关闭输入框的自动完成功能有3种方法:

  1. 在IE的Internet选项菜单里的内容--自动完成里面设置

  2. 设置form的autocomplete为"on"或者"off"来开启或者关闭自动完成功能

  3. 设置输入框的autocomplete为"on"或者"off"来开启或者关闭该输入框的自动完成功能

将 HTML5 看作成开放的网络平台

「什么是 HTML5 的基本构件(building block)?」

  1. 语义 - 提供更准确地描述内容。

  2. 连接 - 提供新的方式与服务器通信。

  3. 离线和存储 - 允许网页在本地存储数据并有效地离线运行。

  4. 多媒体 - 在 Open Web 中,视频和音频被视为一等公民(first-class citizens)。

  5. 2D/3D 图形和特效 - 提供更多种演示选项。

  6. 性能和集成 - 提供更快的访问速度和性能更好的计算机硬件。

  7. 设备访问 - 允许使用各种输入、输出设备。

  8. 外观 - 可以开发丰富的主题。

浏览器是怎么对HTML5的离线储存资源进行管理和加载的呢?

在浏览器的html头部加上manifest属性,如果是第一次访问浏览器会根据manifest的内容进行下载存储离线内容,如果已经访问过则从离线存储中进行加载,然后在比对服务器如果有新内容在更新离线存储

离线的情况下,浏览器就直接使用离线存储的资源。

浏览器的渲染过程?

1、将获取的html解析成dom树

2、处理css,构成层叠样式表模型CSSOM

3、将dom树和CSSOM合并为渲染树

4、根据CSSOM将渲染树的节点布局计算

5、将渲染树节点样式绘制到页面上

注意

在渲染的过程中是自上而下渲染,

js会阻塞页面的渲染,优先等js执行完成

如果在渲染的过程中改变了样式,会造成回流需要重新渲染

link和@import的区别?

1、从属关系区别:

link属于html标签,而@import是css提供的。

2、加载顺序区别:

页面被加载时,link会同时被加载,而@import引用的css会等到页面被加载完再加载。

3、兼容性区别:

import只在IE5以上才能识别,而link是html标签,无兼容问题。

4、dom可操作性区别:

可以通过JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使用@import的方式插入样式

5、权重区别:

如果已经存在相同样式,@import引入的这个样式将被该 CSS 文件本身的样式层叠掉,表现出link方式的样式权重高于@import的权重这样的直观效果。

(简而言之,link和@import,谁写在后面,谁的样式就被应用,后面的样式覆盖前面的样式。)

src与href的区别?

1、href 是指向网络资源所在位置,建立和当前元素(锚点)或当前文档(链接)之间的链接,用于超链接。

2、src是指向外部资源的位置,指向的内容将会嵌入到文档中当前标签所在位置;在请求src资源时会将其指向的资源下载并应用到文档内,例如js脚本,img图片和frame等元素。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源加载、编译、执行完毕,图片和框架等元素也如此,类似于将所指向资源嵌入当前标签内。这也是为什么将js脚本放在底部而不是头部。

❤️ 感谢大家

相关文章
热点文章
精彩视频
Tags

站点地图 在线访客: 今日访问量: 昨日访问量: 总访问量: