HTML常见面试提问总结
HTML基础
1. HTML 文件中的 DOCTYPE 是什么作用?
HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准
DOCTYPE 即 Document Type,网页文件的文档类型标准。
主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。
DOCTYPE 需要放置在 HTML 文件的 <html>
标签之前,如:
<!DOCTYPE html>
<html>...
</html> (目前主流)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>...
</html> (早期)
2. HTML、XML、XHTML 之间有什么区别?
它们都属于标记语言。
语言 | 中文名 | 说明 |
---|---|---|
HTML4 | 超文本标记语言 | 主要用于做界面呈现。HTML 是先有实现,后面才慢慢制定标准的,导致HTML⾮常混乱和松散,语法非常的不严谨。 |
XML | 可扩展标记语言 | 主要⽤于存储数据和结构。语法严谨,可扩展性强。由于 JSON 也有类似作⽤但更轻量⾼效, XML 的市场变得越来越⼩。 |
XHTML | 可扩展超文本标记语言 | 属于加强版 HTML,为解决 HTML 的混乱问题而生,在语法方面变得和 XML 一样严格。另外,XHTML 的出现也催生了 HTML 5,让HTML向规范化严谨化过渡。 |
HTML5 | 超文本标记语言 | 在HTML的基础上进行拓展,用于页面呈现 (目前标准) |
XML的要求会比较严格:
有且只能有一个根元素
大小写敏感
正确嵌套
必须双引号
必须闭合标签
…
<?xml version="1.0" encoding="utf-8"?>
<root><father id='box'><child>小张</child><child>小王</child></father>
</root>
XHTML 和 HTML5 的历史延展: https://www.cnblogs.com/my-freedom/p/5796915.html
番外: 所以 HTML5 是HTML的新一代标准, 所谓的 H5 工程师这一词, 其实是国产词, 泛指新一代的web开发工程师,
具体H5工程师, 做什么工作方向, 还是要看需求 (比如: 移动端开发, PC端网页开发, H5小游戏开发…)
3. 前缀为 data-
开头的元素属性是什么?
这是一种为 HTML 元素添加额外数据信息的方式,被称为 自定义属性。
我们可以直接在元素标签上声明这样的数据属性:
<div id="mydiv" data-message="Hello,world" data-num="123"></div>
也可以使用 JavaScript 来操作元素的数据属性:
let mydiv = document.getElementById('mydiv')// 读取
console.log(mydiv.dataset.message)// 写入
mydiv.dataset.foo = "bar!!!"
注意:在各种现代前端框架出现后,这种原生的自定义属性已经变得不太常用了, 以前的使用频率非常高, 所以我们知道即可。
例如: vue实现删除功能时需要 id, 可以直接传值
<tr v-for="item in list" :key="item.id"><td>张三</td><td>18</td><td>体育好</td><td><button @click="del(item.id)">删除</button><button>编辑</button></td>
</tr>
4. 谈谈你对 HTML 语义化的理解?
考察核心点: 语义化的好处 (利于SEO, 可阅读性更好)
语义化之前:
在提倡语义化之前,你可能会使用各种各样的标签去实现同样的功能,比如:
- 使用 span、div、p、a 等做文字, 做按钮
- 使用 div 做一切
从功能方面来说,这确实是不存在什么问题的,完全可以达到功能效果。但这不符合直觉,非常不友好:
- 对人不友好:阅读代码的人不能一眼看出代码的功能
- 对机器不友好:解析代码的程序不能很好的对这些元素进行分类处理
语义化之后:
为了解决上面说的问题,HTML5 规范提倡语义化标签,即使⽤恰当语义的 HTML 标签让⻚⾯具有良好的结构与含义,⽐如:
<p>
标签就代表段落<article>
代表正⽂内容<button>
代表按钮<header>
代表头部- 等等…
语义化的好处:
对开发者的好处 | 对机器/程序的好处 |
---|---|
使⽤了语义化标签的程序,可读性明显增强,开发者可以比容易和清晰地看出⽹⻚的结构;这也更利于整个开发团队的协作开发和后续维护工作 | 带有语义的网页代码在⽂字类应用上的表现⼒丰富,利于搜索引擎爬⾍程序来爬取和提取出有效的信息;语义化标签还⽀持读屏软件,根据⽂章可以⾃动⽣成⽬录等,方便特殊人群无障碍的使用这些网页程序。 |
语义化的适用性:
语义化适合内容型的网站来使用(如简书、知乎),对其⽹站内容的传播有很⼤帮助。
5. HTML5 对比 HTML4 有哪些不同之处?
考察点: 是否了解 html5 新增的一些新特性
不同点 | 备注说明 |
---|---|
只有一种 DOCTYPE ⽂件类型声明(统一标准) |
<!DOCTYPE html>
|
增加了一些新的标签元素(功能, 语义化) |
section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup… |
input 支持了几个新的类型值 |
date, email, url 等等
|
新增了一些标签属性 | charset(⽤于 meta 标签);async(⽤于 script 标签) |
新增的全域属性 |
contenteditable, draggable… hidden… |
新增API | 本地存储, 地理定位, Canvas绘图, 拖拽API, 即时通信WebSocket… |
获取地理定位: navigator.geolocation.getCurrentPosition(successCallback, errorCallback) (为了安全, 需要在 https 网站使用)
记忆角度: 更标准, 新增标签, 新增type表单属性, 新增全域属性, 新增API…
6. meta 标签有哪些常用用法?
<meta>
标签的具体功能一般由 name/http-equiv 和 content 两部分属性来定义。
- 如果设置 name 属性,则它描述的是网页文档的信息(例如:作者、⽇期和时间、⽹⻚描述、 关键词)
- 如果设置 http-equiv 属性,则它描述的相当于是 HTTP 响应头信息(例如:网页内容信息, 网页缓存等)
一些常用的功能及写法:
- 设置网页关键词 (SEO)
<meta name="keywords" content="电商,好货,便宜">
- 设置网页视口(viewport)控制视⼝的⼤⼩、缩放和⽐例等 (移动端开发)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
- 设置 http 响应头:Content-Type 网页内容类型 (字符集)
<meta http-equiv="content-type" content="text/html;charset=utf-8"><!-- 设置字符集可简写为 -->
<meta charset="utf-8">
7. img 标签的 srcset 的作用是什么?
考察点: 处理响应式图片的方式 (css媒体查询换的是背景图片, 而不是 img 标签的 src)
开发者和设计师们竞相寻求 处理响应式图片 的方法。这的确是一个棘手的问题 ,因为我们对同一个网站在众多设备宽度下,
使用同一图像源。你愿意在一个大显示屏上显示模糊地、马赛克状的图像?
你愿意在你的手机上加载一个巨大的(虽然更漂亮的)图像?这个问题令人左右为难。 博客链接
其实通过使用 img 标签的 srcset 属性,可定义一组额外的图片集合,让浏览器根据不同的屏幕状况选取合适的图片来显示。
也就是图片的响应式处理能力。
如果你的响应式需求比较简单,只需要针对屏幕的不同 dpr (device pixel ratio,设备像素比)来决定图片的显示的话,
dpr 设备像素比, 越高, 能够显示的越清晰 (dpr: 2, dpr: 3)
那么就只要这么写:
<img srcset="320.png 1x, 640.png 2x, 960.png 3x" />
对于可变宽度的图像,我们使用srcset
搭配w
描述符以及sizes
属性 。
w
描述符告诉浏览器列表中的每个图象的宽度。sizes
属性需要至少包含两个值,是由逗号分隔的列表。
根据最新规范,如果srcset
中任何图像使用了w
描述符,那么必须要设置sizes
属性。
sizes
属性有两个值:
第一个是媒体查询条件;
第二个是图片对应的尺寸值,
在特定媒体条件下,此值决定了图片的宽度。
需要注意是,源图尺寸值不能使用百分比,如果要用100%,
vw
是唯一可用的CSS单位。
<img alt="img元素srcset属性浅析"srcset="320.png 320w, 480.png 480w, 640.png 640w"sizes="(max-width: 320px) 100vw, (max-width: 360px) 320px,(max-width: 480px) 360px,(max-width: 640px) 480px,640px"src="640.png"
/>
为 img 定义以上属性后,浏览器的工作流程如下:
- 检查设备的实际宽度
- 检查 img 标签的 sizes 属性中定义的媒体查询条件列表,并计算哪个条件最先匹配到
- 得到图片此时的响应式宽度
- 加载 srcset 中最接近, 最适合媒体查询匹配到的宽度的图片
注意: 测试时, 清除缓存测试, 因为一旦加载了高清图, 就不会也没有必要, 回过去再用小图替换了
且我们无法确定究竟显示哪张图像,因为每个浏览器根据我们提供的信息挑选适当图像的算法是有差异的。
(译者注:srcset和size列表是对浏览器的一个建议(hint),而非指令。由浏览器根据其能力、网络等因素来决定。)
8. 响应式图片处理优化: Picture 标签
考察点: 响应式图片处理
picture
元素就像是图像和其源的容器。浏览器仍然需要img
元素,用来表明需要加载的图片
在 <picture>
下可放置零个或多个<source>
标签、以及一个<img>
标签,为不同的屏幕设备和场景显示不同的图片。
如果source匹配到了, 就会优先用匹配到的, 如果没有匹配到会往下继续找
使用picture
元素选择图像,不会有歧义。
浏览器的工作流程如下:
- 浏览器会先根据当前的情况,去匹配和使用
<source>
提供的图片 - 如果未匹配到合适的
<source>
,就使用<img>
标签提供的图片
<picture><source srcset="640.png" media="(min-width: 640px)"><source srcset="480.png" media="(min-width: 480px)"><img src="320.png" alt="">
</picture>
9. 在 script 标签上使用 defer 和 async 的区别是什么?
明确: defer 和 async 的使用, 可以用于提升网页性能
script标签存在两个属性,defer和async,因此 script标签 的使用分为三种情况:
<script src="example.js"></script>
没有defer或async属性,浏览器会立即加载并执行相应的脚本。
不等待后续加载的文档元素,读到就开始加载和执行,此举会阻塞后续文档的加载
<script async src="example.js"></script>
有了async属性,表示后续文档的加载和渲染与js脚本的加载和执行是并行进行的,即异步执行;
<script defer src="example.js"></script>
有了defer属性,加载后续文档的过程和js脚本的加载是并行进行的(异步),此时的js脚本仅加载不执行, js脚本的执行需要等到文档所有元素解析完成之后,DOMContentLoaded事件触发执行之前。
下图是使用了 defer、async、和未使用时的运行情况对比:
【上图的图例说明】
绿线:HTML 的解析时间
蓝线:JS 脚本的加载时间
红色:JS 脚本的执行时间
从图中我们可以明确一下几点:
1.defer和async在网络加载过程是一致的,都是异步执行的;(放在页面顶部, 也不会阻塞页面的加载, 与页面加载同时进行)
2.两者的区别, 脚本加载完成之后, async是立刻执行, defer会等一等 (等前面的defer脚本执行, 等dom的加载)
所以, js脚本加上 async 或 defer, 放在头部可以减少网页的下载加载时间, 如果不考虑兼容性, 可以用于优化页面加载的性能
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/index.js"></script>
10. 前端做本地数据存储的方式有哪些?
- Cookies 4k (用户不删, 一直都在) 插件 cookies-js
- localStorage 5m (用户不删, 一直都在)
- sessionStorage 5m (关闭浏览器, 会自动销毁)
- Web SQL
- IndexedDB适用存储大量数据(》=250)
11. 以上几种前端存储的区别是什么?
方式名称 | 标准说明 | 功能说明 |
---|---|---|
Cookies | HTML5 前加入 |
1.会为每个请求自动携带所有的Cookies数据,比较方便,但是也是缺点,浪费流量; 2.每个domain(站点)限制存储20个cookie; 3.容量只有4K 4.浏览器API比较原始,需要自行封装操作。 (js-cookie) |
localStorage | HTML5 加入 |
1.兼容IE8+,操作方便; 2.永久存储,除非手动删除; 3.容量为5M |
sessionStorage | HTML5 加入 |
1.功能基本与 localStorage 相似,但当前页面关闭后即被自动清理; 2.与Cookies、localStorage 不同点是不能在所有同源窗口间共享,属于会话级别的存储 |
Web SQL | 非标准功能 |
1.2010年已被废弃,但一些主流浏览器中都有相关的实现; 2.类似于 SQLite 数据库,是一种真正意义上的关系型数据库,⽤SQL进⾏操作; |
IndexedDB | HTML5 加入 |
1.是一种 NoSQL 数据库,⽤键值对进⾏储存,可进⾏快速读取操作; 2.适合复杂 Web存储场景,⽤JS操作⽅便 (前端大量存数据的场景较少, 如果有, 可以用) 3.存储空间容量, 大于等于 250MB,甚至没有上限 |
HTML常见面试提问总结相关推荐
- 视频教程:Java常见面试题目深度解析!
视频教程:Java常见面试题目深度解析! Java作为目前比较火的计算机语言之一,连续几年蝉联最受程序员欢迎的计算机语言榜首,因此每年新入职Java程序员也数不胜数.很多java程序员在学成之后,会面 ...
- 面试中 项目遇见的难点答案_你和offer之间只差这几个面试问题!常见面试问题汇总...
99%的人都会大呼"坑爹"的面试问题,你真的知道该怎么回答吗? 记得第一次面试的时候,面试官对简历也很满意,前面都聊的好好的,最后问了一句简历上没有的内容:你的职业规划是什么?我一 ...
- 从零深入理解Yolo系列理论v1-v8 + 目标检测面试提问
目标检测-Yolo系列发展 先验框/锚框/候选框 Anchor机制 Anchors Base原理 Anchors Free原理 YOLO v1 Yolov1网络结构 Yolov1实现方法 Yolov1 ...
- js 计算任意凸多边形内最大矩形_题库 | 计算机视觉常见面试题型介绍及解答 第 7 期...
- 计算机视觉 -为什么说 Dropout 可以解决过拟合?(1)取平均的作用: 先回到标准的模型即没有 dropout,我们用相同的训练数据去训练 5 个不同的神经网络,一般会得到 5 个不同的结果 ...
- Hive常见面试问题(持续更新)
Hive常见面试问题 目录 Hive 内部表和外部表的区别,以及各自使用于哪种环境?Hive和传统数据库的区别? HiveRc 文件? Hive 分区? Hive 分区过多有何坏处以及分区时的注意事项 ...
- 面经——C/C++常见面试知识点总结附面试真题
参考:C/C++ 面试题 作者:zhaouc 发布时间: 2015-02-15 15:51:00 网址:https://blog.csdn.net/zhaouc/article/details/438 ...
- java面试常见面试问题_Java面试准备:15个Java面试问题
java面试常见面试问题 并非所有的访谈都将重点放在算法和数据结构上-通常,访谈通常只侧重于您声称是专家的语言或技术.在此类访谈中,通常没有任何"陷阱"问题,而是它们要求您利用内存 ...
- spring常见面试问题_Spring面试问题
spring常见面试问题 另外,请查看我们最新的文章69Spring面试问题与解答–最终清单 . 1)什么是春天? 回答: Spring是控件和面向方面的容器框架的轻量级反转. 2)解释春天? 回答: ...
- 【C++基础】常见面试问题(二)
1. 指针和引用的区别 指针保存的是所指对象的地址,引用是所指对象的别名,指针需要通过解引用间接访问,而引用是直接访问 指针可以改变地址,从而改变所指的对象,而引用必须从一而终: 引用在定义的时候必须 ...
最新文章
- java中标识符,关键字,数据类型
- 使用 java 的 displaytag1.2 分页组件使用步骤
- 如今全球超级计算机运算速度排名,截至2019年(或2018年),全球超级计算机运算速度排名第一的是?...
- 微信 weui 初体验
- Logistic回归与牛顿迭代法
- 【scala初学】scala 控制 for while match if
- 完成计算机组装工艺卡组装准备,计算机组装与维护(刘猛)教程方案.doc
- 使用OpenCV-python实现颜色特征跟踪视频中的物体
- 机器学习框架ML.NET学习笔记【5】多元分类之手写数字识别(续)
- 【Vue2.0】—Vue中的key有什么作用?(四)
- 2018.11.09 bzoj4773: 负环(倍增+floyd)
- HDU10月月赛总结
- 完整版第四方Oreo易支付源码+28K易支付源码
- HKC PG27P3评测 HKC PG27P3怎么样
- 流程图,NS图,伪代码
- 软件开发实习做什么_为什么要有开发人员实习时间
- uni-app的三种生命周期函数整理
- [iOS]Size Class不同尺寸适配的是什么样的机型(实验向)
- CSDN小伙伴们苦苦寻找的最全的微软msdn原版windows系统镜像和office下载地址集锦
- mac下面安装破解版UltraEdit