2022蓝旭工作室前端暑期培训（一）：HTML5&CSS3

本节内容包括：h5新标签、API、cookie&webStorage 概述、css3：前缀、样式、动画、选择器、 弹性盒子

HTML5

简介

HTML5 是 HyperText Markup Language 5 的缩写，HTML5 技术结合了 HTML4.01 的相关标准并革新，符合现代网络发展要求，在 2008 年正式发布。

新属性

HTML5将Web带入一个成熟的应用平台，在这个平台上，视频、音频、图像、动画以及与设备的交互都进行了规范。

表单新属性

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

• date类型的input元素以日历的形式方便用户输入。当该文本框获取焦点时，显示日历，可以在日历中选择日期进行输入。
  年/月/日
• time类型
  time类型的input元素是一种专门用来输入时间的文本框，并且在提交时会对输入时间的有效性进行检查。它的外观取决于浏览器。
• datetime类型
  datetime类型的input元素是一种专门用来输入UTC日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效性检查。
• datetime-local类型
  datetime-local类型的input元素是一种专门用来输入本地日期和时间的文本框，并且在提交时会对输入的日期和时间进行有效检查。
  年 /月/日 --:–
• number类型
  在提交时会检查输入的内容是否为数字。它们具有 min、max 与 step 属性。 带有数值控制按钮，以控制其数值，使之不超过最大值于最小值，同时在点击该数值控制按钮时，其中的数值会按step属性进行增减，当然也可以直接在其中输入数字。
• range类型
  range类型的input元素是一种只允许输入一段范围内数值的文本框，它具有min属性与max属性，可以设定最小值与最大值（默认为0与100），它还具有step属性，可以制定每次拖动的维度，用滑动条的方式进行值的制定。

可编辑元素内容

定义和用法：
contenteditable 属性指定元素内容是否可编辑。

<element contenteditable="true|false">

true指定元素可编辑
false指定元素不可编辑

<div contenteditable="true">该片段可编辑</div>

注意：

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

数据存储

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的值设置为过去的时间即可

Web Storage

对于一些仅需要在客户端上存储操作的数据，使用WebStorage操作更方便，存储量更大，并且不必每次都向服务端发送数据。
两种storage：localStorage和sessionStorage，二者以键值对形式存取数据，在浏览器中,二者存在于window对象里。localStorage没有过期时间，需要手动清除。sessionStorage的生命周期是在浏览器关闭之前。
js操作：
保存数据：Storage.setItem(‘key’, ‘value’)
读取数据：Storage.getItem(‘key’)
删除数据：Storage.removeItem(‘key’)
清空数据：Storage.clear()
注意存取数据时，key和value均为字符串，存储数据时需要将value字符串化，获取数据时需要将value格式化

多线程

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

双向通信

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

拖放API

Drag/Drop+js

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

新标签

语义化标签

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

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

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

多媒体

audio音频

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

video视频

暂停/播放视频：

function playPause() {
   var myVideo = document.getElementById('videoP');

   if (myVideo.paused){
        myVideo.play();
   }else{
    myVideo.pause();
   }   
 }

canvas画布

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

SVG

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

CSS3

简介

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

前缀写法

chorme/sifter ----> -webkit
IE ------> -ms
firefox -----> -moz
opera -----> -o

新样式

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

文字特效

指定文本的阴影text-shadow: h-shadow v-shadow blur color;
指定文本溢出部分以什么内容显示text-overflow:
允许长单词或 URL 地址换行到下一行word-wrap：normal|break-word；
指定非CJK脚本的断行规则word-break：normal|break-all|keep-all;

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：定义元素在不面对屏幕时是否可见。

下面是一个3D几何体的设计：

<style type="text/css">
	.side {
	    font-size: 20px;
	    font-weight: bold;
	    height: 100px;
	    line-height: 100px;
	    color: #fff;
	    position: absolute;
	    text-align: center;
	    text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
	    text-transform: uppercase;
	    width: 100px;
	}
	.top {
	    background: red;
	    transform: rotate(-45deg) skew(15deg, 15deg);
	}
	.left {
	    background: blue;
	    transform: rotate(15deg) skew(15deg, 15deg) translate(-50%, 100%);
	}
	.right {
	    background: green;
	    transform: rotate(-15deg) skew(-15deg, -15deg) translate(50%, 100%);
	}
</style>
<div class="side top">Top</div>
<div class="side left">Left</div>
<div class="side right">Right</div>

选择器

• 新增属性选择器
  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个同级兄弟元素
  :root匹配文档的根元素（html）
  E:empty{}匹配没有任何子元素（包括包含文本）的元素E

动画

• 关键帧规则(@keyframes)

@keyframes + name，可以把@换成属性前缀，用于规定动画。
@keyframes myRule{
	from{/* css样式 */}
	to{/* css样式 */}
}

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

布局

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

弹性布局

html+css:display:flex属性

非强制性作业

建议使用弹性盒子写一个注册页面