本文详细介绍了HTML的基础知识，包括HTML的基本结构、常用标签及其属性，如标题标签、图像标签、超链接、表单等，并讲解了如何使用这些标签构建简单的网页。
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>
扫一扫
1045
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
