看完这篇文章保你面试稳操胜券——基础篇（html/css)

✨ 欢 迎 各 位 小 伙 伴 ： \textcolor{blue}{欢迎各位小伙伴：} 欢迎各位小伙伴：

✨ 进大厂收藏这一系列就够了，全方位搜集总结，为大家归纳出这篇面试宝典，面试途中祝你一臂之力！，共分为四个系列

✨ 包 含 V u e 40 道 经 典 面 试 题 \textcolor{green}{包含Vue40道经典面试题} 包含Vue40道经典面试题

✨ 包 含 r e a c t 12 道 高 并 发 面 试 题 \textcolor{green}{包含react12道高并发面试题} 包含react12道高并发面试题

✨ 包 含 微 信 小 程 序 34 道 必 问 面 试 题 \textcolor{green}{包含微信小程序34道必问面试题} 包含微信小程序34道必问面试题

✨ 包 含 j a v a S c r i p t 80 道 扩 展 面 试 题 \textcolor{green}{包含javaScript80道扩展面试题} 包含javaScript80道扩展面试题

✨ 包 含 A P P 10 道 装 逼 面 试 题 \textcolor{green}{包含APP10道装逼面试题} 包含APP10道装逼面试题

✨ 包 含 H T M L / C S S 30 道 基 础 面 试 题 \textcolor{green}{包含HTML/CSS30道基础面试题} 包含HTML/CSS30道基础面试题

✨ 还 包 含 G i t 、 前 端 优 化 、 E S 6 、 A x i o s 面 试 题 \textcolor{green}{还包含Git、前端优化、ES6、Axios面试题} 还包含Git、前端优化、ES6、Axios面试题

✨ 接 下 来 让 我 们 饱 享 这 顿 美 味 吧 。 一 起 来 学 习 吧 ！ ！ ！ \textcolor{pink}{接下来让我们饱享这顿美味吧。一起来学习吧！！！} 接下来让我们饱享这顿美味吧。一起来学习吧！！！

✨ 本 篇 为 《 看 完 这 篇 文 章 保 你 面 试 稳 操 胜 券 》 第 二 篇 （ h t m l / c s s 基 础 篇 ） \textcolor{pink}{本篇为《看完这篇文章保你面试稳操胜券》第二篇（html/css基础篇）} 本篇为《看完这篇文章保你面试稳操胜券》第二篇（html/css基础篇）

很多伙伴都说进大厂很艰难，本人觉得在it行业想要进入规模比较大的互联网公司，首先有个本科学历作为敲门砖就够用了，足以敲开大厂的大门

然而向你迎面走来的面试官只有你足够强大才能去应付他，博主今天就为大家总结一套前端面试题，很强势呦，让你在面试过程中 solo 全场。

文章目录

• • • HTML
    • • • 语义标签
        • 增强型表单
        • 新的表单的新属性 placeholder
        • 视频和音频
        • canvas绘图
        • 地理位置
        • 拖放API
        • 拖拽目标对象的方法
        • 拖拽属性值
        • 你做的页面在哪些流览器测试过？ 这些浏览器的内核分别是什么?
        • Doctype
        • div+css 的布局较 table 布局有什么优点？
        • img 的 alt 与 title 有何异同？ strong 与 em 的异同
        • 简述一下 src 与 href 的区别
        • 知道的网页制作会用到的图片格式有哪些？
        • 你如何理解 HTML 结构的语义化？（大概能说出几点即可）
    • CSS
    • • • 实现水平垂直居中
        • stylus/sass/less区别
        • less和sass的区别
        • less scss样式穿透
        • 【less中的变量】
        • css各种模块
        • css选择器
    • 前端优化
    • 写在最后

HTML

语义标签

什么是语义标签，我自己的理解就是看到标签我就能明白这是什么意思。
以前制作网页布局基本使用div来做。div就是一个普通的块级标签，对搜索引擎来说没有任何的语义。
attention
语义化标签主要是针对搜索引擎
新标签可复用
浏览器兼容问题，在IE9中（2021最新版），需要 转化为块级元素。

增强型表单

邮箱验证
 <input type="email">
        <input type="submit">
数值输入
<input type="number" min="9" max="12">
        <!--限制输入的数值范围在9-12之间，包括9和12-->
文件导入
attention：上传本地文件，需js代码配合。如果需要上传多个文件，给表单添加mulitiple属性。如果上传图片，给表单添加enctype属性。
图片按钮
<input type="image" src="C:\Users\Gabrielle\Desktop\myPhoto.jpg" width=750 alt="myGimdong">
        <!--src里面填写的是我电脑的本地图片绝对路径，请添加你自己的本地图片的绝对路径或者相对路径-->
颜色选择
<input type="color">
        <input type="submit">
日期表示
<input type="date">
        <!--日期选择出来date，还有datatime，datatime-local-->
        <input type="submit">
搜索框
<input type="search" placeholder="我是输入字段为空时的提示信息">
        <input type="submit">

新的表单的新属性 placeholder

这个属性是文本的占位符，相当于一种提示信息，显示在输入域，描述期待user输入的值。
required
这个属性的值为Bool，默认为true，意思是在输入域不能为空
autofocus
auto是自动的意思，focus是聚焦的意思，这个属性描述的就是自动聚焦到需要填写的textarea。
autocomplete
这个属性有两个值，一个是on，另一个是off。默认是on，与email相反，email默认是off。功能是提示写过的信息。
minlength和maxlength
这个属性限定输入的最少字数和最多字数，以字符个数计数。

视频和音频

video----支持格式有ogg，MP3，webm
video的方法，属性，事件可以使用js来控制。
方法：play(),pause(),load(),分别是播放，停止，加载方法。
属性：width,height,controls。width和height属性值为像素或者百分比，功能是设置播放窗口的宽度和高度。controls属性值为boolean，功能是控制播放条。

canvas绘图

SVG比canvas绘图好用，SVG不容易失帧，就是更稳定的意思。
SVG对前端程序员更友好一点，它比较容易编辑，只需要从描述中移除元素就可以了。

地理位置

获取地理位置的方法？

1 通过ip地址

2 电脑上的位置信息定位
attention：浏览器必须在用户允许情况下才可以发送用户的位置信息给服务器。

拖放API

<img draggable = "true">  拖放什么? 用setData()或者ondragstart。
function drag (event){
        event.dataTransfer.setData("Text",event.target.id);
}//dataTransfer.setData() 方法设置被拖数据的数据类型和值：

拖拽目标对象的方法

getData(format)

从dataTransfer对象中获取指定格式的数据，format代表数据格式，data为数据。

clearData([format])
从dataTransfer对象中删除指定格式的数据，参数可选，若不给出，则为删除对象中所有的数据

addElement(element)
添加自定义图标

setDragImage(element,x,y)
设置拖放操作的自定义图标。其中element设置自定义图标，x设置图标与鼠标在水平方向上的距离，y设置图标与鼠标在垂直方向上的距离。

拖拽属性值

none：不能把拖动的元素放在这里。这是除了文本框之外所有元素默认的值。
move：把拖动的元素移动到放置目标。
copy：把拖动的元素复制到放置目标。
link：放置目标会打开拖动的元素(但拖动的元素必须是个链接URL地址)。
HTML5新特性 （1）用于绘画的 canvas 元素
（2）用于媒介回放的 video 和 audio 元素
（3）对本地离线存储的更好的支持
（4）新的特殊内容元素，比如 article、footer、header、nav、section
（5） 新的表单控件，比如 calendar、date、time、email、url、search
（6） 元素可拖拽API

你做的页面在哪些流览器测试过？ 这些浏览器的内核分别是什么?

• IE: trident 内核
• Firefox： gecko 内核
• Safari:webkit 内核
• Opera:以前是 presto 内核， Opera 现已改用 Google Chrome 的 Blink 内核
• Chrome:Blink(基于 webkit， Google 与 Opera Software 共同开发)

Doctype

每个 HTML 文件里开头都有个很重要的东西， Doctype， 知道这是干什么的吗？

声明位于文档中的最前面的位置， 处于 标签之前。 此标签可告知浏

览器文档使用哪种 HTML 或 XHTML 规范。 （重点： 告诉浏览器按照何种规范解析页面）

div+css 的布局较 table 布局有什么优点？

• 改版的时候更方便 只要改 css 文件。
• 页面加载速度更快、 结构化清晰、 页面显示简洁。
• 表现与结构相分离。
• 易于优化（seo） 搜索引擎更友好， 排名更容易靠前

img 的 alt 与 title 有何异同？ strong 与 em 的异同

• a:alt(alt text):为不能显示图像、 窗体或 applets 的用户代理（UA） ， alt 属性用来指 定替换文字。 替换文字的语言由 lang 属性指定。 (在 IE 浏览器下会在没有 title 时把 alt 当成 tool tip 显示)
• title(tool tip):该属性为设置该属性的元素提供建议性的信息。
• strong:粗体强调标签， 强调， 表示内容的重要性
• em:斜体强调标签， 更强烈强调， 表示内容的强调点

简述一下 src 与 href 的区别

src 用于替换当前元素， href 用于在当前文档和引用资源之间确立联系。

src 是 source 的缩写， 指向外部资源的位置， 指向的内容将会嵌入到文档中当前标签所在 位置； 在请求 src 资源时会将其指向的资源下载并应用到文档内， 例如 js 脚本， img 图片 和 frame 等元素。

<script src =” js.js” ></script>

当浏览器解析到该元素时， 会暂停其他资源的下载和处理， 直到将该资源加载、 编译、 执行 完毕， 图片和框架等元素也如此， 类似于将所指向资源嵌入当前标签内。 这也是为什么将 js 脚本放在底部而不是头部。

href 是 Hypertext Reference 的缩写， 指向网络资源所在位置， 建立和当前元素（锚点） 或当前文档（链接） 之间的链接， 如果我们在文档中添加

<link href=” common.css” rel=” stylesheet” />

那么浏览器会识别该文档为 css 文件， 就会并行下载资源并且不会停止对当前文档的处理。 这也是为什么建议使用 link 方式来加载 css， 而不是使用@import 方法

知道的网页制作会用到的图片格式有哪些？

png-8， png-24， jpeg， gif， svg

但是上面的那些都不是面试官想要的最后答案。 面试官希望听到是 Webp，dpg(京东图片)。 （是否有关注新 技术， 新鲜事物）

科普一下 Webp： WebP 格式， 谷歌（google） 开发的一种旨在加快图片加载速度的图片格式。 图片压缩体积大约只有 JPEG 的 2/3， 并能节省大量的服务器带宽资源和数据空间。 Facebook Ebay 等知名网站已经开始测试并使用 WebP 格式。 在质量相同的情况下， WebP 格式图像的体积要比 JPEG 格式图像小 40%

你如何理解 HTML 结构的语义化？（大概能说出几点即可）

去掉或样式丢失的时候能让页面呈现清晰的结构：

html 本身是没有表现的， 我们看到例如 h1 是粗体， 字体大小 2em， 加粗； strong是加粗 的， 不要认为这是 html 的表现， 这些其实 html 默认的 css 样式在起作用， 所以去掉或样式 丢失的时候能让页面呈现清晰的结构不是语义化的 HTML 结构的优点， 但是浏览器都有有默 认样式， 默认样式的目的也是为了更好的表达 html 的语义， 可以说浏览器的默认样式和语 义化的 HTML 结构是不可分割的。

屏幕阅读器（如果访客有视障） 会完全根据你的标记来“读” 你的网页.

例如,如果你使用的含语义的标记,屏幕阅读器就会“逐个拼出” 你的单词,而不是试着去对 它完整发音.

PDA、 手机等设备可能无法像普通电脑的浏览器一样来渲染网页（通常是因为这些设备对 CSS 的支持较弱）

使用语义标记可以确保这些设备以一种有意义的方式来渲染网页.理想情况下,观看设备的 任务是符合设备本身的条件来渲染网页.

语义标记为设备提供了所需的相关信息,就省去了你自己去考虑所有可能的显示情况（包括 现有的或者将来新的设备） .例如,一部手机可以选择使一段标记了标题的文字以粗体显示. 而掌上电脑可能会以比较大的字体来显示.无论哪种方式一旦你对文本标记为标题,您就可 以确信读取设备将根据其自身的条件来合适地显示页面.

搜索引擎的爬虫也依赖于标记来确定上下文和各个关键字的权重

过去你可能还没有考虑搜索引擎的爬虫也是网站的“访客” ,但现在它们他们实际上是极其 宝贵的用户.没有他们的话,搜索引擎将无法索引你的网站,然后一般用户将很难过来访问.

你的页面是否对爬虫容易理解非常重要,因为爬虫很大程度上会忽略用于表现的标记,而只 注重语义标记.

因此,如果页面文件的标题被标记,而不是,那么这个页面在搜索结果的位置可能会比较靠后. 除了提升易用性外,语义标记有利于正确使用 CSS 和 JavaScript,因为其本身提供了许多“钩 钩” 来应用页面的样式与行为.

SEO 主要还是靠你网站的内容和外部链接的。

便于团队开发和维护

W3C 给我们定了一个很好的标准， 在团队中大家都遵循这个标准， 可以减少很多差异化的东 西， 方便开发和维护， 提高开发效率， 甚至实现模块化开发

CSS

实现水平垂直居中

stylus/sass/less区别

均具有“变量”、“混合”、“嵌套”、“继承”、“颜色混合”五大基本特性
Scss和LESS语法较为严谨，LESS要求一定要使用大括号“{}”，Scss和Stylus可以通过缩进表示层次与嵌套关系
Scss无全局变量的概念，LESS和Stylus有类似于其它语言的作用域概念
Sass是基于Ruby语言的，而LESS和Stylus可以基于NodeJS NPM下载相应库后进行编译；

less和sass的区别

Less和Sass的主要不同就是他们的实现方式。

Less是基于JavaScript，是在客户端处理的。

Sass是基于Ruby的，是在服务器端处理的。

less scss样式穿透

stylus：>>>
less/sass：/deep/

【less中的变量】

@变量名:变量值;
使用变量: @变量名

css各种模块

过渡模块(transition)
2d转换模块
动画模块
3d转换模块

css选择器

*：通用选择器
.X：类选择器
#X：ID选择器
X Y：后代选择器
X：元素选择器
X + Y：紧邻同胞选择器
X > Y：子元素选择器
X ~ Y：后续同胞选择器

前端优化

一、编码优化:
1.不要将所有的数据都放在data中，data中的数据都会增加getter和setter，会收集对应的 watcher，这样就会降低性能。

2. vue 在 v-for 时给每项元素绑定事件需要用事件代理，节约性能。

3. 单页面采用keep-alive缓存组件。

4.尽可能拆分组件，来提高复用性、增加代码的可维护性，减少不必要的渲染。因为组件粒度最细，改组件的数组，它只会渲染当前的组件。

5. v-if 当值为false时内部指令不会执行，具有阻断功能，很多情况下使用v-if替代v-show，合理使用if和show。

6. key 保证唯一性，不要使用索引 ( vue 中diff算法会采用就地复用策略)。

7. data中的所以数据都会被劫持，所以将数据尽可能扁平化，如果数据只是用来渲染可以使用Object.freeze，可以将数据冻结起来，这样就不会增加getter和setter。

8.合理使用路由懒加载、异步组件。

9.尽量采用runtime运行时版本。

10.数据持久化的问题，使用防抖、节流进行优化，尽可能的少执行和不执行。

二、加载性能：
1.使用第三方插件实现按需加载( babel-plugin-component )

2.滚动到可视区域动态加载 ( https://tangbc.github.io/vue-virtual-scroll-list )

3.图片懒加载 (https://github.com/hilongjw/vue-lazyload.git)

三、用户体验：
1.app-skeleton 骨架屏

2.app-shell app壳

3.pwa 可以实现H5的离线缓存，使用servicewor

四、SEO 优化：
1.预渲染插件 prerender-spa-plugin，可以把我们代码提前运行起来，最后将代码保存下来，缺陷就是不实时。

2.服务端渲染 ssr

五、.打包优化：
1.使用 cdn 的方式加载第三方模块

2.多线程打包 happypack

3.抽离公共文件 splitChunks

4.sourceMap 生成

六、缓存和压缩：
1.客户端缓存、服务端缓存

2.服务端 gzip 压缩

写在最后

标签：面试题,元素,语义,html,textcolor,稳操胜券,css,属性
来源： https://blog.csdn.net/JHXL_/article/details/121415400