HTML
span 行内元素
p 块级元素
br/ 强制换行
i em倾斜
b strong 加粗
u 下划线
mark 高亮
超链接 a ：a href="链接地址" target="_blank" alt="可替文本" title="文字提示"
tartget：_self 自己界面打开 _blank在其他界面打开
<a id="tips"> 锚 调整位置 </a> <br /> // html5以前 使用name设定锚的名称 也是通过#name
<a href="#tips"> 锚 调转提示文字</a>
无序 列表：ul>li*n
有序列表 ： ol>li*n
摘要概述 ：details summary 一个details 通常含有一个summary
进度条：meter ，progress
表格： table 行： tr 标题行： th ：普通列 td
cellspacing 单元框间距；
cellpadding单元框内间距
去除内空格： cellspacing="0" cellpadding="0"
[style] border-collapse:collapse;
border-spacing=0;
取消内边框： border="0" cellspacing="0"
居中：水平居中：text-align: center 垂直居中：line-height= 高
行合并：rowspan="n" 列合并：colspan="n" 注意：最后同行或同列的td个数要一致
表单：form
表单的属性【
text 单行文本框
password 密码
默认选择：checked{
radio 单选 ， name 相等
checkbox 多选 ， name 相等
}
select option下拉列表; selected="selected" 默认选择
textarea 多行文本域 （可通过拖拽改变大小）
Cols属性：每行的字符数
Rows属性：文本行数
button 按钮
range 滑动块 可通过 step 滑动跨度： min="10" max="100" step="10"
进度条（不可滑动，value 设置值）：progress，meter
reset 重置
submit 提交
date 日期
color 颜色
email 邮箱
number 数字
tel 电话
】
表单的参数【
把标签变成不可编辑属性： contenteditable="true"
隐藏 类型 display:none 不占位
默认提示 placeholder="输入邮箱"
下拉框多选 multiple
提交时无需验证 novalidate
提交时验证必须填写 required
只读： disabled不可选颜色变浅;
readonly 可选但不可写样式不变
自动焦点： autofocus (多个自动焦点 会聚焦到第一个)
正则表达式 ：pattern
】
CSS
选择器
元素选择器 : 元素名{}
id选择器：#id名{}
类/class选择器 : .class名{}
并集选择器：选择器1名，选择器2名{} 选择器1和选择器2
后代选择器： 选择器1名 选择器2名{} 针对的是 在选择器1里下的选择器2（ 祖先）
子选择器 ： 选择器1名>选择器2名{} 针对的是 在选择器1里的直接子元素中选择器2（父子）
属性选择器 ： 例:input[type="text"]{ }
超链接伪类：
a:hover:鼠标悬浮其上
A:link:未单击访问时
A:active:鼠标单击未释放
A:visited：单击访问后
颜色
英文单词 red white
十六进制 #ffff00 【6个f 白 6个0 黑】
Rgb(255,0,0) 【 3 个0 黑，3个255 白】
Rgba(255,0,0,0.5)
背景
背景颜色：background-color:
背景图像：background-image:url(“路径”);
背景重复：background-repeat: no-repeat repeat-x/y
背景定位：background-position: 水平定位 竖直定位
水平定位：left right center px(正数向右，负数向左)
竖直定位：top bottom center px(正数向下负数向上)
简写：background: red url() no-repeat 20px center;
字体：
字体类型：font-family:’楷体’；
字体大小： font-size px
字体粗细：font-weight: 100-1000
normal :400 ; 正常
bold:700; 加粗
简写：font: 风格 粗细 大小 类型
文本：
颜色：color
文本对齐方式：text-align: left right center
文本修饰：text-decoration:none underline overline line-through
文本缩进：text-indent: px
行高：line-height
垂直对齐：vertical-align: top middle bottom
Css列表：
列表项类型：list-style-type:none disc实心圆 circle空心圆 decimal 阿拉伯数字 square 实心黑块
列表项图片：List-style-image:url()
列表项位置；list-stle-position:inside/outside(图标在li里/外)
盒子模型：
边距：border: 3px solid red;
solid，实线 ， dotted，点线 dashed虚线
box-sizing: border-box; 将边框对内显示
阴影 ： 水平（正为右） 垂直（下为正） 模糊度 颜色
盒子阴影：box-shadow：5px 5px 5px green;
文本阴影：text-shadow
首行缩进 ： text-indent: 30px
/* 外边距 上 右 下 左（黄框的外面）*/
margin: 10px 10px 0px;
内边距 ：padding
/* 背景 ：背景颜色 背景图片路径 是否平铺 */
/*位于的位置（left 右正 top 下正 决定） /所占整体的比例*/
background: red url(../img/image1.jpg) no-repeat left top/100% 100%;
浮动：float 浮动 不在同一个层级上，任何元素都可以
浮动的特性：脱离标准文档流（可以与其他元素并排展示，可以设置宽高，如果不设置会默认内容的宽高）
浮动的元素互相贴靠：浮动元素会贴靠上一个浮动元素的边，如果宽度不够，则当前浮动元素会换行显示，换行后顶部不会超过上一个浮动元素的底部。
浮动元素有字围效果（标准文档流的文字不会被浮动元素遮挡，围绕浮动元素）
定位：position: relative 相对 位置还存在 相对于自己位移
position: absoule;绝对 位置不存在 ， 相对于上一个定位的父级位移
position: fixed; /固定位置 与上级块无关 跟界面有关
属性z-index:定位时设置层级关系，数字越大越靠上
clear: both; 清除浮动 left both right 位置上
溢出处理： overflow-y: scroll
隐藏 ： visibility: hidden; 位置存在
display: none; 不存在
Display：block行内元素转换为块元素
Display: inline设置块元素转行内元素
Display:inline-block:块元素横向排列同时保留块元素的特性
渐变：圆形： border-radius: 50%;
从内向外：background-image: radial-gradient(yellow,green);
从上到下： background-image: linear-gradient(yellow,green);
弹性布局：{
display: flex;（默认：从左到右，上端对齐 ，不换行）
从右到左： flex-direction: row-reverse;
从上到下 ： flex-direction: column;
从下到上 ： flex-direction: column-reverse;
自动换行 ,warp第一行在最上面：flex-wrap: wrap;
自动换行 ,warp第一行在最下面： flex-wrap: wrap-reverse;
对齐 ： justify-content: flex-start;
右对齐 ： justify-content: flex-end;
居中对其： justify-content: center;
两端对齐 ： justify-content: space-between;
间隔相同 ：justify-content: space-around;
下端对齐 ： align-items: flex-end;
中间对齐 ： align-items: center;
单独设置对齐方式 ： align-self: flex-end;
排序顺序 order越小越靠前： order: 1;
}
JS：
var 类似全局变量
let 局部变量
const 常量
数据类型：typeof(变量)返回变量的数据类型
字符串 数字number 对象object 布尔
在网页输出 document.write("<h1>123</h1>");
控制台输出 console.log("hello world");
弹窗 alert(" tanC");
询问 confirm("are you already");
输入对话框prompt()
==和===区别 ！==和！=区别
==比较的是内容
===比较的是内容和数据类型是否否相同
！=内容是否不同
！==内容和数据类型至少有一项不相同
常用事件：
Onclick:点击事件
Onblur：光标失去焦点
Onfocus：聚集焦点
Onsubmit:提交事件
Onmouseover:鼠标移入事件
Onmouseout:鼠标移出事件
常用的Js内置函数：
parseInt()把字符串解析成数字，并返回一个正数
parseFloat()把字符串解析成数字，并返回一个小数
IsNaN()判断是否是非数字
Number对象
toString():数字转字符串
toFIxed(n)保留n位小数 四舍五入 不足用0填充
计时函数
SetTImeout(”调用的函数“，等待的毫秒数)：等待多长时间执行一次，如果要多次执行，让调用函数内容调用SetTImeout（）
clearTimeout(setTImeout()返回的id值)：清除setTimeout设置的定时
Setinerval（调用的函数，间隔的毫秒数）：每隔多长时间执行一次
ClearInerval(setINerval()返回的id值)：清除setInerval设置的定时
对象：String JS对象-String-CSDN博客
数组对象 JS对象-数组（Array）_lcatake的博客-CSDN博客JS对象-String-CSDN博客
日期对象的创建
Var date = new Date();//创建当前系统时间的日期对象
Var date = new Date(2023，9，13);//创建指定的年月日日期对象
Var date = new Date(2023，9，13，15，43，50);//创建指定的年月日时分秒日期对象
Var date = new Date(‘2023-9-13 15：44：20’);//创建指定的年月日时分秒日期对象
常用函数
getFullYear():从日期对象返回四位年份
getMonth()从日期对象中返回月份0-11实际月份=getMonth()+1
getDate()返回一个月中的某一天
getHours()返回日期对象的小时
getMinutes()返回日期对象的分钟
getSeconds();秒
getDay()返回一个星期中的某天（0-6）0：周末
getMIlliseconds()毫秒
getTime()返回从1970-1-1至今的毫秒数
以及对应的set方法
var rep1=new RegExp("正则表达式");
正则 ：rep1.test(str） 查看 str中是否含有rep1 返回布尔类型
rep1.exec(str); 查看 str中是否含有rep1 有则返回rep1，无则返回str
获取、设置属性
.className:获取/设置Class属性
.style：获取/设置css样式
.getAttribute（属性名）：获取属性的值
.setAttribute（属性名，属性值）:设置属性的值
.hasAttribute（属性名）:判断是否包含指定属性
.removeAttribute（属性名）:删除指定属性
动态添加节点
创建一个节点 var node =doucument.createElement(“li”)
创建一个文本节点 var textnode = ‘hello’;
元素节点追加文本节点
node.appendChild(textnode);
找到父节点
Var father = document.getElementByTagNamr(‘ul’)[0];
父节点追加子节点 father.appendChild(node);
动态删除节点
找到要删除的节点
Var chilenode = document.getELementById(‘one’);
找到父节点
Var fathernode = document.getElementById(‘box’);
父节点上删除子节点
fathernode.removeChild(childnode);
JQ：
Jq的基本使用_lcatake的博客-CSDN博客
jq的动画
JS的动画_lcatake的博客-CSDN博客
