大前端面试题集锦——HTML篇

HTML 篇

1. 什么是DOCTYPE, 有何作用?

• DOCTYPE是用来声明 HTML 文档应当使用哪种版本来进行解析
• 如果不使用 DOCTYPE 告知浏览器应当使用哪种版本解析文档, 那么浏览器将会开启最大兼容模式来解析文档, 一般称为怪异模式. 在怪异模式下, 可能会产生一些预想不到的bug

2. 说说对 HTML 语义化的理解?

• HTML的语义化指的是在合适的地方使用合适的标签, 让人能够根据标签进而大致知晓标签内容
• 语义化使得在没有 CSS 的情况下也能够展现出清晰的结构
• 语义化有利于SEO, 与搜索引擎建立良好的沟通
• 有利于爬虫抓取更多的有效信息
• 方便团队的开发与维护, 减少差异化

3. 标签属性 src 与href有什么区别?

• 两者都用于指向一个外部资源链接
• src属性指向的外部资源会下载到本地并嵌入到当前位置, 当浏览器解析到该元素时, 会暂停其他资源的下载, 知道该资源被执行完毕
  • 常用于 img,script,video,audio 等元素中
• href用来指向一个外部链接, 当浏览器识别到该属性时, 会并行下载该资源, 不会停止对当前文件的处理

4.title与 h1,b 与strong,i与 em 元素分别有什么区别?

• title元素是 head 元素中一个必不可少的元素, 用来指定当前页面的标题
• h1元素是一级标题
• b元素会实现一个加粗效果
• strong元素也会实现一个加粗效果, 但是在使用语音朗读时会重读
• i元素会实现一个倾斜效果
• em元素也会实现一个倾斜效果, 有强调效果

5. 什么是严格模式与混杂模式?

• 严格模式指的是以浏览器支持的最高标准运行 (W3C 标准)
• 混杂模式指的是浏览器以向下兼容的方式显示内容, 模拟老式浏览器的行为
• 严格模式, 直接书写正确的 DOCTYPE, 不声明或者声明不完整的DOCTYPE 页面会转换为怪异模式

6. 前端页面由哪三层构成?

• 分别由 html,css 与js构成
• html结构层
  • 组成页面的基本结构
• css表示层
  • 为页面添加丰富的样式
• js行为层
  • 实现用户与页面的交互行为

7.ifram的作用以及优缺点?

• iframe被称为嵌入式框架, 可以实现在 html 页面中嵌套 html 页面
• 优点
  • 可以用来处理加载缓慢的内容
• 缺点
  • 会阻塞主页的 onload 事件
  • 产生较多页面, 不利于管理
  • 浏览器的导航按钮无法实现效果
  • 无法被搜索引擎识别

8.img元素中的 title 与alt属性有什么作用?

• title属性用来实现当用户的鼠标悬停在图片上时显示的额外信息
• alt属性用来实现当图片加载失败时, 在原图片位置处预留的文本描述信息

9.H5与 HTML5 的区别是什么?

• H5是一个统称, 一个产品名词, 包含了 HTML5,CSS3 与ES6等新技术
• HTML5是一个技术名词, 指第五代 HTML 技术

10. 行内元素与块级元素有哪些? 有什么区别? 如何转换?

• 行内元素指的是元素默认排列在同一行, 设置元素的 width 与height属性无效, 只能够设置 padding-left/right 或margin-left/right, 可以设置line-height, 只能嵌套行内元素
  • a,b,em,i,span,strong,sub,sup等
• 块级元素指的是元素默认占据一整行, 多个元素从上至下依次排列, 可以设置元素的 width 与height属性, 并且也可以设置元素的内外边距, 块级元素中可以嵌套块级元素或行内元素
  • h1~h6,div,p,ul,ol,li,form,table,textarea等
• 使用 display 属性可以实现元素类型的转换
  • block转换为块级元素
  • inline转换为行内元素
  • inline-block转换为行内块元素

11.label的作用是什么? 如何使用?

• label标签用来为提高用户的操作体验
• 通常在表单元素中使用, 绑定 input 元素, 利用 label 标签的 for 属性绑定 input 标签的 id 属性, 在 label 元素中使用文字描述, 当用户点击文字时, 光标会自动聚焦到绑定的 input 元素中

12. 对于 Web 标准以及 W3C 的理解?

• Web标准是一套规范, 用来约定 Web 中的各项内容, 是一套用来构建高质量, 可持续与可访问 Web 内容的基础
• 简单来说可以分为结构, 表现与行为三个标准
  • 结构标准约定 HTML 的标签规范
  • 表现标准约定 CSS 的样式规范
  • 行为标准约定 JS 的操作逻辑
• W3C是一个国际性的非盈利组织, 用来制定各类标准, 制定标准之后可以:
  • 降低学习成本, 降低代码的维护成本
  • 共用统一的开发流程与工具
  • 方便跨平台进行迁移

13. 怪异模式是什么意思? 它与标准模式有什么区别?

• 怪异模式指的是在编写 html 代码时, 没有写DTD, 浏览器将会按照最大兼容模式进行页面渲染
• 常见区别
  • 在怪异模式下, 设置元素的 width 与height会包含 padding 与border
  • 在怪异模式下, 设置行内元素的 width 与height会生效
  • 在怪异模式下, 设置元素的样式 margin:0 auto 的居中效果会失效

14. 什么是微格式? 构建前端页面需要使用微格式吗?

• 微格式是建立在已有的标准基础之上的一组数据格式
  • 具体表现是把语义嵌入到 HTML 中, 有助于实现分离式开发, 相当于对 Web 页面进行语义注释
• 采用微格式的页面, 通常会在标签中加入解释性的注释, 有助于让处理 HTML 的软件更易于理解文档, 当使用爬虫爬取 Web 内容时, 也能够更好地识别内容块的语义, 可以优化网页的SEO

15. 为什么 HTML5 只需要写!DOCTYPE html?

• HTML5与 HTML4 不同, 并不遵循 SGML(标准通用标记语言),DTD 规定了标记语言的规则, 这样浏览器才能够正确识别文档内容, 采用正确的方式呈现页面

16.HTML5新增了哪些特性? 移除了哪些元素?

• HTML5的新特性主要是关于图像, 位置, 存储, 多任务等方面
  • 新增标签:video,audio,article,main,footer,aside,nav,section,canvas等
  • input新类型:date,time,color,email等
  • 表单新属性:autofocus,placeholder,required等
  • 地理定位技术:Geolocation API
  • 拖拽:Drag and Drop API
  • 本地存储:sessionStorage与localStorage
• 移除元素
  • 纯表现元素:font,center,big等
  • 可能会产生副作用的元素:frame,frameset,noframes等

17. 如何处理 HTML5 新标签兼容问题?

• 使用第三方库HTML5 Shiv

head>
	script src="https://html5shiv.googlecode.com/svn/trunk/html5.js">script>
head>

• 使用 document.createElement("tagName") 动态创建标签

18. 如何实现在一张图片的不同区域链接不同的地址?

• 在 img 标签中添加属性usemap="#yourMapTagName"
• 结合 map 标签与 area 标签共同实现

img alt="" src="" usermap="#my-map"/>
map name="my-map">
	area shape="rect" coords="" alt="" href=""/>
	area shape="circle" coords="" alt="" href=""/>
	area shape="poly" coords="" alt="" href=""/>
map>

19.a元素除了用于导航, 还能够用于什么?

• href属性中的 url 链接可以是浏览器支持的任何协议
  • 用于拨号110
  • 用于发送短信sendMsg
  • 用于发送邮件
  • 用于下载文件
  • 用于锚点

20.SEO中的 TDK 是什么?

• T指的是 title 标题标签
• D指的是 description 描述标签
• K指的是 keyword 关键词标签

21.script标签中的 defer 属性与 async 属性的区别是什么?

• 两者都可以实现 script 脚本的异步加载, 使之不会阻塞页面的解析

22. 常用的 meta 标签有哪些?

• meta标签定义了网页的元信息, 可以用来设置网页的作者, 网页描述, 关键词等信息

meta charset="UTF-8">
meta name="keywords" content="">
meta name="description" content="">
meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1">
meta name="robot" content="index,follow">
meta http-equiv="refresh" content="0;url=">

23.img元素中 srcset 有什么作用?

• 如果要实现响应式布局, 那么在不同的屏幕密度之下设置不同的图片, 可以使用 srcset 属性

img src="default.jpg" srcset="another1.jpg 2x,another2.jpg 3x,another3.jpg 4x" />

• 当在不同的屏幕密度之中就会应用不同的图片

24. 描述什么是Web worker?

• 传统的 js 代码在运行时, 会阻塞页面的响应, 直到 js 执行完毕后, 页面才会响应
• Web worker 用来将 js 代码放在后台运行, 独立于其他 js, 不会影响页面的性能, 通过postMessage 将结果回传至主线程, 不会阻塞主线程

25. 什么是离线存储? 如何使用 HTML 的离线存储功能? 工作原理是什么?

• 离线存储指的是当用户未连接到网络时, 仍然可以实现页面的访问, 并且在恢复网络后, 会自动更新离线页面的数据
• 工作原理
  • 离线缓存是基于一个新建的 .appcahce 文件的缓存机制, 通过这个文件上的解析清单离线缓存网页中的数据, 这些数据就会像 cookie 一样被保存, 当用户网络断开后, 浏览器会按照之前缓存的数据来加载网页
  • 创建一个与 .appcache 文件, 并且在根标签中添加manifest="filename.appcahce"

CACHE MANIFEST
	CACHE:
	/filename.js
	/filename.css
	NETWORK:*
	FALLBACK:
	another.html

• 使用 window.applicationCache 进行缓存操作

26. 浏览器是如何对 HTML5 的离线储存资源进行管理与加载的?

• 当网络在线时, 浏览器识别到 manifest 属性时, 如果页面是首次加载, 那么会按照该属性指向的文件中的内容进行下载, 并缓存到本地; 如果在加载页面时, 页面已经离线存储, 那么浏览器会使用离线存储的资源加载页面, 然后对比新旧manifest, 如果有更新, 将更新后的数据重新缓存
• 当网络离线时, 浏览器直接会使用离线存储的资源加载网页

27.canvas与 svg 有什么区别?

28.head标签有什么作用? 什么标签必不可少?

• head标签用来设置网页的头部, 是所有头部元素的容器
• head中的标签可以用来设置网页元信息, 引用样式表, 执行脚本等
• head标签中的信息可以用来描述网页的属性与信息, 其中的大部分信息一般不会展示给用户
  • meta,style,link,base,script,title标签可用于 head 标签之中
• title标签在 head 标签中必不可少, 它用来显示页面的标题内容

29. 如何区分浏览器的严格模式与混杂模式? 有什么意义?

• 网页中设置的 DTD(Document Type Definition) 文档类型定义是用来区分两种模式的标准

• HTML5文档不存在严格模式与混杂模式
• 严格模式让不同的浏览器能够按照统一的标准执行兼容, 保证了旧网站的运行

30. 浏览器乱码的原因是什么?

• 网页源代码是 gbk 编码, 内容中的中文汉字是 utf-8 编码, 或者程序从数据库中取出的数据是 utf-8 编码时, 两种编码不一致, 必然会造成乱码
• 更改 html 文档的charset=utf-8
• 使用文本编辑器, 保存文档为 utf-8 格式

31. 渐进增强与优雅降级有什么区别?

• 渐进增强立足于实现 HTML 最基础的功能, 满足最低的需要, 然后根据高版本的浏览器逐渐增加新特性与新功能, 是一个由简单到复杂的过程
• 优雅降级立足于首先满足最高版本浏览器的需要, 搭建一个成熟的且高级的网页, 然后针对低版本浏览器逐渐降低用户体验, 减少功能, 是一个由复杂到简单的过程

32.HTML5中的 drag API 是什么?

• drag API用来实现对元素的拖拽功能
• 在元素标签中添加了 draggable=true 属性后, 元素将会成为一个可拖放元素, 该元素通常与另一个拖放目标区域元素配合使用
  • dragstart事件名, 事件的主体是被拖放元素, 开始拖放时触发
  • dragend事件名, 事件的主体是被拖放元素, 结束拖放式触发
  • drag事件的主体是被拖放元素, 拖放中触发
  • dragenter事件主体是目标元素, 进入目标元素时触发
  • dragleave事件主体是目标元素, 离开目标元素时触发
  • dragover事件主体是目标元素, 在目标元素中拖放时触发
  • dop事件主体是目标元素, 目标元素完全接受被拖放元素时触发