关于H5+CSS3
什么是H5（有些缺少内容另单独记载）
- H5不是新的语言，试一次html的重大修改
- 支持：所有主流浏览器（chrome,firefox,safari…….）IE9及以上
- 改变了用户与文档的交互方式：多媒体：苹果不支持flash：video,audio,canvas
- 增加了新的特性：语义特性（简单易懂），本地存储，网页多媒体，二维三维，特效（过渡，动画）
- 进步：抛弃了不合理不常用的标记属性、新增了一些标记和属性–表单
、h5网页结构更简洁
html:5 + tab
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
body>
html>html:xt + tab 是xhtml的过渡文件会像W3C里面解析代码
html:4s + tab 是一种严格的文件，必须所有的语法都符合html4
H5语义化标签
- div作为不语义化的标签，需要去区分
其中header可以用到任何div中
语义化标签兼容
- 在ie9以上中，高度会失效（行级元素），所以用display:block转成块级元素，就可以解析为正确的样式
在Ie8一下中，完全不支持标签，需要手动创建标签
或者在引入Html5shiv.min.js文件就可以正常使用
表单的type
表单的其他属性
- placeholder(input提示文本)
- autofocus(自动获取焦点)
- autocomplete=”on”(自动完成)（2个前提：必须提交过，当前添加的元素必须有name属性），在第二次之后就保存了之前输入过的内容
- required(必须输入)
- pattern=”^(+86)?1\d{10}$”(正则表达式验证)
- *代表任意个
- ？代表0、1
- +代表1个或多个
- file、email 的multiple选择多个文件、邮箱（需要,分隔）
- input中的form=”指定表单的id号”可以加入到这个表单的提交当中去
表单的新增元素（datalist）
- select不仅可以选择，还可以输入新的内容(value为具体的值，label为提示的值)
- input的list应该为datalist的id号
专业：<input type="text" list="a">
<datalist id="a">
<opotion value="前端" label="前景好">option>
<opotion value="C++" label="前景好">option>
<opotion value="C" label="前景好">option>
datalist>- 在火狐中样式不同，等双击后出现的只是label的内容。
- option可以为单标签
- 如果input的type为url那么value的值必须要有http://为合法网址
表单的新增元素（keygon加密、output语义静态输出）
加密：<keygon>keygon>
新增表单事件
- oninput只要Input内容改变，就会触发
- onkeyup:当键盘弹起时触发
- 当用鼠标粘贴复制的时候支出法oninput
- oninvalid当不通过时触发
- this.setCustomValidity(”)自定义处理提示信息的内容
进度条
1.
2.度量器
- high:规定高的值
- Low:规定低的值
- max：最大值
- min: 最小值
- value： 当前度量值
- 将盒子分为几等份，判断这个值再哪个区间之间
max="100" min="0" high="80" low="40" value="30 "> 音频和视频的使用
- 音频
- 一开始：embed本机必须有这个播放器（有兼容性）、安装flash插件 （增加使用成本、苹果不适用）
- controls:音频控制面板
- autoplay:自动播放
- loop: 循环播放
<audio src="" controls autoplay loop>audio>- 视频
- poster: 当视频没有下载，默认显示当前显示为视频的第一帧
- width:宽度
- height：高度
- controls:视频控制面板
- autoplay:自动播放
- loop: 循环播放
- 只能等比缩放，同时改变宽高，视频不会改变
<video src="">video>- source的使用，因为浏览器支持的视频的格式不一样
如果不支持就往下找
获取dom元素
- 通过getElementsByTagName用索引获取不直观
- 通过querySelector()只能获取第一个元素（或者通过class或id）
- 通过querySelectorAll()返回所有标签是个数组
操作元素类样式
- 添加样式：document.querySelector(‘li’).classList.add(”)一次只能添加一个样式
- 移除样式：document.querySelector(‘li’).classList.remove(”)一次只能移除一个样式
- 切换元素样式：document.querySelector(‘li’).classList.toggle()
- 判断是否包含该样式：document.querySelector(‘li’).classList.contains()
- 获取样式：document.querySelector(‘li’).classList.item(1)
H5自定义属性
- data-开头
data-后面必须有一个字符，多个单词用-连接
建议：名称应该小写
- 名称不要有任何符号
- 名称不要纯数字
<p data-a-b="huangruiqi"></p>取值：
window.onload = () => {
let p = document.querySelector("p");
/*必须由骆驼，拿到值*/
var value = p.dataset["aB"];
}网络监听接口
- ononline:网络连接时候触发
window.addEventListener("ononline", ()=>{
})- onofflion:网络断开时候触发
window.addEventListener("onoffline", ()=>{
})全屏接口的使用
- requestFullScreen()开启全屏显示
- cancelFullScreen()关闭全屏显示
- fullScreenElement是否是全屏
- 不同浏览器需要接不同的前缀，并进行能力测试（if判断是否有这个函数）
- chrome:webkit
- firefox:moz
- ie:ms
- opera: o
注意大小写
FileReader的接口使用
- readAsText():读取文本文件（可以使用txt打开的文件），返回文本字符串
- readAsBinaryString():读取任意文件，返回二进制，作用是存储文件，读取并传给后台，
- readAsDataURL():读取一段以data开头的字符串，本质是DataURL.DataURL（一般指图像，html）是一种前途到文档的方案，比如src的内容占用服务器资源，是将资源转换为base64的字符串形式，并且直接将内容存储到url中，优化网站加载速度和执行效率
- abort():中断读取
- 事件
- onabort:读取文件中断触发
- onerror:读取错误时触发
- onload:文件成功完成时候触发
- onloadend:无论成功还是失败都会触发
- onloadstart:开始读取时触发
及时预览
原来：
export function getUrl(file) {
var url = null;
if (window.createObjectURL != undefined) { // basic
url = window.createObjectURL(file);
} else if (window.URL != undefined) { // mozilla(firefox)
url = window.URL.createObjectURL(file);
} else if (window.webkitURL != undefined) { // webkit or chrome
url = window.webkitURL.createObjectURL(file);
}
return url;
}现在：
拖拽接口
dragable=”true”就可以为这个元素不仅是选择还有可以拖拽，图片和链接不需要
浏览器默认组织ondrop，所以要在ondragover阻止浏览器默认行为e.preventDefault()
- w为了让所有元素都有拖拽的功能
document.ondragstart (e) => {
console.log(e.target)//获取拖拽内容
}- 通过e.dataTransfer.setData(format数据类型text/html,data数据是字符串);
- 只能在ondrop通过e.dataTransfer.getData()获取
地理定位
获取成功时：
获取失败后：
可以设置获取数据方式
- enableHighAccuracy:true/false是否使用高精度
- maximumAge:这只浏览器重新获取地理信息的时间间隔，ms
- timeout:设置超时时间
但是，浏览器不能直接获取到位置，只能通过地图api来获取地理信息
程序应用缓存
<html lang="en" manifest="demo.appcache">
<head>
<meta charset="UTF-8" >
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Documenttitle>
head>
<body>
<img src="./捕获.JPG">
<img src="./捕获2.JPG">
<img src="./捕获3.JPG">
<img src="./捕获44.JPG">
body>
html>文件如下：
CACHE MANIFEST
#需要缓存的文件清单
CACHE:
./捕获.JPG
./捕获2.JPG
#配置每一次都需要从服务器获取的清单
NETWORK:
./捕获3.JPG
#配置如果无法从服务器获取所代替的清单
FALLBACK:
./捕获44.JPG ./捕获4.JPG- CACHE: *为所有缓存文件
- FALLBACK: /为所有都是找不到文件需替换
css3
对于兼容性问题的方案：
选择器
属性选择器：
兄弟伪类
- +为附近相邻的满足条件的元素 .first + li
- ~获取满足条件的兄弟元素 .first ~ li
相对于父元素的结构伪类
li: first-child{}为查找li元素的父元素的第一个li元素
如果第一个不是li元素，则都不起作用li:last-child{}
- li: first-of-type{}只会查找第一个满足条件的元素，不管第一个是不是li，过滤掉其他类型的元素
- li: last-of-type{}
- li:nth-child(3||even,,odd偶数奇数||表达式){}表示索引第3个元素
- 变成nth-of-type（n）则是可以不考虑父元素的第一个是否为li元素,其中n为一个范围-n+5获取前5个nth-last-of-type（-n+5）选取后5个（n是0~最大值）
- li:empty{}没有任何内容的li标签,连空格都没有
- 毛链接;i:target{}触发锚点元素的样式
伪元素
- 如果设置了first-letter则不能通过其他的来设置了
关于颜色RGB
不用rgb设置父盒子的透明度，则他的子元素都会变得透明，除非让子元素脱离父元素
- rgba(225,225,225,0)第四个为透明度
HSL颜色
H：色相（度数）
S：饱和度(加白色百分）
L：明度（加白色百分）默认值是50%，以上加白色，以下加黑色
文件阴影
text-shadow: 可以多层阴影效果以逗号分隔
1：距离（length）
2：模糊值（shadow）不能为负值，越大越模糊
3：颜色（color）
盒模型
如果设置盒子的宽度，那么只能是内容的宽度，盒子的宽度是内容宽度加上padding的值
让盒子的大小就是设置的width大小
边框圆角
border-radius:左上、右下， 左下、右上
border-radius：100px/50px为一个椭圆
不同角上的不同角度椭圆
线性渐变
linear-gradeint
径向渐变，
radial-gradient
elipse：适配当前形状
circle：正方形的形状
at position坐标可以是关键字
重复渐变
圆形
线性
background
background-image
如果图片大于容器那么默认就从左上角放置；如果，小于容器，那么会平铺
background-repeat
round会缩小图片后平铺；space会产生间距值
background-attachment
fixed背景图位置固定不变；scroll会滚动但不会根据容器滚动而滚动；local会跟随容器内滚动而滚动
background-position：移动背景图片位置
圆点相对于origin
background-origin:有三种内容
设置内容裁切设置的是裁切，其实是显示
background-clip:border-box\content-box\padding-box
边框图片
border-image-source：url(“”)
图片需要一一对应：
默认将图片放在四角
border-image-slice设置四个角上面的裁切距离 加fill填充内部
1，3，7，9部分就会作为四角
border-image-width为图片宽度，如果不设置，就会默认为边框宽度
但是内容仍然按原来的变框进行放置，这时可以设置border或者padding
border-image-outset将边框扩展
border-image-repeat:设置图片的平铺，为repeat重复平铺和round会将内容缩放进行平铺
缩写：
过渡
- 当一个物体从一个状态变成另一个状态的过渡效果
- 为多个样式添加样式用逗号隔开
- 为所有样式添加
所有样式都一样；效率低下，会查询所有样式
transition: all 2s- steps(4)让过渡分为4步
建议：过渡要加前缀
过渡十分严格，必须由一个具体的值到一个具体的值
transform转换
- transform（x,y）2D转换，并且是相对于元素的位置
- 执行完毕后也会回到元素原来位置
- 同样transformX();只移动横坐标
2D缩放，scale()
在缩放的时候不会影响到其他的元素scaleX()只缩放x轴
- rotate(30deg)写角度
skew(30deg，-30deg)斜切改变元素形状，往左斜切,往下切skewX()
角度来源
transform-origin：left top可以设置圆心
复合添加效果：不能调换位置，否则旋转后坐标轴也会动
实现居中
注意百分比的参照物
translate3d(x,y,z)看不到Z轴的效果
- scale3d(x,y,z)看不到Z轴的效果
- rotate3d(x,y,z，angle)xyz为向量正数值都是一样的
向量的作用，确定围绕不动转动的轴
由于会还原，所以看不到效果，所以用transform-style
旋转角度正负复合左手法则
- 透视：可以观察盒子的距离
动画
创建动画可以添加多个关键帧，
- 创建动画后设置animination-name
- 设置动画的总耗时，才会有动画animination-duration
- 创建动画后设置animination-name
from就是开始；to就是结束列表内容
- animation-interation-count指定重复次数，可以是infinite
- animation-direction设置交替动画（摆钟）alternate
- animation-delay动画延迟
- animation-fill-mode设置动画结束的模式
- forwards保持动画结束状态
- backwards在添加动画延迟时，如果动画有初始状态，那么就会一进入就有这个初始状态
- both2个都有
- animation-timing-function设置动画的速度
- ease
- linear
- animation-play-state设置暂停播放
- paused
- running
web字体
客户端如果没有设置的字体，则会消失这种字体
使用步骤
只有之前生成的字体才有效果
字体图标
自己选取图片编码
以上不直观
多列布局
设置列宽时，如果出现冲突，那么取大优先，但是会填充整个屏幕，最终的宽度也有可能大于设置的宽度，如果人为设置更小，那么会取大的几列
传统布局
传统布局的盒模型，不灵活，不能把要的盒子插进去，所以要用flex弹性布局，见阮一峰的日志阮一峰的博客flex