TML面试题总结

1. 对 HTML 语义化的理解

1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构；
2. 代码结构清晰，方便团队的管理和维护，并且语义化更具有可读性，减少差异化；
3. 提升用户体验； 例如：title、alt用于解释名词或者图片信息、label标签的活用
4. 有利于SEO优化，提升搜索引擎排名； 和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息； 爬虫依赖于标签来确上下文和关键字的权重；
5. 方便其他设备的解析（屏幕阅读器、盲人阅读器、移动设备等等）；

2. H5新增特性

1. 语义化更好的标签： header、nav、aside、article、section、footer；
2. 音视频标签： audio、video； 如果浏览器不支持自动播放怎么办? 在属性中添加autoplay(谷歌浏览器不支持音频自动播放，但是视频支持静音自动播放)；
3. 以 data- 开头的自定义属性；
4. 本地存储： localStorage、sessionStorage；
5. 表单控件； 给 type 属性设置值； url、search、file、email、date、number、month、color、tel；
6. 画布； Canvas；
7. 拖拽释放： drag、drop；
8. 新技术： 浏览器多线程：webWorker； 前后台持久化通信技术：webSocket；

3. HTML5常用的结构标签有哪些，它替换了之前的哪些标签？

• header、nav、main、article、aside、footer、section
• <div class="header">、<div class="nav">、<div class="main">...

4. HTML文档采用 UTF-8编码集 的优势是什么？

1. utf-8： 使用3个字节表示一个符号，基本上可以覆盖世界上所有的语言；
2. 优势： 与传统的gb2312、gbk相比，可识别的字符集更多，也是行业界推荐的；

5. 标签中常用的属性有哪些？

• id、class、title、style；

6. 标签中的 title属性 和 alt属性 的区别是什么？

1. title： 是标签的描述属性，当鼠标移入时，稍等一会儿就会出现title属性的属性值；
2. alt: 用在可置换元素上，当外部资源无法正确加载时，alt属性的属性值就会显示在占位符上；

7. 什么是置换元素 和 非置换元素，每种类型至少举出三个例子

1. 置换元素： 置换元素的内容来自外部，该元素仅是外部资源的占位符； <img>、<video>、<audio>...；
2. 非置换元素： 非置换元素内容来自当前文档，必须使用双标签； <p>、<h1> ~ <h6>、<ul>...；

8. 标签中的 href属性 和 src属性 有什么区别？

1. 二者都是对外部资源的引用；
2. href： 用于超文本或样式，用在 <link>标签 和 <a>标签上；
3. src： 用在外部资源占位符上，如<img>、<iframe>、<script>、<video>...；

9. iframe标签有什么优缺点？

1. 优点： 重载页面时不需要加载整个页面，只需要重载页面中的一个框架页，从另一方面来说，减少数据的传输，加快了网页下载速度； 技术易于掌握，使用方便，可主要使用于不需要搜索引擎来搜索的页面； 当前页面，直接加载其他页面，而不必发生跳转；
2. 缺点： iframe 会阻塞主页面中的 Onload 事件； 会产生很多页面，不容易管理； 多框架的页面会增加服务器的http请求，影响页面的并行加载； 并行加载：同一时间针对不同域名下的请求，iframe和所在页面在同一个域下面，而浏览器的并行加载的数量是有限制的；

10. 表单中的按钮有几种，常用的标签有哪几个？

1. 按钮有三种： 普通按钮、提交按钮、重置按钮；
2. 常用标签：

<input type="button" />
<input type="submit" />
<input type="rest" />
<button />

11. 表单数据的提交方式有几种，分析使用场景？

1. POST： 表单数据通过请求体发送；
2. GET： 表单数据通过URL地址栏发送；

12. 什么是 重绘 和 重排？

1. 重绘： 当元素的一部分属性发生改变，如外观、背景、颜色等不会引起布局变化，只需浏览器根据元素的新属性重新绘制，使元素呈现新的外观叫做重绘；
2. 重排： 和重绘相反，当改变布局的时候，就会引起重排；
3. 重绘不一定需要重排（比如颜色的改变），重排必然导致重绘（比如改变网页位置）

们经常会遇到这样的一个问题。

设计出了很牛逼的设计稿，客户确认了，前端静态制作也出来，还原设计稿95%以上，客户也确认了。

那是个完美啊！！做完程序了，交给客户了。然后客户自己上传了图片了。那个悲催啊！！惨不忍睹啊！！

完全和设计稿两码事？图片不好看，到处都跑位。

客户就骂过来了，你们是否也遇到这样的事情？因为客户的公司没有设计师啊，哈哈，这个问题可能遇到的不少。

其实大家都会说，这归根到底都是客户没有处理图片的问题所造成的。然后大家都推来推去。

那么，前端制作工程师是否有办法解决这样的问题，其实是可以的。如果因图片问题导致布局变了，解决了这个问题就只剩下图片的美观性，那这个就可以跟客户说你要请个设计师帮你处理图片啊。这样不就解决问题了吗？

这种方式和微信朋友圈的九宫格图片展示方式类似，只显示图片中间的内容，其他的将会被隐藏。

举个栗子：

这个列表是不是很整齐，看起来比较舒服，虽然图片有那么点点的变形，但不影响阅读。

如果其中有一张图片的尺寸稍微有一点点不一样，肯定会出现跑位的情况。就像下面这样。这样客户看到不被投诉才怪哦！！

那么就以这个来说说解决方式。

大家都知道图片有一种特性，就是当图片的宽度改变时，高度也会随着等比例在改变。

例如：一张宽高都为100px的图片，如果把宽度调至200px，那么高度是不是也会随之变成200px；没错的，就是利用这个特性来解决布局乱的情况。

这里就拿上一次说到的 “图文列表 纯css布局” 那次说的布局来说说，因为都是做好，和上面那个图类似。偷偷懒。如果没看过那篇，搜一下 “图文列表 纯css布局”，就可以找到了。（如需下载源码，请关注微信公众号：JS学吧）

效果是这样的：

如何切出占位图呢？如下操作

用PS打开文件，用裁剪工具把图片完整的裁下来，如下图

裁完成，再点击菜单栏目 “图像 > 图像大小” 或 按着 Alt键，再点两次 I 键。可以调出 “图像大小” 弹窗。

可以看到 “像素大小” 的宽度和高度都为260px，那么只要调其中一个就可以，就可以达到等比例调整。

我们先调成10px，确定后，再把图层的 “小眼睛” 关掉，另存为一个 png24 的透明图片，记得哦！！一定是要png24的。名字自己定啦！！

然后把 img 中的图片路径改为如下：

<a href=""><img src="rect.png" alt="" width="100%"></a>然后刷新看看效果，是不是发现原来的图片不见的，变成空白的，但是原来的布局结构没有改变。其实要的就是这样的效果。

然后我们在 img 的外层再包个div，就拿这个div来放图片。顺便加个背景色看看效果。

<a href="">

<div style="background: #000;">

<img src="rect.png" alt="" width="100%">

</div>

</a>

看，占位图片的效果出来了。外层div的宽度和高度都被img撑开了。是不是达到了想要的效果。

关键的时候来了。就是处理图片。我们要把产品图片做为背景的形式输出即可以。把图片的路径写在div上面的就解决了。再加上css3新属性就可以了。

HTML如下：

<a href="">

<div class="cover-img" style="background-image: url(pic001.jpg);">

<img src="rect.png" alt="" width="100%">

</div>

</a>

用背景样式 background-image 定入路径。再添加一个 cover-img 的类名。然后 cover-img 的样式如下：

.cover-img {

background-position: center;

background-repeat: no-repeat;

background-size: cover;

}

注意、注意、注意，中要的事说三遍。重点就在于 css3 的新属性 background-size: cove；

这个属性就是会把背景图片，以等比例的形式保持图像本身的宽高比例，将图片缩放到正好完全覆盖定义背景的区域。

是不是不明白，那就对了，挺不好理解。最好还是用实际效果来看看。

最终出来的效果就是和最开始的那张图片一样的，只是看不出来而已。

那么我们就来玩真的。直接上网整一张大图的路径放进去看看就知道了。

上某某网站找特大尺寸的图片来，例如下面这张：尺寸是2533x1583，够大了，也不是正方形哦！！我们一开始说的都是正方形，现在弄个不是正方形的图片来试试效果。

HTML如下：

<a href="">

<div class="cover-img" style="background-image: url(pic002.jpg);">

<img src="rect.png" alt="" width="100%">

</div>

</a>

更改url里的路径即可

出来的效果如下：

是不是自动调整了。

我们再换一张高形状的图片。二哈图：尺寸是2448x3264

HTML：如下

<a href="">

<div class="cover-img" style="background-image: url(pic003.jpg);">

<img src="rect.png" alt="" width="100%">

</div>

</a>

最终效果：

怎么样，效果还可以吧！！不知道你们看出了什么了没有。

第一张是宽形状的图片，是以高度填满 div 的区域。

第二张是高形状的图片，是以宽度填满 div 的区域。

全都是靠着 background-size: cover; 这个属性解决了。但也是有不好的地方。

例如不支持IE浏览器，图片显示不全，多一个文件服务器要多请求一次.....等等问题！！做图时的内容尽可能在正中间。

然后，不管客户上传什么鬼形状的图片，都不会产生布局变乱的情况。

获取《vue3.0大公司后台管理系统开发 正规开发流程项目实践》视频，

请点击下面 “了解更多” 或 请关注微信公众号《手把手撸码前端》