<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
或者在引入Html5shiv.min.js文件就可以正常使用
专业:<input type="text" list="a">
<datalist id="a">
<opotion value="前端" label="前景好">option>
<opotion value="C++" label="前景好">option>
<opotion value="C" label="前景好">option>
datalist>
加密:<keygon>keygon>
1.
max="100" min="0" high="80" low="40" value="30 ">
<audio src="" controls autoplay loop>audio>
<video src="">video>
data-后面必须有一个字符,多个单词用-连接
建议:
名称应该小写
<p data-a-b="huangruiqi"></p>
取值:
window.onload = () => {
let p = document.querySelector("p");
/*必须由骆驼,拿到值*/
var value = p.dataset["aB"];
}
window.addEventListener("ononline", ()=>{
})
window.addEventListener("onoffline", ()=>{
})
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;
}
现在:
document.ondragstart (e) => {
console.log(e.target)//获取拖拽内容
}
<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
li: first-child{}为查找li元素的父元素的第一个li元素
如果第一个不是li元素,则都不起作用
li:last-child{}
不用rgb设置父盒子的透明度,则他的子元素都会变得透明,除非让子元素脱离父元素
H:色相(度数)
S:饱和度(加白色百分)
L:明度(加白色百分)默认值是50%,以上加白色,以下加黑色
text-shadow: 可以多层阴影效果以逗号分隔
1:距离(length)
2:模糊值(shadow)不能为负值,越大越模糊
3:颜色(color)
如果设置盒子的宽度,那么只能是内容的宽度,盒子的宽度是内容宽度加上padding的值
让盒子的大小就是设置的width大小
border-radius:左上、右下, 左下、右上
border-radius:100px/50px为一个椭圆
不同角上的不同角度椭圆
radial-gradient
elipse:适配当前形状
circle:正方形的形状
at position坐标可以是关键字
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
scaleX()只缩放x轴
skew(30deg,-30deg)斜切改变元素形状,往左斜切,往下切skewX()
角度来源
transform-origin:left top可以设置圆心
translate3d(x,y,z)看不到Z轴的效果
旋转角度正负复合左手法则
from就是开始;to就是结束
列表内容
客户端如果没有设置的字体,则会消失这种字体
使用步骤
只有之前生成的字体才有效果
设置列宽时,如果出现冲突,那么取大优先,但是会填充整个屏幕,最终的宽度也有可能大于设置的宽度,如果人为设置更小,那么会取大的几列
传统布局的盒模型,不灵活,不能把要的盒子插进去,所以要用flex弹性布局,见阮一峰的日志阮一峰的博客flex