HTML5 CSS3
HTML5
HTML即超级文本标记语言(HyperText Markup Language)，它是标准通用标记语言下的一个应用，也是一种规范，一种标准它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）。浏览器按顺序阅读网页文件，然后根据标记符解释和显示其标记的内容，对书写出错的标记将不指出其错误，且不停止其解释执行过程，编制者只能通过显示效果来分析出错原因和出错部位。但需要注意的是，对于不同的浏览器，对同一标记符可能会有不完全相同的解释，因而可能会有不同的显示效果。
HTML5是超文本标记语言（HTML）的第五次重大修改。
新增标签及属性
结构标签：
header 页眉(结构块的头部，不仅仅是在整个网页的头部)
nav 导航
main 文档主要内容
article 文章
aside 旁白，在旁边
footer 页脚，底部
多媒体标签及其属性：
audio （音频）标签：
controls 播放器控制面板
autoplay 自动播放
loop 循环
video （视频）标签：
controls 播放器控制面板
autoplay 自动播放
loop 循环
width/height 设置一个后，视频会等比例缩放，同时设置两个并不会都生效
poster 让指定图片作为视频封面
source（源）标签：放在video标签中，把video的src属性放到source标签上
（把每种格式的视频地址放置在source标签中的src属性中，让浏览器自动选择支持的格式）
标签的自定义属性：
<p data-school-name="abc">自定义属性</p>
data-开头，多个单词用“-”连接
通过js获取方式//
var p = document.querySelector("p");
var result = p.dataset["schoolName"];
//获取时，使用驼峰命名法连接。否则无法获取到值
新增表单元素
新增标签：
keygen 加密表单数据
例：<keygen></keygen> 写在submit前面
首先在本地生成公钥和私钥，然后通过私钥加密数据，接着把加密后的数据以及公钥通过请求
报文上传到服务器。服务器通过公钥来解密数据。
output 输出一段文字
例：<output>总金额：￥100.00</output>
没有特别的含义，也不可以修改；唯一的好处是，语义性更强
datalist 为某个表单元素添加下拉选项 类似select, 在需要添加的表单元素中 list="id"
例：<input type="text" list="year">
<datalist id="year">
<option>1992</option>
<option>1993</option>
</datalist>
progress 进度条
<progress max="100" value="60"></progress>
meter 度量器
<meter max="100" min="0" low="40" height="90" value="30"></meter>
新增type类型：
input type="email"
//【邮箱】提供了默认的电子邮箱的完整验证，如不能满足验证，会阻止表单提交
input type="tel"
//【电话】并无法实现电话号码验证（全球电话号码格式不同）。
但其本质目的是为了能够在移动端打开数字键盘
input type="url" //【网址】可以验证是否是合法网址（http://）
input type="number" //【数量】只能输入数字（e例外，科学记数法）
(value="60"默认值 max="100"最大值 min="0"最小值 )
input type="search" //【搜索】，可以在输入内容后提供删除按钮
input type="range" //【幅度】，类似音量选择
(value="60"默认值 max="100"最大值 min="0"最小值 )
input type="color" //【颜色选择器】提供一个颜色选择器
input type="time" //【时间选择器】提供一个时间选择器
input type="date" //【日历选择器】提供一个日历选择器
input type="datetime-loacl" //【时间和日期选择器】提供一个时间和日期选择器
input type="month" //【月份】
input type="week" //【星期】
新增属性：
<input type="text" placeholder="请输入用户名" autofocus autocomplete="on" />
placeholder 提示文本占位
autofocus 网页打开时自动获取焦点
autocomplete 自动提示
(autocomplete的两个前提：1.成功提交过；2.当前input标签有name属性)
<input type="tel" required pattern="^(\+86)?\d{10}$" />
required 当前输入框 必须输入内容，否则阻止提交
pattern 正则表达式（注意，在这里不需要写在//符号中）
<input type="file" name="photo" multiple />
multiple 可以选择多个文件
<input type="email" name="email" multiple />
multiple 可以输入多个邮箱地址，","分隔
<input type="text" name="adress" form="myForm" />
form属性，可以把没有在表单（id="myForm"）中的元素，在该表单数据提交时，一起提交。
新增的接口
1.网络接口
<script>
//online 网络连通事件
//offline 网络断开事件
window.addEventListener("online", function () {
alert("网络连通了");
})
window.addEventListener("offline", function () {
alert("网络断开了");
})
</script>
2.全屏接口
<script>
// requestFullScreen();//开启全屏
// cancelFullScreen(); //退出全屏
// fullScreenElement();//判断是否全屏
// 注意: 不同浏览器需要添加不同的前缀
/* chrome webkit
* firefox moz
* ie ms
* opera o
* */
//注意: 全屏是针对元素设置, 退出全屏是针对文档设置, 判断是否全屏也是针对文档判断的
例：
var div = document.querySelector("#box");
document.querySelector("#btn").addEventListener("click", ()=>{
if(div.requestFullScreen){
div.requestFullScreen();
}else if(div.webkitRequestFullScreen){
div.webkitRequestFullScreen();
}else if(div.mozRequestFullScreen){
div.mozRequestFullScreen();
}
// ...
})
</script>
3.FileReader
<script>
//reader.readAsDataURL(file[0]); //保存
//reader.onload =function(){} //监听文件保存完毕
//reader.result;//取出保存的文件
upFile.onchange = function () {
var reader = new FileReader();
//类似于构造函数模式创建一个新的实例
var file = upFile.files;//当文件上传窗口内容发生改变时,将其flies属性值取出
//注意: 由于文件上传窗口可以一次上传多个文件(multiple),所以其files属性获得的是伪数组
reader.readAsDataURL(file[0]);
//因为上传窗口未添加multiple属性,故取伪数组第一项即可
//将用户上传的文件及其路径以一种 二进制编码格式 保存在reader的readAsDataURL属性中
reader.onload = function () {
//因为文件解析保存需要时间，故监听其保存完毕后使用
img.src = reader.result;
//保存在对象reader.readAsDataURL中的值,通过reader.result 即可取出.
}
}
</script>
4.元素拖拽事件：
<script>
//ondragstart 拖拽开始事件
//ondragover 拖拽中事件
//ondrop 拖拽空投事件
document.ondragstart = function (event) {
event.dataTransfer.setData("text/html", event.target.id);
//将被拖拽元素的 id 以 text/html 格式保存在事件对象的dataTransfer属性中，通过setData
}
document.ondragover = function (event) {
event.preventDefault();
//如需成功触发ondrop事件，必须先取消浏览器默认阻止拖拽，必须在dragover中取消
}
document.ondrop = function (event) {
var tar = event.dataTransfer.getData("text/html");
//取得dataTransfer属性中保存的被拖拽元素的 id ，通过getData方法
event.target.appendChild(document.getElementById(tar));
}
</script>
5.地理定位接口：
<script>
var box = document.querySelector("#box");
function getLocation() {
if (navigator.geolocation) {
//通过导航获取 地理位置信息 （判断是否浏览器是否支持）
navigator.geolocation.getCurrentPosition(success, defeat, option)
//该方法会获取当前地理位置信息，由回调函数接收
/*success：获取地理位置信息成功时执行的回调函数
*defeat：获取地理位置信息失败时执行的回调函数
*option：调整获取当前地理位置信息的方式
* */
} else {
box.innerHTML = "Geolocation is not supported by this browser."
}
}
function success(position) {
position.coords.latitude; //经度
position.coords.longitude; //纬度
position.coords.accuracy; //精度
position.coords.altitude; //海拔
}
function defeat(error) {
switch (error.code) {
case error.PERMISSION_DENIED:
box.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
box.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
box.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERR:
box.innerHTML = "An unknown error occurred."
break;
}
}
function option(eve) {
eve.enableHighAccuracy = true; //是否使用高精度
eve.timeout = 3000; //超时时间
eve.maximumAge = 100; //浏览器重新获取地理位置信息的间隔时间
}
//注意: 实时获取到用户的经纬度即可确定用户的位置,
也可藉此利用百度地图位置接口向用户展示地理位置信息
</script>
6.页面/本地存储
<script>
//sessionStorage 【页面存储】
/* 1.数据是在页面中临时存储的，其他页面和浏览器无法访问
* 2.数据在当前页面关闭或浏览器关闭时，即时清除
* 3.sessionStorage 存储器的大小在5M左右
* */
//localStorage 【本地存储】
/*本地存储的特点：
* 1.数据是存储在浏览器中的（硬盘里）浏览器其他页面可以访问（其他浏览器无法访问）
* 2.除非手动清除，否则永久存在
* 3.localStorage 存储器的大小在20M左右
* */
sessionStorage.setItem("userName", txt.value); //设置数据
sessionStorage.getItem("userName"); //获取数据
sessionStorage.removeItem("userName"); //移除数据
localStorage.setItem("userName", txt.value); //设置数据
localStorage.getItem("userName"); //获取数据
localStorage.removeItem("userName"); //移除数据
</script>
7.应用程序缓存配置
<html lang="en" manifest="demo.appcache"><!--manifest 载货单,货单-->
<!--manifest="应用程序缓存清单文件的路径 建议文件的扩展名是appcache,
这个文件的本质就是一个文本文件"-->
demo.appcache 文件书写语法如下：
CACHE MANIFEST
# 后面写注释,该文件告知浏览器需要缓存的文件清单列表
# 当前文档的第一句代码必须是CACHE MANIFEST关键字
#需要缓存的文件清单列表,以CACHE关键字开头
CACHE:
../images/l1.jpg
../images/l2.jpg
# *:代表所有文件
# 配置每一次都需要重新从服务器获取的文件清单列表,以NETWORK关键字开头
NETWORK:
../images/l3.jpg
# 配置如果文件无法获取则使用指定的文件进行替代,以FALLBACK关键字开头
FALLBACK:
../images/l4.jpg ../images/banner_1.jpg
# /:代表所有文件
CSS3
原文链接（https://segmentfault.com/n/1330000013610000）
CSS即层叠样式表（Cascading StyleSheet）。 在网页制作时采用层叠样式表技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS3是CSS技术的升级版本，CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂，所以，把它分解为一些小的模块，更多新的模块也被加入进来。这些模块包括： 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多列布局等。
CSS3 新增选择器
【属性选择器】(E:element attr:attribute)
1. E(attr) 选择指定元素标签名 且 拥有指定属性名的 元素
2. E(attr=value) 选择指定元素标签名E 且 拥有指定属性名attr 且 该属性值【是value】 的元素(严格匹配)
3. E(attr*=value) 选择指定元素标签名E 且 拥有指定属性名attr 且 该属性值【有1个或多个value】 的元素
4. E(attr^=value) 选择指定元素标签名E 且 拥有指定属性名attr 且 该属性值【以value开头】 的元素(严格匹配)
5. E(attr$=value) 选择指定元素标签名E 且 拥有指定属性名attr 且 该属性值【以value结尾】 的元素(严格匹配)
//此类型选择器中的*^$类似正则表达式中的含义, 但也有不同. 在正则中
//+表示1个或多个; *表示0个或多个; ?表示0个或1个; ^严格模式开始; $严格模式结束
【伪类选择器】
[兄弟伪类]:
.cls + E 选择拥有cls类名的元素后面的第一个相邻的兄弟元素E
.cls ~ E 选择拥有cls类名的元素后面的所有的兄弟元素E
[父元素伪类]:
E:first-child 选择E元素的父级元素中的第一个子元素 且必须是E类型元素,如果不是,无法起作用
E:last-child 选择E元素的父级元素中的最后一个子元素 且必须是E类型元素,如果不是,无法起作用
E:first-of-type 选择E元素的父级元素中的第一个E类型子元素,忽略掉其他类型元素
E:last-of-type 选择E元素的父级元素中的最后一个E类型子元素,忽略掉其他类型元素
E:nth-child(从1开始的索引 || 关键字 || 表达式:an+b)
//选择E元素的父级元素中的指定条件的子元素 ( 正序 )
E:nth-of-type(从1开始的索引 || 关键字 || 表达式:an+b)
//选择E元素的父级元素中的指定条件的E类型子元素,忽略掉其他类型元素 ( 正序 )
E:nth-last-child() 如果在nth后添加last则表示倒序
E:nth-last-of-type() 如果在nth后添加last则表示倒序
E:empty 选择E元素的父级元素中的内容为空的E类型元素(没有任何内容的,空格也没有)
E:target 当E元素被锚点选中时
【伪元素选择器】
E::before
E::after
//注意: 前后的伪元素都是添加在元素内部的!!!
//设置伪元素时,必须添加content属性,即使内容为空
//因为这两个伪元素是行内元素,所以如需设置宽高,则必须转换其显示方式
E::first-letter E元素中内容的第一个字符
E::frist-line E元素中内容的第一行
E::selection E元素中当前被选中内容的样式
边框圆角、阴影
【边框圆角】
正方形(正圆):
border-radius: 50%;
border-radius: 10px 20px 30px 40px;(左上, 右上, 右下, 左下)
矩形(椭圆):
border-radius: 100px/50px; ("/"两边的值,分别表示xy值的距离)
border-radius: 左上x 右上x 右下x 左下x/左上y 右上y 右下y 左下y (连写方式)
如需给单独顶角设置, 可以写作:
border-top-left-radius:
border-top-right-radius:
border-bottom-left-radius:
border-bottom-right-radius:
【阴影】
[文本阴影] text-shadow: x, y, blur, color;
[边框阴影] box-shadow:h v blur spread color inset;
h: 水平方向的偏移值
v: 垂直方向的偏移值
blur: 模糊度
spread: 阴影的扩展和收缩，可选：默认0
color: 颜色，可选：默认#000
inset: 内阴影 ，可选：默认0
线性和径向渐变
【线性渐变】 linear 线性的；gradient 变化率；
linear-gradient 线性渐变色，（背景颜色,但只能写在background中,不能写在其他地方）
linear-gradient(方向，起始颜色 位置，颜色2 位置，颜色3 位置...)
方向：to top(0deg),to right(90deg),to bottom(180deg),to left(270deg),0-360deg(自定义角度)
颜色 位置：blue 30%（从起始位置0%到终点位置100%，距离等分，blue颜色从30%开始渐变）
注意：除了起止颜色，其他都是可选项
repeating 重复线性渐变：background: repeating-linear-gradient();
【径向渐变】 radial 半径的,放射状的；
radial-gradient 径向渐变色，（背景颜色,但只能写在background中,不能写在其他地方）
radial-gardient(形状 大小 坐标，起始颜色 位置，颜色2 位置，颜色3 位置...)
形状：circle（圆）产生正圆的渐变；ellipse 适配当前的形状 ——默认值
大小：
closest-side 最近边；
farthest-side 最远边；
closest-corner 最近角；
farthest-side 最远角 --默认值
坐标：at x y (x横坐标，y坐标；可以写具体的数值，也可以写left/right/top/bottom/center)
默认值是：at center center
例如：
background: radial-gradient(circle farthest-side at left top, blue, red);
注意：除了起止颜色，其他都是可选项
repeating 重复径向渐变：background: repeating-radial-gradient();
背景、边框样式
【背景样式】
background-repeat: space; (可选 space/round)
(round 图片缩放平铺 间距仍为0，使边角对齐盒子边框/space 图片原样平铺间距扩大，使边角对齐盒子边框)
background-attachment: fixed;(可选 fixed/scroll/local)
fixed 图片会固定在当前位置，无论容器滚动，还是内容滚动，图片都不会动；
scroll 图片会跟随容器滚动，但不会跟随内容滚动；
local 图片既会跟随容器滚动，也会跟随内容滚动；
background-size: 300px 500px;(宽 高；也可只设置宽度,此时高度会等比例缩放)
background-size: 50% 50%;(宽比例 高比例；注意：此比例是针对容器的宽高计算的)
background-size: contain;（等比例缩放（放大），以较大值为准，容器包含图片）
background-size: cover;（等比例缩放（放大），以较小值为准，图片填满容器）
background-origin: border-box; (可选 border-box/padding-box/content-box)
设置背景坐标的原点,默认是边框左上角(border-box)
background-clip: border-box; (可选 border-box/padding-box/content-box)
设置背景的显示区域,默认是盒子内部区域(padding-box)
【边框样式】
border-image-source: url(""); 背景图片的源文件路径
border-image-slice: 30 fill;
从图片的四个边开始，向内部切30px,将图片分成9块（注意：30没有单位）;fill表示 展示中间的切片
border-image-width:
边框的图片的宽度。如果没有，默认是元素原始的边框宽度。建议与原始边框宽度保持一致
border-image-outset:
扩展边框的宽度，一般不建议设置，会影响盒子的大小，即使你设置了box-sizing:border-box;
border-image-repeat: repeat; (可选 repeat/round/stretch)
repeat; 直接将切好的图片重复平铺;
round; 将切好的图片缩放之后自适应平铺;
stretch; 将切好的图片自适应拉伸;
注意：边框图片的本质是背景，并不会影响元素内容的放置，内容只会被容器的border和padding影响。
过渡、变换、动画
【过渡效果】
transition-property: left; 添加过渡效果的样式属性名称
transition-duration: 2s; 添加过渡效果的耗时，以秒为单位
transition-timing-function: (可选 linear/ease... 过渡的方式)
linear 线性过渡
ease 平滑过渡
...
transition-delay: 1s; 添加过渡效果延迟时间
连写方式：
transition: left 2s linear 1s;
多个样式的过渡效果，可以","连接连写；
全局方式：
transition: all 2s step(4);
为所有样式的过渡效果设置时间，建议不要这么写，效率低下
（浏览器会去查找哪些属性需要过渡，再一一添加transition-property属性）
step(4) 设置过渡效果需几步完成。
【2D 变换】
transform 移动是参照原始的位置
【移动】
transform: tarnslate(x,y); 移动的x,y 轴距离；
transform: tarnslateX(); 移动的x 轴的距离；
transform: tarnslateY(); 移动的y 轴的距离；
【缩放】（1是原始大小，小于1是缩放，大于1是扩展）
transform: scale(x,y); 缩放x,y 轴的程度；
transform: scale(x); 缩放x 轴的程度；
transform: scale(y); 缩放y 轴的程度；
【旋转】
transform: rotate(角度值); 一个值，即围绕z轴，在平面上旋转
【斜切】
transform: skew(x deg,y deg); 先执行水平方向的斜切值，再执行垂直方向的斜切值
transform: skew(x deg); 只有一个值，即表示水平方向的斜切值；
tarnsform: skewX(x deg); 单独设置 水平方向的斜切值；
transform: skewY(y deg); 单独设置 垂直方向的斜切值；
【旋转轴心】
tarnsform-origin: right top; 设置旋转轴心的坐标；
【3d 变换】
transform: translate3d(x,y,z); 设置x,y,z轴的偏移值；
也可分别设置3个方向的偏移值，translateX();translateY();translateZ();
transform: scale3d(x,y,z); 设置x,y,z轴的缩放值；
也可分别设置3个方向的缩放值，scaleX();scaleY();scaleZ();
transform: rotate3d(x,y,z,deg); 设置x,y,z轴的向量值及旋转角度；
transfrom-style: preserve-3d; 保留变换后的状态；设置给父盒子！
perspective: 500px; 设置观察景深；(观察者相对目标的距离)
perspective-origin: x,y; 设置观察原点坐标；
【关键帧动画】
animation连写方式：
animation: name duration timing delay iteration;
@keyframes animateName{
0%{
...
}
50%{
...
}
100%{
...
}
}
animation-name: animateName; 指定动画的名称；
animation-duration: 2s; 指定动画的耗时；
animation-iteration-count: infinite; 设置动画播放次数，可以是具体数值，也可以是无限infinite
animation-direction: alternate; 设置为交替动画，比如摆钟；
animation-delay: 2s; 指定动画延时执行；
animation-fill-mode: forwards;(可选 forwards )设置保留动画结束时的状态；
forwards 保留动画结束时的状态；
在有延迟时，不会立刻进入动画初始状态
backwards 不保留动画结束的状态；
在有延迟时，会立刻进入动画初始状态
both 既保留动画结束时的状态，还会立刻进入动画的初始状态；
animation-timing-function: linear; 设置动画的方式，线性动画，或者steps(60);分步动画
animation-play-state: running;(running/paused) 控制动画播放和暂停
伸缩盒子、多列布局
【伸缩盒子】
display: flex;//设置父容器为伸缩盒子，会使里面的每一个子元素自动变成伸缩项
justify-content: flex-start;(设置子元素主轴方向的排列方式)
flex-start 居左 默认值
flex-end 居右
center 水平居中
space-between 空白区域平均分配至盒子中间，两边盒子贴紧父容器
space-around 空白区域平均分配至盒子两边，类似给每个子元素设置margin: 0 auto;
align-items: flex-start;(设置子元素侧轴方向的排列方式)
flex-start 居上 默认值
flex-end 局下
center 垂直居中
stretch 垂直拉伸 默认值
baseline 基线对齐
当子元素宽度之和 大于/小于 父容器宽度时，子元素默认会自动伸展/收缩，以适应父容器的宽度。
flex-flow: row wrap; (同时设置flex-direction/flex-wrap)
flex-wrap: nowrap; （可选 nowrap/wrap...）设置是否换行
nowrap 默认 不换行（元素收缩自身）
wrap 换行
flex-direction: row (可选 row/column) 设置主轴方向
row 默认 水平方向（row-reverse 水平反向排列）
column 垂直方向（column-reverse 垂直反向排列）
[ 给子元素设置在父容器中所占比例 ]：
flex: auto;（同时设置flex-grow/flex-shrink）设置一个数即可，浏览器会自动识别，或者auto
表示每个子元素获得/承担 父容器 剩余/不足 空间所占的比例
align-self: auto; (可选 auto/flex-start/flex-end/center/baseline/stretch)
设置单个元素垂直方向的对齐方式
flex-grow: 0; （默认值为0）
计算方式：（当前元素的flex-grow值）/（它所有兄弟元素(包含自身)的flex-grow值的和），
即是当前元素获得父容器剩余空间的所占比例；当前元素获得一定比例的剩余空间后会伸展自身
flex-shrink: 1; （默认值为1）
计算方式：（当前元素的flex-shrink值）/（它所有兄弟元素(包含自身)的flex-shrink值的和），
即是当前元素承担父容器不足空间的所占比例；当前元素承担一定比例的不足空间后会收缩自身
【属性详解】
#box{
display: flex;
flex-direction: row; /* 决定主轴的方向 */
flex-wrap: wrap; /* 决定是否换行 */
justify-content: space-between; /* 决定主轴（默认纵轴）之间的对齐方式 */
align-content: space-between; /* 决定侧轴（默认横轴）之间的对齐方式 */
align-items: center; /* 决定子项在侧轴上的对齐方式 ( 在弹性盒子中没有justify-items属性 )*/
}
.item{
flex: 1 1 auto; /* 指定该项放大、缩小比例，以及在伸缩之前的大小 */
order: 1; /* 指定该子项的排列顺序 */
align-self: center; /* 指定该子项自己的对齐方式 */
}
【多列布局】
column-count: 3; 设置列数；
column-rule: dashed 2px red; 列数之间的样式，类似边框
column-gap: ;设置间隙大小；
column-width: ;
注意：column-count与column-width冲突时，取大优先,填满屏幕
column-span: ;跨列（可选 1/all）
