1. html的简介
(Myeclipse10 tomcat7 servlet3.0)http://www.my-eclipse.cn/history.html下载
什么是html
http://www.zixue.it/forum.php 搜索“全部软件打包”下载开发工具
- Hyper Text Markup Language:超文本标记语言,网页语言
**超文本:超出文本的范畴,使用html可以轻松实现这样的操作
**标记:html所有的操作都是通过标记实现的,标记就是标签,<标签></标签>
html的规范
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 是严格类型,兼容性好
1、一个html文件开始标签和结束标签<html></html>
2、html包含两部分内容
1.<head>设置相关信息</head>,主要给机器看
2.<body>显示在页面上的内容都写在body里面</body>
3、html的标签有开始标签,也要有结束标签
4、html代码不区分大小写
5、有些标签,没有结束标签,在标签内结束,如<br/> <hr/>
2. html中常用的标签
文字标签和注释标签
*文字标签:修改文字的样式,使用的较少
-<font></font>
-属性:
*size:文字大小,取值范围1-7,超出了7,默认还是7
*color:文字颜色
-两种方式
**英文单词:red green blue black white …..
**使用十六进制位 #ffffff:RGB通过工具实现不同的颜色
*注释标签 <!-- -->
3. 标题标签、水平标签和特殊标签
*标题标签
<h1><h1> <h2> </h2>…….<h6></h6>
-从h1到h6,大小依次变小,同时自动换行
*水平线标签
-<hr/>
-属性:size color
*特殊字符
-想在页面上显示这样的内容 <html>:这是页面的开始
-需要对特殊字符转义
< <
> >
空格 ;
4.列表标签
-比如现在显示这样的效果
传智播客
财务部
学工部
人事部
**<dl> <dl>:表示列表的内容
**在dl里面<dt></dt>:上层内容
**在 dl里面<dd></dd>:下层内容
代码
<dl>
<dt>传智播客</dt>
<dd>财务部</dt>
<dd>学工部</dt>
<dd>人事部</dt>
<dl>
**<ol><ol>:有序列表的范围
-属性 type:设置排序方式1(默认)a i
**在ol标签里<li>具体内容</li>
**<ul></ul>:表示无序列表
属性 type 空心圆circle。。。。。
**在ul标签里<li>具体内容</li>
5.图像标签
*<img src=” 图像的路径”/>
-src:图像的路径 –height -width –alt(兼容性差)图片上显示的文字,把鼠标移动到图片上,停留片刻显示内容(不常用)。
6.路径的介绍
绝对路径:
相对路径:一个文件相对于另外一个文件的位置
三种:**html文件和图片在一个路径下,可以直接写文件名称
**图片在html的下层目录
**图片在html文件的上层目录 ../表示上层路径
7.超链接
*链接资源:
-<a href=”链接到资源的路径”>显示在页面上的内容</a>
**href:连接的资源地址
** target:设置打开的方式,默认是当前页面打开
--_blank:在一个新窗口打开
--_self: 在当前页面打开 默认
-当超链接不需要到任何的地址 在href里面添加#
*定位资源
**如果想要定位资源:定义一个id位置
**回到这个位置
<a href=”#top”> 回到顶部</a>
8.表格标签
*可以对数据进行格式化,是数据显示更加清晰
*<table></table>:表示表格的范围
-border:表格线
-bordercolor:表格线的颜色
-cellspacing:单元格之间的距离
-cellpadding
-width:表格的宽度
-height:表格的高度
*在table里面<tr></tr> 定义一行
-这是显示方式 align:left center right
*在tr里面<td></td> 定义一个单元格
-这是显示方式 align:left center right
*<th></th> 也可以表示单元格
-表示可以实现居中和加粗
*表格的标题
<caption></caption>
***合并单元格
-rowspan:跨行
**<td rowspan=”2”>评价</td>
-colspan:跨列
**<td colspan=”3”>人员信息</td>
9.表单标签
*<form></form>:定义一个表单范围
-action:提交到地址,默认提交到当前的页面
-method:表单提交方式
-常用有两种 get和post,默认是get请求
Get和post区别?
1. get请求地址栏会携带提交的数据,post不会带
2. get请求安全级别较低,post较高
3. Get请求数据大小的限制,post没有限制
**enctype:一般请求不需要这个属性,做文件上传需要这个属性
**输入项:可以输入内容或者选择内容的部分
***输入项需要有一个name属性
-大部分的输入项 使用 <input type=”输入项的类型”/>
***普通输入项:<input type=”text”/>
***密码输入项:<input type=”password”/>
***单选输入项:<input type=”radio”/>
-name:name的属性值必须要相同
-value:必须有
-默认选中checked=”checked”
***复选框输入项:<input type=”checkbox”/>
-name:name的属性值必须要相同
-value:必须有
***文件输入项:<input type=”file”/> 用于文件上传
***下拉输入项:
<select name=”brith”>
<option value=”1991”>1991</option>
</select>
***文本域
<textarea cols=”10” rows=”10”></textarea>
***隐藏项(不会显示在页面上,但是存在于html代码里面)
<input type=”hidden”/>
***提交按钮
<input type=”submit” value=”注册”/>
***使用图片进行提交,与submit作用相同
<input type=”image” src=””/>
***重置按钮,回到输入初始状态
<input type=”reset” value=”重置”/>
***普通按钮 button
**?输入项name的值=输入的值& ,参数类似于key—value形式
Day01 16案例非常好
案例:使用表单实现注册页面
-使用表格实现页面效果
-超链接不想要他有效果 href =”#”
-如果表格里面的单元格没有内容,使用空格作为占位符
-使用图片提交表单<input type=”image” src=””/>
10.html中的其他的常用标签
b:加粗 i:斜体 u:下划线 s:删除线
pre:原样输出
p:段落标签 比br标签多一行
sub:下标 sup:上标
div:自动换行
span:在一行显示
11.html的头标签的使用
*html两部分组成 head和body
**在head里面的标签就是头标签
**title:表示在标签上显示的内容
**meta:设置页面的一些相关内容
**base标签:设置超链接的基本设置
-可以统一设置超链接的打开方式
<base target=”_blank”/>
**link标签:引入外部文件
12.框架标签 (会用即可,div可替代)
*<frameset>
-rows 按行进行划分 <frameset rows=”80,*”>
-cols 按列进行划分 <frameset cols=”80,*”>
*<frame>
-具体显示的页面
-<frame name=”name1” src=”a.html”>
例子:
<frameset rows=”80,*>
<frame name=”top”src=”a.html>
<frameset cols=”80,*”>
<frame name=”left” src=”b.html”>
<frame name=”right” src=”c.html”>
</frameset>
</frameset>
***使用框架标签时候,不能写在body里面,使用了框架标签,需要把body去掉
*如果在左边的页面超链接,想让内容显示在邮编的页面中
-设置超链接里面属性 target值设置成名称
<a href=”hello.html” target=”right”>
CSS
1.css简介
*css 层叠样式表,提高了面的显示效果
很多的属性和属性值
*css将页面内容和显示样式进行分离,提高了显示功能
2.css和html的结合方式(四中结合方式)
(1)在每个html标签上面都有一个属性style,把css和html结合在一起
<div style=”background-color:red;color:green;”>哈哈</div>
(2)使用html的一个标签实现<style>标签,卸载head里面
*<style type=”text/css”>
Div{
background-color:red;
}
</style>
(3)在style标签里面 使用语句
@import url(css文件的路径);
<style type=”text/css”>
@import url(div.css);
</style>
(4)使用头标签link,引入外部css文件
-创建一个css文件
-<link rel=”stylesheet” type=”text/css” href=”css文件的路径">
***第三种结合方式,缺点:在某些浏览器下不起作用,一般使用第四种方式
***优先级
由上到下,由内到外,优先级由低到高
3.css的基本选择器(三种)
**要对哪个标签里面的数据进行操作
(1) 标签选择器
*使用标签名作为选择器的名称
(2) class选择器 div.haha{} .haha{}
*每个html标签都有一个属性class
-<div class=”haha”></div>
-<p>class=”haha”></p>
(3) id选择器 div#hehe{} #hehe{}
*每个html标签都有一个id属性
<div id=”hehe”></div>
***3个选择器的优先级 style>id选择器>class选择器>标签选择器
4.css的扩展选择器
(1)关联选择器 div p{}
*<div><p>wwww</p></div>
*设置div标签里面p标签的样式,嵌套标签里的样式
div p{background-color red;}
(2)组合选择器 div,p{}
*把不同的标签设置成具有相同的样式
(3)伪元素选择器
*CSS里面提供了一些定义好的样式,可以拿过来用
*比如超链接
**超链接的状态
原始状态 鼠标放上去状态 点击 点击之后
:link :hover:active:visited
**记忆方法 lv ha
5.盒子模型 详情参见博文HTML+CSS+DIV实战演练笔记
(1)边框
border : 2px solid blue;
border:统一设置,也可以上下左右分别设置
(2)内边距
padding:20px;统一设置,也可以上下左右分别设置
(3)外边距
margin:20px;统一设置,也可以上下左右分别设置
6.css的布局漂浮(了解)
float -left –right
7.css的定位
*postion
**属性值
-absolute:
*将对象从文档流中拖出,会依托其上一个div(文档流可以理解为div固定的格式顺序)
*可以使top、bottom等属性进行绝对定位
-relative:
*不会将对象从文档流中拖出
*可以使top、bottom等属性进行绝对定位
JavaScript
1.javascript的简介
*是基于对象和事件驱动的语言,应用于客户端
-基于对象
**提供了很多对象,可以直接拿过来使用
-事件驱动
**html做网站静态效果,javascript动态效果
-客户端:专门指的是浏览器 .
*js的特点
(1)交互性:信息的动态交互
(2)安全性:js不能访问本地磁盘
(3)跨平台性:只能有能够支持js的浏览器,就可以运行
*js的组成
(1)ECMAScript
-ECMA组织制定的js的语法
(2)BOM
-brower object model
(3)DOM
-document object model
2.js和html的结合方式(两种)
第一种
-使用一个标签 <script type=”text/javascript”> </script>
第二种
-使用script标签,引入一个外部的js文件
***创建一个js文件,写js代码
-<script type=”text/javascript” src=”1.js”> </script>
**第二种方式中标签里面不要写代码,不会执行
3.js的原始类型和声明变量
**js的原始类型(五个)
-string 字符串
**var str=”abc”;
-number 数字类型
**var m=123;
-boolean
**var flag=true;
-null
**var date = new Date();
**获取对象的引用,null表示对象引用为空,所有对象的引用也是object
-undifined
**定义一个变量 ,没有赋值
**var aa;
**typeof():查看当前变量的数据类型
4.js的语句
**if判断语句和java中一样
**switch语句,写法一样
Js里面所有类型都支持
**while一样
**for循环中 把int改成var
**++i i++都一样
5.js的运算符
**在js中不区分整数和小数123/1000*1000=123
**字符串的相加和相减的操作
Var str=“456”str+1=4561
**str-1=455 相减的时候执行减法运算 提示NaN:表示不是一个数字
**boolean类型也可以操作var flag=false flag+1=1;
**如果设置成true,相当于这个值是1
**如果设置成false.,相当于这个值是0
**==和===区别
**==比较的只是值
**===比较的是值和类型
6.7.数组和函数的定义及使用 略
8.全局变量和局部变量
**全局变量:在script标签里面定义的一个变量,这个变量在页面中的js部分都可以使用(在方法外部使用,在方法内部使用,在另外一个script标签中使用)
**局部变量:在方法内部定义一个变量,只能在方法内部使用
**IE自带 了一个调试工具,ie8及以上版本,键盘上F12,
9. script标签的位置存放
**建议把script标签放到</body>后面
10.string对象
*属性length:字符串的长度
*方法:
(1)与html相关的方法
(2)与java相似的方法
11.js的Array对象
*var arr1=[1,2,3];
*var arr2=new Array(3); 长度是3
*var arr3=new Array(1,2,3);数组的元素是1 2 3
**属性 length数组的长度
12..js的Date对象
**获取当前时间
var date =new Date()
document.write(date.toLocaleString());转换成习惯的格式
**获取当前的年的方法
getFullYear() 返回四位的年份
**获取当前月的方法
getMonth(): 返回的数字0-11
var month=date.getMonth+1;
**获取当前的星期 返回0-6星期日是每周的第一天
getDay()
**得到当前的天 返回1-13
getDate()
**得到当前的小时:getHours()
**获取当前分钟:getMinutes()
**获取当前秒:getSeconds()
**获取毫秒数: getTime() 返回时1970 1至今的毫秒数
13.js的Math对象
Math.floor(0 Math.ceil() Math.round()
Math.random()
14.js的函数重载
**js里面不存在重载
**但是可以通过其他方式模拟重载的效果,通过 arguments数组来实现
15.js的bom对象
**brower object model 浏览器对象模型
**有那些对象?
*navigator:获取浏览器的信息 navigator.appName
*screen:获取屏幕信息 sreen.height
*location:请求url地址
-href属性
***获取到请求的url地址 location.href
***设置url地址
-页面上设置一个按钮,按钮上绑定一个事件,当我点击这个按钮,页面可以跳转到另外一个页面
-location.href=”hello.html”;
***<input type=”button” value=”click” onclick=”hello()”/>
*history:请求的url地址
**history.back() 上一个页面
**history.forward() 下一个页面
*window
**是js层级中的顶层对象,所有的bom对象都是在window里面操作的
**方法
-alert():页面弹出一个框,显示内容
-confirm():确认框 var flag=window.confirm(“删除?”);
-prompt(): 输入的对话框
-open():打开新的窗口
-close():关闭窗口
--做定时器
**setInterval(“js代码”,毫秒数)
window.setInterval(“alert(‘123’)”,3000); 每3秒出现一次123
**setTimeout(“js代码”,毫秒数)
-表示在毫秒数之后执行,但只会执行一次
window.setTimeout (“alert(‘123’)”,3000);3秒后出现123
**clearInterval( id):清除setInterval设置的定时器
var id= window.setInterval(“alert(‘123’)”,3000);
clearInterval( id);
**clearTimeout(id):清除setInterval设置的定时器
DHTML
*dom: document object model:文档对象模型
**文档:
超文本文档:html、xml
**对象:
属性和方法
**模型:使用属性和方法操作超文本标记型文档
*****可以使用js里面的dom里面提供的对象,对标记型文档进行操作
***想要对标记型文档进行操作,首先需要对标记型文档里面的所有内容封装成对象
---需要把html里面的标签、属性、文本内容都封装成对象
***想要对标记型文档进行操作,解析标记型文档
***解析过程
根据html的层级结构,在内存中分配一个树形结构,需要把html的每个部分封装成对象
-document对象:整个文档
-element对象:标签对象
-属性对象
-文本对象
--Node节点对象:这个对象是这些对象的父对象
**如果在对象里面找不到想要的方法,这个时候到Node对象里面去找
1.document对象
*表示整个文档
**常用文档
***write()方法:页面输出变量或html代码
***getElementById(); 传入的参数是标签的id,返回object对象 通过“.value”获得对象的属性值,修改属性值
***getElementsByName():返回指定名称的对象集合
-通过标签的name的属性值得到标签,返回的是一个数组,通过遍历数组,得到每个标签里面的
***getElementsByTagName(“标签名称”):通过标签名称得到对象集合
****注意:
只有一个标签,这个标签只能使用name获取到,使用getElementsByName返回的数组只有一个元素,这时不需要遍历,而是可以直接通过数组的下标获取到值
2.element对象
操纵element对象属性首先要获取到element
-使用document里面相应的方法获取
**方法
**获取属性 getAttribute(“属性名称”)
与.value效果相同,但是.class是取不到的,因为它是关键字,只能用getAttribute(“class”)得到
**设置属性值setAttribute("属性名称","属性值");
**删除属性removeAttribute(“属性名称”); 注意:value属性是删不掉的
*获得子标签
使用childNodes()函数,在火狐浏览器下会产生不兼容的问题
在Element对象的范围内,可以用来查找其他节点的唯一有效方法就是getElementsByTagName()方法。而该方法返回的是一个集合。
3.Node对象属性
getAttributeNode();
*nodeName
*nodeType
*nodeValue
*使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象。
*标签节点对应的值
<span id="spanid">asd </span>
标签节点对应的值
var span1=document.getElementById("spanid");
alert(span1.nodeType);//1
alert(span1.nodeName);//span
alert(span1.nodeValue);//null
属性节点对应的值
var id1=span1.getAttributeNode("id");
alert(id1.nodeType);//2
alert(id1.nodeName);//id
alert(id1.nodeValue);//spanid
文本对应的值
var t1=span1.firstChild;
alert(t1.nodeType);//3
alert(t1.nodeName);//#text
alert(t1.nodeValue);//文本内容
父节点、子节点、同辈节点
parentNode
childNodes、firstNode、lastNode
nextSibling、previousSibling
4.操作DOM树
茶如节点
**appendChild 添加子节点到末尾
**insertBefore(newNode,oldNode)在某个节点之前插入一个新的节点
删除节点
removeChild:删除节点,只能通过父节点删除,而不能自己删除自己
替换节点:
**replaceChild(newNode,oldNode)
**cloneNode(boolean)复制节点
innerHTML属性
这个属性不是dom的组成部分,但是大多数浏览器都支持的属性
第一个作用:获取文本内容
第二个作用:向标签里面设置内容(可以是html代码)
其他
一、
表单提交方式
1.<input type=”submit” value=”提交”>
2.使用button提交表单
<input type=”button” value=”提交” onclick=”form1();”>
<script>
Function form1(){
var form1=document.getElemntById(“form1”);
form1.action=”hello.html”;
form1.submit();
}
</script>
3.超链接提交
<a href=”www.baidu.com?username=12323”>使用超链接提交</a>