基础-必会知识（上）
1 基础-必会知识（上）
【考点简介】
【例题示例】
1.1 请问HTML5有哪些新特性？
【考点映射】
-
HTML定义与功能
-
HTML5新特性
【频率】★★★★
【难度】☆☆
【参考答案】
首先，HTML 是一种标记语言，全称超文本标记语言，HTML5是第五个版本。对比传统HTML（HTML4、XHTML 各版本），有以下新特性：
-
文档的类型声明不同
传统HTML没有语义化、结构化标签，不方便阅读，不清楚哪里是网页头部、尾部。HTML5新增的语义化、结构化标签主要有：
|
<header> |
网页或节的页眉/头部 |
|
<footer> |
网页或节的页脚/尾部 |
|
<nav> |
导航栏（一般集中放一些页面链接） |
|
<aside> |
侧边栏 |
|
<article> |
网页中一段独立的“文章”，可独立阅读 |
|
<section> |
节，有主题的内容组（一般含有标题） |
|
<figcaption> |
图片标题 |
|
<figure> |
图片与图片标题的组合 |
|
<main> |
主内容 |
|
<time> |
时间 |
|
<video> |
视频 |
|
<datalist> |
选项列表 |
|
<summary> |
包含 details 元素的标题 |
下图是传统元素结构以及符合HTML5标准的语义化元素结构对比：
新增的input类型：color、date、datetime、datetime-local、email、month、number、range、search、tel、time、url、week
WebStorage本地存储，HTML5新增了两种客户端本地存储数据方法：
-
localStorage：长期有效的数据存储，
-
sessionStorage：只针对当前会话的数据存储。
地理定位，可使用getCurrentPosition()函数直接获取用户位置
WebSocket协议，能从客户端使用简单的语法推动消息到服务器，为客户端与服务端之间提供了一种全双工通信机制
requestAnimationFrame请求动画关键帧，把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率，一般频率为每秒60帧
Drag 和 Drop拖放，抓取对象以后拖到另一个位置
【延伸考点】
-
什么是<!DOCTYPE>声明？
对标记语言的文档类型声明，告知浏览器该页面使用的是哪个 HTML 版本，浏览器的解析器用什么文档标准解析页面文档，必须在 HTML 文档的第一行，且位于 <html> 标签之前，但不属于HTML标签
能传达标签所包含内容类型的信息，开发者能直观地分辨标签和属性的用途
常见语义化标签：<hn>：h1~h6，分级标题；<header>：头部；<nav>：导航栏；
<main>：主要内容；<footer>：尾部
常见非语义化标签：<div>、<span>
语义化标签的一些优点：
代码结构清晰，即使没有css的情况下，也能够呈现出清晰的内容结构
有利于SEO，爬虫依赖标签来确定关键字权重，可以和搜索引擎建立良好的沟通，帮助抓取更多的有效信息
提升用户体验，例如title、alt属性可以解释名称、图片信息
代码可读性强，便于团队开发和维护，让其他开发人员能快速理解HTML结构，减少差异化。
cookie是服务器发给客户端的一种特殊认证信息，通常以文本的方式保存在客户端，始终在同源的http请求中携带（即使不需要），以供服务器验证当前浏览器用户身份，常见应用场景：验证用户身份、保存上次登录信息、统计浏览次数
sessionStorage和localStorage仅用于本地保存，不会自动把数据发给服务器
|
|
有期时间 |
作用域 |
存储大小 |
存储位置 |
|
cookie |
在过期时间前一直有效（即使浏览窗口器关闭） |
domain本身以及domain下的所有子域名（跨域请求的 cookie在fetch时需要设置 withCredentials） |
不能超过4k |
浏览器端 |
|
localStorage |
长期存储，浏览器窗口关闭数据不丢失（除非主动删除） |
所有同源窗口共享 |
虽有存储大小限制，但可达到5M或更大 |
|
|
sessionStorage |
临时存储，当前浏览器窗口关闭后自动删除 |
不同浏览器窗口不共享 |
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，主要有以下新特性：
-
选择器
CSS3增加了很多选择器，以供样式绑定使用，常用的主要有：
:nth-child(n)：匹配其父标签的第n个子元素，不论元素类型，n可以是数字、关键字、公式
:nth-of-type(n)：选择与之其匹配的父元素的第N个子元素
:frist-child：相对于父级做参考，“所有”子元素的第一个子元素，并且“位置”要对应
:empty：选择没有子元素的每个元素
[abc*="def"]：选择adc属性值中包含子串"def"的所有元素
CSS3新增创建动画方法，通过@keyframes 规则创建动画，在规则中指定 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果，用百分比来规定变化发生的时间，或用"from" 和 "to"（等同于 0% 和 100%）
CSS3新增了transform属性实现元素的旋转、缩放、倾斜平移等形状变换。主要有一下新方法：
translate()：元素从当前位置在x 坐标、y 坐标上移动
rotate()：元素顺时针旋转给定的角度（负值则逆时针旋转）
scale()：通过向量形式定义的缩放值来放大或缩小元素尺寸
CSS3新增边框属性，可呈现更多的边框效果，有以下3个边框属性：
border-radius：创建圆角矩形
box-shadow：给盒子添加阴影效果
CSS3增加了新的用户界面属性来调整标签尺寸、盒尺寸以及外部轮廓等，常用属性有：
resize：指定一个标签可由用户调整大小
outline-offset：对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓
弹性布局，使页面布局更加方便与灵活，舍弃传统上下排列页面元素，采用双轴排列方式，水平主轴与垂直交叉轴，并按照比例对元素进行放大
剩余60%内容，订阅专栏后可继续查看/也可单篇购买
前端岗位面试求职攻略及真题解析~~
国家电网稳定性 57人发布
