HTML5新增元素

HTML5 新增了语义化的元素：

* `<header>`：头部元素
* `<nav>`：导航元素
* `<section>`：定义文档某个区域的元素
* `<article>`：内容元素
* `<aside>`：侧边栏元素
* `<footer>`：尾部元素

input元素的扩展内容

HTML5 对 input 元素也进行了扩展，在之前我们已经学习过的其中几个属性也是HTML5的特性：

* placeholder：输入框的占位文字
* multiple：多个值
* autofocus：最多输入的内容

另外对于input的type值也有很多扩展,date、time、number、tel、color、email、等等… 查看MDN文档

新增全局属性 data-*

在HTML5中, 新增一种全局属性的格式 data-*, 用于自定义数据属性:

• data设置的属性可以在JavaScript的DOM操作中通过dataset轻松获取到；
• 通常用于HTML和JavaScript数据之间的传递；

<div class="box" title="abc" data-name="why" data-age="18">
</div>
<script>
    const boxEl = document.querySelector(".box")
    console.log(boxEl.dataset)
</script>

在小程序中, 就是通过data-来传递数据的

CSS属性 - white-space

white-space用于设置空白处理和换行规则

* normal：合并所有连续的空白，`允许`单词超屏时自动换行
* nowrap：合并所有连续的空白，`不允许`单词超屏时自动换行
* pre：阻止合并所有连续的空白，`不允许`单词超屏时自动换行
* pre-wrap：阻止合并所有连续的空白，`允许`单词超屏时自动换行
* pre-line：合并所有连续的空白（但保留换行），``允许``单词超屏时自动换行

CSS属性 - text-overflow

text-overflow通常用来设置文字溢出时的行为

• clip：溢出的内容直接裁剪掉（字符可能会显示不完整）
• ellipsis：溢出那行的结尾处用省略号表示 text-overflow生效的前提是overflow不为visible,常见的是将white-space、text-overflow、overflow一起使用

white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;

CSS中的函数

• var 使用CSS定义的变量 CSS中可以自定义属性,属性名需要以两个减号（--）开始,属性值则可以是任何有效的CSS值

div{
    --why-color: red;
}

使用时通过 var 函数进行使用

span{
    color: var(--why-color);
}

规则集定义的选择器, 是自定义属性的可见作用域(只在选择器内部有效),推荐将自定义属性定义在html中，也可以使用 :root 选择器;

• calc: 计算CSS值, 通常用于计算元素的大小或位置; calc() 函数允许在声明 CSS 属性值时执行一些计算。支持加减乘除的运算。+ 和 - 运算符的两边必须要有空白字符。通常用来设置一些元素的尺寸或者位置。比如

.box .container{
    display: inline-block;
    width: calc(100% - 60px);
    height: 100px;
    background-color: red;
}

• blur: 毛玻璃(高斯模糊)效果 blur(radius),radius 表示模糊的半径, 用于定义高斯函数的偏差值, 偏差值越大, 图片越模糊。通常会和两个属性一起使用：

  • filter: 将模糊或颜色偏移等图形效果应用于元素;
  • backdrop-filter: 为元素后面的区域添加模糊或者其他效果;

• gradient：颜色渐变函数 <gradient> 是一种<image>CSS数据类型的子类型，用于表现两种或多种颜色的过渡转变。 CSS的<image>数据类型描述的是2D图形,比如background-image、list-style-image、border-image、content等。

<image>常见的方式是通过url来引入一个图片资源,它也可以通过CSS的<gradient> 函数来设置颜色的渐变。

<gradient>常见的函数实现有下面几种：

* `linear-gradient()`：创建一个表示两种或多种颜色线性渐变的图片；
* `radial-gradient(`)：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成；
* `repeating-linear-gradient()`：创建一个由重复线性渐变组成的`<image>`；
* `repeating-radial-gradient()`：创建一个重复的原点触发渐变组成的`<image>`；

linear-gradient：创建一个表示两种或多种颜色线性渐变的图片

background-image: liner-gradient(blue,red);
background-image: liner-gradient(to right,blue,red); /* 从左到右 */
background-image: liner-gradient(to right bottom,blue,red); /* 从左上角到右下角 */
background-image: liner-gradient(45edg, blue,red); /* 从左上角到右下角 */
background-image: liner-gradient(to right, blue ,red 10%, purpl2 40px, orange); /* 多个颜色 */

radial-gradient：创建了一个图像，该图像是由从原点发出的两种或者多种颜色之间的逐步过渡组成

background-image: radial-gradient(blue,red);
background-image: radial-gradient(at 0% 50%, red, yellow);

适配方案 - vw