【前端面试】HTML常见面试题汇总

1、<image> 标签上title属性与alt属性的区别是什么？

alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明的。且长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户等。

title属性为设置该属性的元素提供建议性的信息。使用title属性提供非本质的额外信息。title属性可以实现鼠标悬停提示的效果。

2、请写出至少5个HTML5新增的标签，并说明其语义和应用场景？

<header>：主要用于定义内容的介绍展示区域，描述了文档的头部区域，比如定义文章的头；

<nav>：定义导航链接的部分；

<section>：定义了文档中的节，比如章节、页眉、页脚或文档中的其他部分；

<article>：定义独立的内容；

<aside>：定义页面主区域之外的内容，比如侧边栏；

<figcaption>：定义<figure>元素的标题，一般被放置在<figure>元素内的第一个或最后一个位置处；

<figure>：定义独立的流内容，比如图形、图标、照片、代码等；

<footer>：定义文档的底部区域，描述文档的页脚，比如作者、著作权信息、联系方式等；

3、请说说你对标签语义化的理解？

（1）一个语义元素能够清楚的描述其意义给浏览器和开发者，即使在去掉或丢失样式的时候，也能够让页面呈现出清晰的结构；

（2）有利于SEO优化，让页面和搜索引擎建立良好的沟通，爬虫依赖于标签来确定上下文和各个关键词的权重，有助于爬虫抓取更多的有效信息；

（3）方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备等），并以具有意义的方式来渲染网页；

（4）便于团队开发和维护，语义化更具有可读性，遵循W3C标准的团队都遵循语义化标准，可以减少差异化；

4、简单描述 DOCTYPE 的作用？严格模式与混杂模式如何区分？它们有何意义？

DOCTYPE 的作用：DOCTYPE声明在文档的最前面， 位于根元素 HTML 的起始标签之前 ，这样一来，在浏览器解析 HTML 文档正文之前就可以确定当前文档的类型，以决定其需要采用的渲染模式，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 脚本的解析。

严格模式与混杂模式：严格模式的排版和JS运作模式是以浏览器支持的最高标准运行；而在混杂模式中，页面以宽松的向后兼容的方式显示，模拟老式浏览器的行为以防止站点无法工作；

当 DOCTYPE 不存在或者格式不正确时，会导致文档以混杂模式呈现。

5、HTML5 有哪些新特性，移除了哪些元素？

HTML5 现在已经不是 SGML 的子集，主要是关于图像、显示、存储、多任务等功能的增加：

  • 拖拽释放API（Drag 和 Drop）
  • 语义化更好的内容标签（header、footer、nav、article、section、aside）
  • 音视频标签（audio、video）
  • 画布API（Canvas）
  • 地理API（Geolocation）
  • Web存储API（localStorage、sessionStorage）
  • 表单控件（calendar、date、time、email、url、search，color、number、month等等）
  • 通讯API（WebSocket）

HTML5中移除了纯表现的元素，例如：basefont、big、dir、center、font、tt、u等等；

还移除了对可用性产生负面影响的元素，例如：frame、frameset、noframes等；

6、iframe的优缺点有哪些？

优点：

  • iframe能够原封不动地把嵌入的网页展示出来；

  • 提高页面代码的复用性；

  • 解决加载缓慢的第三方内容，如图标和广告等的加载问题；

  • 在处理上传或局部刷新时，避免了页面整体刷新；

  • iframe解决部分跨域问题；

缺点：

  • iframe会阻塞主页面的 onload 事件；
  • 无法被一些搜索引擎索引到；
  • 页面会增加服务器的http请求；
  • 会产生很多页面，不便于管理；
  • 很多移动设备无法完全显示框架，设备兼容性差；
  • 会出现区域的上下、左右滚动条，滚动条会挤占页面空间；
  • 使用框架时，要保证正确的使用导航链接，容易造成链接死循环；

随着前端技术的发展，逐渐使用ajax来代替iframe。

7、Quirks 模式是什么？它和 Standards 模式有什么区别？

Quirks模式：Quirks模式就是浏览器为了兼容早期针对旧版本浏览器设计、并未遵循W3C标准的网页而产生的一种页面渲染模式，这种模式又被成为“怪异模式”，简单来说就是一个新浏览器故意模拟许多在旧浏览器中存在的bug。

与 Standards 模式的区别：总体会有布局、样式解析和脚本执行三个方面的区别：

  • 盒模型：在W3C标准中，如果设置了一个元素的高度和宽度，指的是元素内容的宽度和高度，而在Quirks模式下，IE的宽度和高度还包含了 padding 和 border ；
  • 设置行内元素的宽高：在 Standars 模式下，给<span>等行内元素设置 width 和 height 都不会生效，而 Quirks 模式下，则会生效；
  • 设置百分比的宽高：在 Standars 模式下，一个元素的高度是其包含的内容来决定的，如果父元素没有设置百分比的高度，子元素设置一个百分比的高度是无效的；
  • 设置水平居中：在 Standars 模式下可以使用 margin:0px auto 来设置元素水平居中，但是这种设置在 Quirks 模式下是无效的；

8、请阐述 table 有哪些缺点？

  • 嵌套层级太深，会导致搜索引擎读取困难，而且会大大增加代码冗余；
  • 灵活性差，比如要设置tr的border等属性是不行的，要在td上设置border属性；
  • 代码臃肿，可读性差；
  • 混乱的 colspan 和 rowspan ，用它们来实现网页布局时，会造成文档顺序混乱；
  • 不够语义化；

9、简述一下 src 和 href 的区别？

src用于替换当前元素；href用于在当前文档和引用资源之间确立联系；

src是source的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在的位置；

href是Hypertext Reference 的缩写，指向网络资源所在的位置，建立和当前元素（锚点）或当前文档之间的链接；

posted @ 2020-03-27 11:55  Web1024  阅读(451)  评论(0)    收藏  举报