HTML，JS

*HTML*

*c********ss********样式表引入*

< link rel=“stylesheet” href=“路径”/>

*超链接四大伪类*

a:link{} 未访问状态

a:visited{} 已访问状态

a:hover{} 标悬浮状态

a:active{} 激活状态

F

​

​

​

​

​

​

​

​

frame=”viod”

*标签*

​ 其他信息

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fwis6tNa-1616204108997)(file:///C:\Users\176305~1\AppData\Local\Temp\ksohtml9464\wps1.jpg)]

*属性*

border 边框

cellspacing 外边距

cellpadding 内边距

width 宽

height 高

colspan 合并列

rowspan 合并行

frame=”void” 取消外边框

align 行，横向

vertical-align 垂直，纵向

vertical-align :middle 居中

rules 融合边框

**
**

*边框*

主border:1px solid red;

border-style:dashed; 边框虚线

border-collapse:collapse; 融合边框

border-radius:20px 40px 60px 80px;

​ 百分比写椭圆 数值写边框角弧度

**
**

*字体*

​ font-size:40px; 字体大小

​ font-style:italic; 字体样式

​ font-family:隶书; 字体类型

​ font-weight:bold; 字体粗细 100-900 bolder

**
**

*文本*

text-align 文本对齐方式

line-height 行高 一行文本的高度

white-space 设置是否换行

letter-spacing 字体间距

text-indent 首行缩进

vertical-align 调整垂直方向对齐方式

text-decoration 文本修饰线

text-shadow 文本阴影

list-style 列表样式（点/数字）

text-shadow:5px 5px 5px 5px;x,y坐标，模糊度，宽度（阴影）

**
**

*背景样式*

background: blue url() no-repeat 100px 100px / 300px 300px;

background-color:red; 背景颜色

background-image:url(…/…/images/5.gif); 背景图片

background-repeat:no-repeat;

背景平铺 no-repeat不平铺 repeat-x/y 在x/y轴平铺

背景位置

横向(left center right) 垂直 (top center bottom)

background-position:right bottom;

background-position:50px 50px; 坐标像素表示

background-size:200px 200px; 背景大小

background-image:line-gradiend(to right,多种颜色)

background-image:line-gradiend(,多种颜色)

**
**

*表单*

action 指定处理该表单的服务器程序。

method=“ get /post” 区别：表单数据。

​ 下拉框

​ 多行文本

*i********nput********属性*

name 名字

value 值

checked 默认选中

selected 下拉框默认选中属性

placeholder 输入提示语

readonly 只读属性

disabled 失效

required 必填验证

input:focus; 点击获得焦点

*input********的t********ype********属性*

text 文本

password 密码

radio 单选

checkbox 多选

number 只能输入数字

image 按钮图片

button 按钮

file 文件

hidden 隐藏

reset 重置

submit 提交

*input新增属性*

color 颜色面板

date 年月日

time 时间

datetime *****

datetime-local 年月日时间

emall 邮箱

month 日历表

range 进度条

search 文本显示叉，一键删除

url 输入网址

week 年周日

**
**

*浮动float*

float:left; 左浮动

float:right; 右浮动

overflow:auto; 防止浮动塌陷

*定位*

position:dasolute; 绝对定位

position:relative; 想对定位

position:fixed; 固定在窗口上

position:static; 默认

**
**

*窗口打开方式*

target:black; 在新窗口中打开

target:self 默认

traget:parent; 在父级框架中打开

traget:top; 在整个窗口中打开

traget:frmename; 在指定框架中打开

traget:标签名; 跳转到指定的框架位置

浏览器内部框架窗

**
**

*动画效果*

transition:all 3s; 过渡效果

overflow:hidden

hidden多余部分隐藏

auto如果内容多出，浏览器会以滚动条的方式显示内容

**
**

*JavaScript*

*页内脚本和外部脚本连接*

内部脚本

**
**

*输入输出语句*

var 声明变量

alert(“”); 弹出警告框

prompt(“”); 弹出带有输入框的警告框

confirm(“”); 弹出带有确定和取消的提示框

console.log(“”); 控制台输出

document.write(“”); 向页面中写入内容

**
**

*数据类型*

number 数字

string 字符型

Boolean 布尔型

null 空

undefined 未定义的

**
**

*数据类型转换*

number() 数字类型

parseInt() 转换整形

parsefloat() 转换小数型

**
**

*判断循环语句*

*三目运算*

a>b？max1:max2; 如果a大于b返回max1，否则 返回max2

*函数*

*数组*

给定一个变量

var array=你 好 呀;

array.split(“空格就是分隔”); 字符串转数组

结果：var=[你，好，呀];

*D********OM********编程*

location 位置地址

history 历史

setTimeout

setInterval

*节点的操作*

*增加操作*

document.createElement(“标签名“)； 创建一个节点

insertBefore(新标签，哪个标签)； 在那个标签之前插入

父.appendChild(“新标签”); 在父节点追加一个子节点

cloneNode(); 复制节点，如果参数为true，还会复制当前节点的子孙节点，否则只复制当前节点。

*删除操作*

你 好 呀;

array.split(“空格就是分隔”); 字符串转数组

结果：var=[你，好，呀];

*D********OM********编程*

location 位置地址

history 历史

setTimeout

setInterval

*节点的操作*

*增加操作*

document.createElement(“标签名“)； 创建一个节点

insertBefore(新标签，哪个标签)； 在那个标签之前插入

父.appendChild(“新标签”); 在父节点追加一个子节点

cloneNode(); 复制节点，如果参数为true，还会复制当前节点的子孙节点，否则只复制当前节点。

*删除操作*

父.removeChild(子标签) 删除子标签/子节点