前端面试题 ===> 【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

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. 置换元素
    • 置换元素的内容来自外部,该元素仅是外部资源的占位符;
  2. 非置换元素
    • 非置换元素内容来自当前文档,必须使用双标签;
    • ~

        ...

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

  1. 二者都是对外部资源的引用;
  2. href
  3. src
    • 用在外部资源占位符上,如