2023蓝旭工作室前端暑期培训（一）

前情回顾

博客链接：

(1) 进入前端、VScode&插件安装、浏览器

(2) HTML常用标签、CSS基础

(3) CSS进阶

(4) JavaScript基础

(6) BOM

本节内容：HTML5、CSS3、cookie、web storage、弹性布局

1 HTML5

1.1 HTML5 简介

HTML5 是 Hyper Text Markup Language 5 的缩写，是对 HTML 标准的第五次修订。

HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在2014年10月由万维网联盟（W3C）完成标准制定。

HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。

1.2 HTML5 新增标签

1.2.1 语义化标签

HTML5新增的语义化标签主要有：<article>、<section>、<nav>、<aside>、<header>、<footer>、<time> 等等。

标签	描述
article	定义页面独立的内容区域
section	定义文档中的节（section、区段）
nav	定义导航链接的部分
aside	定义页面的侧边栏内容
header	定义了文档的头部区域
footer	定义 section 或 document 的页脚
time	定义日期或时间

为什么要使用语义化标签？

• 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构
• 方便搜索引擎能识别页面结构，有利于SEO（搜索引擎优化）
• 方便其他设备解析（如移动设备、盲人阅读器等）

1.2.2 多媒体标签

audio 音频标签

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的音频的 URL。

<audio src="song.mp3" controls="controls" loop="loop" autoplay="autoplay"></audio>

video 视频标签

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

1.2.3 canvas画布

canvas 用于在网页中绘制图像，注意：必须通过 JavaScript 来绘制

1.2.4 SVG

• SVG 是一种使用XML技术描述二维图形的语言，SVG 是一种矢量图。
• SVG 可在图像质量不下降的情况下被放大，与 JPEG 和 GIF 比起来，尺寸更小，且可压缩性更强。
• SVG 文件可通过以下标签嵌入 HTML 文档：<embed>、<object>或者 <iframe>

1.3 新表单属性

HTML5 中 input 的 type 属性值新增有 url, email, date, time, datetime, month, week, number, range, search, tel, color

详细了解

• date 类型
  date 类型的 input 元素以日历的形式方便用户输入。
  当该文本框获取焦点时，显示日历，可以在日历中选择日期进行输入。
  格式：年/月/日

• time 类型
  time 类型的 input 元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器。

• datetime 类型
  datetime 类型的 input 元素是一种专门用来输入UTC日期和时间（标准时间，格林威治时间）的文本框，并且在提交时会对输入的日期和时间进行有效性检查。

  Internet Explorer、Firefox 或者 Chrome 不支持 <input type="datetime"> 元素，Safari 中部分支持。
  Opera 12 以及更早的版本中完全支持。【不建议使用】

• *datetime-local 类型
  datetime-local 类型的 input 元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效检查。
  格式：年/月/日 --:–

• number 类型
  在提交时会检查输入的内容是否为数字。它们具有 min、max 与 step 属性。 带有数值控制按钮，以控制其数值，使之不超过最大值于最小值，同时在点击该数值控制按钮时，其中的数值会按 step 属性进行增减，当然也可以直接在其中输入数字。

• range 类型
  range 类型的 input 元素是一种只允许输入一段范围内数值的文本框，它具有 min 属性与 max 属性，可以设定最小值与最大值（默认为 0 与 100 ），它还具有 step 属性，可以制定每次拖动的维度，用滑动条的方式进行值的制定。

1.4 编辑元素内容

contenteditable 属性指定元素内容是否可编辑。

<element contenteditable="true|false">
//true指定元素可编辑
//false指定元素不可编辑
<div contenteditable="true">该片段可编辑</div>

注意：

当元素中没有设置 contenteditable 属性时，元素将从父元素继承。
contenteditable 在编辑时如果手动的按了换行键，会添加一个 div 。这个不论定义被编辑属性的标签是什么，这里换行后都会添加一个 div 包起来。
当编辑的时候会触发 oninput 事件。（当 input 的 value 值发生变化时就会触发，不用等到失去焦点）

1.5 自定义属性

通过 data-自定义属性名来自行定义属性，来进行一些数据的存放。

<div id="div1" class="div1" data-id = "myId" data-class = "myClass" data-id-and-class = "Hello"></div>

使用 getAttribute 方法获取自定义属性的值

let div = document.getElementById("div1");
console.log(div.getAttribute("data-id"));
console.log(div.getAttribute("data-class"));
console.log(div.getAttribute("data-id-and-class"));

使用 setAttribute 方法设置自定义属性的值【可用于添加自定义属性】

div.setAttribute("date-name","lihua");

当然我们也可以通过直接定义属性名的方法定义自定义属性，这和使用 data-* 的自定义属性没有区别，只是属性名不一样。

<div id="div2" myName = "Hello"></div>
<script>
    var div = document.getElementById("div2");
    var myName = div.getAttribute("myName");
    console.log(myName);     //Hello
</script>

data-* 属性选择器

根据自定义的 data-* 属性选择相关的元素

// 选择所有具有 data-class 属性的元素
let div1 = document.querySelectorAll("[data-class]");

// 选择所有 data-class 属性值为 class 的元素
let div2 = document.querySelectorAll("[data-class='class']");

同样，我们可以将选择器用于 CSS 样式设置中

<style>
    div[data-class]{
        width: 100px;
        height: 100px;
        background: #8959a8;
        border: 1px solid #cccccc;
    }
    div[data-class="my"]{
        box-shadow: 0 0 5px 5px #CCCCCC;
    }
</style>
......
<div id="div1" data-class = "myClass"></div>
<div id="div2" data-class = "my" ></div>

1.6 数据存储 cookie

什么是cookie

cookie 是某些网站为了辨别用户身份，进行 Session 跟踪而储存在用户本地终端上的数据（通常经过加密），由用户客户端计算机暂时或永久保存的信息。一般由服务端产生，发送给客户端保存。

cookie处理过程

服务器向客户端发送 cookie
浏览器将 cookie 保存
每次 http 请求都会将 cookie 发送给服务器

cookie格式

cookie 是一段不超过 4KB 的小型文本数据，由一个名称（Name）、一个值（Value）和其它几个用于控制 cookie 有效期、安全性、使用范围的可选属性组成。

• Set-Cookie: “name=value;domain=.domain.com;path=/;expires=Sat, 11 Jun 2016 11:29:42 GMT;HttpOnly;secure”
• Name/Value
  设置Cookie的名称及相对应的值，添加多个 name/value 就用封号隔开
• domain
  可以访问此 cookie 的域名,如 domain 值为 b.com ，则以 b.com 结尾的域名都可以访问此 cookie
• path
  设置在 domain 这个域下可以访问 cookie 的页面路径
• expires
  失效时间
• HttpOnly
  设置后不允许通过脚本读写cookie
• secure
  安全标志，是否只能对https协议发送cookie

JS 操作 cookie
document.cookie 可以获取到 cookie ，是一个字符串，在这基础上进行增删改查。
删除 cookie 将 expires 的值设置为过去的时间即可

1.7 Web Storage

由于 cookie 不适合大量数据的存储一般只有4KB的空间大小，且每次 http 请求都会携带 cookie 。对于一些仅需要在客户端上存储操作的数据，使用 WebStorage 操作更方便，存储量更大，并且不必每次都向服务端发送数据。

两种 storage：localStorage（存储空间一般为 20M） 和 sessionStorage（存储空间一般为 5M） ，二者以键值对形式存取数据，在浏览器中,二者存在于window对象里。

其中，localStorage 没有过期时间，需要手动清除，而 sessionStorage 的生命周期是在浏览器关闭之前。

JS 操作 Web Storage
保存数据：localStorage/sessionStorage.setItem(‘key’, ‘value’)
读取数据：localStorage/sessionStorage.getItem(‘key’)
删除数据：localStorage/sessionStorage.removeItem(‘key’)
清空数据：localStorage/sessionStorage.clear()
注意存取数据时，key 和 value 均为字符串，存储数据时需要将 value 字符串化，获取数据时需要将 value 格式化

1.8* 多线程

Web Woker

HTML5 新增加了一个 WebWorkerAPI ，用户可以创建多个在后台的线程，将耗费较长时间的处理交给后台面不影响用户界面和响应速度，这些处理不会因用户交互而运行中断。

1.9* 双向通信

Web Socket

WebSocket 使得客户端和服务器之间的数据交换变得更加简单，允许服务端主动向客户端推送数据。在 WebSocket API 中，浏览器和服务器只需要完成一次握手，两者之间就直接可以创建持久性的连接，并进行双向数据传输。

1.10* 拖放API

Drag/Drop+js

1.11* 地理定位

获取当前定位：navigator.geolocation.getCurrentPosition(success, error, options)

2 CSS3

2.1 CSS3 简介

CSS3 是 CSS（层叠样式表）技术的升级版本，于 1999 年开始制订，2001 年 5 月 23 日 W3C 完成了 CSS3 的工作草案。

2.2 浏览器兼容性

由于 web 浏览器对于 css3 的兼容时间是不同的，而后每个浏览器厂商相继在兼容方式上加了前缀,但有一些属性没有加前缀的是，因为随着时间的推移全部的浏览器厂商都兼容了这些属性，所以通过协商去掉了前缀。

前缀写法
chorme/sifter ----> -webkit
IE ------> -ms
firefox -----> -moz
opera -----> -o

2.3 CSS3 新样式

指定背景图像的大小 background-size: length|percentage|cover|contain;
指定边框圆角 border-radius：1-4 length|%
指定边框图片 border-image：
指定元素的投影 box-shadow: h-shadow v-shadow blur spread color inset;

2.4 2D/3D 转换

2D转换
CSS3 转换可以对元素进行移动、缩放、转动、拉长或拉伸。

• 平移 transform: translate(50px,100px);　//沿ｘ，ｙ轴正方向移动的长度
• 旋转 transform: rotate(30deg);　//顺时针旋转的角度
• 缩放 transform: scale(2,3);　//宽为原来的2倍，高为原来的3倍
• 倾斜 transform: skew(30deg,20deg);　//在ｘ，ｙ轴倾斜的角度

3D转换
transform：基于平面的变换方法中，拓展出三个维度的变换方法
transform-origin：允许你改变被转换元素的位置。
transform-style：规定被嵌套元素如何在 3D 空间中显示。
perspective：规定 3D 元素的透视效果。
perspective-origin：规定 3D 元素的底部位置。
backface-visibility：定义元素在不面对屏幕时是否可见。

2.5 CSS3 新增选择器

新增属性选择器
elem[name^=‘item’] 匹配含有属性name并且属性值以item开头的elem
elem[name$=‘item’] 匹配含有属性name并且属性值以item结尾的elem
elem[name*=‘item’] 匹配含有属性name并且属性值包含item的elem

新增结构伪类选择器
E:first-child 匹配父元素中第一个E，且这个E为父元素的第一个元素。IE7就可以支持
E:last-child 匹配父元素中最后一个E元素，且这个E元素为父元素的最后一个元素
E:nth-child(n) 用于匹配索引值为n的子元素。索引值从1开始
E:only-child 这个伪类一般用的比较少，比如上述代码匹配的是div下的有且仅有一个的p，也就是说，如果div内有多个p，将不匹配。
E:nth-last-child(n) 从最后一个开始算索引。
E:first-of-type 匹配同级兄弟元素中的第一个E元素
E:last-of-type 匹配同级兄弟元素中的最后一个E元素
E:nth-of-type(n) 匹配同类型中的第n个同级兄弟元素E
E:only-of-type 匹配属于同类型中唯一兄弟元素的E
E:nth-last-of-type(n) 匹配同类型中的倒数第n个同级兄弟元素
E:root 匹配文档的根元素（html）
E:empty{} 匹配没有任何子元素（包括包含文本）的元素E

2.6 动画

关键帧规则(@keyframes)

@keyframes animateName{
	from{/* css样式 */}
	to{/* css样式 */}
}
@keyframes animateName{
    0%  {/* css样式 */} /* 可用 from 代替 */
    25% {/* css样式 */}
    50% {/* css样式 */}
    75% {/* css样式 */}
    100%{/* css样式 */} /* 可用 to 代替 */
}

animation: animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction animation-fill-mode animation-play-state;

• animation-name
  动画名，指定动画的名称

• animation-duration
  定义动画的持续时间，默认为 0s
  若不配置 animation-duration 则默认请况下是没有动画效果的
  即便使用 animation-name 锁定了动画名称，由于动画持续时间为 0s，所以没有效果

• animation-timing-function

  定义时间函数，通过这个选项，可配置动画随时间的运动速率和轨迹

  值	描述
  linear	动画从头到尾的速度是相同的
  ease	默认值 动画以低速开始，然后加快，在结束前变慢
  ease-in	动画以低速开始
  ease-out	动画以低速结束
  ease-in-out	动画以低速开始和结束
  cubic-bezier(n,n,n,n)	贝塞尔曲线（自定义数值），可到相关网站可视化设置

• animation-delay
  设置动画延迟时间，单位为秒

• animation-iteration-count
  设置动画执行的次数，默认值为 1 （只执行一次）
  可设置值为正整数或者 infinite （执行无限次）

• animation-direction
  设置动画执行方向

  值	描述
  normal	默认值 动画按正常播放
  reverse	动画反向播放
  alternate	动画正向交替执行（正向->反向）Loop
  alternate-reverse	动画反向交替执行（反向->正向）Loop
  inherit	从父元素继承该属性

• animation-fill-mode
  设置动画的填充模式

  值	描述
  none	默认值 动画在动画执行前后，不会应用任何样式到目标元素
  forwards	在动画结束后（由 animation-iteration-count 决定），目标元素将保持应用最后帧动画
  backwards	在动画结束后（由 animation-iteration-count 决定），目标元素将保持应用起始帧动画

• animation-play-state
  设置动画的执行状态，通常通过JavaScript动态控制
  默认值为 running，可以设为 paused (暂停)，动画将停止执行。

2.7* 多列布局

CSS3 可以将文本内容设计成像报纸一样的多列布局

3 Flex 弹性布局

3.1 弹性布局介绍

布局的传统解决方案，基于盒子模型，依赖 display 属性 + position 属性 + float 属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009 年，W3C 提出了一种新的方案---- Flex 布局（弹性布局），可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局。

.box{
    display:flex;
}
/* 行内元素也可以使用flex布局 */
.inline-box{
    display: inline-flex;
}
/* Webkit内核的浏览器，必须加上-webkit前缀 */
.box{
    display: -webkit-flex; /* Safari */
	display: flex;
}

注意，设为 Flex 布局以后，子元素的 float 、 clear 和 vertical-align 属性将失效。

3.2 弹性布局基本概念

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。
它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

容器默认存在两根轴：主轴（main axis）和交叉轴/辅轴（cross axis）。

主轴的开始位置（与边框的交叉点）叫做 main start ，结束位置叫做 main end；
交叉轴的开始位置叫做 cross start ，结束位置叫做 cross end 。

项目默认沿主轴排列。单个项目占据的主轴空间叫做 main size ，占据的交叉轴空间叫做 cross size 。

3.3 容器的属性

3.3.1 flex-direction

flex-direction 属性决定了主轴的方向，即项目排列的方向。

值	描述
row	从左到右按行进行布局
row-reverse	从右到左按行进行布局
column	从上到下按列进行布局
column-reverse	从下到上按列进行布局

3.3.2 flex-wrap

默认情况下，flex 容器中的所有项目都排列在一条轴线上

flex-wrap 属性决定一行内项目过多（一条轴线排不下）时，项目排列是否可以换行。

值	描述
nowrap	不设置折行 默认值
wrap	剩余空间如果不够就折行 第一行在上方
wrap-reverse	反向折行 第一行在下方

3.3.3 flex-flow

flex-flow : flex-direction flex-wrap ;

3.3.4 justify-content

justify-content 属性决定项目在主轴方向上的对齐方式。

属性	值
flex-start	向主轴的 start 方向对齐 默认值
center	居中对齐
flex-end	向主轴的 end 方向对齐
space-between	两端对齐，项目之间的间隔都相等
space-around	拉手对齐，每个项目两侧的间隔相等

3.3.5 align-items

align-items 属性决定项目在辅轴方向上的对齐方式。

值	描述
flex-start	向辅轴的 start 方向对齐
center	居中对齐
flex-end	向辅轴的 end 方向对齐
baseline	项目的第一行文字的基线对齐
stretch	默认值 若项目未设置高度或设为auto，拉伸当前项目在辅轴方向上的长度，完整占据弹性容器的辅轴长度

3.3.6 align-content

align-coontent 属性决定多行项目在容器中的整体对齐方式，即在 flex-wrap:wrap/wrap-reverse 情况下的对齐方式，相当于多行项目的辅轴对齐方式，对单行单列项目不起做用

值	描述
flex-start	向辅轴的 start 方向对齐
center	居中对齐
flex-end	向辅轴的 end 方向对齐
space-between	两端对齐，项目之间的间隔都相等
space-around	拉手对齐，每个项目两侧的间隔相等
stretch	默认值 拉伸当前项目在辅轴上的高度，完整占据弹性容器的辅轴长度

3.4 项目的属性

3.4.1 order

order 属性决定项目在容器中的排列顺序，数值越小，排名越靠前，默认值为 0。

注意：浏览器解析代码时排在前面的会先解析，因此可把代码顺序和排列顺序分开，使主要内容先被解析。

3.4.2 flex-grow

flex-grow 属性决定项目被拉大的比例，按比例分配项目空间。

默认值为 0 （项目不占用剩余空间），可将值修改为自然数 n （项目据空间若干份中的n份）。

举例
如果所有项目的 flex-grow 属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的 flex-grow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

注意：不要定义 width、height。

3.4.3 flex-shrink

flex-shrink 属性决定弹性容器缩小时，项目被压缩的比例。

默认值为1，表示弹性项目默认等比例压缩，0则表示不压缩。
取值值可以任意，按比例分配被压缩的长度，并进行压缩。负值对该属性无效。

举例
如果所有项目的 flex-shrink 属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小。

3.4.4 flex-basis

flex-basis 属性决定在奉陪多余空间之前，项目在主轴上的默认尺寸，可设置为 auto ，其优先级高于 width、height 属性。
浏览器根据这个属性，计算主轴是否有多余空间。

默认值为 auto，即项目的本来大小。

可以设为跟 width或height 属性一样的值（比如 350px ），则项目将占据固定空间。

3.4.5 flex

flex : flex-grow flex-shrink flex-basis ;

该属性有两个快捷值：auto ( 1 1 auto ) 和 none ( 0 0 auto )。

建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

3.4.6 align-self

align-self 属性决定单个项目在辅轴上的对齐方式，可覆盖 align-items 属性。

值	描述
auto	默认值 继承父元素的 align-items 属性，如果没有父元素，则等同于 stretch
flex-start	向辅轴的 start 方向对齐
center	居中对齐
flex-end	向辅轴的 end 方向对齐
space-between	两端对齐，项目之间的间隔都相等
space-around	拉手对齐，每个项目两侧的间隔相等
stretch	拉伸当前项目在辅轴上的高度，完整占据弹性容器的辅轴长度