Web前端技术个人学习经验总结
目录：
1.2017-12-24（第一天Web项目）：
2.2017-12-25（第二天表格）：
3.2017-12-25（第二天框架及表单）：
4.2017-12-26（第三天CSS语言）：
5.2017-12-28（DIV+CSS）：
6.2017-12-29（JavaScript）:
7.jQuery:
8.表单验证+正则表达式+BootStrap:
9.Web杂碎知识总结：
10.Web前端（对象+属性+事件）总结：
-------------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-24(第一天Web项目)：
1.飞秋（局域网通信软件）---需要关闭防火墙---在控制面板---系统和安全
2.DeskTopShare(屏幕共享)
3.Hbuilder（代码编辑器）
专业删除软件方法---（控制面板）中添加和删除软件（为了删除注册信息，防止卸载后可以重新安装）
买一台阿里云服务器（一个月9.9）
小项目：
全网最强翻译系统；
<!DOCUMENT HTML>
<html>
<head>
<title>网页名称</title>
<meta charset="utf-8"/>
<meta name="keywords" content="搜索关键词"/>
<meta name="description" content="超链接的描述信息"/>
</head>
<body bgcolor="背景颜色" background="背景图像路径" link="默认链接颜色" alink="正在单击时链接颜色" vlink="访问过的链接颜色" text="页面文字颜色">
<p>
<!--有序列表嵌套-->
<ol type="A/a/i/I/1" start="列表的起始点（默认为1）">
<li type="1/A/a/I/i" start="number（开始计数的数值）">项目一
<ul> <!--嵌套无序列表-->
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ul>
</li>
<li>项目二
<ol> <!--嵌套有序列表-->
<li>项目1</li>
<li>项目2</li>
<li>项目3</li>
</ol>
</li>
</ol>
</p>
<p>
<!--无序列表-->
<ul type="disc（实心圆）/circle（空心圆）/square（实心方块）">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
</p>
<h1 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容1（链接文本或图像）</a></h1>
<h2 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容2（链接文本或图像）</a></h1>
<h3 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容3（链接文本或图像）</a></h3>
<h4 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容4（链接文本或图像）</a></h4>
<h5 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容5（链接文本或图像）</a></h5>
<h6 align="right/center/left"><a href="标题的链接地址" target="目标窗口位置">标题内容6（链接文本或图像）</a></h6>
<p style="width: px;margin: px auto;">
段落内容
</p>
<p align="left/right/center/justify（段落对其方式）" style="">
段落内容
<img src="top/bottom/middle/left/right(默认为bottom)" width="px/%（图像宽度）" height="px/%（图像高度）" border="px（边框）" hspace="px（图像左右侧空白）" vspace="px（图像上下侧空白）"/>
<font color="字体颜色" face="字体类型-宋体" size="（字体大小1~7默认为3，+2是3+2=5）">段落内容</font>
<b><i><big>段落内容</big></i></b><!--粗体，斜体，大号-->
<b><i><small>段落内容</small></i></b><!--粗体，斜体，小号-->
<br /><!--换行标签-->
段落内容
</p>
<hr align="center/left/right" size="px（高度）" width="px/%（宽度）" color="颜色的表示方法" noshade="noshade（不出现阴影）"></hr>
<p align="left/right/center/justify">黑天鹅出版社</p>
</body>
</html>
<!----------------------------------------------------------------
<html>标签
<head>标签
<title>标签
<base>标签
<meta>标签
第一本书：Web前段技术综合应用新建WEB项目
html:超文本标记语言
<!DOCTYPE HTML>
<html>
<!--不会被浏览器直接读取
双标签：有开始有结束
单标签：只有开始没有结束<meta /> 文字下面加横线<hr /> 换行<br />
-->
<head>
<title>html基本结构</title>
<!--设当前页面采用的字符集-->
<!--搜索引擎优化-->
<meta charset="utf-8"/><!--支持中文显示-->
<meta name="keywords" content="蓝桥"/><!--为了能够搜索到-->
<meta name="description" content="网页描述"/><!--网站描述让搜索的人看，吸引他们进网站-->
</head>
<body bgcolor="blue" background="img/郑航美景2.jpg">
<img src="img/郑航美景1.jpg"/><!--现将图片复制到本项目的文件夹下，然后把这个图片路径复制到此处-->
<br color="red" width="50%" size="10px"/><!--width浏览器窗口宽度值可以是百分比也可以是500px;size是高度-->
<a href="www.baidu.com">百度翻译</a>
</body>
</html>
<body>标签
text和bgcolor属性
background属性
link、alink和vlink属性
代表空格
size属性默认为3
颜色表示形式：
1.英文单词：red、yellow、black,紫色porple等等；
2.rgb（红，绿，蓝）不同的浏览器对rgb的值表示不同；
3.十六进制的数，例如“#FF0000”替
<p style="width:500px;margin:0px auto;">
margin:上下边距；width：左右边距
注释标签
<!--这说使用到HTML中的注释标签-->
/*这是使用到CSS中的<style>标签中的注释标签*/
特殊符号
文本控制
字体标签
<font face="" size="" color=""/>----规范文字的字体，大小和颜色
size的取值可以使绝对值也可以是相对值，其中去绝对值的范围是1~7的整数；color属性值可以用颜色名称、十六进制（例如#00FF00）或RGB值（例如rgb（0,255,0）），默认颜色为黑色。
文字格式
常用字体格式为<b></b>---粗体 <i></i>----斜体 <s></s>--<strike></strike>---删除线，建立使用<del>标签代紫色porple
文本分段
段落标签
<p align="left/right/center/justify"></p>---段落对其属性
<p style="width： px;margin: px auto"></p>
换行标签
<br>或<br/>
水平线标签
<hr>或<hr align="center/left/right" size==" px" width=" px/%" color="颜色的表示方法" nishade="noshade（s水平线不出现阴影）"/>
标题标签
<hn>标题文字</hn>--定义了6级标签，从一级到六级，每级标题的字体大小一次递减
建立列表
有序标签
<ol>
<li>项目一</li>
<li>项目二</li>
</ol>
无序标签
<ul>
<li>项目一</li>
<li>项目二</li>
</ul>
有序列表嵌套
嵌套有序列表
<ol>
<li>项目一</li>
<ol>
<li>项目1</li>
<li>项目2</li>
</ol>
<li>项目二</li>
</ol>
嵌套无序列表
<ol>
<li>项目一</li>
<ul>
<li>项目1</li>
<li>项目2</li>
</ul>
<li>项目二</li>
</ol>
插入图像
<img src="img_URL" align="top/bottom/middle/left/right" width=" px/%" height=" px/%" border=" px" hspace=" px（图像左右侧的空白）" vspace=" px(图像顶部和底部的空白)"/>---图像属性
alt属性作用:
1.图片无法显示时显示alt的值
2.搜索引擎按照alt
插入超链接
超链接标签
<a href="链接地址" target="目标窗口位置">链接文本或图像</a>
同一页面链接
<a name="书签名称">文字</a>---在需要链接的地方建立一个标签
<a href="#name">链接点</a>---定义标签后，链接到书签位置的超链接
作业--2017/12/24做一个网页：http://dasai.lanqiao.cn/pages/dasai/news_detail.html?id=149
----------------------------------------------------------------------------------------------------------->
------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-25（第二天表格）：
<!----------------------------------------------------------------------
表格应用及布局
创建表格
表格标签属性
<table>标签属性
<tr>标签属性
<tr align（水平对其方式）="left/right/center/justify" valign（垂直对其方式）="top/middle/bottom/baseline" bgcolor="颜色的表示方法（表格行的背景颜色）"></tr>
<td>标签属性
<td align="left/right/center/justify" valign="top/bottom/middle/baseline" bgcolor="颜色的表示方法" height="px/%（单元格高度）" width="px/%（单元格宽度）" colspan="number（单元格可横跨的列数）" rowspan="number（单元格可横跨的行数）" nowrap="nowrap（定义单元格中内容是否折行）"></td>
跨行跨列的表格
基本语法------只要对表格的一列或一行的某个元素进宽度高度设置的话，和它同一列或同一行的所有单元格跟着变化
<table align="left/right/center" border="px（边框宽度）" width="px/%（表格宽度）" bordercolor="颜色的表示方法（边框颜色）" bgcolor="颜色的表示方法（表格背景颜色）" frame="void/above/below/box/border/hsides/vsides（表格外侧边框哪部分可见）" rules="none/groups/rows/cols/all（表格内部表框哪部分可见）" background="URL（表格背景图像）" cellpadding="px/%（单元格边框与其内容的空白）" cellspacing="px/%（单元格之间空白）" summary="text（定义表格的摘要）">
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
带标题表格
<table>---表格标题标签<caption>必须紧随<table>标签之后
<caption align="right/left/top/bottom"></caption>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
带表头标题
<table>
<caption>表格标题</caption>
<tr><th></th><th></th><th></th></tr>------表格的第一行用<th></th>标签即表示为带表格标签（默认以粗体、居中的方式显示）
<tr><td></td><td></td><td></td></tr>
<tr><td></td><td></td><td></td></tr>
</table>
页面表格布局
----------------------------------------------------------------------->
---------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-25（第二天框架及表单）：
<!-----------------------------------------------------------------------------------------
框架：
框架集：是网页页面布局时框架的集合
框架：框架集的某一个区域，每个区域都可以放HTML页面
框架基本结构：
属性：rows和cols----同时只能出现一个（其中*号代表的参数为页面的总大小（宽度或高度）减去已经用数值定义的区域）
<frameset rows="100px,*"><frame />----上下分两个区；
<frameset cols="150px,*"><frame />----左右分两个区；
<frameset rows="100px,*,100px"><frame />----上下分三个区；
<frameset border="px" bordercolor="颜色表示方法">----书上没有
<frame src="" noresize="noresize（让框架集中不同区域不能通过鼠标的移动改变区域大小）">
</frame>
</frameset>
页面框架布局：
div+iframe布局;
frameset布局;
表单（重点）：
表单名词记忆：单行文本框，单选按钮，下拉列表框，密码框，复选框，多行文本框，文件上传，提交按钮
<form action="（要跳转的页面）">
</from>
------------------------------------------------------------------------------------------->
这两者形式上是一样的
<input type="button">-------不会提交表单
<input type="submit">----点开按钮会自动提交表单
创建表单后需要在<table></table>外层写<from action="地址（接受表单中填写的信息）"></from>---点击后type="submit"的会跳转到改地址对应的页面下
maxlength属性：
控制文本框输入的最大长度
<textrea >内容</textarea>（加入写内容后就不能在页面下进行写操作）
属性：
readonly------不能改变信息但是点击提交之后可以提交信息
disable------文本框不能点也不能提交信息
框架集：
<frameset></frameset>不能放到<body></body>标签内
<frameset rows="20%,*">
<frame frameboder="0"/>
<frame frameboder="0"/>------设置边框宽度（为0是不显示边框）
</frameset>
------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-26（第三天CSS语言）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*
p{} 标签选择器
#p1{} id选择器
.c1{} 类选择器
*/
.c1{
text-align: center;
color: red;
font-size:30px;
}
p{
color: blue;
}
#p1{
color: #DC143C;
}
/*
ID选择器>类选择器>标签选择器
*/
</style>
</head>
<body>
<p id="p1" class="c1">
使用前端技术展现WEB系统
</p>
<p id="p2" class="c1">
JAVA语言基础与面向对象编程实践
</p>
<p>
JAVA WEB技术综合应用
</p>
</body>
</html>
-------------------------------------------------------------------------------
CSS是辅助HTML的一门语言
CSS可以用来修饰标签，使其美观！！！（化妆师）
一、CSS使用<style>标签来声明样式规则：
<style css="text/css">----标签选择器
p{
text-align: ;文本对齐方式
color: ;字体颜色
font-size: ;字体大小
font-family：宋体/隶属;
margin-left:20px;（设置段落的左边距为20px）
}
CSS对大小写不敏感，忽略空格
在开发的过程中尽量不用html自身标签的属性
二、CSS语言可以是一类标签的样式改变而不用重复定义格式,也可以只修饰一个标签，
<style css="text/css">----id选择器
#p1{
}
<p id="p1">
</p>
三、CSS对有ID号的标签集中修饰：
<style css="text/css">-----类选择器
.C1{
}
<p id="p1" class="C1">
</p>
<p id="p2" class="C1">
</p>
四、派生选择器
1.（找到他名字为a的孩子--不能跨级，只能是儿子和女儿，不能是孙子等等跨级的）
<style css="text/css">
#p1>a{
color:red;
}
</style>
<p>
<a href="#">百度</a>
<a href="#">搜狐</a>
<p>
<a>百度音乐</a>
</p>
</p>
2.（找到他所有的名字为a的孩子---所有的孩子）---其中a可以使标签名、ID名已经类名
<style css="text/css">
#p1 a{
}
</style>
五、并集选择器
p1,p2,p3,p4{
color:red;
}
其中id和class的内容由字母、数字和下划线组成，但是首字母不能是数字
当代码中对一个标签同时使用三种修饰方式时：（有优先级）
ID选择器>类选择器>标签选择器
三种同时作用时相同的属性覆盖，不同的属性合并（按照优先级进行操作）
.c1,p1,p2{
（这些属性可以同时作用于所对应的三个标签）
}
/**/是<style>标签中的注释方式---<!---->不能正常使用
六、样式（style）
1.内部样式表：
<style></style>标签放到<head></head>标签中
<head>
<style></style>
</head>
2.内联样式表：（将内容和样式混合起来，失去了CSS样式表的灵活性和复用性，不推荐使用）
放到标签内部
<p style="text-align:center;font-size:30px;color:red;">段落</p>
3.外部样式表：
新建一个后缀名名为css的文件，然后将修饰样式信息写到该文件中；然后在代码html代码中的<head>标签中加入<link rel="stylesheet" type="text/css" href="刚才的后缀名为css的文件路径">
<head>
<link rel="" style="text/css" >
</head>
三种样式表也是有优先级的：（就近原则--谁离标签最进先用谁!）
<style css="text/css">
body{---------此时是休息
background-size:cover;（背景图片覆盖整个屏幕）或者：background-size:1300px 780px;
background-attachment:fixed（背景固定，即使滚动条背景也不能滚动，只是让背景不能滚动）
background-color:red;（设定背景颜色）
background-image:url(img/...（图片路径）);
background-position:100px（左右X方向-正为右） 150px(上下y方向-正为下); 或者：background-position:left/center/right top/center/bottom;
}
如果使用background修饰属性，则默认顺序是color、image、repeat、repeat、attachment
CSS标签选择器：5种；
CSS样式引入方式：3种；
CSS常用样式：
背景属性；
文本属性：
字体属性：
超链接属性：
作业：根据所学自己设计制作一个页面
-------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-28（DIV+CSS）：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#nav{
height: 70px;
width: 1003px;
background-color: #262626;
margin: 100px auto ;
}
#nav a{
font-size: 36px;
color: white;
text-decoration: none;
line-height: 70px;
padding: 12px 43px;
border-right:dashed 1px red;
}
/*当鼠标滑到a标签上时触发的样式*/
#nav a:hover{
background-color: red;
}
/*当修饰文本时 把样式作用于 文本的直接父元素*/
</style>
</head>
<body>
<div id="nav">
<a href="#1">百度</a>
<a href="#2">搜狐</a>
<a href="#3">新浪</a>
<a href="#4">网易</a>
<a href="#5">360</a>
<a href="#6">12306</a>
</div>
</body>
</html>
------------------------------------------------------------------------------
所有的标签都具有盒子模型！
页面布局：
DIV+CSS
<html>
<head>
<title></title>
<meta charset="UTF-8"/>
<style>
选择器{
属性：属性值；
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
BOX模型是实现DIV+CSS的基础：
边框：border;
内边距：padding;
内容、外边距：margin;
宽和高属性等
<!--
当修饰文本时，要把样式作用于文本的直接的父元素
例如：
<a href="URL">
<a href="URL">百度</a>
</a>
要修饰文本“百度时”要要样式直接作用于文本的直接父元素
盒子的边框默认是隐藏的
padding：内边距设置时是累加的：
设置padding参数值是在原先设定的宽度和高度的值的基础上进行累加
选择器{------设定原先已经设定了宽度和高度分别为100px和100px;
width:100px;
height:100px;
}
然后继续设置padding属性值：
选择器{
width:100px;
height:100px;
padding-left:10px;
padding-right:10px;
padding-top:10px;
padding-bottom:10px;
}----------------此时盒子的宽度和高度比第一步多了10px+10px=20px
-->
一、做导航栏：
1.设置外边距时，为了使能够自动居中等等可以使用auto
margin:上 右 下 左（默认顺序四个值）
margin:上下 左右（默认顺序两个值）
margin-top:
margin-left:
margin-right:
margin-bottom:
2.链接状态：（超链接属性（可以应用到任何的标签），我们学习过通过调整<body>标签的link、alink和vlink这三个属性来改变未点击、鼠标按下和访问过之后链接文本的颜色）
在CSS中，链接有如下四种状态：
父元素 a:hover{-----------鼠标指针位于链接的上方时的状态
属性：属性值;
}
父元素 a:link{-----------普通的、未被访问的链接时的状态
属性：属性值;
}
父元素 a:active{--------链接被点击的时刻的状态
属性：属性值;
}
父元素 a:visited{--------用户已访问的链接的状态
属性：属性值;
}
3.让多个DIV出现在同一行：float（可以改变原先的布局方式，使其多个div出现在同一行）
div与浏览器的margin并不是每一个浏览器都有，有浏览器会自动将网页元素与屏幕边的距离为零
作业：做一个导航栏：牛掰音乐网
（Hypersnap---截图工具）
<!------------------------------------------------
定位：
绝对定位：（绝对定位是相对于元素最近的已定位的祖先元素---设置了绝对定位或者相对定位的祖先元素）
position:absolute（相对于屏幕左上角进行定位）
相对定位：（相对定位是相对于元素在文档中的初始位置。在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框）
相对于谁---是相对于标签本来应该在的坐标
position:relative
当我们对一个标签设置了绝对定位时，它的相对坐标点可能是屏幕左上角或者它的父元素的左上角坐标点：
如果该标签设置了定位功能，那么该标签的绝对定位参考点是父元素的左上角坐标；
如果其父元素没有设置定位功能，那么该标签设置的绝对定位参考点是相对于屏幕左上角的坐标点。
还要考虑浏览器的兼容问题：
1.margin、padding
2.图片默认边距
3.min-height不兼容
4.字体大小定义不同
设置背景透明度：
1.opacity:0.3;
当我们多一个元素设置透明的时候，它的所有的内部元素也都会跟着透明；
2.background-color:rgba(255,0,0,0.3（透明度）);----这里是给背景颜色透明，而不会让标签里面的文字透明。
-------------------------------------------------------->
右击检查或者F12打开页面的开发者工具；
然后打开手机界面显示：
<p>
<font style="display:block;"></font>--------其中的display属性是让<font>占一整行
</p>
块级元素会占一整行：
<div></div>
<p></p>
行级元素/行内元素：
a font <i></i> <big></big>
行内元素可以转换成块级元素；
块级元素也可以转换成行级元素。
然后在页面中会显示音乐播放条：自带下载功能
放歌标签：
需要先建立一个文件夹，然后放入音乐
<html>
<body>
<div>
<ul>
<li οnclick="play(1.MP3('name')")>在心里从此有个你</li>----点击时就会弹出警告框显示1.mp3
<li></li>
<li><>/li>
</ul>
</div>
<div>
<audio controls="controls" autoplay="autoplay">-----autoplay属性设置自动播放属性，只要进入页面就自动播放音乐
<source src=""></source>----表示音乐的位置支持MP3（其他格式用格式工厂转换为MP3格式）
</audio>
</div>
</body>
<!--javaScript-->
<script>
fuction play(name){
alert(name);/*浏览器的弹出框/警告框*/
/*
1.获取到audio这个标签；
2.动态的给audio标签设置src属性
*/
/*将节点对象值赋值给变量audio*/
var audio = document.getElementById("ID号");
}
</script>
<html>
------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》2017-12-29（JavaScript）：
******程序从上之下执行，注意代码的书写规范
1.JavaScript文件中不能包含<script></script>标签；
2.任何值+字符串就变成了字符串；alret(a+"字符串");（其中a为变量，加入a=5）
例如：alert(5+"5");浏览器显示结果为55；而alert(5+5);浏览器显示结果为10。
console.log(5+"5");浏览器显示结果为55
3.
变量：(声明变量时用 var)
1.变量类型：
boolean = true/false
null
2.运算符：
比较运算符的结果只能是true或false;
== 只比较值是否相等；=== 比较值和类型是否相等。
例如：5 == "5"结果是true;而5 === "5"结果是false
流程控制：
1.顺序
2.分支
（1）if--单分支/双分支/多分支
（2）switch--if分支中多分支的缩减版
3.循环
<script>
document.write("字符串");
</script>
（不要为了迎合用户需求而随意修改代码！）
函数/方法：（封装）
1.通过实践调用函数；（οnclick="函数名;"即通过点击事件调用函数）
2.之间在<script></script>标签中调用函数，浏览器会自动调用。
字符串的拼接：
document.write("<hr width='"+a+"px' height='5px' color='red' />");
alert(变量+"+"+变量+"="+结果);{alert(5+"+"+5+"="+10);输出为：5+5=10}
prompt接收的值是字符串类型;prompt("请输入第一个值：","10");
parselFloat(变量);
parslInt(变量);只能转换成整数。
--------------------------------------------------------------
事件---内置对象---
javascript:(脚本：辅助作用)
辅助HTML，不能单独使用
<script>---可以放到HTML语言的任何位置
document.write("这是我写入的信息");---将括号中的双引号之间的信息写入到body中
window.alert("弹出框上要显示的信息");---弹出框并在弹出框中显示信息，其中window可以省略不写
var pi=3.14;---设置变量
var r=10;
alert(pi*r*r);在弹出框中显示计算的结果
/*
通过js进行计算：
+ - * /（除） %（取余）
*/
/*动作可以封装成函数再进行调用实现！---但是函数不能自动执行*/
</script>
对象：
调用对象：方法、函数
------------------------------------------------------------------------------------------
var 变量名 = document.getElementById("标签的ID号");
变量.innerHTML="";(将原先的标签重新塑造)
变量.innerHTML=变量.innerHTML+"";（在原先标签的基础上令加新的内容（追加））
window.οnkeyup=function(e){ //其中e代表event
var div1 = document.getElementById("div1"); //通过标签的ID号来在函数中调用标签
var code = e.keyCode; //键盘按键的编码值
var temp = string.fromCharCode(code); //将获取的键盘编码值转换成字符
var small = temp.toLowerCase(); //将字符转换成小写
div1.innerHTML = ""; //修改标签内容
// div1.innerHTML = div1.innnerHtml+""; //追加标签内容
}
console.log(""); //打出日志---浏览器页面右键检查选择console
事件：
1.onclick:鼠标点击触发事件；
2.onmouseover:鼠标移入触发事件；
3.onmouseout:鼠标移出触发事件；
4.onmousemove:鼠标移动触发事件；
5.onmousedown:鼠标按下触发事件；
6.onmouseup:鼠标抬起触发事件；
7.onkeyup:键盘抬起触发事件(键盘上的任意键)；----window.οnkeyup=function(){}
8.onkeydown:键盘按下触发事件（键盘上的任意键）；
9.onload:加载页面后触发事件；
10.onbeforeunload:关闭页面触发事件；----IE浏览器支持，Google不支持
11.onfocus:获取焦点触发事件(光标移入)；
12.onblur:失去焦点触发事件（光标移出）；
13.onchange:内容更改触发事件；
14.ondbclick:双击触发事件；
15.onkeypress:键盘敲击事件；
（调用函数时在函数的参数里写this，然后在原来函数定义的位置传入一个参数----可以将调用该函数的标签传入被调用的函数；而且在函数中可以通过改变来调用该标签的元素及修改其属性）
......
<script>
function Big(t){ //t为变量，通过事件调用该函数并将调用该函数的标签送入该函数，并在函数中调用该标签
t.src = ""
}
</script>
</head>
<body>
<div>
<img src="IMG_URL" οnmοuseοver="Big(this);" />
</div>
<body>
</html>
JS调错：
页面右键-检查--console
-------------------------------------------------------------------------
DOM对象：
1.浏览器把HTML文档的元素转换成节点对象，所有节点组成了一个树状结构；
2.把这些节点对象按照一定顺序绘制到浏览器窗口中；
3.以对象描述文档的方式就是DOM；
4.节点对象就被称为DOM对象。
基础DOM：
1.元素节点：文档中的所有元素；
2.文本节点：元素节点内的文本元素；
3.属性节点：元素节点的子节点。
var element = document.getElementById("ID号"); //根据ID号获取一个元素，并且得到该元素对象
var element = document.getElementsByName("标签的name属性值"); //根据name属性来获取元素。得到符合条件的所有元素（数组）
var element = document.getElementsByTagName("标签名字"); //根据标签名来获取元素，并且得到符合标签名的所有元素（数组）
可以在JavaScript中调用节点（元素节点、文本节点、属性节点）来设置属性以及修改属性值；
节点.setAttribute();
------------------------------------------------------------------------
内置对象：-----（通过对象内置的方法来实现一定的功能）
1.String对象：
charAt(index):返回在指定位置的字符;
charCodeAt(index):返回在指定位置的字符的Unicode码;
concat(string1,string2,...,stringN)：连接字符串；使用方法：例如:document.write("abcd".concat("efg"));既可以在浏览器中输出abcdefg;
indexOf(searchvalue,fromindex):检索字符串searchvalue的位置;
split(separator,num):把字符串分割为字符串数组，num表示返回的数组的最大长度;
substr(start,num):从起始索引号提取字符串中指定数目的字符;
substring(start,end):提取索引号起始位置到结束位置的字符串的子串（不接受负的参数）不包含end处的字符;
replace(oldvalue,newvalue):替换子字符串值;
toLowerCase():把字符串转换为小写;
toUpperCase():把字符串转换为大写;
fromCharCode(num1,num2,num3,....,numN):有一系列字符编码创建一个字符串。
2.Data对象：（Date用来处理日期和时间---设置/获取/显示日期和时间）
var 变量名 = new Date();
setInterval("函数名",秒数（数字）):定时函数，每个指定的时间，执行指定的函数;
获取和设置日期：
toUTCString:
setFullYear(年，月，日):
setHours(小时):
setMinutes(分钟):
setSeconds(秒):
显示动态时间：
通过将当前的时间封装成函数/方法;
setTimeout('函数/方法',时间):----设置多长时间调用一次函数/方法;
3.Math对象：
abs(x):返回数的绝对值;
acos(x):返回数的反余弦值;
asin(x):返回数的反正弦值;
atan(x):返回数的反正弦值;
atan2(y,x):
ceil(x):对数进行上舍入;
cos(x):返回数的余弦;
exp(x):返回e的指数;
floor(x):对数进行下舍入;
log():
max():
min():
pow():
randow():返回0-1之间的随机数;
返回1-100之间的随机数：var temp = Math.random();var Num = 1+Math.floor(100*temp);
返回50-100之间的随机数：var temp = Math.random();var Num = 50+Math.floor(50*temp);
round(x):把数四舍五入为最接近的整数;
sin(x):返回数的正弦值;
sqrt(x):返回数的平方根;
4.Number对象：(Number对象是原始数字的包装对象)
var myNum = new Number(value);
-其中value是要创建的Number对象的数值;
-可以省略new关键字;
属性：
MAX_VALUE：
MIN_VALUE:
NAN：表示非数字值;
NEGATIVE_INFINITY:负无穷大,溢出时返回该值;
POSITIVE_INFINITY:正无穷大，溢出时返回该值;
方法：
toFixed(num):保留几位小数，按指定小数位数num四舍五入;
toString(radix):把数字转换成字符串，radix表示进制数，例如2、8、10、16，省略时数默认值是10;
toExponential(num):把对象的值转换成指数计数法，小数点之后有num位数字;
toPrecision(num):把数字格式化为指定的长度，如果num数足够大，采用定点计数法，不够大的话，则采用指数计数法;
valueOf():返回一个Number对象的基本数字值;
5.Array对象：
---JS中，Array对象代表数组
---创建Array对象的语法为：
new Array();
new Array(size);
new Array(element0,element1,......,elementN);
--------------------------------------------------------------------
JavaScript数组：
Array():创建数组对象的方法;
var arrs = new Array(个数);创建数组对象空间大小为5
var arrs = Array("12","13","14");----进一步可以进行追加：arrs.push(15);
var arrs = new Array();-----追加：arrs[0]=11;arrs[1]=12;arrs[2]=13;
sort():对数组元素进行排序-但是排序是按变量的第一个首字母的字符顺序进行排序的;
reverse():逆序对数组元素进行排序，同样是按照数组元素的第一个首字母的字符顺序的逆序进行排序;
concat():连接两个或更多的数组，返回新的数组;
join("分隔符")方法:用于把数组中的所有元素连接成一个字符串，并通过分隔符进行隔开;
pop():删除并返回数组的最后一个元素;---返回之后将会删除数组中的返回的数组元素;
shift():用于返回数组中的第一个元素，返回后将删除数组中的返回的数组元素;
push():向数组的末尾添加一个或多个元素，同时返回当前数组的长度;
unshift():可向数组的开头添加一个或更多元素，并返回新的长度;
slice():从已有的数组中返回选定的元素;
splice():向/从数组中添加/删除项目，然后返回被删除的项目，在添加时数组本来的元素会自动移位；splice(1,0,"nihao")----从数组下标为1开始删除0个数组元素，同时在下标为1的位置插入元素（"nihao"）;
---------------------------------------------------------------------------
Dom高级：
Node对象：
Node对象是整个DOM的主要数据类型,节点对象代表文档树中的一个单独的节点;
cloneNode();里面可以有参数，当参数为true时，将不仅复制节点本身，而且还会复制其子节点;
常用方法：
childNodes:返回节点的子节点的节点列表;
firstChild:返回节点的首个子节点;
lastChild:返回节点的最后一个子节点;
parentNode:返回节点的父节点;
nextSibling:返回节点之后紧跟的同级节点;
previousSibling:返回节点之前紧跟的同级节点;
nodeName:返回节点的名称,根据其类型;
nodeType:返回节点类型;
nodeType属性：
元素节点 节点类型值(nodeType)
元素element 1
属性attr 2
文本text 3
nodeValue:设置或返回节点的值，根据其类型;
常用方法：
createElemnet():创建元素节点;
createAttribute():创建属性节点;
appendChild():向节点的子节点列表的结尾添加新的子节点;
cloneNode():复制节点;
insertBefore():在指定的子节点前插入新的子节点;
removeChild()：删除（并返回）当前节点的指定子节点;
replaceChild():用新节点替换一个子节点;
getAttribute():返回指定的属性值;
setAttribute():把指定属性设置或修改为指定的值;
Table对象：
集合：
rows[]:包含表格中所有的一个数组（包含<thead>、<tfoot>和<tbody>中定义的所有行）;
cells[]:包含表格中所有单元格的一个数组;
属性:
id：表格id;
caption:对表格的<caption>元素的引用;
方法：
insertRow(index):在表格指定的索引处插入一个新行;
deleteRow(ityyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyndex):从表格删除一行;
TableRow对象：
集合：
cells[]：包含该行中的所有单元格的一个数组;
属性：
id:该行id;
innenrHTML:行的开始标签和结束标签之间的HTML;
rowIndex:该行在表中的位置;
方法：
insertCell(index):在一行的指定位置插入一个空的td元素;
deleteCell(index):删除行中的指定元素的单元格;
TableCell对象：
属性：
id:单元格id;
innerHTML:单元格的开始标签和结束标签之间的HTML;
cellIndex:单元格在某行的单元格集合中的位置;
Select对象：
属性：
disable:设置或返回是否应禁用下拉列表;
length:返回下拉列表中的选项数目;
multiple:设置或返回是否选择多个项目;
name:设置或返回下拉列表的名称;
selectedIndex:设置或返回下拉列表中备选项目的索引号;
size:设置或返回下拉列表中的可见行数;
Option对象：
属性：
disabled:设置或返回选项是否应被禁用;
index:返回下拉列表中某个选项的索引位置;
selected:设置或返回selected属性的值;
text：设置或返回某个选项的纯文本值;
value:设置或返回被送往服务器的值;
-------------------------------------------------------
变量：
全局变量：
从定义开始到页面结束为止;
局部变量：
从定义位置到函数结束为止;
-------------------------------------------------------
BOM--浏览器对象模型--提供与浏览器窗口进行交互的对象，使用BOM可以访问和操作浏览器窗口;
window对象(当前浏览器所在的页面):---所有window对象的属性和方法自动成为JavaScript全局变量和全局函数
属性：
document:
location:
history:
navigator:
screen:
name:
opener:
parent:
self、window:
status:
screenLeft、screenTop:
方法：
close():
open(URL,name,feature,replace):
alert(message):
confirm(message):
prompt(text,defaultText):
moveTo(x,y)：
moveBy(x,y):
resizeBy(width,height):
resizeTo(width,height):
focus()、blur():
setTimeout(code,millisec)、clearTimeout(sid):
setInterval(code,millisec)、clearInterval(sid):
------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》jQuery：
1.jQuery简介：
*jQuery是JavaScript程序库/函数库（对JavaScript对象及函数的封装），jQuery已经成为最流行的JavaScript框架。
**jQuery是一个兼容多浏览器的JavaScript框架。
***jQuery是免费、开源的，其语法设计可以让开发者觉得使用起来更加便捷。
****$(function(){该函数/方法的内容});---定义一个jQuery函数/方法，是$(document).ready(function(){该函数/方法的内容});的简写。
2.jQuery对象：
*DOM（文档对象模型简称）只有（X）HTML、XML等文档结构的语言才具有DOM；DOM中的节点分为三种：元素节点、属性节点和文本节点。
**通过jQuery选择器选中的HTML元素，就是jQuery对象。
应用：var myHtml = $("#myId").html()---使用jQuery对象的html()方法，等价于document.getElementById("#myId").innerHTML;
***DOM和jQUERY对象之间的转换：DOM对象和jQuery对象的方法/属性是彼此独立的，但是在某些情况下，如果一定要用DOM对象来调用jQuery对象的属性/方法，或者要用jQuery对象来调用DOM对象的属性/方法，就必须进行DOM对象与jQuery对象之间的类型转换。
（1）将DOM对象转换为jQuery对象：将一个DOM对象用$()包裹起来，就可以转换成一个jQuery对象，即$(DOM对象)就是一个jQuery对象。其中，$()称为jQuery工厂。
--------（2）将jQuery对象转换为DOM对象：jQuery对象的本质是一个类似数组或集合的对象，而DOM对象的本质是一个普通的对象。因此，jQuery对象转换为DOM对象的额本质，就是将一个数组或集合转为一个普通对象。
方式一：将jQuery对象看成一个数组，通过使用数组下标的方式转为DOM对象；
var $jqueryObject=$("#myId");//获取jQuery对象
var jsObject=jqueryObject[0];//通过数组下标的方式，将jQuery对象转换为DOM对象
方式二：将jQuery对象看成是一个集合，通过使用get(index)的方式转为DOM对象；
var $jqueryObject=$("#myId");//获取jQuery对象
var jsObject=jqueryObject.get(0);//通过get(index)的方式，将jQuery对象转换为DOM对象
3.jQuery选择器：（jQuery的大部分功能都依赖于选择器---选择器是jQuery的根基）
类CSS选择器：
*基本选择器:
标签选择器：
$("HTML标签名")---根据给定的标签名匹配元素，例如：$("h1")--选取所有的h1元素。
类选择器：
$(".class名")---根据给定的class匹配元素，例如$(".content")--选取所有class="content"的元素。
ID选择器：
$("#id值")---根据给定的id匹配元素，例如：$("#myTitle")--选取id="myTitle"的元素。
并集选择器：
$("选择器1，选选择器2")---将多个选择器用逗号分隔开取并集，例如：$("div,.title")--选取所有div和拥有class="title"的元素。
交集选择器：
$("选择器1选择器2")---将多个选择器连续书写，取交集，例如：$("div.title")--选取所有拥有class="title"的div元素。
注意：和使用交集选择器时，除了"选择器1"以外的其他选择器不能是标签选择器（为了防止歧义）
全局选择器：
$("*")---匹配所有的元素，例如：$("*")--选取所有元素。
*层次选择器：（通过DOM元素之间的层次关系来获取元素，（对于后代选择器）当后面的元素为.名字时中间可以不加空格）
相邻元素选择器：
$("选择器1+选择器2")---选择紧邻选择器1所选元素之后的选择器2所有的元素（最多只选中一个元素），例如：$("h1+div")--选取紧邻<h1>元素之后的同辈元素<div>
同辈元素选择器：
$("选择器1~选择器2")---选取选择器1所选元素之后的选择器2所选的所有元素，例如：$("h1~div")--选取<h1>元素之后所有的同辈元素<div>。
后代选择器：
$("选择器1 选择器2")---选取选择器1所选元素内的（后代）选择器2所选的所有元素，例如：$("#title span")--选取#title中的所有<span>元素。
子选择器：
$("选择器1>选择器2")---选取选择器1所选元素内的（子代）选择器2所选的元素，例如：$("#title>span")--选取#title的子元素<span>
*属性选择器：（属性选择器通过HTML的属性来选择元素）（使用时配合交集/并集等选择器一起使用来缩小查找范围）
$([属性名])---选取包含特定属性的元素，例如：$("[name]")--选取所有含有name属性的元素；$("div[class]")---找到div标签下含有class属性的元素。
$("[属性名=属性值]")---选取属性值是某个特定值的元素，例如：$("[name='stuName']")选取name属性值为stuName的元素。
$("[属性名!=属性值]")---选取属性值不等于某个特定值的元素，例如：$("[name!='stuName']")--选取name属性值不等于stuName的元素。
$("[属性名^=属性值]")---选取属性值以某些特定值开头的元素，例如：$("[name^='stu']")--选取name属性值以stu开头的元素。
$("[属性名$=属性值]")---选取属性值以某些特定值结尾的元素，例如：$("[name$='me']")--选取name属性值以me结尾的元素。
$("[属性名*=属性值]")---选取属性值包含某些值的元素，例如：$("[name*='na']")--选取name属性值中含有na的元素。
过滤选择器：（通过过滤规则来筛选元素，语法特点是使用":"作为过滤选择器的标识符）
*基本过滤选择器：（可以选取第一个元素、最后一个元素、索引为偶数或奇数的元素或根据索引选取元素）
:first---选取第一个元素，例如：$("li:first")--选取所有<li>元素中的第一个<li>元素。
:last---选取最后一个元素，例如：$("li:last")--选取所有<li>元素中的最后一个<li>元素。
:even---选取索引是偶数的所有元素（从0开始），例如：$("li:even")--选取索引是偶数的所有<li>元素。
:odd---选取索引是奇数的所有元素（从0开始），例如：$("li:odd")--选取索引是奇数的所有<li>元素。
:eq(index)---选取索引等于index的元素（从0开始），例如：$("li:eq(1)")--选取索引等于1的<li>元素。
:gt(index)---选取索引大于index的元素（从0开始），例如：$("li:gt(1)")--选取索引大于1的所有元素（不包括1）。
:lt(index)---选取索引小于index的元素（从0开始），例如：$("li:lt(1)")--选取索引小于1的所有元素（不包括1）。
:not(选择器)---选取指定选择器未选中的元素，例如：$("li:not(#myTitle)")--选取id值不是myTitle的<li>元素。
:header---选取所有标题元素，如h1~h6，例如：$(":header")--选取网页中所有标题元素。
:focus---选取当前获取焦点（光标）的元素，例如：$(":focus")--选取当前获取焦点的元素。
*可见性过滤选择器：（disable属性值为none时会隐藏）
:visiable---选取所有可见的元素，例如：$(":visiable")--选取所有可见的元素。
:hidden---选取所有隐藏的元素，例如：$(":hidden")--选取所有隐藏的元素。
应用：$("p:hidden").show()表示将所有隐藏的<p>元素的状态变为显示;$("p:visiable").hide)()表示将所有可见的<p>元素的状态变为隐藏。
*属性过滤选择器：（value值两边可以加单引号也可以不加）
[attribute]---匹配含有给定属性的元素；
[attribute=value]---匹配含有属性=value的元素；
[attribute!=value]---匹配含有属性但！=value的元素；
[attribute^=value]---匹配属性值是以value开始的元素；
[attribute$=value]---匹配属性值是以value结束的元素；
[attribute*=value]---匹配属性值包含某些值的元素，部分前后，中间有也算；
[selector][selector]---匹配属性选择器的交集；
表单对象选择器：（<form><input /></form>）
:input---获取所有的表单元素<input>开头的，还有textarea、select。
:text---获取所有的单行 文本框<input type="text"/>。
:password---获取所有的密码框元素<input type="password"/>。
:radio---获取所有的单选按钮<input type="radio/>。
:checkbox---获取所有的复选款<input type="checkbox/>。
:submit---获取所有的提交按钮<input type="submit"/>
:image---获取所有的图像按钮<input type="image"/>
:reset---获取所有的重置按钮<input type="reset"/>
:button---获取所有按钮<input type="button"/>
:file---获取所有的文件上传框<input type="file"/>
:enabled---获取表单中所有可用的元素。
:disabled---获取表单中所有不可用的元素。
:checked---获取表单中所有被选中的元素。
:selected---获取表单中所有被选中的option元素。
4.jQuery文档操作：(如果存在参数content，表示给选中的元素赋上新的内容content；如果不存在参数content，表示获取被选中的元素内容)
*对HTML代码的操作：jQuery可以使用html()方法对元素的HTML代码进行操作，该方法类似于JavaScript中的innerHTML。
jQuery对象.html(content)---会将内容先渲染成html/css样式，然后再赋值给元素。
*对文本内容的操作：jQuery可以使用text()方法获取或设置元素的文本内容。
jQuery对象.text(content)---只是简单的以文本形式赋值给元素。
*对value值的操作：jQuery可以通过val()方法获取或设置元素的value值。
jQuery对象.val(参数)---如果存在参数V，表示被选中元素的value值设置为V；如果不存在参数V，表示获取被选中元素的value值。
*对属性的操作： jQuery主要通过attr()和removeAttr()方法来对节点的属性进行操作。
（1）获取或设置属性值：
attr("name")---获取单个属性值。如$(A).attr("name"),表示获取A节点的name属性；
attr("name","value")---设置单个属性。如$(A).attr("name","张三")，表示将A节点的name属性值设置为value；
attr({name1:"value1"},{name2:"value2"},.......{nameN:"valueN"})---同时设置多个属性值。如$(A).attr({width:"50",height:"100"})
(2)删除属性值：
removeAttr("name")---删除属性值。如$(A).removeAttr("alt"),表示删除A节点的alt属性值。
*元素节点的操作：
（1）查找节点：
查找节点通过jQuery选择器实现。
（2）创建节点：
$()成为工厂函数，可以用于获取节点、转化节点或创建节点；
$(选择器)：通过选择器获取节点；
$(DOM节点)：把DOM节点转化成jQuery节点；
$(HTML字符串)：使用HTML字符串创建jQuery节点。
例如：var $node=$("<li>橘子</li>");（创建了一个新的节点）
（3）插入节点：节点创建完毕后，就可以插入到DOM文档中。
内部插入：
$(A).append(B)---将B追加到A中；
$(A).appendTo(B)---将A追加到B中；
$(A).prepend(B)---将B前置插入A中；
$(A).prependTo(B)---将A前置插入B中。
外部插入：
$(A).after(B)---将B插入到A之后；
$(A).insertAfter(B)---将A插入到B之后；
$(A).before(B)---将B插入A之前；
$(A).insertBefore(B)---将A插入B之前。
（4）替换节点：
$(A).replaceWidth(B):用B节点替换A节点；
$(B).replaceAll(A)：用B节点替换A节点。
（5）删除节点：（jQuery提供了三种删除节点的方法：remove()、detach()、empty()）
$(A).remove():彻底删除A节点，包括所有子节点及文本内容；
$(A).detach():将A节点从页面删除，但仍然保留A节点附加的数据、绑定的事件。（此方法不建议使用）
$(A).empty():清空A节点，包括所有子节点。（只清除节点的内容，而不真正地删除节点）
（6）复制节点：jQuery提供的clone()方法，可以对节点进行复制操作（包括复制子节点、文本和属性）
$(A).clone([flag])---可选参数flag为布尔值true或false，为true时表示会复制节点的所有事件处理方法；为false时反之。默认为false。
5.jQuery事件：（事件是指可以被控件识别的操作，每个控件都有自己可以识别的事件。jQuery事件是对JavaScript事件的封装，大体上可以分为基础事件和复合事件。注意：事件是实现网页与用户交互的基础）
*基础事件：
（1）window事件：
当用户执行某些会影响浏览器的操作时而产生的事件。例如：第一次打开网页时的加载页面、关闭窗口、移动窗口、调节窗口大小等操作引发的事件。jQuery中最常用的window事件是文档就绪事件（即当页面中的DOM元素全部加载完毕时所触发的事件，该事件对应的方法就是ready()）。
（2）鼠标事件：
click():单击鼠标时触发的事件方法；
mouseover():鼠标悬浮在某个元素上时触发的事件方法；
mouseout():鼠标移出某个元素时触发的事件方法。
（3）键盘事件：
keydown():按下键盘时触发的事件方法；
keyup():释放按键时触发的事件方法；
keypress():产生可打印的字符串时触发的事件方法。
（4）表单事件：
focus():获取焦点时触发的事件方法；
blur():失去焦点时触发的事件方法。
*绑定事件与移出事件：
（1）绑定事件：
绑定一个事件：jQuery对象.bind(type,[data],fn);
绑定多个事件：jQuery对象.bind({type:fn,type:fn,......,type:fn});
事件参数：
type:事件类型，如click、focus、mouseover等，还可以是自定义事件；
data:可选类型，可以作为event.data的属性值，传递给事件对象额外的数据；
fn:处理数据，用来绑定该事件的处理函数。
（2）移除事件：(使用unbind()方法为元素移除一个或多个事件)
jQuery对象.unbind([type],[fn]);
参数：
type:事件类型,如click、focus、mouseover等，还可以是自定义事件；
fn:处理函数，用于解除绑定的事件函数。
当unbind()不带参数时，表示移除绑定的全部事件。
*复合事件：
（1）hover():（hover()方法相当于mouseover()和mouseout()方法的组合）
jQuery对象.hover(fn1,fn2)
其中，fn1相当于mouseover(),fn2相当于mouseout()。
（2）toggle():(适用于jQuery1.9以前版本)
jQuery对象.toggle(fn1,fn2,......fnN)
在jQuery以前版本，可以使用toggle()方法模拟鼠标连续的click事件：第一次单击元素时，触发第一个事件方法fn1；第二次单击元素时，触发第二个事件方法fn2......当最后一个事件方法fnN触发完后，若再次单击，就又会触发第一个事件方法fn1,如此循环调用。（自动判断当前的对象是显示还是隐藏，多次点击时，如该对象已经显示则隐藏，反之亦然）
6.jQuery动画效果：
*隐藏、显示和切换：
jQuery对象.hide():隐藏该对象；
jQuery对象.show():显示该对象；
jQuery对象.toggle():在显示和隐藏之间进行切换；
*淡入、淡出和切换：
jQuery对象.fadeIn("时间",函数):淡入；
jQuery对象.fadeOut():淡出；
jQuery对象.fadeToggle():在淡入和淡出之间进行切换；
*向下滑动、向上滑动和切换：
jQuery对象.slideUp("时间"，函数):向上切换
jQuery对象.slideDown("时间",函数):向下切换；
jQuery对象.slideToggle("时间",函数):向上、向下切换；
*停止、回调函数：
停止函数基本语法：
$(selector).stop(stopAll,goToEnd);
---可选的stopAll参数规定是否应该清除动画队列，默认是false，即仅停止活动的动画。可选的goToEnd参数规定是否立即完成当前动画，默认是false，表示立即停止，不等待这个动画执行完毕。
---提到的callback回调参数，回调函数就是在当前动画完全执行完成之后执行的函数。由于JavaScript语句是按顺序依次执行的，动画之后的语句可能会产生错误或页面冲突(为动画还没有完成)。为了避免这种情况发生，程序员可以采用参数的形式添加回调函数。
//在滑动动画执行完毕后弹出对话框，提示“段落滑动完毕”
$(document).ready(function(){
$("#flip").click(function(){
$("#panel").slideToggle(3000,function(){
alert(:段落滑动完毕！);
});
});
});
jQuery animate()方法用于创建自定义动画：
语法：
$(selector).animated({params},speed,callback);
---必需的params参数定义形成
animate操作多个属性：
animate({属性名:"属性值",属性名:"属性值",属性名:"属性值",......})
jQuery:animated选择器:选取当前的所有的动画元素;
timepicker:true/false;打开或关闭时间选项;
CSS动画实现：
@keyframe
8.jQuery对象的函数/方法：（使用jQuery操作CSS样式、操作文本域属性值内容以及操作DOM节点）
上面列出的jQuery事件；
jQuery对象.next():取得匹配元素后面紧邻的同辈元素;
jQuery对象.prev():取得匹配元素前面紧邻的同辈元素;
jQuery对象.siblings():取得匹配元素前、后的所有同辈元素;
jQuery对象.closest():取得最近的匹配元素;
jQuery对象.addClass():给当前jQuery对象增加一个类属性，以便于调用以该类名设置的属性，可以添加一个类属性或多个类属性---addClass(class1 class2 ... classN)或addClass(class);
jQuery对象.removeClass():去除当前jQuery对象的已有的类名---removeClass("style")或emoveClass("style1 style2");
jQuery对象.fisrt():找到该类元素的第一个元素；
jQuery对象.toggleClass():实现addClass()和removeClass()之间的切换；
jQuery对象.css("属性类型","value").css()---后面可以跟很多个.css属性，但是每个.css里面只能设置一个属性;
jQuery对象.html()---可以对HTML代码进行操作，类似JS中的innerHTML，无参数时用于获取用第一个恶匹配元素的HTML内容或文本内容，有参数时设置所有匹配元素内容;
jQuery对象.val()---可以获取或设置元素的value属性值；
jQuery对象.children()---取得匹配元素的子元素集合；
jQuery对象.text()---可以获取或设置元素的文本内容，当有参数时参数里面的所有内容都会当做文本来显示，无参数时是获取匹配元素的文本内容；
jQuery对象.attr():获取或设置元素属性，
jQuery对象.removeAttr():删除元素的属性，
jQuery对象.
jQuery对象.
jQuery对象.
jQuery对象.
jQuery对象.
jQuery对象.
工厂函数$()用于获取或创建节点：
------------------------------------------------------------
常见CSS操作：除了使用之前讲过的css()方法获取或设置CSS样式以外，还可以使用jQuery提供的CSS-DOM操作方法：
height([value])
height():获取元素的高度；
height(value):设置元素的高度；
width([value])
width():获取元素的宽度；
width(value):设置元素的宽度；
offset([function(index,oldoffset)])
offset():获取元素的top和left坐标；
function([index,oldoffset])：设置元素的top和left坐标，其中参数index为元素的索引，oldoffset为当前坐标，该方法返回被选元素的新坐标；
offsetParent():
返回最近的祖先定位元素；
定位元素指的是元素的CSS position属性被设置为relative、absolute或fixed的元素。
scrollLeft([position])
scrollLeft():获取滚动条的left偏移量；
scrollLeft(position):设置滚动条的left偏移量。
scrollTop([position])
scrollTop():获取滚动条的top偏移量；
scrollTop(position):设置滚动条的top偏移量。
使用css()为指定的元素设置样式值：
.css({"属性1"："value","属性2"："value",...})
.css("属性1","value").css("属性2","value")
--------------------------------------------------------------------
9.<script></script>标签中的函数定义方法：
1.function 函数名(){
函数体；
}
2.var 变量名 = function(){
函数体；
}
3.
（直接给标签绑定一个事件，或者使用bind绑定一个或多个事件，或者在jQuery对象后边直接.函数(function(){}).函数(function(){}).函数(function(){})------即直接使用点"."来绑定多个事件给标签）
10.复合选择器：
即将不同种类的选择器相互结合使用。
11.开发常用标签：
图文混编：
<dl>
<dt>放图片</dt>
<dd></dd>
<dd></dd>
</dl>
---------------
<button></button>---<input type="button"/>
--------------
<input type="text" placeholder="请输入用户名">---其中placeholder属性是设置文本框显示文本，当输入时原先设置的文本自动消失，删除所有文本后文本显示。
-------------------------------------------------------------------
JSON对象：
var JSON对象 = {}；
var JSON数组 = [{},{},{},....,{}]；（数组中包含的是对象）
jQuery遍历：(index是遍历对象的索引，item当前被遍历的对象)---其中这两个参数是别名，可以改变别名，但是函数对应位置的别名的作用是一定的。
$.each(json,function(index,item){
});
JSON数据服务：
知识：
1.在页面上展示JSON格式数据；
2.编制自己的JSON格式数据；
jQuery扩展：（一个插件就是一个.js文件）
jQuery插件的开发：
1.类级别的插件开发:（即给函数添加新的全局函数---相当于给jQuery本身添加方法）
全局函数：
jQuery.foo=function(){}
jQuery.bar=function(){}
添加多个全局函数
2.对象级别的插件开发：（即给jQuery对象添加方法）
-------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》表单验证+正则表达式+Bootstrap:
表单验证：
onsubmit:提交事件；
-------------------------------
正则表达式：
一个描述字符对象的对象,他有一些特殊的字符组成，表达一个特定的含义；
RegExp对象表示正则表达式，他是 对字符模式匹配的强大工具；
正则表达式定义：（附带参数i代表区分大小写--带i是区分大小写，反之是不区分大小写）
var reg = /blue/i(区分大小写)
var reg = /blue（不区分大小写）
*区分大小写：
*不区分大小写：
*精确匹配：
\w:代表了[a-zA-Z_0-9]（即字母大小写、数字以及下划线）
+号:代表至少出现一次
^:代表以什么Wie开头
$:代表以什么为结尾
\d{个数N}代表0-9的数字出现N次
[0-9]:代表0-9的数字，这种表达可以出现在正则表达式中进行匹配
[a-z]:或 [A-Z]或[0-9]等：这个符号[]可以设置要出现的字符，符号里边放入想要匹配的字符
.{个数N}:代表匹配N为任意字符的字符串
.{起始M,结束N}:代表匹配长度M个到N个之间的任意字符串（包含M个和N个）
.(点):匹配单个字符（不包括换行和行结束符）
\.:代表.
RegExp对象里面的方法：
RegExp对象.test():测试匹配的字符串里面是否包含有正则表达式里面的字符串；
正则表达式符号含义：
[^字符]：匹配方括号里边给出的字符范围以外的字符
[字符]：匹配方括号里边给出字符范围内的字符
常用量词：
m+:
m*:
m？:
m{x}:
------------Bootstrap前端框架----------
Bootstrap网站:Bootstrap中文网
Bootstrap:是最受欢迎的HTML、CSS和JS框架，用于开发响应式布局、移动设备有限的WEB项目；它在jQuery的基础上进行了（一个框架、多种设备）
---提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口尺寸的增加，系统会自动分为最多12列（栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，可以将内容放入已创建好的布局中）
Bootstrap栅格系统:
-------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》Web杂碎知识点总结：
JavaScript知识点总结：
(1)==和===的区别：
当==两边的内容为字符串时，则比较字符串的内容是否相等;
当==两边的内容是数字时，则比较数字的大小是否相等;
当==两边的内容是对象或者对象的函数属性时，则比较内存地址是否相等;
==用于一般比较，===用于严格比较，==在比较的时候可以转换数据类型，===严格比较，只要类型不匹配就返回false;
==只要求值相等，===要求值和类型都相等;
(2)NaN：非数值（是一个特殊的值），这个数值表示本来要返回数值的操作数未返回数值的情况;
任何与NaN进行运算的结果均为NaN，NaN与自身不相等(NaN不予任何值相等);
alert(NaN==NaN);弹出警告框并显示false
(3)在浏览器的状态栏放入一条消息：window.status = "put your message here"
(4)在HTML中，点击图片链接后页面转到历史列表中的上一个URL页面的代码如下：
<a href="javascript:history.go(-1)"><img src="img_URL" width="宽度" height="高度"/></a>
(5)null==undefined---结果为真 null===defined(结果为假false)（true）,NaN==NaN--结果为假（false）
(6)如声明而未对变量赋值，该变量的值为undefined
(7)有关html的描述：在页面顶部添加doctype声明，避免使用<font>标签
(8)块级元素实际占用的宽度与它的width、border和padding属性有关
(9)匿名自执行函数(function(){});调用该类函数的对象是window
(10)typeof是一个一元运算符，放在一个运算数之前，运算数可以是任意类型，返回值是一个字符串，该字符串说明运算数的类型
1.以下操作数的返回结果为字符串（number），表示该操作数是number类型:
数字类型的操作数typeof返回的值是number
Infinity:无穷大特殊值;
NaN:特殊的非数字值;
Number.MAX_VALUE:最大数字;
Number.MIN_VALUE:最小数字(与零接近);
Number.NaN:特殊的非数字值;
Number.POSITIOVE_INFINITY:无穷大的特殊值;
Number.NEGATIVE_INFINITY:负无穷大的特殊值;
2.字符串类型：返回值是表示类型的字符串（string）-该字符串表示该操作数位字符串类型;
3.布尔类型:返回值是表示布尔类型的字符串（boolean）,该字符串表示该操作数为boolean类型;
4.对于对象、数组、null返回的值是object
5.对于函数类型，返回值是function,比如typeof(Date)返回值是function
6.如果运算数是没有定义的（比如说不存在的变量、函数或者undefined），将返回undefined，typeof(undefined)返回值为undefined
(11)1+ +"2":第一个+"2"的加号是一元操作符,空格+"2"会变成数值2，因此1+ +"2"相当于1+2等于3
(12)javascript内置对象：
Arguments函数参数集合;
Array数组;
Boolean布尔对象;
Date日期时间;
Error异常对象;
Function函数构造器;
Math数学对象;
Number数值对象;
Object基础对象;
RegExp正则表达式对象;
String字符串对象;
(13)JavaScript内部所有数字都是以64位浮点数形式存储，即整数也是如此
(14)在javascript中，直接通过function申明的函数，后面再次定义的，会影响到之前的引用(加入函数中有定义重复的内容，最终结果相当于调用后面的函数)
(15)函数的调用方式有：
直接调用;
作为对象方法调用;
作为构造函数调用;
通过call和apply方法调用;
(16)模块化有利于管理模块间的依赖，更依赖模块的维护;
主流的模块化包括Common.JS,AMD,CMD等;
AMD推崇依赖前置，CMD推崇依赖就近;
(17)void()----该表达式的结果是undefined
javascript:void(0)中最关键的是void关键字，
void是javascript是JavaScript中非常重要的关键字，
该操作符指定要计算一个表达式但是不返回值。
(18)for-in语句:for(属性X in 对象){}
用来枚举对象的属性
(19)通过XMLHttpRequest更新一下元素，即通过div显示状态，哪个是正确的做法：<div id="statusCode"></div>
var myDiv = document.getElementById("statusCode");
myDiv.innerHTML = req.status;
(20)全局函数不属于任何一个内置对象
(21)下面的你方法可以用作javascript异步模式的编程：
回调函数;
事件监听;
发布/订阅;
Promises对象;
(22)History对象的属性或方法的描述：
back回到浏览器载入历史URL地址列表的当前URL的前一个URL;
forword转到浏览器载入历史URL地址利比列表的当前URL的下一个URL;
length保存历史URL地址列表的长度信息;
(23)给网页添加javascript的方式：
*使用script标签，将javascript代码写到<script></script>之间;
*添加外部javascript文件;
*使用行内javascript;
*使用@import引入javascript文件;
(24)创建函数：
function myFunction(){......}
myFunction = function(){......}
(25)JavaScript和jQuery的描述：
*jQuery是一个JavaScript函数库，它极大地简化了JavaScript编程;
*javascript是轻量级脚本语言，边解释边执行;
*javascript可以解决的问题，使用jQuery也可以解决;
*jQuery可以解决的问题，使用javascript也可以解决;
*jQuery等价于$;
*$()参数，可以是选择器，DOM对象，html字符串
-它相当于jQueyr中的jQuery();
-当DOM对象转化为jQuery对象后，就可以调用jQuery的方法;
-当$()的参数为DOM对象时，则该对象不需使用双引号包裹;
*$(document).ready(fn)可以编写多个,它的简写形式是$(fn),网页中所有DOM文档结构绘制完毕后即刻执行（不需要所有的内容加载完毕）;
*toggle():既可以模拟鼠标连续单击事件，又可以切换元素可见状态的;
*正确控制元素(该元素的id="cart")的隐藏的语法：
$("#cart").css("display","none");
$("#cart").hide();
$("#cart").fadeOut(1000);
*fadeOut()方法通过不透明度的变化来实现所有匹配元素的淡出效果，并再动画完成那个后可选地触发一个回调函数;
*fadeIn()方法通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数;
*fadeToggle()方法通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数;
*
(26)从一下标签中获取文本框里面的值的正确方法有：
<input id="txtContent" class="txt" type="text" value="张三" />
$(".txt").val();
$(".txt").attr("value");
$("#txtContent").attr("value");
(27)解释如下代码：
$("div").animate({
width:"100px",
borderWidth:10
},1000,function(){
alert(1);
});
解释：div元素会在1秒内宽度改为100像素，边框大小为10像素，然后弹出对话框;
(28)HTML DOM window对象 alert()方法：
alert()方法用于显示带有一条指定消息和一个KO按钮的警告框;
alert(message);---message是要在window上弹出的对话框中显示的纯文本（而非HTML文本）;
alert($):返回的是jQuery的内部;
alert($()):返回的是jQuery对象;
alert($("#box")):返回的是jQuery对象;
注意：返回值都为[object Object]
(29)load和ready的区别：
window.onload:
执行时机：必须等待网页全部加载完毕（包括图片等）然后再执行包裹的代码;
执行次数：只能执行一次，如果第二次，那么第一次的执行结果会被覆盖;
简写方案：无;
$(document).ready():
执行时机：只需要等待网页中的DOM结构加载完毕，就能执行包括的代码;
执行次数：可以执行多次，第N次都不会被上一次覆盖;
简写方案：$(function(){});
(30)下面这两种实现的效果的是相同的:
window.setTimeOut(方法名,时间值);---只写方法名，不带括号
window.settIimeOut("方法名()",时间值);---带括号
------------》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》》Web前端（对象+属性+事件）总结：
------------HTML文档---------------------HTML文档---------------------HTML文档--------
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8"/>
<title></title>
<!--引入外部样式文件-->
<link type="text/css" href=".css文件路径"/>
<script type="text/javascript" src=".js文件路径"></script>
<script type="text/javascript">/*JavaScript脚本代码*/
var variable = value;
typeof(变量名);
var chars = prompt("提示信息","显示的默认值");
document.write("在HTML页面中输出的内容");
alert("对话框中要显示的信息");/*创建、显示一个特殊的对话框（包含一个字符串和一个“确定”按钮）*/
/*JavaScript内置对象:Number对象、String对象、Date对象、Array对象*/
//value是要创建的Number对象的数值，可以省略new关键字，此时把Number()当做一个函数调而不是当做构造函数使用
/*Number对象方法*/
var myNum = new Number(value);
Number对象.toString(radix);//数字转换为字符串，radix表示进制数：2、8、10、16默认为10
Number对象.toFixed(num); //数字转换为字符串，按指定小数num四舍五入
Number对象.toExponential(num);//把对象的值转换为指数计数法，小数点之后有num位数字
Number对象.toPrecision(num);//把数字格式化指定长度，num足够大采用定点计数法；不够大采用指数计数法
Number对象.valueOf();//返回一个Number对象的基本数字值
/*String对象用来处理字符串*/
var myStr = new String(value);
var length1 = String对象.length;//字符串长度
String对象.big();//显示大号字体
String对象.small();//显示小号字体
String对象.blink();//显示闪动字符串
String对象.bold();//显示粗体字符串
String对象.italics();//显示斜体字符串
String对象.strike();//显示删除线字符串
String对象.fixed();//显示打印机文本字符串
String对象.sub();//把字符串显示为下标
String对象.sup();//把字符串显示为上标
String对象.toLowerCase();//转换为小写
String对象.toUpperCase();//转换为大写
String对象.fontcolor(color);//指定字符串颜色
String对象.fontsize(size);//指定字符串大小
String对象.concat(string1,string2,......,stringN);//连接字符串
String对象.charAt(index);//返回在指定位置的字符
String对象.charCodeAt(index);//返回在指定位置的字符的Unicode编码
String对象.search(searchvalue);//检索字符串searchvalue的索引位置
String对象.indexOf(searchvalue,fromindex);//检索字符串searchvalue的索引位置，可以从指定位置fromindex开始检索
String对象.lastIndexOf(searchvalue,fromindex);//从后向前检索字符串searchvalue的索引位置
String对象.match(searchvalue);//类似于indexOf(),但它返回指定的值，而不是位置
String对象.slice(start,end);//从指定位置提取字符串的子串
String对象.substr(start,length);//从指定位置提取字符串中的指定长度的子串
String对象.substring(start,stop);//从指定位置提取字符串的子串（不接受任何参数）
String对象.replace(oldvalue,newvalue);//替换子字符串值
String对象.split(separator,num);//把字符串分割为字符串数组，num表示返回的数组的最大长度
String对象.fromCharCode(num1,num2,......,numN);//有一系列字符编码创建一个字符串
String对象.anchor(anchorname);//将文本创建为HTML锚
String对象.link(URL);//将字符串显示为链接
String对象.toSource();//代表对象的源代码
String对象.toString();//返回字符串
String对象.valueOf();//返回某个字符串对象的原始值
/*Date对象用来处理日期和时间*/
var date = new Date();
Date对象.toUTCString();//获取和显示Date对象的日期和时间
Date对象.setFullYear(2014,9,8);//设置日期：2014年9月8日
Date对象.setHours(18);//小时
Date对象.setSeconds(18);//秒
/*显示动态时间*/
function Timer(){//需要先调用一下才能不断的显示最新的时间
var today = new Date();
var h = today.getHours();
var m = today.getMinutes();
var s = today.getSeconds();
document.getElementById("需要显示时间的元素id号").innerHTML = "现在时间为："+h+":"+m+":"+s;
setTimeout("Timer()",500);//500毫秒后调用Timer()函数
}
/*Array对象代表数组*/
new Array();
new Array(size);
new Array(element0,element1,......,elementN);
var length2 = Array对象.length;//数组中元素的数目(数组长度)
Array对象.concat(array1,array2,......,arrayN);//连接两个或多个数组，并返回结果
Array对象.join(seperator);//把数组的所有元素组成一个字符串，用seoerator分隔
Array对象.push(element1,element2,......,elementN);//向数组的末尾添加一个或多个元素，并返回新数组长度
Array对象.pop();//
</script>
<style type="text/css">/*内部样式---优先级：内联样式>内部样式表>外部样式表---id选择器>类选择器>标签选择器*/
id选择器{
}
类选择器{
/*背景属性*/
background: 设置所有的背景属性;
background-color: ;
background-image: ;
background-position: top/bottom/left/right/center/长度值（pixels/cm/%）;
background-repeat: repeat/repeat-x/repeat-y/no-repeat/inherit(规定从父元素继承该属性的设置);
background-attachment: fixed(背景图像是否固定);
/*文本属性*/
direction: ltr/rtl/inherit(文本方向);
line-height: normal/length/inherit/number/%(行高);
text-indent: length/%/inherit(文本缩进);
text-align: left/right/center/justify/inherit(文本对齐方式);
letter-spacing: normal/length/inherit(字符间距);
word-spacing: normal/length/inherit(字间距);
text-transform: none/uppercase/lowercase/capitalize/inherit(处理文本大小写);
text-decoration: none/underline/overline/line-through/blink/inherit(设置文本修饰);
white-space: normal/pre/nowrap/pre-wrap/pre-line/inherit(规定如何处理空白);
/*字体属性*/
font: (设置所有的字体属性);
font-family: 字体类型;
font-size: 字体大小;
font-weight: 字体粗细;
font-variant: 以小型大写字体或者正常字体显示文本;
font-style: normal/italic/oblique/inherit(字体风格);
/*列表属性*/
list-style: 设置所有的列表属性;
list-style-image: 设置图像为列表项标志;
list-style-position: inside/outside/inherit(列表中列表项标志的位置);
list-style-type: 列表项标志的类型;
/*设置定位*/
position: relative/absolute;
left: ;
top: ;
float: left/right(浮动---可实现横向排列的效果);
clear: left/right/both/none(设置了清除浮动属性的元素直接向下移动);
/*Box模型*/
margin: ;
margin-left: ;
margin-right: ;
margin-top: ;
margin-bottom: ;
padding: ;
border: ;
border-left: ;
border-right: ;
border-top: ;
border-bottom: ;
border-style: none/hidden/dotted(点状边框/dashed(虚线/solid（实线/double(双线/groove/ridge/inset/outset;
border-color: 边框颜色;
}
标签选择器{
}
派生选择器{
}
a:link{/*普通的、未被点击的链接*/
}
a:hover{/*鼠标指针位于链接的上方*/
}
a:active{/*链接被单击的时刻*/
}
a:visited{/*用户已访问的链接*/
}
</style>
</head>
<!--这是需要注释的内容，便于对代码的检查与维护-->
<body text="页面字体颜色" bacolor="页面背景颜色" background="img_URL" bgproperties="fixed(背景图像固定)" link=链接文字显示的颜色" alink="单击链接时文字颜色" vlink="访问过链接的颜色">
<div>
<p align="left/right/center/justify(对行进行伸展，每行可有相等的长度)">
<!--文本控制：字体标签;文字格式;-->
<font face="字体类型" size="字体大小(1-7)" color="字体颜色">文本内容</font>
<b>粗体</b> <i>斜体</i> <big>大号字体</big> <small>小号字体</small> <tt>打印机字体(等宽)</tt> <em>强调内容</em> <strong>更强调的内容</strong>
<code>计算机代码文本</code> <samp>样本文本</samp> <var>定义变量</var> <cite>定义引用</cite> <s>删除线</s><strike>删除线</strike> <u>下划线</u>
<sup>上标</sup> <sub>下标</sub> <address>地址</address>
</p>
<!--水平线标签:用于分隔段落-->
<hr align="center/left/right" size="pixels(水平线高度)" width="pixels/%(水平线宽度)" color="颜色" noshade="noshade(水平线不出现阴影)"/>
<!--标题标签：共有六种（n取值：1-6），在浏览器解析时会将标题内容设为一个段落-->
<hn>标题文字</hn>
<p>
<!--有序列表标签<ol></ol>和无序列表标签<ul></ul>(列表之间可以相互嵌套)-->
<ol type="a/A/I/i/1(默认为数字)" start="start_number(起始点，默认为1)">
<li>项目一</li>
<ul type="disc(实心圆)/circle(空心圆)/square(实心方块)">
<li>项目1</li>
<li>项目2</li>
</ul>
<li>项目三</li>
</ol>
<!--图像标签及相应的属性-->
<img src="img_URL" alt="此处是当图像无法显示时，替代显示的文本"/>
<img align="top/bottom/middle/left/right(规定如何根据周围的文本来排列图像，默认对齐方式是bottom)" width="" height="" border=""/>
<img hspace="(pixels)图像左侧和右侧的空白" vspace="图像顶部和底部的空白" ismap="URL(将图像定义为服务器端图像映射)" longdesc="指向包含长的图像描述文档的URL"/>
<a href="链接地址" target="目标地址窗口">链接文本或图像</a>
<!--同一页面链接-->
<a name="书签名称(先建立书签)">文字</a>
<a href="#书签名称(写定义好的书签)">链接点</a>
<!--链接到另一个页面的某个书签-->
<a href="其他页面url#书签名称">链接点</a>
</p>
<!--表格标签(由行和列组成)-->
<table align="left/center/right" border="pixels" width="" bordercolor="边框颜色" bgcolor="背景颜色" background="img_URL" cellpadding="单元格边框与其内容之间的空白" cellspacing="单元格之间的空白" frame="void/above/below/hsides/lhs/rhs/vsides/box/border(表格外边框那个部分可见)" rules="none/groups/rows/cols/all(表格内边框哪个部分可见)" summary="text(表格的摘要)">
<!--带标题表格：<caption>标签必须紧随<table>标签之后，且只能对每个表格定义一个标题，并默认这个标题会被居中于表格之上显示-->
<caption align="left/right/top/bottom">表格标题</caption>
<!--表头就是表格的第一行，一般用于对各列进行简要说明：默认以粗体、居中的方式显示-->
<th>
<td></td>
<td></td>
</th>
<tr align="left/right/center/justify（与基线对齐）(行中内容的水平对齐方式)" valign="top/middle/bottom/baseline(行中内容的垂直对齐方式)" bacolor="行的背景颜色">
<td align="left/right/center/justify(单元格水平对其方式)" valign="top/middle/bottom/baseline(单元格内容的垂直对齐方式)" bacolor="单元格背景颜色" height="单元格高度" width="单元格宽度" colspan="单元格可横跨的列数" rowspan="单元格可横跨的行数" nowrap="nowrap(单元格中的内容是否折行)"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<!--表单:用来描述需要用户输入的页面内容，用户输入后提交到指定位置进行处理-->
<!--onsubmit是对表单添加一个提交事件，如果调用的函数返回true则转到action对应的地址页面中去-->
<form action="表单提交地址(也就是说提交之后会转到该地址的页面)" οnsubmit="return 函数名();" method="提交方法" accept="规定能通过上传进行提交的文件类型" accept-charset="规定服务器处理表单数据所接受的字符集" enctype="规定在发送到服务器之前应该如何对表单数据进行编码" name="表达名称" target="_blank/_parent/_self/_top/framename(框架名称)(定义在何处打开action URL)">
<!--input元素-->
<input type="text/password(密码)/submit(提交)/reset(重置)/button(按钮)/hidden" name="名称" value="input元素的值" disabled="disabled(禁用此input元素)" size="input元素的宽度" maxlength="输入字段中字符的最大长度（注意和size的区别）" readonly="readonly(规定输入字段为只读)" />
<input type="file" accept="(文件上传时使用该属性，规定能通过文件上传进行提交的文件类型)" />
<input type="image" align="left/right/top/middle/bottom(仅能对图像类型使用该属性:对齐方式)" src="img_URL(仅能对图像类型使用该属性)" alt="图像输入的替代文本(进图像类型能使用该属性)" />
<input type="radio(单选)/checked(多选)" checked="checked(定义此input元素默认被选中)" />
<!--非input元素:1.下拉列表框select；2.多行文本域textarea-->
<select>
<option value="">选项1</option>
<option>选项2</option>
......
<option>选项N</option>
</select>
<textarea name="" cols="列数" rows="行数" readonly="readonly(只读)">
内容
</textarea>
</form>
<!--div图文混编-->
<dl>
<dt>列表中的项目</dt>
<dd>对项目的描述</dd>
</dl>
<dl>
<dt><img /></dt>
<dd><a href="#">《书的名称》</a>></dd>
</dl>
</div>
</body>
</html>
-------------框架文件--------------------框架文件--------------------框架文件---------
<!DOCTYPE HTML>
<html>
<frameset rows="行数列表" cols="列数列表">
<frame src=".html文件路径" name="框架名称" frameborder="0/1" marginheight="框架上方和下方的边距" marginwidth="框架左侧和右侧的边距" noresize="noresize(锁定框架大小)" scrolling="yes/no/auto(规定是否在框架中显示滚动条)">
<!--嵌套分割窗口-->
<frameset cols="列数列表" rows="行数列表">
<frame src=".html文件路径">
...
<frame src=".html文件路径">
</frameset>
<frame src=".html文件路径">
...
<frame src=".html文件路径">
</frameset>
</html>
》》》》》》》内嵌框架：
<!DOCTYPE HTML>
<html>
<head>
<meta />
<title></title>
</head>
<body>
<!--适用于将其他网站的页面内嵌到本网站页面中-->
<iframe src="内嵌页面URL(在一个页面中内嵌另一个页面)" name="框架名"></iframe>
</body>
</html>
Web前端技术个人学习经验总结相关推荐
- web前端技术的学习(一)
web前端技术的学习( 一 ) 一.HTML +CSS系列之导学 1.1拨云见日 1.2 朔本求源 1.3 风生水起 1.4 巧夺天工 二.什么是HTML.CSS? 2.1 是做网站的编程语言. 2. ...
- web前端技术：学习HTML、CSS、JavaScript
学习web前端开发基础技术需要掌握:HTML.CSS.JavaScript,本文详细为你解答他们都是能实现哪些功能? 1HTML是网页内容的载体 内容就是网页制作者放在页面上想要让用户浏览的信息,可以 ...
- Web前端技术开发学习笔记(HTML标记语言篇)——第4章 文字与段落标记
第4章 文字与段落标记 第4章 文字与段落标记 4.1文字标记 4.1.1 文字内容的输入 1.普通文字的输入 2.空格的输入 3.特殊文字的输入 4.注释语句 4.1.2 对文字字体的设置 4.1. ...
- Web前端技术开发学习笔记(HTML标记语言篇)——第6章 图片标记
第6章 图片标记 6.1 网页常见图片格式 6.2 插入图片 6.2.1 设置图片大小 6.2.2 设置图片文本 6.2.3 设置图片与周围对象的间距 6.2.4设置图片的对齐方式 6.2.5设置图片 ...
- Web前端技术开发学习笔记(HTML标记语言篇)——第5章 列表标记
第5章 列表标记 5.1 有序列表 5.1.1 有序列表的前导符设置 5.1.2 有序列表的前导符起始编号设置 5.2 无序列表 5.2.2 项目列表的前导符设置 5.2.3 定义列表 5.3 嵌套列 ...
- 经验分享：如何系统学习 Web 前端技术？
本文作者:曾亮.晟暄科技 CEO ,HTML5 & Node.js 技术讲师. Javascript前后端全栈开发人员 DDD/CQRS 设计师 对 Node.js 和 HTML5 有多年开发 ...
- 入门Web前端开发需要学习哪些技术？薪资高吗？
[此文章转自乐字节] 今天来和大家讲讲Web前端开发需要学习什么?前端开发又需要用到哪些开发工具? 前端开发工程师不仅要掌握基本的Web前端开发技术,网站性能优化.SEO和服务器端的基础知识,而且要学 ...
- Web前端技术人才抢手 慕课网揭秘前端学习技巧
互联网的高速发展促使IT人才越来越抢手,web前端工程师这一职业备受青睐.那么如何成为一名优秀的Web前端工程师?IT在线教育为从业人员提供了便捷.有效的学习途径.中国最大的IT实战学习平台--慕课网 ...
- Web前端技术分享：学习HTML和CSS的5大理由
人们学习HTML和CSS最常见的原因是开始从事Web开发.但并不是只有Web开发人员才要学习HTML和CSS的核心技术.作为一个网络用户,你需要你掌握的相关技术很多,但下面小千总结了5个你无法拒绝学习 ...
最新文章
- 七层负载均衡 nginx
- .net core发布 正在发现数据上下文_使用EF Core实现数据库读写分离
- 母版页（Master Pages）－－轉載
- jvm 分代回收算法通俗理解
- 学phython的小笔记
- js模块的封装（-）
- 语言余一个负数_Python 中负数取余问题
- web 前端学习之制作网页视频
- 在线教育：最常见的直播课程有哪些？
- 进去springstrap显示无响应_何为优秀显示器？显示器参数标准主观讨论
- LimeSDR官方系列教程（五）：SDR的软件
- 阿里巴巴十周年有感----宗教的盛宴
- 计算机课程微教学设计,计算机基础知识教学设计
- GVIDO MUSIC向德意志唱片公司成立120周年 Special Gala Concert Presented by 小泽征尔 斋藤纪念管弦乐团提供赞助
- android *#06#_现在在Android＃20中
- 计算长方体体积(3分)
- 从0开始搭建深度学习环境-Pytorch-GPU
- MySQL/Hive 常用窗口函数详解及相关面试题
- Qt安装时No suitable kits found解决办法
- java自行车s码适合身高_[单车知识] 身高自行车尺寸对照！