开发工具与关键技术：Visual Studio 与Html、CSS、JS
作者：黄灿
撰写时间：2019.6.2-2019.6.8
Html代码/标签
连接css
style（样式）：<link rel="stylesheet" href="css文件路劲"> 写在title标签下面，head标签之中
连接
javascript：<script src="javascript文件路劲"></script>一般写在body标签中的末尾，也可写在title标签下面，head标签之中
<div></div>标签用来封装代码，封装代码写在div之中，是块级标签
<a href=”跳转路径（网址）”></a>锚标签也叫a标签
<img src=”图片路径” alt=””/>插入图片（自闭合标签）
<label for=”XXX”></label>表格标签
<span></span> 行内标签
<ul></ul>无序列表
<ol></ol>有序列表
<li></li>可用在有序/无序列表
<b></b>黑体字
<u></u>下划线
<p></p>分段(文字内容)
<s></s>删除线
<hr>水平线
<l></l>斜体字
<em></em>斜体字
<small></small>显示小字体
<big></big>显示大字体
<tt></tt>打字机字体
<strike></strike>删除线
<sub></sub>下标字
<sup></sup>上标字
<blink></blink>文字闪烁效果
<center></center>向中对齐
<pre></pre>依原始样式显示
空格
<h1></h1>~~<h6></h6>标题标签
<br>换行
placeholder文本框提示
<textarea></textarea>文本域
input标签
<input,type="text">文本框
<input,type="password">密码框
<input,type="submit">提交按扭
<input,type="checkbox">复选框
<input,type="radio">单选框
<input,type="reset">重置按扭
<input,type="image">图片按扭
<input,type="hidden">隐藏域
<input,type="button">按扭
<input,type="file">浏览文件
表格标签
<table> 定义表格
<caption>表格标题。
<th>表格的表头。
<tr>定义表格的行。
<td>定义表格单元。
<thead>定义表格的页眉。
<tbody>定义表格的主体。
<tfoot>定义表格的页脚。
<col>定义用于表格列的属性。
<colgroup>定义表格列的组。
Css代码
width宽度
height高度
margin外边距
padding内边距
background背景
position位置
centent中心,居中
float浮动
top上边
right右边
bottom下边
left左边
border边框
solid实线
dashed虚线
color颜色
font字体
size尺寸
fixed固定
display属性
length长度
line-height行高
border-radius圆角
font-size字体大小
box-shadow阴影
z-index：1;层级
transparent透明
Infinite无限的
text-align: center;文本居中
font-weigh文字大小
position: relative;相对定位(以自身为中心)
position: absolute;绝对定位
position: fixed;固定定位(一般以屏幕左上角为中心)
text-decoration:none;取消下划线
list-style：none;去除li小点
text-decoration: underline;添加下划线
overflow：hidden;超出部分隐藏起来
display:block；将行内标签变为块级标签
font-weight: bold;字体加粗
display: inline-block; 块级元素横排显示
nth-of-type() 结构选择
text-align：center;文字水平居中
maring：0 auto ;水平居中
border-radius: 5px;设置边框圆角效果
display: none;将元素隐藏
clear:left; 清除浮动
background-size:
cover 图片大小自适应
transform:translateX(，，px)往X轴移动
first-child 选择第一个元素
nth-child(n) 选择第一n个元素
font-family 字体改变
float：left 左浮动
float：right 右浮动
偶数行 (even) 奇数行（odd）
outline:none; 取消文本框选择效果
background-size:cover图片大小自适应
border-color:transparent transparent transparent #65aac3;
制作三角形
box-shadow:2px 5px 10px #CCC 设置阴影
cursor: pointer;鼠标移上去变巴掌
cursor:not-allowed;鼠标移上去变不能点击
清除浮动
.clear:after{
content: '';
display: block;
clear: both;
}
.clear{
zoom:1;
}/*游览器兼容性*/
CSS3动画函数
transition 过渡函数
transform变换函数
animation动画函数
transform:该属性用于设置变形。该属性支持一个或多个变形函数
rotate(angle):该函数用于设置元素旋转的角度
skew():该函数用于设置元素的一个扭曲效果
scale(sx,xy):该函数用于设置元素的缩放效果
translate(tx,ty):该函数用于设置元素的位移
transform-origin: 改变元素原点位置，使元素原点不在元素的中心位置
transition-property:指定过渡或动态模拟的CSS属性
transition-duration:指定完成过渡所需的时间
transition-timing-function:指定过渡函数
transition-delay:指定开始出现的延迟时间
matrix(m11,m12,m21,m22,dx,dy):该函数是一个基于矩阵变换的函数，前面的4个参数将组成变形矩阵，后面的dx,dy主要是指在坐标轴上的一个偏移量
transition:(all 0.5s ease);属性
时间 效果 transition-delay: 0.06s;
(延时) 2D动画
移动动画 animation：move 1.8s;
@keyframes XXX{ 0%{ } 15%{ } ………. } 关键帧函数
JavaScript（js）
window.οnlοad=function(){ … } 加载发生的事件
document.getElementByld(“id对应Html名称”)通过ID获取元素
document.getElementsByClassName(“clas对应Html名称”) 通过calss获取元素
document.getElementsByTagName(“对应标签名称”);通过标签名称获取元素
function函数的方法
Console.log();控制台输出
alert();弹出提示框
var 申明变量
confirm():弹出询问框
prompt();输入对话框
parentNode 父级元素
parseInt(…)将字符串转换成对应的整数
parseFloat()将字符串转换成对应的浮点数
document.write();输出到页面
Window.onmousewheel 鼠标滚轮事件
event.detail火狐等游览器获取滚动值
event.wheelDelta 获取滚轮移动值
Window.onresize 窗体改变尺寸事件
XXX.οnclick=function(){} 点击事件
XXX.innerHTML="”
动态添加元素内容
Var XXX=XXX. insertCell();动态插入单元格
XXX.style.display=‘none’;
设置元素属性
window.addEventListener(‘DOMMouseScroll’,wheel,false);监听火狐等游览器的滚轮事件
event.preventDefault(); event.returnValue=false；阻止游览器滚条滚动行为
声明函数：Function+函数名+（形参1，形参2…）{…}
计时器 setTimeout(go,interval); 函数名
\b 退格字符
\f换页符
\n换行字符
\r回车字符
\t制表符tab
\’转义