前端面试实录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 class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="example.js"></script> - 添加
defer或async：- 有
defer: 加载其他文档和 js 脚本会同时进行的，但在此过程中 js 脚本是不执行的，只加载。js 脚本的执行会在加载解析完所有的元素后才会执行。<script defer class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="example.js"></script> - 有 async: 加载其他文档和 js 脚本会同时进行，但在此过程中，js 脚本会并行加载——编译——执行的。
<script async class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="example.js"></script>
- 有
- 区别：
- 在于 js 脚本加载完成后何时执行，
defer不会在加载后立即执行，而async会在加载后立即执行。defer符合是最接近我们对于 js 脚本执行的理解 - 如果有添加多个
defer属性的 js 脚本，他们会按照加载顺序执行，而async，他们只要加载完成后就会立刻执行
- 在于 js 脚本加载完成后何时执行，
- 相同点：
- 在加载这块是相同的，都是异步加载的
8. 常用的 meta 标签的属性有哪些？
meta: 描述网页文档的属性，比如网页的作者，网页描述，关键词等
<!-- charset 文档的编码类型 -->
<meta charset="UTF-8" >
<!-- keywords 网页关键词 -->
<meta name="keywords" content="关键词" />
<!-- description 网页描述 -->
<meta name="description" content="页面描述内容" />
<!-- refresh, 页面重定向和刷新 -->
<meta http-equiv="refresh" content="0;url=" />
<!-- viewport 适配移动端，控制视口大小和比例 -->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
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)
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦