面试题：HTML5、CSS3和ES6有哪些常用的新特性？

左手的ㄟ右手 2022-11-26 07:38 153阅读 0赞

### 目录 ###

*   *   *  一、 HTML5新特性有哪些？
         *   *  1. 语义化标签
             *  2. 媒体标签
             *  3. 表单
             *  4. 进度条、度量器
             *  5.DOM查询操作
             *  6. Web存储
             *  7. 其他
             *  8. HTML5中不再支持的元素有哪些？
         *  二、CSS3新特性有哪些？
         *   *  1. 边框
             *  2. 背景
             *  3. 文字效果
             *  4. 字体
             *  5. 2D、3D转换
             *  6. 过渡
             *  7. 动画
             *  8. 多列
             *  8. 用户页面
             *  9. 选择器
             *  10. 超链接
             *  11. 总结
         *  三、ES6新特性有哪些？

### 一、 HTML5新特性有哪些？ ###

#### 1. 语义化标签 ####

*  header：定义文档的页眉 头部
 *  nav：定义导航链接的部分
 *  footer：定义文档或节的页脚 底部
 *  article：定义文章。
 *  section：定义文档中的节（section、区段）
 *  aside：定义其所处内容之外的内容 侧边

#### 2. 媒体标签 ####

**（1） audio：音频**

属性：

*  controls 控制面板
 *  autoplay 自动播放
 *  loop=‘true’ 循环播放

**（2）video视频**

属性：

*  poster：指定视频还没有完全下载完毕，或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面，当然通过poster也可以自己指定。
 *  controls 控制面板
 *  width
 *  height

**（3）source标签**

因为浏览器对视频格式支持程度不一样，为了能够兼容不同的浏览器，可以通过source来指定视频源。

#### 3. 表单 ####

**表单类型：**

*  email ：能够验证当前输入的邮箱地址是否合法
 *  url ： 验证URL
 *  number ： 只能输入数字，其他输入不了，而且自带上下增大减小箭头，max属性可以设置为最大值，min可以设置为最小值，value为默认值。
 *  search ： 输入框后面会给提供一个小叉，可以删除输入的内容，更加人性化。
 *  range ： 可以提供给一个范围，其中可以设置max和min以及value，其中value属性可以设置为默认值
 *  color ： 提供了一个颜色拾取器
 *  time ： 时分秒
 *  data ： 日期选择年月日
 *  datatime ： 时间和日期(目前只有Safari支持)
 *  datatime-local ：日期时间控件
 *  week ：周控件
 *  month：月控件

**表单属性：**

*  placeholder ：提示信息
 *  autofocus ：自动获取焦点
 *  autocomplete=“on” 或者 autocomplete=“off” 使用这个属性需要有两个前提：
    
     *  必须表单提交过
     *  必须有name属性。
 *  required：要求输入框不能为空，必须有值才能够提交。
 *  pattern=" " 里面写入想要的正则模式，例如手机号patte="^(+86)?\\d\{10\}$"
 *  multiple：可以选择多个文件或者多个邮箱
 *  form=" form表单的ID"

**表单事件：**

*  oninput 每当input里的输入框内容发生变化都会触发此事件。
 *  oninvalid 当验证不通过时触发此事件。

#### 4. 进度条、度量器 ####

*  progress标签：用来表示任务的进度（IE、Safari不支持），max用来表示人物的进度，value表示已完成多少
 *  meter属性：用来显示剩余容量或剩余库存（IE、Safari不支持）
    
     *  high/low：规定被视作高/低的范围
     *  max/min：规定最大/小值
     *  value：规定当前度量值

设置规则：min < low < high < max

#### 5.DOM查询操作 ####

*  document.querySelector()
 *  document.querySelectorAll()

他们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加\#)

#### 6. Web存储 ####

HTML5 提供了两种在客户端存储数据的新方法：

*  localStorage - 没有时间限制的数据存储
 *  sessionStorage - 针对一个 session 的数据存储

#### 7. 其他 ####

*  拖放：拖放是一种常见的特性，即抓取对象以后拖到另一个位置。

设置元素可拖放：

*  画布（canvas ）： canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域，您可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

*  SVG：SVG 指可伸缩矢量图形，用于定义用于网络的基于矢量的图形，使用 XML 格式定义图形，图像在放大或改变尺寸的情况下其图形质量不会有损失，它是万维网联盟的标准
 *  地理定位：Geolocation（地理定位）用于定位用户的位置。

#### 8. HTML5中不再支持的元素有哪些？ ####

*  acronym(建议abbr) ： 定义首字母缩写
 *  applet(建议object)： 定义 applet
 *  basefont(使用css控制)
 *  big(使用css控制) ：定义大号文本
 *  center(使用css控制)： 定义居中的文本
 *  font(使用css控制)
 *  strike(使用del) ：定义加删除线的文本
 *  tt（使用css控制）： 定义打字机文本。
 *  u(使用css控制) ：定义下划线文本
 *  frame(建议iframe)： 定义子窗口（框架）。
 *  frameset ：定义框架的集
 *  noframes ：定义 noframe 部分
 *  dir ：定义目录列表
 *  `<xmp>`： 定义预格式文本

### 二、CSS3新特性有哪些？ ###

#### 1. 边框 ####

*  border-radius：圆角边框
 *  box-shadow：边框阴影
 *  border-image：边框图片

#### 2. 背景 ####

*  background-size：规定背景图片的尺寸
 *  background-origin:规定背景图片的定位区域，背景图片可以放置于 content-box、padding-box 或 border-box 区域：  
    ![20200816234742893.png_pic_center][]

#### 3. 文字效果 ####

*  text-shadow：可向文本应用阴影，能够规定水平阴影、垂直阴影、模糊距离，以及阴影的

h1{ 
       text-shadow: 5px 5px 5px #FF0000;
    }

*  word-wrap：属性允许您允许文本强制文本进行换行

p { 
        word-wrap:break-word;
    }

#### 4. 字体 ####

*  @font-face 自定义字体

#### 5. 2D、3D转换 ####

**2D转化：**

*  translate()：元素从其当前位置移动
 *  rotate()：元素顺时针旋转给定的角度
 *  scale()：元素的尺寸会增加或减少
 *  skew()：元素翻转给定的角度
 *  matrix()：把所有 2D 转换方法组合在一起

**3D转化：**

*  rotateX()：元素围绕其 X 轴以给定的度数进行旋转
 *  rotateY()：元素围绕其 Y 轴以给定的度数进行旋转

#### 6. 过渡 ####

*  transition ：简写属性，用于在一个属性中设置四个过渡属性。
 *  transition-property ：规定应用过渡的 CSS 属性的名称。
 *  transition-duration ：定义过渡效果花费的时间。默认是 0。
 *  transition-timing-function ：规定过渡效果的时间曲线。默认是 “ease”。
 *  transition-delay “：规定过渡效果何时开始。默认是 0。

#### 7. 动画 ####

*  @keyframes

#### 8. 多列 ####

*  column-count 规定元素应该被分隔的列数。
 *  column-fill 规定如何填充列。
 *  column-gap 规定列之间的间隔。
 *  column-rule 设置所有 column-rule-\* 属性的简写属性。
 *  column-rule-color 规定列之间规则的颜色。
 *  column-rule-style 规定列之间规则的样式。
 *  column-rule-width 规定列之间规则的宽度。
 *  column-span 规定元素应该横跨的列数。
 *  column-width 规定列的宽度。
 *  columns 规定设置 column-width 和 column-count 的简写属性。

#### 8. 用户页面 ####

*  appearance 允许您将元素设置为标准用户界面元素的外观
 *  box-sizing 允许您以确切的方式定义适应某个区域的具体内容。
 *  icon 为创作者提供使用图标化等价物来设置元素样式的能力。
 *  nav-down 规定在使用 arrow-down 导航键时向何处导航。
 *  nav-index 设置元素的 tab 键控制次序。
 *  nav-left 规定在使用 arrow-left 导航键时向何处导航。
 *  nav-right 规定在使用 arrow-right 导航键时向何处导航。
 *  nav-up 规定在使用 arrow-up 导航键时向何处导航。
 *  outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。
 *  resize 规定是否可由用户对元素的尺寸进行调整。

#### 9. 选择器 ####

*  E:first-of-type: 匹配同类型中的第一个同级兄弟元素E
 *  E:last-of-type: 匹配同类型中的最后一个同级兄弟元素E
 *  E:first-child: 匹配其父元素的第n个子元素，第一个编号为1
 *  E:last-child: 匹配其父元素的倒数第n个子元素，第一个编号为1
 *  E:nth-child(n): 选择属于其父元素的第n个子元素的
 *  E:nth-last-child(n): 选择属于其父元素的倒数第n个子元素的
 *  E:only-child: 选择属于其父元素的唯一子元素(只有一个才能被选中)
 *  E:only-of-type: 选择属于其父元素唯一的同级兄弟元
 *  E:nth-of-type(n)：匹配同类型中的第n个同级兄弟元素E。
 *  E:nth-last-of-type(n)：匹配同类型中的倒数第n个同级兄弟元素E
 *  :root: 选择文档的根元素
 *  E:empty: 选择没有子元素的每个E元素（包括文本节点)。
 *  E:checked: 匹配用户界面上处于选中状态的元素E。(多数用于input type为radio与checkbox时)
 *  E:enabled: 选择每个启用的E元素（文本框没有disabled属性的）
 *  E:disabled: 选择每个禁用的E元素（文本框有disabled属性的）
 *  E::selection: 选择被用户选取的元素部分。

#### 10. 超链接 ####

*  a:link ：设置超链接a在未被访问前的样式
 *  a:visited ：设置超链接a在其链接地址已被访问过时的样式
 *  a:hover ：设置元素在其鼠标悬停时的样式
 *  a:active ：设置元素在被用户激活（在鼠标点击与释放之间发生的事件）时的样式

#### 11. 总结 ####

CSS3中常用的属性总结：

*  选择器
 *  RGBA和透明度
 *  多栏布局
 *  多背景图
 *  Word Wrap
 *  文字阴影
 *  @font-face属性
 *  圆角(边框半径)
 *  边框图片
 *  盒阴影
 *  盒子大小
 *  媒体查询
 *  语音

### 三、ES6新特性有哪些？ ###

*  let 关键字
 *  const关键字
 *  变量的解构赋值
 *  模板字符串
 *  简化对象的写法
 *  箭头函数
 *  rest参数
 *  spread 扩展运算符
 *  Symbol
 *  Promise
 *  Set
 *  Map
 *  class类
 *  数值扩展
 *  对象扩展
 *  模块化
 *  函数参数默认值

详见文章：[ECMASript 6—10新增常用知识汇总][ECMASript 6_10]

[20200816234742893.png_pic_center]: /images/20221124/1c63dae064024b9a90d597290ed8fa9a.png
[ECMASript 6_10]: https://blog.csdn.net/qq_42033567/article/details/107238591