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
\’转义