HTML:超文本标记语言
超文本:比普通文本更强大
标记语言:由标签组成的
文本标签:
文字标签:<font>
属性:color-颜色 size-大小(1~7) face-字体
标题标签:<h1> ~ <h6>
加粗标签:<b>
斜体标签:<i>
下划线标签:<u>
居中标签:<center>
图片标签:<img>
属性:src-图片路径 width-宽度 height-高度 alt-图片找不到显示内容
列表标签:
有序列表:<ol>
属性:type-(数字、字母、罗马字符) start-起始编号
列表项:<li>
无序列表:<ul>
属性:type-(实心圆、空心圆、实心框)
超链接标签:<a>
属性:href-跳转路径 target-打开方式(_self _blank)
块标签:
<span>:元素在一行显示
<div>:元素独占一行
表格标签:<table>
属性:border-边框 width-宽度 height-高度 align-显示位置(left居左 center居中 right居右) bgcolor-背景颜色 background-背景图片
行标签:<tr>
列标签:<td>
属性:
rowspan-合并行
colspan-和并列
其他标签:
换行标签:<br/>
水平线标签:<hr/>
属性:color-颜色 width-宽度 size-高度
空格:
<:<
>:>
表单标签:<form>
属性:action-提交路径 method-提交方式(get post)
get:提交的数据会显示在地址栏中。不太安全。长度有大小限制。提交的数据封装在请求行中。
post:提交的数据不会显示在地址栏中。较为安全。长度没有大小限制。提交的数据封装在请求体中。
表单项:<input> <select> <textarea>
文本框:<input type="text">
密码框:<input type="password">
邮箱框:<input type="email">
数字框:<input type="number">
颜色框:<input type="color">
文件上传框:<input type="file">
图片提交按钮:<input type="image">
隐藏域:<input type="hidden">
单选框:<input type="radio">
复选框:<input type="checkbox">
提交按钮:<input type="submit">
重置按钮:<input type="reset">
日期框:<input type="date">
普通按钮:<input type="button">
下拉列表:<select>
下拉列表项:<option>
文本域:<textarea>
行数:rows
列数:cols
注意事项:
1.如果表单项想被提交,必须要嵌套在form标签中
2.如果表单项想被提交,必须要有name属性
3.如果是单选或复选,必须要有相同的name属性
4.如果是单选或复选有默认值,使用checked属性
5.如果是下拉列表有默认值,使用selected属性
CSS:层叠样式表。就是给HTML美化用的
CSS和HTML结合方式:
1:行内样式:<标签 style="样式设置">
2:页面内样式:在head标签中,定义一个<style></style>代码块
3:外部文件方式:在head标签中,<link rel="stylesheet" href="css文件路径"/>
CSS选择器:
基础选择器:
id选择器:
#id属性值{
样式控制
属性名:属性值;
...
}
类选择器:
.类名{
样式控制
属性名:属性值;
...
}
元素选择器:
标签名{
样式控制
属性名:属性值;
...
}
扩展选择器:
子元素选择器:
元素1 元素2{
样式控制
属性名:属性值;
...
}
父元素选择器:
元素1 > 元素2{
样式控制
属性名:属性值;
...
}
并集选择器:
元素1,元素2,...{
样式控制
属性名:属性值;
...
}
属性选择器:
标签名[属性名="属性值"]{
样式控制
属性名:属性值;
...
}
伪类选择器:
初始化状态:
元素:link{
样式控制
属性名:属性值;
...
}
鼠标悬浮状态:
元素:hover{
样式控制
属性名:属性值;
...
}
被使用状态:
元素:active{
样式控制
属性名:属性值;
...
}
使用后状态:
元素:visited{
样式控制
属性名:属性值;
...
}
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 重置按钮被点击。
|
|