前端面试题 ===> 【HTML】

这篇具有很好参考价值的文章主要介绍了前端面试题 ===> 【HTML】。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

HTML面试题总结

1. 对 HTML 语义化的理解

  1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构;
  2. 代码结构清晰,方便团队的管理和维护,并且语义化更具有可读性,减少差异化;
  3. 提升用户体验;
    • 例如:title、alt用于解释名词或者图片信息、label标签的活用
  4. 有利于SEO优化,提升搜索引擎排名;
    • 和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息;
    • 爬虫依赖于标签来确上下文和关键字的权重;
  5. 方便其他设备的解析(屏幕阅读器、盲人阅读器、移动设备等等);

2. H5新增特性

  1. 语义化更好的标签
    • header、nav、aside、article、section、footer
  2. 音视频标签
    • audio、video
    • 如果浏览器不支持自动播放怎么办?
      • 在属性中添加autoplay(谷歌浏览器不支持音频自动播放,但是视频支持静音自动播放);
  3. data- 开头的自定义属性
  4. 本地存储
    • localStorage、sessionStorage
  5. 表单控件
    • type 属性设置值;
    • url、search、file、email、date、number、month、color、tel
  6. 画布
    • Canvas
  7. 拖拽释放
    • drag、drop
  8. 新技术
    • 浏览器多线程:webWorker
    • 前后台持久化通信技术:webSocket

3. HTML5常用的结构标签有哪些,它替换了之前的哪些标签?

  • header、nav、main、article、aside、footer、section
  • <div class="header">、<div class="nav">、<div class="main">...

4. HTML文档采用 UTF-8编码集 的优势是什么?

  1. utf-8
    • 使用3个字节表示一个符号,基本上可以覆盖世界上所有的语言;
  2. 优势
    • 与传统的gb2312、gbk相比,可识别的字符集更多,也是行业界推荐的;

5. 标签中常用的属性有哪些?

  • id、class、title、style

6. 标签中的 title属性 和 alt属性 的区别是什么?

  1. title
    • 是标签的描述属性,当鼠标移入时,稍等一会儿就会出现title属性的属性值;
  2. alt:
    • 用在可置换元素上,当外部资源无法正确加载时,alt属性的属性值就会显示在占位符上;

7. 什么是置换元素 和 非置换元素,每种类型至少举出三个例子

  1. 置换元素
    • 置换元素的内容来自外部,该元素仅是外部资源的占位符;
    • <img>、<video>、<audio>...
  2. 非置换元素
    • 非置换元素内容来自当前文档,必须使用双标签;
    • <p>、<h1> ~ <h6>、<ul>...

8. 标签中的 href属性 和 src属性 有什么区别?

  1. 二者都是对外部资源的引用;
  2. href
    • 用于超文本或样式,用在 <link>标签 和 <a>标签上;
  3. src
    • 用在外部资源占位符上,如<img>、<iframe>、<script>、<video>...

9. iframe标签有什么优缺点?

  1. 优点
    • 重载页面时不需要加载整个页面,只需要重载页面中的一个框架页,从另一方面来说,减少数据的传输,加快了网页下载速度;
    • 技术易于掌握,使用方便,可主要使用于不需要搜索引擎来搜索的页面;
    • 当前页面,直接加载其他页面,而不必发生跳转;
  2. 缺点
    • iframe 会阻塞主页面中的 Onload 事件;
    • 会产生很多页面,不容易管理;
    • 多框架的页面会增加服务器的http请求,影响页面的并行加载;
      • 并行加载:同一时间针对不同域名下的请求,iframe和所在页面在同一个域下面,而浏览器的并行加载的数量是有限制的;

10. 表单中的按钮有几种,常用的标签有哪几个?

  1. 按钮有三种:
    • 普通按钮、提交按钮、重置按钮;
  2. 常用标签:
    <input type="button" />
    <input type="submit" />
    <input type="rest" />
    <button />
    

11. 表单数据的提交方式有几种,分析使用场景?

  1. POST
    • 表单数据通过请求体发送;
  2. GET
    • 表单数据通过URL地址栏发送;

12. 什么是 重绘 和 重排?

  1. 重绘
    • 当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘;
  2. 重排
    • 和重绘相反,当改变布局的时候,就会引起重排;
  3. 重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置);

文章来源地址https://www.toymoban.com/news/detail-839909.html

到了这里,关于前端面试题 ===> 【HTML】的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 高频前端面试题汇总之HTML篇

    1. src和href的区别 src和href都是 用来引用外部的资源 ,它们的区别如下: src: 表示对资源的引用,它指向的内容会嵌入到当前标签所在的位置。src会将其指向的资源下载并应⽤到⽂档内,如请求js脚本。当浏览器解析到该元素时,会暂停其他资源的下载和处理,直到将该资源

    2024年04月26日
    浏览(38)
  • 前端基础面试题(HTML,CSS,JS)

    前后端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库  web前端面试题库 VS java后端面试题库大全 代码结构:  使页面在没有css的情况下,也能够呈现出好的内容结构 有利于SEO:  爬虫根据标签来分配的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓

    2024年02月09日
    浏览(50)
  • 前端面试题-HTML、、web综合问题(四)

    1 css sprite是什么,有什么优缺点 概念:将多个⼩图⽚拼接到⼀个图⽚中。通过 background-position 和元素尺⼨调节需要显示的背景图案。 优点: 减少 HTTP 请求数,极⼤地提⾼⻚⾯加载速度 增加图⽚信息重复度,提⾼压缩⽐,减少图⽚⼤⼩ 更换⻛格⽅便,只需在⼀张或⼏张图⽚上

    2024年02月13日
    浏览(51)
  • 前端面试:【HTML】语义化标签、表单、媒体元素

    HTML(超文本标记语言)是构建网页内容的基础,它通过一系列标签来描述页面的结构和内容。在这篇文章中,我们将探讨HTML的基础知识,包括语义化标签、表单和媒体元素。 语义化标签:赋予内容更多意义 语义化标签是指在编写HTML代码时,使用具有实际含义的标签,以便

    2024年02月12日
    浏览(61)
  • 常见前端基础面试题(HTML,CSS,JS)(三)

      类型转换可以分为两种, 隐性转换 和 显性转换 主要分为三大类:数值类型、字符串类型、布尔类型 三大类的原始类型值的转换规则我就不一一列举了 数值类型(引用类型转换) 字符串类型(引用类型转换) 类型 转换前 转换后 number 4 4 string \\\"1\\\" 1 string \\\"\\\" 0 boolean true 1 b

    2024年02月12日
    浏览(57)
  • 前端面试题-HTML、HTTP、web综合问题(二)

    14 WEB标准以及W3C标准是什么? 标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离 15 xhtml和html有什么区别? ⼀个是功能上的差别 主要是 XHTML 可兼容各⼤浏览器、⼿机以及 PDA ,并且浏览器也能快速正确地编译⽹⻚ 另外是书写习惯的差别 XHTML 元素必须被

    2024年02月12日
    浏览(49)
  • 前端面试题-HTML、HTTP、web综合问题(三)

    26 你做的⻚⾯在哪些流览器测试过?这些浏览器的内核分别是什么? IE : trident 内核 Firefox : gecko 内核 Safari : webkit 内核 Opera :以前是 presto 内核, Opera 现已改⽤Google - Chrome 的 Blink 内核 Chrome:Blink (基于 webkit ,Google与Opera Software共同开发) 27 div+css的布局较table布局有什么优点?

    2024年02月13日
    浏览(54)
  • 前端面试题-HTML、HTTP、web综合问题(一)

    1 前端需要注意哪些SEO 合理的 title 、 description 、 keywords :搜索对着三项的权重逐个减⼩, title值强调重点即可,重要出现不要超过2次,⽽且要靠前,不同⻚⾯ title 要有所不同; description 把⻚⾯内容⾼度概括,⻓度合适,不可过分堆砌,不同⻚⾯description 有所

    2024年02月12日
    浏览(50)
  • ChatGPT给出的前端面试考点(html+css+JS)

    HTML HTML是什么,它的主要作用是什么? 什么是DOCTYPE,为什么在HTML文档中使用它? HTML5相对于之前的HTML版本有哪些主要的新特性? 解释语义化HTML的概念。为什么要使用语义化标签? 如何在HTML中嵌入JavaScript和CSS? 什么是表单,如何在HTML中创建一个表单? 什么是响应式图片

    2024年01月21日
    浏览(57)
  • 前端面试:常见的HTML、CSS和JavaScript问题解答

    前端开发面试中,HTML、CSS和JavaScript是必考点。以下是常见的HTML、CSS和JavaScript问题的解答,希望能对前端开发者的面试有所帮助。 文档类型(doctype)的作用是什么? 文档类型用来告诉浏览器当前页面使用哪种HTML标准进行渲染。不同的HTML标准支持的标签和属性有所差异,因

    2024年02月08日
    浏览(73)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包