2.CSS Transforms 三维 HTML新增属性

CSS Transforms 三维

transform-style

概念：该属性设置元素的子元素是位于 3D 空间中还是平面中。可选值：

• flat： 设置元素的子元素位于该元素的平面中。
• preserve-3d：示元素的子元素应位于 3D 空间中。

<style>
.transition-all {
    transform-style: preserve-3d;
    background: #f69d3c;
    border-radius: .75rem;
    width: 300px;
}
.numeral {
    background-color: #e66465;
    width: 300px;
    transform: rotate3d(1,1,1,45deg);
}
</style>
<div class="transition-all layer" >
    <p>Parent</p>
    <div class="numeral"><code>rotate3d(1, 1, 1, 45deg)</code></div>
</div>

三维变化方法

• translate3d(x, y, z) 这个CSS 函数通过三维矢量的坐标定义了它在每个方向上的移动量，实现在3D空间中移动元素的位置。
  • x 代表移动矢量的横坐标。
  • y 代表移动矢量的纵坐标。
  • z 代表移动矢量的z轴坐标。 该值不能使用百分比，如果使用会被认为是无效属性。

.box{
    transform: translate3d(10px, -50px, 20px);
}

• translateZ(z) 这个CSS 函数用于3D空间的z轴方向移动元素，是 translate3d(0, 0, z) 的简写形式。

.box{
    transform: translateZ(120px);
}

• scale3d(x, y, z) CSS 函数缩放三维绘制空间，可以改变x,y,z不同方向的尺寸。可改变元素的大小。
• x 该参数为数字， 代表缩放x横轴坐标。
• y 该参数为数字， 代表缩放y纵轴坐标。
• z 该参数为数字， 代表缩放z轴坐标。

.box{
    transform: scale3d(1.2, 0.5, 1)
}

• scaleZ(z) 这个CSS函数是用一个常数因子来修改z轴坐标大小。是 scale3d(1, 1, z) 的简写形式。

.box{
    transform: scaleZ( 0.8)
}

• rotate3d(x, y, z, a) 这个CSS 函数定义一个3D旋转功能，该旋转使元素能够绕固定轴移动而不变形。
  • a 旋转角度如果为正值，则运动将为顺时针，如果为负值，则为逆时针。
  • x、y、z 常数因子表示元素在指定轴旋转与旋转角度的比例，0表示篇不旋转

.box {
    transform: rotate3d(1, 1, 1, 45deg);
}

• rotateX(a) 该函数定义元素沿x轴旋转多少度等价于rotate3d(1, 0, 0, a)
• rotateY(a) 该函数定义元素沿Y轴旋转多少度等价于rotate3d(0, 1, 0, a)
• rotateZ(a) 该函数定义元素沿Y轴旋转多少度等价于rotate3d(0, 0, 1, a)

「课堂练习」

css3动画配合3d变形实现立方体旋转效果

html结构:

<div id="warpper">
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
</div>

---

perspective

介绍：CSS 属性 perspective指定了观察者与 z=0 平面的距离，使具有三维位置变换的元素产生透视效果。可设置的值为：

• none：没有应用 perspective 样式时的默认值.
• 长度： 指定观察者距离 z=0 平面的距离，为元素及其内容应用透视变换。当值为0或负值时，无透视变换。

.box {
    transform-style: preserve-3d;
    perspective: 800px;
}

perspective-origin

介绍：属性 perspective-origin 指定了观察者的位置，用作 perspective 属性的消失点。
语法：perspective-origin: x-position y-position?;

• x-position：指定消失点的横坐标，其值有以下形式：
  • 长度值或相对于元素宽度的百分比值，可为负值。
  • left, 关键字，0值的简记。
  • center, 关键字，50%的简记。
  • right, 关键字，100%的简记。
• y-position 指定消失点的纵坐标，其值有以下形式：
  • length-percentage 长度值或相对于元素高度的百分比值，可为负值。
  • top, 关键字，0值的简记。
  • center, 关键字，50%的简记。
  • bottom, 关键字，100%的简记。

.box {
    transform-style: preserve-3d;
    perspective: 800px;
    perspective-origin: center top;
}

backface-visibility

介绍：CSS 属性 backface-visibility 指定当元素背面朝向观察者时是否可见。可接受的值为：

• visible：背面朝向用户时可见。
• hidden：背面朝向用户时不可见。

<table>
  <tr>
    <th><code>backface-visibility: visible;</code></th>
    <th><code>backface-visibility: hidden;</code></th>
  </tr>
  <tr>
    <td>
      <div class="container">
        <div class="cube showbf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>
        Since all faces are partially transparent,
        the back faces (2, 4, 5) are visible
        through the front faces (1, 3, 6).
      </p>
    </td>
    <td>
      <div class="container">
        <div class="cube hidebf">
          <div class="face front">1</div>
          <div class="face back">2</div>
          <div class="face right">3</div>
          <div class="face left">4</div>
          <div class="face top">5</div>
          <div class="face bottom">6</div>
        </div>
      </div>
      <p>
        The three back faces (2, 4, 5) are
        hidden.
      </p>
    </td>
  </tr>
</table>

<style>
/* Classes that will show or hide the
   three back faces of the "cube" */
.showbf div {
  backface-visibility: visible;
}

.hidebf div {
  backface-visibility: hidden;
}

/* Define the container div, the cube div, and a generic face */
.container {
  width: 150px;
  height: 150px;
  margin: 75px 0 0 75px;
  border: none;
}

.cube {
  width: 100%;
  height: 100%;
  perspective: 550px;
  perspective-origin: 150% 150%;
  transform-style: preserve-3d;
}

.face {
  display: block;
  position: absolute;
  width: 100px;
  height: 100px;
  border: none;
  line-height: 100px;
  font-family: sans-serif;
  font-size: 60px;
  color: white;
  text-align: center;
}

/* Define each face based on direction */
.front {
  background: rgba(0, 0, 0, 0.3);
  transform: translateZ(50px);
}

.back {
  background: rgba(0, 255, 0, 1);
  color: black;
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgba(196, 0, 0, 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgba(0, 0, 196, 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgba(196, 196, 0, 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgba(196, 0, 196, 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

/* Make the table a little nicer */
th, p, td {
  background-color: #EEEEEE;
  margin: 0px;
  padding: 6px;
  font-family: sans-serif;
  text-align: left;
}
</style>

CSS Grid Layout

介绍：添加了 grid 布局给 CSS display 属性，以及一些新的属性来控制它。

meta name=“viewport”

概念：手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中，也不会破坏没有针对手机浏览器优化的网页的布局，用户可以通过平移和缩放来看网页的不同部分。所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条。

在做移动端开发时，为了使移动端的页面在不同的手机上同样的大小来显示，HTML5提出了 name=“viewport” 的 meta 标签，将虚拟的“窗口”（viewport）设置成与设备屏幕相等大小，达到移动端来最佳的浏览效果。

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,minimum-scale=1.0,user-scalable=0" />
</head>

属性：

• width： 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度
• initial-scale： 设置页面的初始缩放值，为一个数字，可以带小数
• minimum-scale：允许用户的最小缩放值，为一个数字，可以带小数
• maximum-scale：允许用户的最大缩放值，为一个数字，可以带小数
• height： 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
• user-scalable：是否允许用户进行缩放，值为”no”或”yes”, no 代表不允许，yes代表允许

HTML5 简介

HTML5 不仅是定义 HTML 标准的最新的版本，还是一系列用来制作现代富web内容的相关技术总称。

HTML5 具有新的元素，属性和行为，并具有更大的技术集，允许构建更多样化和更强大的网站和应用程序。这个集合有时称为HTML5和它的朋友们，不过大多数时候仅缩写为一个词 HTML5。

HTML5 及其相关技术是作为一系列小型标准而制定的甚至为某些技术进行了高度的细化，其标准内容设计为所有Open Web开发人员都可以使用，但是这样做的弊端是难以全面掌握指定的各个标准情况并且部分标准还存在一些歧义，导致浏览器中表现不一致。

我们将根据HTML5功能分为以下8大类：

• 语义：开发者可以更细致的描述文档结构，提高文档的可读性与对搜索引擎的友好。
• 通信：能够让你和服务器之间通过创新的新技术方法进行通信。
• 离线 & 存储：能够让网页在客户端本地存储数据以及更高效地离线运行。
• 多媒体：使 video 和 audio 成为了在所有 Web 中的一等公民。
• 2D/3D 绘图 & 效果：提供了一个更加分化范围的呈现选择。
• 性能 & 集成：提供了非常显著的性能优化和更有效的计算机硬件使用。
• 设备访问：能够处理各种输入和输出设备。
• CSS3: 让作者们来创作更加复杂的主题吧！

语义

概念：HTML5 引入了新的HTML元素，通过使用标准语义去描述web文档的结构，使得文档更精确，提高SEO性能与用户体验。

新增语义标签

• <header>(常用)：标签定义文档的页眉（介绍信息）。
• <main>： 标签规定文档的主要内容。元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
• <footer>(常用)：标签定义文档或节的页脚，通常包含版权或法律声明，有时还包含一些链接。在部分的情况下，页脚可能包含切片内容的发布日期，许可证信息等。<article>，<section>，<aside>，和<nav>可以有自己的<footer>。尽管有页脚的名称，页脚也不一定位于页面或节的末尾。
• <section>(常用)：标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分根据语义进行相关分组。
• <article>(常用)：标签规定独立的自包含内容。它不单指主要内容，还可以用于注释和小部件。该标签常用环境：论坛帖子、报纸文章、博客条目、用户评论。
• <nav>(常用)：包含经常出现在网站上的导航链接。导航可以具有主菜单和辅助菜单，但是不能将一个<nav>元素嵌套在另一个 <nav>元素中。
• <aside>(常用)：元素表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框。
• <hgroup>(常用)： 代表文档章节所属的多级别的目录，它将多个<h1>至<h6>的子元素组装到一起。

<hgroup>
    <h1>HTML</h1>
    <h2>HTML5标准 — Last Updated 12 August 2020</h2>
</hgroup>
<p>This course will start with a brief introduction about the limit of a function. Then we will describe how the idea of derivative emerges in the Physics and Geometry fields. After that, we will explain that the key to master calculus is …</p>

• <figure>(常用)： 标签规定独立的流内容（图像、图表、照片、代码等等）。 经常与说明（caption） <figcaption> 配合使用, 并且作为一个独立的引用单元
• <figcation>(常用)： 是与其相关联的图片的说明/标题，用于描述其父节点 <figure> 元素里的其他数据。该标签在<figure>块里是第一个或最后一个。并且该元素是可选的；如果没有该元素，这个父节点的图片只是会没有说明/标题。

<figure>
    <img src="/src/images/cat.jpg"
         alt="一只正在睡觉的猫">
    <figcaption>一只正在睡觉的猫</figcaption>
</figure>
    

• <time>(常用)： 用来表示24小时制时间或者公历日期，若表示日期则也可包含时间和时区。此元素内必须包含一个机器可读的格式表示日期或时间，有安排日程表功能的应用可以利用这一点。

<p>The concert starts at <time>20:00</time>.</p>
<p>The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.</p>

• <mark>：标记文本元素，该标签代表突出显示的文字，例如可以为了标记特定上下文中的文本而使用这个标签。 举个例子，它可以用来显示搜索引擎搜索后关键词。

注意： 不要把 <mark> 元素和 <strong> 元素搞混淆；<strong> 元素用来表示文本在上下文的重要性的， 而 <mark> 元素是用来表示上下文的关联性的。

• <data>：元素将一个指定内容和机器可读的翻译(例商品的编码)联系在一起。但是，如果内容是与时间或者日期相关的，则一定要使用 <time>。

<p>新产品</p>
<ul>
 <li><data value="0100398">迷你安格斯牛排堡</data></li>
 <li><data value="0100399">巨无安格斯牛排堡</data></li>
 <li><data value="0100400">三层巨无霸安格斯牛排堡</data></li>
</ul>

• <progress>：元素用来显示一项任务的完成进度。虽然规范中没有规定该元素具体如何显示，浏览器开发商可以自己决定，但通常情况下，该元素都显示为一个进度条形式。

<progress id="file" max="100" value="70"> 70% </progress>

• <meter>：元素用来显示已知范围的标量值或者分数值。

<p>加热烤箱至 <meter min="200" max="500"
  value="350">350 度</meter>.</p>

HTML5改进标签

表单

概念：在 HTML5 中对 web 表单进行了部分改进，增加了一些新的属性，一些新的<input>元素type 属性值，新的表单元素以及强制校验API。

新增属性：

属性名	描述
autocomplete	input元素，用于表单的自动填充功能
autofocus	input元素,页面加载时自动聚焦到此表单控件
form	input元素,将控件和一个form元素联系在一起
formaction	当input元素type为image, submit时，用于提交表单的URL
formenctype	当input元素type为image, submit时，表单数据集的编码方式，用于表单提交
formmethod	当input元素type为image, submit时，用于表单提交的HTTP方法
formnovalidate	当input元素type为image, submit时，提交表单时绕过对表单控件的验证
formtarget	当input元素type为image, submit时，表单提交的浏览上下文
height 和 width	当input元素type为image时，设置元素的宽高
list	绝大部分input元素,自动填充选项的 <datalist> 的id值
min 和 max	当input元素type为number时，当前数字表单元素可以输入的最小最大值
multiple	当input元素type为email, file时。是否允许多个值(布尔值)
pattern (regexp)	当input元素type为password, text, tel，匹配有效 value 的模式（pattern）
placeholder	当input元素type为password, search, tel, text, url时，当表单控件为空时，控件中显示的内容
required	绝大部分input元素,表示此值为必填项或者提交表单前必须先检查该值(布尔值)
step	当input元素type为number时，当前数字表单元素有效的递增值
novalidate	from元素关闭浏览器的自动校验，这允许我们使用脚本控制表单校验。

新增type：

类型名	属性值
color	用于指定颜色的控件；在支持的浏览器中，激活时会打开取色器。
date	输入日期的控件（年、月、日，不包括时间）。在支持的浏览器激活时会打开日期选择器或年月日的数字滚轮。
time	于输入时间的控件，不包括时区。
week	用于输入以年和周数组成的日期，不带时区。
datetime	于输入时间的控件，不包括时区。
datetime-local	输入日期和时间的控件，使用户所在时区。在支持的浏览器激活时打开日期选择器或年月日的数字滚轮。(目前支持的浏览器为数不多)
email	编辑邮箱地址的输入框。类似 text 输入，但在支持的浏览器上会有邮箱格式的规则验证提示。
month	输入年和月的控件，不带时区。
number	只能输入数字的输入框。
range	此控件用于输入不需要精确的数字。控件是一个范围组件，默认值为正中间的值。同时使用min 和 max来规定值的范围。
search	用于搜索字符串的单行文字区域。输入文本中的换行会被自动去除。在支持的浏览器中可能有一个删除按钮，用于清除整个区域。拥有动态键盘的设备上的回车图标会变成搜索图标。
tel	用于输入电话号码的控件。拥有动态键盘的设备上会显示电话数字键盘。
url	用于输入 URL 的控件。类似 text 输入，在支持的浏览器上会有URL的规则验证提示，在支持动态键盘的设备上有相应的键盘。

表单校验：

介绍：当你向 Web 应用输入数据时，应用会验证你输入的数据是否是正确的。如果验证通过，应用允许提交这些数据到服务器并储存到数据库中（通常情况下），如果验证未通过，则 Web 应用会提示你有错误的数据，并且一般都会明确的告诉你错误发生在哪里。

概念：HTML5提供一个新功能可以在不写一行脚本代码的情况下，即对用户的输入进行数据校验，这都是通过表单元素的校验属性实现的。这些属性可以让你定义一些规则，用于限定用户的输入，如果表单中输入的数据都符合这些限定规则，那么表示这个表单校验通过，否则则认为校验未通过。

当一个元素校验通过时：

该元素将可以通过 CSS 伪类 :valid 进行特殊的样式化；

如果用户尝试提交表单，如果没有其它的控制来阻止该操作（比如JavaScript即可阻止提交），那么该表单的数据会被提交。

如果一个元素未校验通过：

该元素将可以通过 CSS 伪类 :invalid 进行特殊的样式化；

如果用户尝试提交表单，浏览器会展示出错误消息，并停止表单的提交。

表单校检相关属性:

• required 属性，限制表单为必填

<form>
  <input id="username" name="username" required>
  <button>Submit</button>
</form>

• minlength 属性和 maxlength 属性，限制输入的长度。 min 和 max 属性，限制输入的数字大小

<form>
  <div>
    <label for="username">请输入你的用户名?</label>
    <input id="username" name="username" required minlength="2" maxlength="8">
  </div>
  <div>
    <label for="number">你的年龄?</label>
    <input type="number" id="age" name="age" value="19" min="1" max="99">
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>

• pattern 属性, 使用正则表达式作为属性值可以用来对表单的内容进行校检

<!--密码长度7-14位，必须以大写字母开头，后面允许输入数字字母下划线和。 -->
<form>
  <label for="psd">请输入密码</label>
  <input id="psd" name="psd" required pattern="^[A-Z][0-9a-zA-Z_/.]{6,13}$">
  <button>Submit</button>
</form>

• 自定义错误信息，每次我们提交无效的表单数据时， 浏览器总会显示错误信息。 但是显示的信息取决于你所使用的浏览器（不同浏览器表现不一致）。

注意：

1. 要自定义这些消息的外观和文本，你必须使用 JavaScript； 不能使用 HTML 和 CSS 来改变。 HTML5 提供 constraint validation API 来检测和自定义表单元素的状态。 除此之外，他可以改变错误信息的文本。
2. 越来越多的浏览器支持限制校验API，并且这逐渐变得可靠。这些 API 由成组的方法和属性构成，可在特定的表单元素接口上调用：<button>, <input>,<fieldset>,<output>,<select>,<textarea>

例：

<form>
    <label for="psd">请输入密码</label>
    <input id="psd" name="psd" required pattern="^[A-Z][0-9a-zA-Z_/.]{6,13}$">
    <button>Submit</button>
</form>

<script>
    var psd = document.getElementById("psd");

    psd.addEventListener("input", function (event) {
        if (psd.validity.patternMismatch) {
            psd.setCustomValidity("密码为7到14位必须以大写字母开头只支持数字字母_.请核对格式后认真输入！");
        } else {
            psd.setCustomValidity("");
        }
    });
</script>

1. 约束校验的 API 的属性

属性	描述
validationMessage	一个本地化消息，描述元素不满足校验条件时（如果有的话）的文本信息。如果元素无需校验（willValidate 为 false），或元素的值满足校验条件时，为空字符串。
validity	一个 ValidityState 对象，描述元素的验证状态。
validity.customError	如果元素设置了自定义错误，返回 true ；否则返回false。
validity.patternMismatch	如果元素的值不匹配所设置的正则表达式，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.rangeOverflow	如果元素的值高于所设置的最大值，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.rangeUnderflow	如果元素的值低于所设置的最小值，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.stepMismatch	如果元素的值不符合 step 属性的规则，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.tooLong	如果元素的值超过所设置的最大长度，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.typeMismatch	如果元素的值出现语法错误，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
validity.valid	如果元素的值不存在校验问题，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :valid CSS 伪类，否则命中 :invalid CSS 伪类。
validity.valueMissing	如果元素设置了 required 属性且值为空，返回 true，否则返回 false。当此属性为 true 时，元素将命中 :invalid CSS 伪类。
willValidate	如果元素在表单提交时将被校验，返回 true，否则返回 false。

ValidityState = {
badInput: Boolean, // 只读 true 表示用户提供了浏览器不能转换的输入。 如 number表单输入了中文
customError: Boolean, // 只读 
patternMismatch: Boolean, // 只读
rangeOverflow: Boolean, // 只读
rangeUnderflow: Boolean, // 只读
stepMismatch: Boolean, // 只读
tooLong: Boolean, // 只读
tooShort: Boolean, // 只读
typeMismatch: Boolean, // 只读
valid: Boolean, // 只读
valueMissing: Boolean // 只读
}

2. 约束校验 API 的方法

方法	描述
checkValidity()	如果元素的值校验合法，返回 true，否则返回 false。如果元素校验失败，此方法会触发invalid 事件。
HTMLFormElement.reportValidity()	如果元素或它的子元素控件符合校验的限制，返回 true . 当返回为 false 时, 对每个无效元素可撤销 invalid 事件会被唤起并且校验错误会报告给用户 。
setCustomValidity(message)	为元素添加一个自定义的错误消息；如果设置了自定义错误消息，该元素被认为是无效的，则显示指定的错误。这允许你使用 JavaScript 代码来建立校验失败，而不是用标准约束校验 API 所提供的。这些自定义信息将在向用户报告错误时显示。如果参数为空，则清空自定义错误。

「课堂练习」

约束校验API实现如下效果

要求：

1. 当表单数据不合法时，表单元素背景为红色
2. 当表单数据不合法时，表单下方显式一个自定义的提示文本元素

表单结构:

<form novalidate>
    <p>
        <label for="mail">
            <span>Please enter an email address:</span>
            <input type="email" id="mail" name="mail">
            <span class="error" aria-live="polite"></span>
        </label>
    </p>
    <button >Submit</button>
</form>

---

新增表单元素：

• <output>：标签表示计算或用户操作的结果。

output 元素的属性：

• for： 以空格分隔的其他元素列表id，其它影响计算结果的标签的ID，可以多个。。
• form： 与当前标签有关联的form（从属的表单）。该属性的值必须是当前文档内的表单元素的ID。如果未指明该属性，output标签必须是一个form的后代标签。该属性的用处在于可以让output标签脱离form标签，存在于一个网页文档的任意位置。
• name： 元素的名称

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" id="a" name="a" value="50" /> +
    <input type="number" id="b" name="b" value="10" /> =
    <output name="x" for="a b"></output>
</form>

• <fieldset>： 元素用于对表单中的控制元素进行分组（也包括 label 元素）

fieldset 元素的属性：

• disabled： 如果设置了这个 bool 值属性, <fieldset> 的所有子代表单控件也会继承这个属性。这意味着它们不可编辑，
• form： 将该值设为一个 <form> 元素的 id 属性值以将 <fieldset> 设置成这个 <form> 的一部分。
• name： 元素分组的名称

• <legend>: 元素为 <fieldset> 元素定义标题（caption）。

<form>
  <fieldset>
    <legend>选择你最喜欢吃的水果</legend>

    <input type="radio" id="apple" name="fruits">
    <label for="apple"> 苹果 </label><br/>

    <input type="radio" id="cherry" name="fruits">
    <label for="cherry"> 樱桃 </label><br/>

    <input type="radio" id="banana" name="fruits">
    <label for="banana"> 香蕉 </label>
  </fieldset>
</form>

新增属性data-*

介绍：data-* 全局属性 是一类被称为自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

概念：自定义数据属性都可以通过所属元素的DOM接口来访问。 HTMLElement.dataset 属性可以访问它们。 * 可以使用遵循 xml名称生产规则 的任何名称来被替换，并具有以下限制：

1. 该名称不能以xml开头，无论这些字母是大写还是小写。
2. 该名称不能包含任何分号 (U+003A)。
3. 该名称不能包含A至Z的大写字母。

自定义属性名只可以包含字母，数字和下面的字符： dash (-), dot (.), colon ( : ), underscore (_)。此外不应包含ASCII 码大写字母。

<ul>
    <li data-version-date="v1-2020" data-id="10784">Jason Walters, 003: Found dead in "A View to a Kill".</li>
    <li data-id="97865">Alex Trevelyan, 006: Agent turned terrorist leader; James' nemesis in "Goldeneye".</li>
    <li data-id="45732">James Bond, 007: The main man; shaken but not stirred.</li>
</ul>

HTMLElement.dataset：属性允许访问在 HTML或 DOM中的元素上设置的所有自定义数据属性(data-*)集。

注意：dataset 属性本身可以被读取，但不能直接写入。相反，所有的写入必须是它的“属性”，这反过来表示数据自定义属性。

dataset方法会将自定义的data 属性名称转化成 DOMStringMap 的键值时会遵循下面的规则：

1. 前缀 data- 被去除(包括减号)；
2. 对于每个在ASCII小写字母 a到 z前面的减号 (U+002D)，减号会被去除，并且字母会转变成对应的大写字母(驼峰命名法)。
3. 其他字符（包含其他减号）都不发生变化

<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe
</div>

<script>
var el = document.querySelector('#user');

// el.id == 'user'
// el.dataset.id === '1234567890'
// el.dataset.user === 'johndoe'
// el.dataset.dateOfBirth === ''

el.dataset.dateOfBirth = '1960-10-03'; // set the DOB.

// 给元素添加一个新的自定义属性
el.dataset.someDataAttr = 'mydata';

</script>

自定义属性同样可以通过setAttribute()与getAttribute()操作

存储

数据持久化 DOM存储

介绍：DOM存储的机制是通过存储字符串类型的键/值对，来提供一种安全的存取方式。HTML5提供了两个全局对象（window 对象的属性）localStorage、SessionStorage实现DOM存储

概念：通过全局对象（localStorage、SessionStorage）访问本地存储功能时。该属性会返回一个 Storage 对象，Storage对象的接口属性方法如下

 interface Storage {
    length: Number, // 只读属性
    key(index),  // 获取指定索引对应的key名
    getItem(key), // 获取指定key名对应的value值
    setItem(key, value), // 添加、修改一个指定key名的键值对值为value
    removeItem(key), // 移除指定key名对应的键值对
    clear() // 移除所有键值对
}

注意：Storage对象中使用键值对存储数据时，key与value必须是字符串且key名唯一（如果key名冲突新的键值对会覆盖旧的键值对）。

需要时刻注意的一点是，所有数据在被保存到下面将要介绍的任何一个存储器之前，都将通过它的 .toString 方法被转换成字符串。所以一个普通对象将会被存储为 “[object Object]”，而不是对象本身或者它的 JSON 形式。使用浏览器自身提供的 JSON 解析和序列化方法来存取对象是比较好的，也是比较常见的方法。

兼容性: Storage 对象最近刚被加入标准当中，所以并不是所有的浏览器都支持。

• sessionStorage
  概念：sessionStorage（会话存储）是个全局对象，它维护着在页面会话(page session)期间有效的存储空间。只要浏览器会话窗口不关闭，页面会话周期就会一直持续。即使页面重新载入(reload)或者被恢复(restores)时，页面会话也是一直存在的。

// 保存数据到当前会话的存储空间
sessionStorage.setItem("username", "John");

// 访问数据
var item = sessionStorage.getItem("username");

// 获取对应index的key
var key = sessionStorage.key(2)

// 删除指定数据
sessionStorage.removeItem(key)

// 清除所有当前会话存储的数据
sessionStorage.clear()

• localStorage

概念：localStorage(本地存储) 与会话存储的工作方式很接近，不同之处在于它将数据存储在本地浏览器中持久储存。

当浏览器进入私人模式(private browsing mode，Google Chrome 上对应的应该是叫隐身模式)的时候，会创建一个新的、临时的、空的数据库，用以存储本地数据(local storage data)。当浏览器关闭时，里面的所有数据都将被丢弃。

// 保存数据到当本地的存储空间
localStorage.setItem("username", "John");

// 访问数据
var item = localStorage.getItem("username");

// 获取对应index的key
var key = localStorage.key(2)

// 删除指定数据
localStorage.removeItem(key)

// 清除所有当前会话存储的数据
localStorage.clear()

面试题 sessionStorage、locaStorage、cookie的区别

1. cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递，而sessionStorage和localStorage不会自动把数据发送给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下
2. 存储大小限制也不同，cookie数据不能超过4K，同时因为每次http请求都会携带cookie、所以cookie只适合保存很小的数据，如会话标识。sessionStorage和localStorage虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大
3. 数据有效期不同，sessionStorage：仅在当前浏览器窗口关闭之前有效；localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie：只在设置的cookie过期时间之前有效，即使窗口关闭或浏览器关闭
4. 作用域不同，sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面；localstorage在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的
5. web Storage支持事件通知机制，可以将数据更新的通知发送给监听者
6. web Storage的api接口使用更方便

「课堂练习」

使用storage实现音乐收藏功能

要求：

1. 每一首歌都有一个 “收藏/取消收藏” 按钮
2. 当歌曲已被收藏时按钮显式“取消收藏”，否则显式“收藏”
3. 创建一个收藏列表，将所有已收藏的歌曲展示在列表中
4. 将收藏的歌曲信息存储在localStorage中持久保存，保证每次打开页面已收藏的歌曲都会正确展示在收藏列表中
   数据:

var songs = [
            { id: 1, name: "会不会（吉他版）" },
            { id: 2, name: "是但求其爱" },
            { id: 3, name: "我很好（吉他版）" },
            { id: 4, name: "海底" },
            { id: 5, name: "执迷不悟" },
            { id: 6, name: "他只是经过" },
            { id: 7, name: "经济舱 (Live)" },
            { id: 8, name: "是想你的声音啊" },
            { id: 9, name: "苦尽甘来" },
            { id: 10, name: "天外来物" },
        ] 

---

「课堂练习」

使用storage实现音乐收藏功能

[外链图片转存中…(img-EsK5m4HD-1630593095374)]

要求：

1. 每一首歌都有一个 “收藏/取消收藏” 按钮
2. 当歌曲已被收藏时按钮显式“取消收藏”，否则显式“收藏”
3. 创建一个收藏列表，将所有已收藏的歌曲展示在列表中
4. 将收藏的歌曲信息存储在localStorage中持久保存，保证每次打开页面已收藏的歌曲都会正确展示在收藏列表中
   数据:

var songs = [
            { id: 1, name: "会不会（吉他版）" },
            { id: 2, name: "是但求其爱" },
            { id: 3, name: "我很好（吉他版）" },
            { id: 4, name: "海底" },
            { id: 5, name: "执迷不悟" },
            { id: 6, name: "他只是经过" },
            { id: 7, name: "经济舱 (Live)" },
            { id: 8, name: "是想你的声音啊" },
            { id: 9, name: "苦尽甘来" },
            { id: 10, name: "天外来物" },
        ] 

---