当前位置: 首页 > news >正文

前端面试题2022-HTML篇

关于前端面试的题,最近整理了一些干货,经常被问到的一些问题,出现频率比较高的问题,如有不足之处,请高调指出,(⭐代表难度,星星越多越难,以次类推),此篇文章为面试题的html篇

文章目录

  • 一、HTML篇(9道)
      • 1、说一说对web语义化的了解⭐
      • 2、说说你对web标准和W3C的理解和认识⭐
      • 3、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?⭐
      • 4、行内元素有哪些?块级元素有哪些?⭐
      • 5、< img > 的title和alt有什么区别?⭐
      • 5、多个img标签之间会有一条白线,怎么处理?为什么?⭐⭐
      • 6、Canvas和SVG熟练吗?有什么区别?⭐⭐⭐
      • 7、HTML5新特征⭐⭐
      • 8、cookie与Html5的sessionStorage、localStorage的区别⭐⭐
      • 9、说一下iframe有哪些优点和缺点?⭐⭐


一、HTML篇(9道)

1、说一说对web语义化的了解⭐

参考文献:https://www.w3school.com.cn/html/html_jianjie.asp
用正确的标签做正确的事。提高代码的可读性,页面内容结构化,便于开发人员的代码编写,同时提高的用户体验;有利于SEO ,便于搜索引擎爬虫爬取有效信息。

2、说说你对web标准和W3C的理解和认识⭐

参考文献:https://www.w3school.com.cn/w3c/w3c_html.asp
web标准将网页分为三个部分,表现(html)、结构(css)和行为(js)。
W3C是对web标准提出了规范化的要求

3、Doctype作用? 严格模式与混杂模式如何区分?它们有何意义?⭐

引用文献:https://www.w3school.com.cn/tags/tag_doctype.asp
声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签。
严格模式: 又称标准模式,是指浏览器按照 W3C 标准解析代码。
混杂模式: 又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码。

4、行内元素有哪些?块级元素有哪些?⭐

参考文献:https://www.w3school.com.cn/html/html_blocks.asp

  1. 行内元素:通常不会以新行开始,并且元素没有宽和高,例如a,b,i,br,span等
  2. 块级元素:会以新行来开始,有宽高可以修改,例如div p h1-6.hr等

5、< img > 的title和alt有什么区别?⭐

参考文献:https://www.w3school.com.cn/html/html_images.asp

  1. alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
  2. title会在鼠标在图片上停留时,显示一个悬浮框,其中显示的文字。为img提供额外的提示信息,当鼠标滑动到该元素时,显示定义的提示。

5、多个img标签之间会有一条白线,怎么处理?为什么?⭐⭐

问题来源:由于img元素默认为内联元素,而内联元素的vertical-align属性的默认值为baseline文字基线对齐,正好图片底部的留白就是baseline和bottom之间的距离

以下为解决方案:

  1. 添加display:block; 将其变为块级元素,去掉基线问题
  2. 添加 vertical-align:middle,改变基线对齐方式
  3. img 父级 div 元素 css 添加 font-size:0; 直接清除缝隙
  4. 父元素添加overflow:hidden属性,溢出的留白裁剪掉
  5. 设置图片的浮动或者定位属性,将其变为块级元素,去掉基线问题

6、Canvas和SVG熟练吗?有什么区别?⭐⭐⭐

canvas参考文献:https://www.w3school.com.cn/tags/tag_canvas.asp
svg参考文献:https://www.w3school.com.cn/tags/tag_svg.asp
Canvas和SVG是html5中支持2种可视化技术,都是可以在画布上绘制图形和放入图片,Canvas事html5的新特性,SVG其实出来很多年了并不是html的独有。Canvas画布,利用JavaScript在网页绘制图像,SVG 用来定义用于网格的基于矢量的图形。

  1. canvas
    canvas不依赖分辨率。
    canvas支持事件处理器。
    canvas最适合带有大型渲染区域的应用程序(比如谷歌地图)。
    canvas复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快)。
    canvas不适合游戏应用。
  2. svg - Scalable Vector Graphics
    svg依赖分辨率。
    svg不支持事件处理器。
    svg弱的文本渲染能力。
    svg能够以 .png 或 .jpg 格式保存结果图像。
    svg最适合图像密集型的游戏,其中的许多对象会被频繁重绘。

7、HTML5新特征⭐⭐

html5参考文献:https://www.w3school.com.cn/html/html5_intro.asp
html5新增了html,以及浏览器API。他不应该被理解成只是做html的新增

  1. 文档结构新元素,例如:article,header,footer,main等
  2. 新的表单元素,例如:datalist,keygen,output,等
  3. 新的输入类型/属性,例如:color,date,month,autofocus,form等
  4. HTML5 图像,例如:sva,canvas
  5. 新的媒介元素,例如:audio,video,source,等
  6. 新的浏览器开放API,例如:1、HTML5 Geolocation(地理定位)值得一提的是,在谷歌上,您需要在https环境使用它,dev需在火狐欧鹏等进行;2、web存储localStorage和sessionStorage;3、HTML5 应用程序缓存cache manifest;4、开线程-Web Workers等等,还有拖拽,sse,播放语音等等等等。
    不需要全部记下来,但是需要了解尤其是web存储

8、cookie与Html5的sessionStorage、localStorage的区别⭐⭐

参考文献:https://www.w3school.com.cn/html/html5_webstorage.asp

  1. cookie数据始终在同源HTTP请求中携带,而sessionStorage和localStorage仅在本地保存
  2. 存储大小限制不同:cookie-4k,sessionStorage和localStorage - 5M
  3. 数据有效期不同:cookie可以自行设置失效期,sessionStorage在当前会话有效,localStorage始终有效。
  4. 作用域不同:sessionStorage在当前会话有效,不能跨浏览器跨标签。而localStorage和cookie在所有同源窗口中都是共享的。

9、说一下iframe有哪些优点和缺点?⭐⭐

参考文献:https://www.w3school.com.cn/html/html_iframe.asp

  1. iframe的优点
    1、代码复用
    2、解决跨域

  2. iframe的缺点
    1、会产生很多页面,不易管理
    3、代码复杂,不易seo
    4、兼容性差
    5、iframe框架页面会增加http请求

相关文章:

  • 语文天地杂志社《语文天地》杂志社2022年第11期目录
  • 字符串相似及匹配 Jaro-Winkler
  • 一文解决IDEA中文乱码问题
  • 论文笔记|DeepWalk
  • 微服务框架 SpringCloud微服务架构 21 RestClient 操作文档 21.5 批量导入文档
  • 从源码角度看React-Hydrate原理
  • ​草莓熊python turtle绘图代码(玫瑰花版)附源代码
  • JTable详细介绍
  • 前端Gitee + Jenkins自动化实战(转)
  • Grafana安装与配置
  • 加固技术护城河,比亚迪商用车加速领跑全球电动化进程
  • Ubuntu记住git账号密码
  • SpringBoot系列之基于MongoRepository实现分页
  • 【Python恶搞】Python实现祝福单身狗的恶搞项目,快@你的好朋友,祝福他吧 | 附源码
  • [附源码]JAVA毕业设计师生交流平台(系统+LW)
  • 关于海量级存储用户标签体系架构
  • Maven是什么?手把手先创建个Maven项目
  • 通过Node + SSE 做了一个构建日志推送
  • 作为技术面试官,考什么前端知识点(一)
  • java-net-php-python-springbot学生奖惩管理系统计算机毕业设计程序
  • Python爬虫教你爬取视频信息
  • 基于微信小程序的火锅店点餐系统小程序
  • 一文带你吃透红黑树---红黑树如此简单
  • 经济的1000+篇文章总结
  • 【数据结构】基础:AVL树(平衡二叉树)
  • 【C++11】lambda表达式、包装器、bind 与 placeholders
  • 【深度学习基础6】自编码器及其变体
  • 数学知识-约数
  • 【Python模块】psutil
  • 配置安全的linux-apache服务器(5)
  • 2023年重庆高考588分能报什么大学 588分能上哪些院校
  • 2023年山东春季高考考试时间 什么时候考试
  • 单招被调剂可以不去吗 还能高考吗
  • 2023湖南双一流大学名单 湖南哪所学校好
  • 中专考大学要考什么科目 内容有哪些
  • 预计2023国家专项计划录取分数线是多少
  • 2021年浙江工商大学杭州商学院学费是多少 各专业收费标准
  • 神经科学专业课程有哪些
  • 2023软件工程专业课程有哪些 就业方向是什么
  • 现在进行时结构是什么 怎么构成的