前端面试题 ===> 【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. 常用标签:

    html 复制代码
    <input type="button" />
    <input type="submit" />
    <input type="rest" />
    <button />

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

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

12. 什么是 重绘 和 重排?

  1. 重绘
    • 当元素的一部分属性发生改变,如外观、背景、颜色等不会引起布局变化,只需浏览器根据元素的新属性重新绘制,使元素呈现新的外观叫做重绘;
  2. 重排
    • 和重绘相反,当改变布局的时候,就会引起重排;
  3. 重绘不一定需要重排(比如颜色的改变),重排必然导致重绘(比如改变网页位置);
相关推荐
y先森5 小时前
CSS3中的伸缩盒模型(弹性盒子、弹性布局)之伸缩容器、伸缩项目、主轴方向、主轴换行方式、复合属性flex-flow
前端·css·css3
前端Hardy5 小时前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189115 小时前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
IT女孩儿6 小时前
CSS查缺补漏(补充上一条)
前端·css
吃杠碰小鸡7 小时前
commitlint校验git提交信息
前端
emmm4597 小时前
html兼容性问题处理
html
虾球xz7 小时前
游戏引擎学习第20天
前端·学习·游戏引擎
我爱李星璇8 小时前
HTML常用表格与标签
前端·html
疯狂的沙粒8 小时前
如何在Vue项目中应用TypeScript?应该注意那些点?
前端·vue.js·typescript
小镇程序员8 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js