HTML:超文本标记语言
字体标签:<font>
属性:color-颜色 size-大小(1-7)(从小到大) face-字体
排版标签:
标题标签:<h1> ~ <h6>(从大到小)
段落标签:<p>
加粗标签:<b>
斜体标签:<i>
下划线标签:<u>
居中标签:<center>
特殊标签:
换行:<br/>(<br>)
空格:
水平线:<hr/>
属性:color-颜色 width-宽度 size-高度
<: <
>: >
图片标签:<img>
属性:src-图片路径 width-宽度 height-高度 alt-图片找不到显示的内容
列表标签:
有序列表:<ol>(order list)
列表项:<li>
属性:type-(数字 字母 罗马字符) start-起始位置
无序列表:<ul>
列表项:<li>
属性:type-(实心圆disc、空心圆circle、实心框square)
超链接标签:<a>
属性:href-跳转路径 target-打开方式(_slef当前页面 _blank新窗口)
设置a标签没有下划线:text-decoration:none;
设置a标签不跳转页面有点击效果:href = "#"或"javascript:void(0);";
表格标签:<table>
属性:border-边框 width-宽度 height-高度 align-位置(left居左 center居中 right居右) bgcolor-背景颜色 background-背景图片
border: 1px; 代表给表里的每一个tr和td都加上了border边框属性
行标签:<tr>
列标签:<td>
合并行:rowspan,参数为正整数,就代表合并几个
和并列:colspan,参数为正整数,就代表合并几个
表单标签:
表单标签:<form>
属性:action-提交路径 method-提交方式(get post)
get:提交的数据会显示到url地址栏中。地址栏的长度大小有限,数据不安全,提交的数据在请求行中
post:提交的数据不会显示到url地址栏中。数据安全,提交的数据在请求体中,长度大小没有限制
表单项:<input> <textarea> <select>
文本输入框:<input type="text"/>
placeholder = ""; 可以给每一个输入框加上灰色提示信息
密码输入框:<input type="password"/>
邮箱输入框:<input type="email"/>
颜色取色框:<input type="color"/>
文件上传框:<input type="file"/>
图片提交按钮:<input type="image"/>
//src="submit.gif" alt="Submit"
必须把 src 属性 和 alt 属性 与 <input type="image"> 结合使用。
提交按钮:<input type="submit"/>
重置按钮:<input type="reset"/>
隐藏域:<input type="hidden"/>:用来给表单附带一些默认信息
日期框:<input type="date"/>
单选框:<input type="radio"/>
每一个单选框的name值要相同,并且要给value属性赋值
复选框:<input type="checkbox"/>
每一个复选框的name值要相同,并且要给value属性赋值
按钮:<input type="button"/>
数字框:<input type="number"/>
文本域:<textarea>
属性:rows-行数 cols-列数(用来表示长和宽)
下拉框:<select>
列表项:<option>
提交表单需要给name和每一个option的value赋值
注意:
1.表单项中的数据如果想被提交,必须有name属性
2.单选和复选,必须有相同的name属性值
3.单选和复选,可以有默认被选中的效果。 通过checked属性
4.下拉框,可以有默认被选中的效果。 通过selected属性
CSS:层叠样式表
和HTML结合的方式:
第一种:行内样式 <a href="#" style = "color:red";>点击</a>
第二种:页面内样式 <style></style>写在head标签体内
第三种:外部样式 <link rel="stylesheet" type="text/css" href="css文件路径">
选择器:
基础选择器:
id选择器:
#id值{样式控制}
类选择器:
.类名{样式控制}
元素选择器:
标签名{样式控制}
扩展选择器:
并集选择器:
元素1,元素2,...{样式控制}
子元素选择器:
父元素 子元素{样式控制}
父元素选择器:
父元素>子元素{样式控制}
属性选择器:
标签名[属性名=属性值]{样式控制}
JavaScript:动态效果
和HTML结合方式:
第一种:页面内样式
第二种:引入外部文件
JS核心组成部分:
ECMAScript(基础js) BOM(浏览器对象模型) DOM(文档对象模型)
ECMAScript:
数据类型:
原始数据类型:
number:数字类型
string:字符串
boolean:布尔值
null:空对象
undefined:未定义
引用数据类型:对象
基本对象:
Function 方法对象
var fun = new Function(形式参数列表,方法体);
function 方法名称(形式参数列表){
方法体
}
var 方法名 = function(形式参数列表){
方法体
}
Array
Math
Date
定义变量/对象格式:var 变量/对象名 = 变量值/对象;
BOM:浏览器对象模型
浏览器对象:navigate
屏幕对象:screen
窗口对象:window
方法:
alert():弹出警告框
confirm():弹出信息提示确认按钮框,点击确认返回true
propmt():弹出输入框,点击确认返回输入的内容
open(url):可以给定要打开的url地址,返回一个新窗口对象
close():一般关闭新窗口对象,新窗口对象.close();
//执行一次的定时器
setTimeOut(参数1,参数2) 参数1:js代码 参数2:毫秒值
返回一个定时器唯一标识,
clearTimeOut():clearTimeOut(定时器唯一标识)
//执行循环的定时器
setInterval(参数1,参数2) 参数1:js代码 参数2:毫秒值
返回一个定时器唯一标识,
clearInterval():clearInterval(定时器唯一标识)
地址栏对象:location
方法:
刷新页面:reload()
属性:
跳转url地址:href :location.href = "url";
历史记录对象:history
方法:
forward() 前进
back() 后退
go() 前进或后退:go(整数):负数代表后退几个历史记录,整数代表前进几个历史记录
属性:
获取历史记录页面的个数:length
DOM:文档对象模型
Document:
获取方法:
通过id来获取指定元素对象:getElementById()
通过class属性来获取元素对象数组:getElementsByClassName()
通过name属性来获取元素对象数组:getElementsByName()
通过元素名来获取元素对象数组:getElementsByTagName()
创建方法:
创建元素:createElement()
创建属性:createAttribute()
创建文本:createTextNode()
Element:
设置属性:setAttribute(属性名,属性值);通过元素对象使用
删除属性:removeAttribute(属性名);
Node:
添加元素:appendChild()
删除元素:removeChild()
获取父级元素对象:parentNode;通过子级元素对象来获取
|
|