基础-必会知识(上)

1 基础-必会知识(上)

【考点简介】

对于前端岗,HTML/CSS相关基础知识是必修之课,是每个前端学习者的必经之路,本章将列举前端岗面试中有关HTML/CSS相关的一些高频考点,主要知识点如下图所示,大家可从各个实际考点出发,针对性理解与记忆,这里推荐两个入门级网站:菜鸟教程 w3school,以供一些刚接触这方面知识的同学了解与学习。

【例题示例】

1.1 请问HTML5有哪些新特性?

【考点映射】

  • HTML定义与功能

  • HTML5新特性

【频率】★★★★

【难度】☆☆

【参考答案】

首先,HTML 是一种标记语言,全称超文本标记语言,HTML5是第五个版本。对比传统HTML(HTML4、XHTML 各版本),有以下新特性:

  1. 文档的类型声明不同

HTML5的文档声明相比传统HTML来说更为简便,有利于程序员快速阅读和开发。具体写法:<!DOCTYPE html>
    2. 新增语义化、结构化标签

传统HTML没有语义化、结构化标签,不方便阅读,不清楚哪里是网页头部、尾部。HTML5新增的语义化、结构化标签主要有:

<header>

网页或节的页眉/头部

<footer>

网页或节的页脚/尾部

<nav>

导航栏(一般集中放一些页面链接)

<aside>

侧边栏

<article>

网页中一段独立的“文章”,可独立阅读

<section>

节,有主题的内容组(一般含有标题)

<figcaption>

图片标题

<figure>

图片与图片标题的组合

<main>

主内容

<time>

时间

<video>

视频

<datalist>

选项列表

<summary>

包含 details 元素的标题

下图是传统元素结构以及符合HTML5标准的语义化元素结构对比:

    3. 增强型表单,以便更好地控制与验证input

新增的input类型:color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week

新增表单属性(输入限制):placehoder、required、pattern、autofocus、multiple、step、min/max、height/wdith
    4. 图像标签
新增<canvas>、<svg>标签用于在网页绘制图形
    5. 多媒体标签
新增<audio>标签,以供引入音频
    6. 新增的一些功能性API

WebStorage本地存储,HTML5新增了两种客户端本地存储数据方法:

  • localStorage:长期有效的数据存储,

  • sessionStorage:只针对当前会话的数据存储。

地理定位,可使用getCurrentPosition()函数直接获取用户位置

WebSocket协议,能从客户端使用简单的语法推动消息到服务器,为客户端与服务端之间提供了一种全双工通信机制

requestAnimationFrame请求动画关键帧,把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,一般频率为每秒60帧

Drag 和 Drop拖放,抓取对象以后拖到另一个位置

【延伸考点】

  1. 什么是<!DOCTYPE>声明?

对标记语言的文档类型声明,告知浏览器该页面使用的是哪个 HTML 版本,浏览器的解析器用什么文档标准解析页面文档,必须在 HTML 文档的第一行,且位于 <html> 标签之前,但不属于HTML标签

在 HTML5 中只有一种:<!DOCTYPE html>,HTML 4.01 中有三种模式:分别是:Strict、Transitional 和 Frameset
    2. 什么是语义化标签?

能传达标签所包含内容类型的信息,开发者能直观地分辨标签和属性的用途

常见语义化标签:<hn>:h1~h6,分级标题;<header>:头部;<nav>:导航栏;

<main>:主要内容;<footer>:尾部

常见非语义化标签:<div>、<span>

语义化标签的一些优点:

代码结构清晰,即使没有css的情况下,也能够呈现出清晰的内容结构

有利于SEO,爬虫依赖标签来确定关键字权重,可以和搜索引擎建立良好的沟通,帮助抓取更多的有效信息

提升用户体验,例如title、alt属性可以解释名称、图片信息

代码可读性强,便于团队开发和维护,让其他开发人员能快速理解HTML结构,减少差异化。

便于其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,网页渲染效率高
    3. cookie、localStorage、sessionStorage区别?

cookie是服务器发给客户端的一种特殊认证信息,通常以文本的方式保存在客户端,始终在同源的http请求中携带(即使不需要),以供服务器验证当前浏览器用户身份,常见应用场景:验证用户身份、保存上次登录信息、统计浏览次数

sessionStorage和localStorage仅用于本地保存,不会自动把数据发给服务器

有期时间

作用域

存储大小

存储位置

cookie

在过期时间前一直有效(即使浏览窗口器关闭)

domain本身以及domain下的所有子域名(跨域请求的 cookie在fetch时需要设置 withCredentials

不能超过4k

浏览器端

localStorage

长期存储,浏览器窗口关闭数据不丢失(除非主动删除)

所有同源窗口共享

虽有存储大小限制,但可达到5M或更大

sessionStorage

临时存储,当前浏览器窗口关闭后自动删除

不同浏览器窗口不共享

    4. WebSocket协议及实现原理?

HTTP协议有一个局限:通信只能由客户端发起,服务器端不能实时发送最新数据给客户端(具有被动性)

数据交互有两种模式:Push(推模式)、Pull(拉模式)

Push:客户端与服务端建立好网络长连接,服务器有相关数据,直接通过长连接通道推送到客户端

Pull:客户端主动向服务端发出请求,拉取相关数据

那怎么获取最新数据呢? 传统有两种方式:轮询、长轮询

轮询:开启一个定时器,每隔一段时间调用Ajax请求一次数据

长轮询:本质也是轮询,不过是阻塞型(一直打电话,没收到就不挂电话),客户端发起连接后,如果没消息,就一直不返回Response给客户端,直到有消 息才返回或超时。基于事件的触发,一个事件接一个事件。

WebSocket协议只需要发送一次请求,只要服务器有最新数据就会自动发送给客户端,不用重复请求(类似天气预报,每当天气有变化则会自动更新最新天气状况)

WebSocket协议没有同源限制,客户端可与任意服务器通信,可用于解决跨域

实现原理:

WebSocket是一个应用层协议,必须依赖 HTTP 协议进行第一次握手 ,握手成功后,数据就直接从 TCP 通道传输,与 HTTP 再无关联。WebSocket进行了HTTP握手 + 双工的TCP数据传输

协议以frame形式传输数据,会将一条消息分为几个frame,按照先后顺序传输。大数据可以分片传输,不用考虑到数据大小导致的长度标志位不足够的情况,可以边生成数据边传递消息,传输效率高


1.2 请问CSS3有哪些新特性?

【考点映射】

  • CSS定义与功能

  • CSS3新特性

【频率】★★★★

【难度】☆☆

【参考答案】

CSS 为层叠样式表,用来定义页面中的HTML各标签如何显示,控制页面的整体布局与样式。

CSS3为W3C组织发布的最新版CSS,主要有以下新特性:

  1. 选择器

CSS3增加了很多选择器,以供样式绑定使用,常用的主要有:

:nth-child(n):匹配其父标签的第n个子元素,不论元素类型,n可以是数字、关键字、公式

:nth-of-type(n):选择与之其匹配的父元素的第N个子元素

:frist-child:相对于父级做参考,“所有”子元素的第一个子元素,并且“位置”要对应

:empty:选择没有子元素的每个元素

[abc*="def"]:选择adc属性值中包含子串"def"的所有元素

所有新增选择器可见CSS选择器参考手册
    2. 动画

CSS3新增创建动画方法,通过@keyframes 规则创建动画,在规则中指定 CSS 样式,就能创建由当前样式逐渐改为新样式的动画效果,用百分比来规定变化发生的时间,或用"from" 和 "to"(等同于 0% 和 100%)

利用animation属性将动画绑定到指定选择器上,至少绑定动画名称与时长
    3. 形状变换

CSS3新增了transform属性实现元素的旋转、缩放、倾斜平移等形状变换。主要有一下新方法:

translate():元素从当前位置在x 坐标、y 坐标上移动

rotate():元素顺时针旋转给定的角度(负值则逆时针旋转)

scale():通过向量形式定义的缩放值来放大或缩小元素尺寸

skew():元素按照一定的角度进行倾斜转换
    4. 文本
CSS3新增text-shadow属性可实现文本阴影,text-overflow属性可规定当文本溢出盒子时呈现效果
    5. 边框

CSS3新增边框属性,可呈现更多的边框效果,有以下3个边框属性:

border-radius:创建圆角矩形

box-shadow:给盒子添加阴影效果

border-image:可利用图片创建边框
    6. 过渡
CSS3提供transition 属性呈现元素由A样式过渡至B样式,常用两个值定义过渡效果:transition-property:过渡的属性列表,transition-duration:过渡持续的时间
    7. 盒模型定义

CSS3增加了新的用户界面属性来调整标签尺寸、盒尺寸以及外部轮廓等,常用属性有:

resize:指定一个标签可由用户调整大小

outline-offset:对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓

box-sizing:允许以确切的方式定义适应某个区域的具体内容,可定义盒模型,有三个值:content-box:边框和padding不包含在元素的宽高之内、border-box:边框和padding包含在元素的宽高之内、inherit:从父标签继承 box-sizing 属性值
    8. Flex布局

弹性布局,使页面布局更加方便与灵活,舍弃传统上下排列页面元素,采用双轴排列方式,水平主轴与垂直交叉轴,并按照比例对元素进行放大

剩余60%内容,订阅专栏后可继续查看/也可单篇购买

前端岗面试求职真题解析 文章被收录于专栏

前端岗位面试求职攻略及真题解析~~

全部评论
1.3 请问你了解行内元素、块级元素、空元素吗,它们如何互相转换? 这个问题解析里面有一个表格,其中行内元素的上下左右外边距(margin)和内边距(padding)应该都是有效的。
点赞 回复 分享
发布于 2022-03-11 14:03

相关推荐

11-08 16:53
门头沟学院 C++
投票
滑模小马达:第三个如果是qfqc感觉还行,我签的qfkj搞电机的,违约金也很高,但公司感觉还可以,听说之前开过一个试用转正的应届生,仅供参考。
点赞 评论 收藏
分享
无敌虾孝子:喜欢爸爸还是喜欢妈妈
点赞 评论 收藏
分享
评论
点赞
收藏
分享
牛客网
牛客企业服务