前端面试实录 HTML 篇
前言
系列首发于公众号『前端进阶圈』 ,更多精彩内容敬请关注公众号最新消息。
前端面试实录 HTML 篇
1. HTML5 有哪些更新?
引入了语义化标签:
header
: 头部元素section
: 中间元素footer
: 底部元素nav
: 导航区域aside
: 侧边栏区域article
:内容元素process
: 进度条bdo
: 定义文字方向sub
: 下标sup
: 上标pre
: 预格式化文本媒体标签:
audio
: 音频标签video
: 视频标签source
: 格式源标签input
标签的扩展:属性扩展:
placeholder
: 默认提示文本autofocus
: 自动聚焦required
: 必填项type
属性扩展:date
: 日期选择框color
: 颜色选择器button
: 按钮radio
: 单选框checkbox
: 复选框range
: 滑块history API
:history.go()
: 跳转某个页面(URL)/上个页面(-1)/下个页面(1)history.back()
: 返回上个页面history.forward()
: 跳转下个页面history.pushstate()
: 添加history
栈history.replacestate()
: 替换history
栈数据存储:
localStorage
:永久性存储sessionStorage
:会话存储
2. 对 HTML 语义化的理解?
一句话:正确的标签做正确的事。
优点:
对机器友好:更便于解析和爬虫,有利于
SEO
对开发者友好:增强了代码可读性,结构更加清晰,便于开发和维护
3. 行内元素有哪些?块级元素有哪些?空元素有哪些?
行内元素:
a,b,span,img,input,select,strong
块级元素:
div,ul,ol,li,dl,dt,dd,h1~h6,p
空元素:(即没有内容的 HTML 元素,在开始标签中关闭的,也就是没有闭合标签)
<br>
、<hr>
、<img>
、<input>
、<link>
、<meta>
、<area>
、<source>
4. iframe 的优缺点?
定义:
iframe
会创建包含另一个文档的内联框架,可将另一个HTML
页面嵌入到页面中。优点:
可用来加载速度较慢的内容(如广告)
使用脚本并行下载
实现跨子域通信
缺点:
会阻塞主页面的
onload
时间无法被一些搜索引擎识别到
会产生较多页面,不便于管理
5. DOCYPE(文档类型) 的作用?
定义:一种标准通过标记语言文档类型声明,本质就是告诉浏览器(解析器)以什么样的文档类型来解析文档。有不同的渲染模式,他们对 CSS 代码和 JavaScript 代码解析不同,必须写在文档的第一行。
分类:(混杂模式,标准模式,准标准模式,超级标准模式)
CSS1Compat
: 标准模式(strick mode
):使用 W3C 的标准来解析渲染页面,在浏览器中,会以最高标准呈现页面BackCompat
: 怪异模式(也称混杂模式,Quick mode
): 浏览器使用自己的模式来解析渲染页面,在当前模式中,页面会以一种比较宽松向后兼容的方式显示。<!DOCTYPE html>
:告诉浏览器使用 W3C 的标准来解析渲染页面,以最高的标准呈现页面。
6. src 与 href 的区别?
src 和 href 都是用来引用外部资源的
区别:
src
: 表示对资源的引用,所引用的内容会嵌入到当前标签所在位置中,也就是会将引用的资源下载应用到内容中。当浏览器解析到它的时候,会暂停其他资源的处理,直到该资源加载——编译——执行完毕。一般情况下 js 脚本放在页面的最底部href
: 表示超文本引用,指向一些网络资源,会建立当前站点建立链接关系。当浏览器解析到他们所引用的资源时,不会停止其他资源的处理,而是会并行下载。常用在a, link
等标签上。
7. script 标签中 defer 和 async 的区别?
字面含义:
defer
: 延迟async
: 异步普通情况:如果没有
defer
或async
,当浏览器遇到 js 脚本会立即加载——编译——执行,会阻塞后面的逻辑。<script src="example.js"></script>
添加
defer
或async
:有
defer
: 加载其他文档和 js 脚本会同时进行的,但在此过程中 js 脚本是不执行的,只加载。js 脚本的执行会在加载解析完所有的元素后才会执行。<script defer src="example.js"></script>
有 async: 加载其他文档和 js 脚本会同时进行,但在此过程中,js 脚本会并行加载——编译——执行的。
<script async src="example.js"></script>
区别:
在于 js 脚本加载完成后何时执行,
defer
不会在加载后立即执行,而async
会在加载后立即执行。defer
符合是最接近我们对于 js 脚本执行的理解如果有添加多个
defer
属性的 js 脚本,他们会按照加载顺序执行,而async
,他们只要加载完成后就会立刻执行相同点:
在加载这块是相同的,都是异步加载的
8. 常用的 meta 标签的属性有哪些?
meta
: 描述网页文档的属性,比如网页的作者,网页描述,关键词等
9. tile 与 h1 的区别?b 与 strong 的区别?i 与 em 的区别?
title
与h1
的区别:title
属性更侧重于网站的信息,显示在网页标题上,告诉搜索引擎和用户此网站是做什么的。而h1
显示在内容上,title
标签比h1
标签更重要一些。b
与strong
的区别:strong
标签有语义,起到加重语气及强调的地方,而b
标签没有,b
标签只是简单的加粗标签i
与em
的区别:em
标签有语义,表示一般的强调文本,对搜索引擎更友好。而i
标签仅仅表示样式上的斜体。
特殊字符描述:
问题标注
Q:(question)
答案标注
R:(result)
注意事项标准:
A:(attention matters)
详情描述标注:
D:(detail info)
总结标注:
S:(summary)
分析标注:
Ana:(analysis)
提示标注:
T:(tips)
往期推荐:
最后:
版权声明: 本文为 InfoQ 作者【控心つcrazy】的原创文章。
原文链接:【http://xie.infoq.cn/article/e542bf6be992962ae7192748f】。文章转载请联系作者。
评论