HEML、CSS、Javascript基础知识总结

Html代码/标签

连接css style（样式）： 写在title标签下面，head标签之中
连接 javascript：一般写在body标签中的末尾，也可写在title标签下面，head标签之中

标签用来封装代码，封装代码写在div之中，是块级标签 锚标签也叫a标签 插入图片（自闭合标签） 行内标签

无序列表

有序列表

• 可用在有序/无序列表 黑体字 下划线
  分段(文字内容) 删除线

  ---

  水平线 斜体字 斜体字 显示小字体 显示大字体 打字机字体 删除线 下标字 上标字 文字闪烁效果 向中对齐
  依原始样式显示   空格
  ~~
  标题标签
  换行 placeholder文本框提示 文本域

  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”>,浏览文件

  表格标签

  表格 描述

  定义表格 定义表格的行。 定义表格的页眉。 定义表格的主体。 定义表格的页脚。 定义用于表格列的属性。 定义表格列的组。

  定义表格标题。

  定义表格的表头。
  定义表格单元。

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