今天自习,很烦,前几天还讲了好了关于前端的知识点,好多啊,都记不住了,今天趁自习好好的复习一下子。
HTML:超文本标记语言
字体标签:<font>
属性:color-颜色 size-大小(1-7) face-字体
排版标签:
标题标签:<h1> ~ <h6>
段落标签:<p>
加粗标签:<b>
斜体标签:<i>
下划线标签:<u>
居中标签:<center>
特殊标签:
换行:<br/>
空格:
水平线:<hr/>
属性:color-颜色 width-宽度 size-高度
<: <
>: >
图片标签:<img>
属性:src-图片路径 width-宽度 height-高度 alt-图片找不到显示的内容
列表标签:
有序列表:<ol>
列表项:<li>
属性:type-(数字 字母 罗马字符) start-起始位置
无序列表:<ul>
列表项:<li>
属性:type-(实心圆、空心圆、实心框)
超链接标签:<a>
属性:href-跳转路径 target-打开方式(_slef当前页面 _blank新窗口)
表格标签:<table>
属性:border-边框 width-宽度 height-高度 align-位置(left居左 center居中 right居右) bgcolor-背景颜色 background-背景图片
行标签:<tr>
列标签:<td>
合并行:rowspan
和并列:colspan
表单标签:
表单标签:<form>
属性:action-提交路径 method-提交方式(get post)
get:提交的数据会显示到url地址栏中。数据不安全,提交的数据在请求行中
post:提交的数据不会显示到url地址栏中。数据安全,提交的数据在请求体中
表单项:<input> <textarea> <select>
文本输入框:<input type="text"/>
密码输入框:<input type="password"/>
邮箱输入框:<input type="email"/>
颜色取色框:<input type="color"/>
文件上传框:<input type="file"/>
图片框:<input type="image"/>
提交按钮:<input type="submit"/>
重置按钮:<input type="reset"/>
隐藏域:<input type="hidden"/>
日期框:<input type="date"/>
单选框:<input type="radio"/>
复选框:<input type="checkbox"/>
按钮:<input type="button"/>
数字框:<input type="number"/>
文本域:<textarea>
属性:rows-行数 cols-列数
下拉框:<select>
列表项:<option>
注意:
1.表单项中的数据如果想被提交,必须有name属性
2.单选和复选,必须有相同的name属性值
3.单选和复选,可以有默认被选中的效果。 通过checked属性
4.下拉框,可以有默认被选中的效果。 通过selected属性
CSS:层叠样式表
和HTML结合的方式:
第一种:行内样式
第二种:页面内样式
第三种:外部样式
选择器:
基础选择器:
id选择器:
#id值{样式控制}
类选择器:
.类名{样式控制}
元素选择器:
标签名{样式控制}
扩展选择器:
并集选择器:
元素1,元素2,...{样式控制}
子元素选择器:
父元素 子元素{样式控制}
父元素选择器:
父元素>子元素{样式控制}
属性选择器:
标签名[属性名=属性值]{样式控制}
JavaScript:动态效果
和HTML结合方式:
第一种:页面内样式
第二种:引入外部文件
JS核心组成部分:
ECMAScript BOM DOM
ECMAScript:
数据类型:
原始数据类型:
number:数字类型
string:字符串
boolean:布尔值
null:空对象
undefined:未定义
引用数据类型:对象
基本对象:
Function 方法对象
Array
Math
Date
定义变量/对象格式:var 变量/对象名 = 变量值/对象;
BOM:浏览器对象模型
浏览器对象:navigate
屏幕对象:screen
窗口对象:window
方法:
alert()
confirm()
propmt()
open()
close()
setTimeOut(参数1,参数2) 参数1:js代码 参数2:毫秒值
clearTimeOut()
setInterval(参数1,参数2) 参数1:js代码 参数2:毫秒值
clearInterval()
地址栏对象:location
方法:
刷新页面:reload()
属性:
跳转url地址:href
历史记录对象:history
方法:
forward() 前进
back() 后退
go() 前进或后退
属性:
获取历史记录页面的个数:length
DOM:文档对象模型
Document:
获取方法:
通过id来获取指定元素对象:getElementById()
通过class属性来获取元素对象:getElementsByClassName()
通过name属性来获取元素对象:getElementsByName()
通过元素名来获取元素对象:getElementsByTagName()
创建方法:
创建元素:createElement()
创建属性:createAttribute()
创建文本:createTextNode()
Element:
设置属性:setAttribute(属性名,属性值);
删除属性:removeAttribute(属性名);
Node:
添加元素:appendChild()
删除元素:removeChild()
获取父级元素对象:parentNode;
事件:
1. 点击事件:
1. onclick:单击事件
2. ondblclick:双击事件
2. 焦点事件
1. onblur:失去焦点。
* 一般用于表单验证
2. onfocus:元素获得焦点。
3. 加载事件:
1. onload:一张页面或一幅图像完成加载。
4. 鼠标事件:
1. onmousedown 鼠标按钮被按下。
* 定义方法时,定义一个形参,接受event对象。
* event对象的button属性可以获取鼠标按钮键被点击了。
2. onmouseup 鼠标按键被松开。
3. onmousemove 鼠标被移动。
4. onmouseover 鼠标移到某元素之上。
5. onmouseout 鼠标从某元素移开。
5. 键盘事件:
1. onkeydown 某个键盘按键被按下。
2. onkeyup 某个键盘按键被松开。
3. onkeypress 某个键盘按键被按下并松开。
6. 选择和改变
1. onchange 文本的内容被改变。
2. onselect 文本被选中。
7. 表单事件:
1. onsubmit 确认按钮被点击。
* 可以阻止表单的提交
* 方法返回false则表单被阻止提交。
2. onreset 重置按钮被点击。
|
|