前端知识点
来源：互联网 发布：控油的爽肤水 知乎 编辑：程序博客网 时间：2024/06/04 18:31
HTML
1、html的简介
（1）什么是html？HyperText Mark-up Language ，超文本标记型语言，是网页的语言。
* 超文本：超出文本的范畴
* 标记：理解为标签，html中所有的操作都是通过标签来实现的
* html是做网页。
* 第一个html程序= 代码 <font color="red" size="5">这是我的第一个html程序</font>（2）html程序遵循一定的规范第一个：html程序以<html>开始，同时</html>结束 * 比如创建java里面方法，public void add() { 方法体 }第二个：html程序包含两部分内容：head和body * <html> <head>设置页面信息</head> <body>显示到页面上的内容</body> </html>第三个：html的标签有开始标签，同时也要结束标签第四个：html的代码不区分大小写的第五个：有些标签没有结束标签，需要在标签内结束 <br/> * 实现换行的操作，使用标签实现的<br>, 没有</br>（3）html的操作思想* 在网页中可能有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。2、字体标签
（1）文字标签
* 要操作的文字的内容
** 常用两个属性
* color：设置文字的颜色
** 有三种表示方式
第一种：直接使用英文单词进行表示 red green yellow……
第二种：使用十六进制数字进行表示 #ffffff，
** 通过RGB
第三种：使用RGB颜色值配置 rgb(255,0,0)
*** size：设置文字的大小 **** 文字大小值范围：1-7，如果值超过了7，使用还是7的效果（2）标题标签* <h1></h1> <h2></h2>.......<h6></h6>** 标题标签可以自动换行，从h1到h6字体的大小依次变小的（3）水平线标签* <hr/>* 属性** color：表示设置水平线颜色** size：设置水平线的粗细，范围1-7（4）注释标签* 在java里面有几类注释？三类注释** 单行注释，多行注释，文档注释* 在html中注释 <!-- 注释的内容 -->** 使内容不在html页面中进行显示（5）特殊字符 * 实现空格的操作3、列表标签
（1）想要实现：
传智播客
java学院
人事部
学工部
* 首先需要使用
* 之后在dl标签里面，: 定义上层内容
* 在dl标签里面， : 定义下层内容
** 代码
- 传智播客
- java学院
- 人事部
- 学工部
（2）有序列表标签 1.java学院 2.人事部 3.学工部 a.java学院 b.人事部 c.学工部 i.java学院 ii.人事部 iii.学工部* 使用 <ol></ol>: 定义有序列表的范围 ** ol标签上面有属性 type：排序的方式 ** type属性里面的值 1 a i* 之后在ol标签里面：<li></li>: 封装具体的内容** 代码<ol> <li>java学院</li> <li>人事部</li> <li>学工部</li></ol>（3）无序列表标签 （特殊符号）java学院 （特殊符号）人事部 （特殊符号）学工部* 首先使用标签 <ul></ul>: 定义无序列表的范围 ** ul标签上面有属性 type：设置特殊符号 ** type属性里面的值 disc circle square* 之后在ul标签里面： <li></li>: 封装具体的内容** 代码<ul> <li>java学院</li> <li>人事部</li> <li>学工部</li> </ul>4、图形标签
（1）在html中显示图片
（2）标签：
（3）属性：
* src：图片的路径名称
* width：图片宽度
* height：图片的高度
* border：图片的边框的粗细
* alt: 显示在图片上面的内容
** 鼠标移动到图片上面，稍等片刻出现文字
** 如果图片找不到，显示alt的内容
* 这个属性在某些浏览器不能显示的
5、超链接标签
（1）什么是超链接：点击打开新的内容
（2）标签：显示在页面上的内容
* 代码 显示在页面上的内容
（3）属性
* href：链接到地址
* target：超链接的打开方式
** 在默认的情况下，打开方式在当前的页面打开
** target里面的值：_self,当前页面打开； _blank，在新标签页打开
6、表格标签
操作技巧：
首先数表格里面有多少行，数每行里面有多少个单元格
（1）什么是表格：对数据进行格式化，使数据显示更加清晰，结构分明
（2）标签
* 首先定义表格的范围：
** 属性
* border：设置表格线
* bordercolor：设置表格线的颜色
* cellspacing: 设置单元格之间的距离
* cellpadding: 设置文字和单元格之间的距离
* width: 设置表格的宽度
* height：设置表格的高度
* 在table标签里面表示行： <tr></tr> ** 属性 *** align：设置对齐方式，值 left center right* 在tr标签里面表示列： <td></td> ** 属性 *** align：设置某个单元格对齐方式* 在tr标签里面也可以表示单元格：<th></th> ** 实现居中和加粗的效果（3）合并单元格* 是在td标签上面进行的操作，使用两个属性** rowspan：跨行*** 代码 <th rowspan="4">人员信息3人</th>** colspan：跨列*** 代码 <td colspan="3">统计信息3人</td>（4）标题标签：<caption>标题内容</caption>7、表单标签
（1）什么是表单？把输入的数据提交到服务器上（存到服务器），这个过程称为表单
（2）使用表单标签实现数据提交到服务器上这个过程
（3）form 标签：如果写表单，首先定义表单的范围* 属性** action：提交的服务器的地址** method：表单的提交方式（有很多种，常见的有两种 get和post）*** 代码<form action="hello.html" method="get"></form>** get和post提交，在默认情况下，提交方式是get提交*** get提交方式会在地址栏携带数据，安全性很差*** post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面（讲到http协议时候详细说）（4）输入项：可以输入内容或者选择内容的地方** 要求1：输入项里面必须要有name属性** 要求2：在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value，设置的值* 输入项需要写到form标签里面* 大部分输入项是通过标签input进行封装操作的** <input type="输入项的类型"/>第一个：普通输入项 <input type="text"/>第二个：密码输入项 <input type="password"/>第三个：单选输入项 <input type="radio"/> ** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同 ** 设置默认选中，使用属性 checked="checked"第四个：复选输入项 <input type="checkbox"/> ** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同 ** 设置默认选中，使用属性 checked="checked"第五个：文件输入项，上传文件的。<input type="file"/>第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上 <input type="hidden"/>第七个：普通按钮 <input type="button"/>*** 可以写value属性，设置输入项的默认值（5）下面的两个输入项不是使用input标签进行封装的第八个：下拉选择输入项* <select> <option>AAAA</option> <option>BBBB</option> <option>CCCC</option></select>* 使用属性 selected="selected" 默认选中第九个：文本域* <textarea cols="10" rows="5"></textarea>（6）提交按钮和其他的按钮* 提交按钮： <input type="submit"/> ** 属性 value：设置提交按钮显示的内容 ** 点击提交按钮：地址发生了变化 file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?sex=on&love=on&love=on ** 在输入项上面写name属性之后，提交表单 file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test ** 在单选框、复选框和下拉选择框里面设置了value之后，提交表单 file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test* 重置按钮：<input type="reset"/> ** 属性 value：设置重置按钮显示的内容 ** 不是做清空表单输入项的操作，使表单输入项回到初始状态* 使用图片进行提交：<input type="image" src="图片路径"/>8、其他的标签的使用
（1）pre：原样输出
p：段落标签
s：删除线
u: 下划线
b：加粗
i：斜体
（2）div : 自动换行 span：在一行进行显示9、案例：注册页面
（1）如果单元格里面没有内容，使用占位符替代（使用空格 ）
（2）想要一个超链接没有效果，在href属性值写成#
HTML
1、html的简介
（1）什么是html？HyperText Mark-up Language ，超文本标记型语言，是网页的语言。
* 超文本：超出文本的范畴
* 标记：理解为标签，html中所有的操作都是通过标签来实现的
* html是做网页。
* 第一个html程序= 代码 <font color="red" size="5">这是我的第一个html程序</font>（2）html程序遵循一定的规范第一个：html程序以<html>开始，同时</html>结束 * 比如创建java里面方法，public void add() { 方法体 }第二个：html程序包含两部分内容：head和body * <html> <head>设置页面信息</head> <body>显示到页面上的内容</body> </html>第三个：html的标签有开始标签，同时也要结束标签第四个：html的代码不区分大小写的第五个：有些标签没有结束标签，需要在标签内结束 <br/> * 实现换行的操作，使用标签实现的<br>, 没有</br>（3）html的操作思想* 在网页中可能有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。2、字体标签
（1）文字标签
* 要操作的文字的内容
** 常用两个属性
* color：设置文字的颜色
** 有三种表示方式
第一种：直接使用英文单词进行表示 red green yellow……
第二种：使用十六进制数字进行表示 #ffffff，
** 通过RGB
第三种：使用RGB颜色值配置 rgb(255,0,0)
*** size：设置文字的大小 **** 文字大小值范围：1-7，如果值超过了7，使用还是7的效果（2）标题标签* <h1></h1> <h2></h2>.......<h6></h6>** 标题标签可以自动换行，从h1到h6字体的大小依次变小的（3）水平线标签* <hr/>* 属性** color：表示设置水平线颜色** size：设置水平线的粗细，范围1-7（4）注释标签* 在java里面有几类注释？三类注释** 单行注释，多行注释，文档注释* 在html中注释 <!-- 注释的内容 -->** 使内容不在html页面中进行显示（5）特殊字符 * 实现空格的操作3、列表标签
（1）想要实现：
传智播客
java学院
人事部
学工部
* 首先需要使用
* 之后在dl标签里面，: 定义上层内容
* 在dl标签里面， : 定义下层内容
** 代码
- 传智播客
- java学院
- 人事部
- 学工部
（2）有序列表标签 1.java学院 2.人事部 3.学工部 a.java学院 b.人事部 c.学工部 i.java学院 ii.人事部 iii.学工部* 使用 <ol></ol>: 定义有序列表的范围 ** ol标签上面有属性 type：排序的方式 ** type属性里面的值 1 a i* 之后在ol标签里面：<li></li>: 封装具体的内容** 代码<ol> <li>java学院</li> <li>人事部</li> <li>学工部</li></ol>（3）无序列表标签 （特殊符号）java学院 （特殊符号）人事部 （特殊符号）学工部* 首先使用标签 <ul></ul>: 定义无序列表的范围 ** ul标签上面有属性 type：设置特殊符号 ** type属性里面的值 disc circle square* 之后在ul标签里面： <li></li>: 封装具体的内容** 代码<ul> <li>java学院</li> <li>人事部</li> <li>学工部</li> </ul>4、图形标签
（1）在html中显示图片
（2）标签：
（3）属性：
* src：图片的路径名称
* width：图片宽度
* height：图片的高度
* border：图片的边框的粗细
* alt: 显示在图片上面的内容
** 鼠标移动到图片上面，稍等片刻出现文字
** 如果图片找不到，显示alt的内容
* 这个属性在某些浏览器不能显示的
5、超链接标签
（1）什么是超链接：点击打开新的内容
（2）标签：显示在页面上的内容
* 代码 显示在页面上的内容
（3）属性
* href：链接到地址
* target：超链接的打开方式
** 在默认的情况下，打开方式在当前的页面打开
** target里面的值：_self,当前页面打开； _blank，在新标签页打开
6、表格标签
操作技巧：
首先数表格里面有多少行，数每行里面有多少个单元格
（1）什么是表格：对数据进行格式化，使数据显示更加清晰，结构分明
（2）标签
* 首先定义表格的范围：
** 属性
* border：设置表格线
* bordercolor：设置表格线的颜色
* cellspacing: 设置单元格之间的距离
* cellpadding: 设置文字和单元格之间的距离
* width: 设置表格的宽度
* height：设置表格的高度
* 在table标签里面表示行： <tr></tr> ** 属性 *** align：设置对齐方式，值 left center right* 在tr标签里面表示列： <td></td> ** 属性 *** align：设置某个单元格对齐方式* 在tr标签里面也可以表示单元格：<th></th> ** 实现居中和加粗的效果（3）合并单元格* 是在td标签上面进行的操作，使用两个属性** rowspan：跨行*** 代码 <th rowspan="4">人员信息3人</th>** colspan：跨列*** 代码 <td colspan="3">统计信息3人</td>（4）标题标签：<caption>标题内容</caption>7、表单标签
（1）什么是表单？把输入的数据提交到服务器上（存到服务器），这个过程称为表单
（2）使用表单标签实现数据提交到服务器上这个过程
（3）form 标签：如果写表单，首先定义表单的范围* 属性** action：提交的服务器的地址** method：表单的提交方式（有很多种，常见的有两种 get和post）*** 代码<form action="hello.html" method="get"></form>** get和post提交，在默认情况下，提交方式是get提交*** get提交方式会在地址栏携带数据，安全性很差*** post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面（讲到http协议时候详细说）（4）输入项：可以输入内容或者选择内容的地方** 要求1：输入项里面必须要有name属性** 要求2：在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value，设置的值* 输入项需要写到form标签里面* 大部分输入项是通过标签input进行封装操作的** <input type="输入项的类型"/>第一个：普通输入项 <input type="text"/>第二个：密码输入项 <input type="password"/>第三个：单选输入项 <input type="radio"/> ** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同 ** 设置默认选中，使用属性 checked="checked"第四个：复选输入项 <input type="checkbox"/> ** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同 ** 设置默认选中，使用属性 checked="checked"第五个：文件输入项，上传文件的。<input type="file"/>第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上 <input type="hidden"/>第七个：普通按钮 <input type="button"/>*** 可以写value属性，设置输入项的默认值（5）下面的两个输入项不是使用input标签进行封装的第八个：下拉选择输入项* <select> <option>AAAA</option> <option>BBBB</option> <option>CCCC</option></select>* 使用属性 selected="selected" 默认选中第九个：文本域* <textarea cols="10" rows="5"></textarea>（6）提交按钮和其他的按钮* 提交按钮： <input type="submit"/> ** 属性 value：设置提交按钮显示的内容 ** 点击提交按钮：地址发生了变化 file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?sex=on&love=on&love=on ** 在输入项上面写name属性之后，提交表单 file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test ** 在单选框、复选框和下拉选择框里面设置了value之后，提交表单 file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test* 重置按钮：<input type="reset"/> ** 属性 value：设置重置按钮显示的内容 ** 不是做清空表单输入项的操作，使表单输入项回到初始状态* 使用图片进行提交：<input type="image" src="图片路径"/>8、其他的标签的使用
（1）pre：原样输出
p：段落标签
s：删除线
u: 下划线
b：加粗
i：斜体
（2）div : 自动换行 span：在一行进行显示9、案例：注册页面
（1）如果单元格里面没有内容，使用占位符替代（使用空格 ）
（2）想要一个超链接没有效果，在href属性值写成#
HTML
1、html的简介
（1）什么是html？HyperText Mark-up Language ，超文本标记型语言，是网页的语言。
* 超文本：超出文本的范畴
* 标记：理解为标签，html中所有的操作都是通过标签来实现的
* html是做网页。
* 第一个html程序= 代码 <font color="red" size="5">这是我的第一个html程序</font>（2）html程序遵循一定的规范第一个：html程序以<html>开始，同时</html>结束 * 比如创建java里面方法，public void add() { 方法体 }第二个：html程序包含两部分内容：head和body * <html> <head>设置页面信息</head> <body>显示到页面上的内容</body> </html>第三个：html的标签有开始标签，同时也要结束标签第四个：html的代码不区分大小写的第五个：有些标签没有结束标签，需要在标签内结束 <br/> * 实现换行的操作，使用标签实现的<br>, 没有</br>（3）html的操作思想* 在网页中可能有很多的数据，不同的数据可能需要不同的显示效果，这个时候需要使用标签把要操作的数据包起来（封装），通过修改标签的属性值来实现标签内数据样式的变化。标签相当于一个容器，通过修改容器的属性值，实现容器内数据样式的变化。2、字体标签
（1）文字标签
* 要操作的文字的内容
** 常用两个属性
* color：设置文字的颜色
** 有三种表示方式
第一种：直接使用英文单词进行表示 red green yellow……
第二种：使用十六进制数字进行表示 #ffffff，
** 通过RGB
第三种：使用RGB颜色值配置 rgb(255,0,0)
*** size：设置文字的大小 **** 文字大小值范围：1-7，如果值超过了7，使用还是7的效果（2）标题标签* <h1></h1> <h2></h2>.......<h6></h6>** 标题标签可以自动换行，从h1到h6字体的大小依次变小的（3）水平线标签* <hr/>* 属性** color：表示设置水平线颜色** size：设置水平线的粗细，范围1-7（4）注释标签* 在java里面有几类注释？三类注释** 单行注释，多行注释，文档注释* 在html中注释 <!-- 注释的内容 -->** 使内容不在html页面中进行显示（5）特殊字符 * 实现空格的操作3、列表标签
（1）想要实现：
传智播客
java学院
人事部
学工部
* 首先需要使用
* 之后在dl标签里面，: 定义上层内容
* 在dl标签里面， : 定义下层内容
** 代码
- 传智播客
- java学院
- 人事部
- 学工部
（2）有序列表标签 1.java学院 2.人事部 3.学工部 a.java学院 b.人事部 c.学工部 i.java学院 ii.人事部 iii.学工部* 使用 <ol></ol>: 定义有序列表的范围 ** ol标签上面有属性 type：排序的方式 ** type属性里面的值 1 a i* 之后在ol标签里面：<li></li>: 封装具体的内容** 代码<ol> <li>java学院</li> <li>人事部</li> <li>学工部</li></ol>（3）无序列表标签 （特殊符号）java学院 （特殊符号）人事部 （特殊符号）学工部* 首先使用标签 <ul></ul>: 定义无序列表的范围 ** ul标签上面有属性 type：设置特殊符号 ** type属性里面的值 disc circle square* 之后在ul标签里面： <li></li>: 封装具体的内容** 代码<ul> <li>java学院</li> <li>人事部</li> <li>学工部</li> </ul>4、图形标签
（1）在html中显示图片
（2）标签：
（3）属性：
* src：图片的路径名称
* width：图片宽度
* height：图片的高度
* border：图片的边框的粗细
* alt: 显示在图片上面的内容
** 鼠标移动到图片上面，稍等片刻出现文字
** 如果图片找不到，显示alt的内容
* 这个属性在某些浏览器不能显示的
5、超链接标签
（1）什么是超链接：点击打开新的内容
（2）标签：显示在页面上的内容
* 代码 显示在页面上的内容
（3）属性
* href：链接到地址
* target：超链接的打开方式
** 在默认的情况下，打开方式在当前的页面打开
** target里面的值：_self,当前页面打开； _blank，在新标签页打开
6、表格标签
操作技巧：
首先数表格里面有多少行，数每行里面有多少个单元格
（1）什么是表格：对数据进行格式化，使数据显示更加清晰，结构分明
（2）标签
* 首先定义表格的范围：
** 属性
* border：设置表格线
* bordercolor：设置表格线的颜色
* cellspacing: 设置单元格之间的距离
* cellpadding: 设置文字和单元格之间的距离
* width: 设置表格的宽度
* height：设置表格的高度
* 在table标签里面表示行： <tr></tr> ** 属性 *** align：设置对齐方式，值 left center right* 在tr标签里面表示列： <td></td> ** 属性 *** align：设置某个单元格对齐方式* 在tr标签里面也可以表示单元格：<th></th> ** 实现居中和加粗的效果（3）合并单元格* 是在td标签上面进行的操作，使用两个属性** rowspan：跨行*** 代码 <th rowspan="4">人员信息3人</th>** colspan：跨列*** 代码 <td colspan="3">统计信息3人</td>（4）标题标签：<caption>标题内容</caption>7、表单标签
（1）什么是表单？把输入的数据提交到服务器上（存到服务器），这个过程称为表单
（2）使用表单标签实现数据提交到服务器上这个过程
（3）form 标签：如果写表单，首先定义表单的范围* 属性** action：提交的服务器的地址** method：表单的提交方式（有很多种，常见的有两种 get和post）*** 代码<form action="hello.html" method="get"></form>** get和post提交，在默认情况下，提交方式是get提交*** get提交方式会在地址栏携带数据，安全性很差*** post提交方式地址栏不会携带数据，安全性比较高，数据在请求体里面（讲到http协议时候详细说）（4）输入项：可以输入内容或者选择内容的地方** 要求1：输入项里面必须要有name属性** 要求2：在单选输入项和复选输入项以及下拉选择输入项里面都需要有属性value，设置的值* 输入项需要写到form标签里面* 大部分输入项是通过标签input进行封装操作的** <input type="输入项的类型"/>第一个：普通输入项 <input type="text"/>第二个：密码输入项 <input type="password"/>第三个：单选输入项 <input type="radio"/> ** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同 ** 设置默认选中，使用属性 checked="checked"第四个：复选输入项 <input type="checkbox"/> ** 要求：单选输入项里面必须有name属性，同时name的属性值必须要相同 ** 设置默认选中，使用属性 checked="checked"第五个：文件输入项，上传文件的。<input type="file"/>第六个：隐藏项，这个值不会显示在页面上，但是提交表单也可以提交到服务器上 <input type="hidden"/>第七个：普通按钮 <input type="button"/>*** 可以写value属性，设置输入项的默认值（5）下面的两个输入项不是使用input标签进行封装的第八个：下拉选择输入项* <select> <option>AAAA</option> <option>BBBB</option> <option>CCCC</option></select>* 使用属性 selected="selected" 默认选中第九个：文本域* <textarea cols="10" rows="5"></textarea>（6）提交按钮和其他的按钮* 提交按钮： <input type="submit"/> ** 属性 value：设置提交按钮显示的内容 ** 点击提交按钮：地址发生了变化 file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?sex=on&love=on&love=on ** 在输入项上面写name属性之后，提交表单 file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?username=wangwu&password=123456&sex=on&love=on&love=on&love=on&hid=bbbb&xueli=AAAA&des=test ** 在单选框、复选框和下拉选择框里面设置了value之后，提交表单 file:///C:/Users/asus/Desktop/javaweb/day01/代码/hello.html ?username=aaaa&password=123456&sex=nan&love=l&love=p&love=y&hid=bbbb&xueli=ccc&des=test* 重置按钮：<input type="reset"/> ** 属性 value：设置重置按钮显示的内容 ** 不是做清空表单输入项的操作，使表单输入项回到初始状态* 使用图片进行提交：<input type="image" src="图片路径"/>8、其他的标签的使用
（1）pre：原样输出
p：段落标签
s：删除线
u: 下划线
b：加粗
i：斜体
（2）div : 自动换行 span：在一行进行显示9、案例：注册页面
（1）如果单元格里面没有内容，使用占位符替代（使用空格 ）
（2）想要一个超链接没有效果，在href属性值写成#
CSS
1、css的简介
（1）什么是css？层叠样式表
* 样式表：有很多的属性和属性值，来设置内容样式
* 层叠：一层一层的，样式的优先级。
** 优先级: 最终以谁的样式为准
* 使用css目的是：把网页的内容和样式进行分离，利用代码的维护。* 想要使用css，不能单独使用，要和html结合使用* css和html的如何结合使用。2、css和html的结合方式
（1）css和html有四种结合方式
第一种：使用html标签里面的属性 style=”css的代码”
* 代码
第二种：使用html的标签 * <style type="text/css"> css的代码;</style>* 代码 <style type="text/css"> div { background-color:red; color:black; } </style>第三种：使用html标签实现 link，写在head里面 * 首先创建css文件，在css文件里面写css代码 * 在html中使用link标签引入css文件 * 代码 <link rel="stylesheet" type="text/css" href="1.css"/>第四种：使用html的style标签，在标签里面使用语句样式操作 * 首先创建css文件，在css文件里面写css代码 * 写style标签，在标签里面 @import url(css路径);3、css的选择器
（1）css优先级
* 在一般情况下，优先级是后加载的优先级高
（2）格式规范： 属性名称1:属性值1;属性名称2:属性值2;
（3）选择器：作用在哪个标签上（要对哪个标签里面的内容进行操作）
* css有三个基本选择
第一个：标签选择器
** 使用标签名称作为选择器
div {
background-color: red;//css代码 hejava中的规矩一样
}
第二个：class选择器 ** 每个html标签上面都有一个属性class，通过设置class属性的值 ** 代码 .haha { background-color:red; }第三个：id选择器 ** 每个html标签都有一个属性id，通过设置id的属性值 ** 代码 #hehe { background-color:green; }（4）选择器的优先级* style > id选择器 > class选择器 > 标签选择器4、css的扩展选择器
（1）关联选择器
* 设置嵌套标签的样式
** 代码
div p {
background-color:red;
}
（2）组合选择器* 设置不同的标签具有相同的样式* 代码div,p { background-color:green;}（3）伪元素选择器* 比如超链接为例，* 状态：原始状态、鼠标放上去的状态（悬停状态）、点击状态、点击之后的状态 :link :hover :active :visited 标签:link{} a:hover{} .....JavaScript
1、JavaScript的简介
（1）什么是JavaScript：是基于对象和事件驱动的语言，应用于客户端。
* 基于对象：
** java是面向对象，使用对象需要创建
** js里面提供好了一些对象，直接使用
* 事件驱动：每次滑动鼠标，变换一张图片* 客户端：指的是浏览器（2）JavaScript的特点（三个）第一个：交互性第二个：安全性 ** JavaScript不能访问本地硬盘里面的文件第三个：跨平台性 ** 在java里面跨平台，通过虚拟机实现的 ** JavaScript跨平台，只要在系统里面安装了支持JavaScript的浏览器，可以运行JavaScript（3）Java和JavaScript区别（雷锋和雷峰塔）第一，java是sun公司，现在是oracle；JavaScript是网景公司第二，java是面向对象的语言，javas是基于对象的语言第三，java跨平台需要依靠虚拟机实现，JavaScript只需要浏览器可以运行第四，JavaScript弱类型语言，java是强类型的语言 ** 比如在java里面定义一个变量 int a = 10; int b = "10";不正确 ** 在JavaScript里面定义变量都是使用一个关键字 var a = 10; var b = "10"; var c = true;第五，java运行先编译通过虚拟机运行，JavaScript直接使用浏览器运行（4）JavaScript由三部分组成第一部分：ECMAScript ** 又ECMA组织制定语句，语法第二部分：BOM ** broswer object model：浏览器对象模型第三部分：DOM ** document object model：文档对象模型2、js和html的结合方式
* 有两种结合方式
第一种：使用html中的标签
** 代码
alert("aaa");
** js的注释有两种 //单行注释 /* 多行注释 */第二种：使用html的标签，引入外部的js文件 <script type="text/javascript" src="js文件的路径"></script> * 使用第二种方式的时候有两点注意 注意一：不要在script标签里面写js代码了，不会执行 注意二：结束script标签 </script>，不要在标签内结束 * 代码 <script type="text/javascript" src="1.js"> //不要在script标签里面写js代码了，不会执行 alert("aaa"); </script>3、js的变量声明和数据类型
（1）在js里面如何声明变量，都是使用一个关键字var
* var a = 10;
（2）js的原始类型
* 在java里面有基本的数据类型？八个
* js的原始类型有五个
第一，string：字符串类型
* var a = “abc”;
第二，number：数字类型
* var b = 10;
第三，boolean：布尔类型 true false
* var c = true;
第四，null
* null是特殊的引用类型
* 表示对象引用为空
* 比如 var date = null;
第五，undefined
* 表示定义了一个变量，但是没有赋值
* var a;没有赋值
（3）typeof(变量的名称): 查看当前变量的类型 * alert(typeof(a));4、js的引用类型和类型转换
* 引用对象
** Object 对象：所有对象都由这个对象继承而来
** Boolean 对象：Boolean 原始类型的引用类型
** Number 对象： Number 原始类型的引用类型
* 类型转换** 转换成字符串** 转换成数字：parseInt() 和 parseFloat() ** 强制类型转换Boolean(value) - 把给定的值转换成 Boolean 型； Number(value) - 把给定的值转换成数字（可以是整数或浮点数）； String(value) - 把给定的值转换成字符串； 5、js的语句
* 在java里面语句：if 、 switch 、while do-while for
* java里面的switch语句，数据类型要求：是否支持string类型？在jdk1.7开始支持的
（1）if 语句* 代码//if语句var a = 10;if(a==10) { alert("10");} else { alert("other");} （2）switch语句* 在java里面 switch(a) { case 10: break; case 20: break; default: ....}* 代码var b = 5;switch(b) { case 4: alert("4"); break; case 5: alert("5"); break; default: alert("other");}（3）while循环语句* 代码//while语句var i = 4;while(i<6) { alert(i); i++;}（4）for循环语句* 代码//for语句for(var i=0;i<3;i++) { alert(i);}（5）使用document.write()向页面输出内容* 可以向页面输出变量 * 可以向页面直接输出html代码** document.write(i); document.write("<br/>");6、练习：向页面输出99乘法表
（1）document.write可以直接向页面输出html代码
（2）html中的属性和属性值之间可以使用双引号，也可以使用单引号
（3）代码
document.write(“
//循环9行
for(var i=1;i<=9;i++) {
document.write(““);
//循环每行的部分
for(var j=1;j<=i;j++) {
document.write(““);
}
//document.write(“
”);
document.write(““);
}
document.write(““);
//向页面输出内容
document.write(j+”*”+i+”=”+i*j);
document.write(““);
7、js的运算符
（1）算术运算符
+ - * /….
（2）赋值运算符+=含义： x+=y 相当于 x=x+y （3）比较运算符==：表示条件的判断，如果是=，表示赋值（4）逻辑运算符&& || !（5）js的运算符和java不同的内容第一个：js里面不区分整数和小数* 比如 var a = 123/1000*1000,如果在java里面结果是 0* js里面的结果：123第二个：字符串的相加和相减操作* 字符串相加是字符串的拼接操作，字符串相减是真正的相减运算，如果字符串不是数字提示NaN* //字符串的相加和相减var b = "10";document.write(b+1); //字符串拼接document.write("<hr/>");document.write(b-1); //真正相减的运算document.write("<hr/>");var c = "a";document.write(c-1); //NaN 第三个：boolean类型相加和相减的操作* 如果布尔类型值是true，把类型当成1运算；如果布尔类型值是false，把类型当成0运算//布尔类型相加和相减操作var flag = true;document.write(flag+1); // 2,当boolean类型是true时候，把类型当成1运算document.write("<hr/>");var flag1 = false;document.write(flag1+1); //1,当boolean类型是false时候，把类型当成0运算第四个：==和===区别* ==比较的是值* === 比较的是值和类型* 代码var mm = "10";if(mm==="10") { alert("10");} else { alert("other");}8、js的数组
* 什么是数组：定义一个变量只能存一个值，想要存多个值，可以使用数组进行存储
* js里面定义数组的方式
第一个：var arr1 = [];
第二个：var arr2 = [“10”,10,true]; //可以写任意的类型
第三种：var arr3 = new Array(3);
** 表示定义数组名称是arr3，数组的长度是3
第四种：var arr4 = new Array(4,5,6);
** 表示定义数组名称是arr4，数组里面的值4 5 6
* 数组里面的属性：查看数组的长度 length* 获取数组里面的值** 遍历数组得到里面的值//遍历for(var i=0;i<arr3.length;i++) { var a = arr3[i]; document.write(a); document.write("<br/>");}* 数组的长度：在js里面数组的长度可变的** 数组的长度是最大的下标+1，之间如果没有赋值直接默认是空字符串9、js的string对象
（1）字符串对象
* 创建字符串：var a = “abc”; var b = new String(“bb”);
（2）属性 length 字符串的长度
（3）方法
第一类：与html相关的方法（设置字符串的样式的方法）
= bold() 使用粗体显示字符串。
** document.write(a.bold());
= fontcolor() 使用指定的颜色来显示字符串。 ** document.write(a.fontcolor("red"));= fontsize() 使用指定的尺寸来显示字符串。 ** document.write(a.fontsize(7));= link() 将字符串显示为链接 ** document.write(a.link("04-练习99乘法表.html"));第二类：与java相似的方法（在java里面也有类似的方法）= charAt() 返回在指定位置的字符。 如果位置不存在字符，返回空字符串""** var str = "abcdefg";document.write(str.charAt(1));= concat() 连接字符串 ** document.write(str.concat(str1));= indexOf() 检索字符串，得到检索的字符的位置，如果没有找到返回-1 ** var str2 = "ABCD";document.write(str2.indexOf("R"));= split() 把字符串分割为字符串数组 ** var str3 = "a-b-c";var arr = str3.split("-");document.write("length: "+arr.length);= substr() 从起始索引号提取字符串中指定数目的字符。 = substring() 提取字符串中两个指定的索引号之间的字符 ** var str4 = "MARYJACKLUCY";document.write(str4.substr(2,3)); //RYJ, 第一个参数表示从哪个位置开始，第二个参数表示向后取几个位置的值document.write("<br/>");document.write(str4.substring(2,3)); //R ，第一个参数表示从哪个位置开始，第二个参数到哪个位置结束（不包含这个位置） [2,3)10、js的Array对象
（1）创建数组
（2）属性
* length 设置或返回数组中元素的数目
** //length属性
var arr1 = new Array(4,5,6);
document.write(arr1.length);
（3）方法
= concat()：连接数组
** var arr2 = [6,7,8];
document.write(arr1.concat(arr2));
= join()：把数组根据指定字符进行分割** var arr3 = new Array(3);arr3[0] = "mary";arr3[1] = "jack";arr3[2] = "lucy";document.write(arr3);document.write("<br/>");document.write(arr3.join("-"));= pop() 删除并返回数组的最后一个元素 ** var arr4 = ["aa","bb","cc"];//输出数组的原始的值document.write("old: "+arr4);//输出执行pop方法之后的返回值document.write("<br/>");document.write("return: "+arr4.pop());//输出执行pop方法之后新的数组内容document.write("<br/>");document.write("new: "+arr4);= push() 向数组的末尾添加元素，并返回新的长度 ** var arr5 = ["zhangsan","lisi","wangwu"]; //输出数组的原始的值document.write("old: "+arr5)document.write("<br/>");//输出执行push()方法之后的返回值document.write("return: "+arr5.push("lucy"));//输出执行push()方法之后新的数组内容document.write("<br/>");document.write("new: "+arr5);** 向数组里面使用push方法添加一个数组document.write("<hr/>");var arr6 = ["AAA","BBB"];var arr7 = ["CCC","DDD"];//输出数组arr6的原始的值document.write("old: "+arr6)//输出执行push()方法之后的返回值document.write("<br/>");document.write("return: "+arr6.push(arr7));//输出执行push()方法之后新的数组内容document.write("<br/>");document.write("new: "+arr6);//遍历数组for(var i=0;i<arr6.length;i++) { alert(arr6[i]);}= reverse() 颠倒数组中元素的顺序 ** var arr8 = ["zhaoliu","wanger","niuqi"];document.write(arr8);document.write("<br/>");document.write(arr8.reverse());11、js的Math对象
（1）进行数学运算，在Math对象里面的方法，直接使用Math.方法名称进行调用
（2）方法
= ceil(x) 对一个数进行上舍入。
= floor(x) 对一个数进行下舍入。 = round(x) 把一个数四舍五入为最接近的整数 = random() 返回 0 ~ 1 之间的随机数 ** 代码var a = 10.2;//ceil(x) 对一个数进行上舍入。document.write(Math.ceil(a)); //11document.write("<hr/>");//floor(x) 对一个数进行下舍入。document.write(Math.floor(a));document.write("<hr/>");//round(x) 把一个数四舍五入为最接近的整数document.write(Math.round(a));document.write("<hr/>");//random() 返回 0 ~ 1 之间的随机数 document.write(Math.random());//生成0-9之间的随机数 0.0 -- 0.9之间的值document.write("<hr/>");document.write(Math.floor(Math.random()*10));12、js的Date对象
（1）进行日期操作的对象
（2）使用Date对象，new Date();
（3）方法
= toLocaleString() 根据本地时间格式，把 Date 对象转换为字符串。
** //得到当前的时间
var date = new Date();
document.write(date.toLocaleString());
= 得到当前的年 getFullYear() 从 Date 对象以四位数字返回年份 ** document.write(date.getFullYear());= 得到当前的月 getMonth() 从 Date 对象返回月份 (0 ~ 11) ** document.write(date.getMonth()+1);= 得到当前的星期 getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6) ** 如果当前的星期是星期日，返回的是0 ** document.write(date.getDay())= 得到当前的日 getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31) = 得到当前的小时 getHours()= 得到当前的分 getMinutes()= 得到当前的秒 getSeconds()** document.write(date.getHours());document.write("<br/>");document.write(date.getMinutes());document.write("<br/>");document.write(date.getSeconds());= 得到毫秒数 getTime() 返回 1970 年 1 月 1 日至今的毫秒数13、js的RegRxp对象
（1）RegExp 对象表示正则表达式
（2）正则表达式：规定字符串出现的规范
（3）使用：new RegExp(“正则表达式”)
（4）方法：
* test() 检索字符串中指定的值。如果存在匹配的字符返回 true,如果不存在匹配的字符返回 false。
（5）代码
//创建正则表达式对象
var reg = new RegExp(“[a]”);
//创建一个字符串
var name = “lisi”;
//使用正则对象匹配字符串
var flag = reg.test(name);
document.write(flag);
14、js的bom对象
（1）script标签放置位置
* 建议放到后面
* html的解析是从上到下进行解析的，如果在head里面就获取输入项里面的值，因为还没有解析到
输入项，所以肯定得不到值。
（2）什么是bom:浏览器对象模型 第一个：navigator * 浏览器的信息 第二个：screen * 屏幕的信息 第三个: history * 访问地址的历史信息 第四个: location * 设置url * href 设置或返回完整的 URL 第五个: window（***） * window对象是窗口对象，是顶层对象 * 方法 setInterval("执行的js代码",毫秒数) 在指定的时间内，重复执行js代码 ** 有两个参数 *** 第一个参数要执行的js代码（js的方法），第二个参数是时间（毫秒数） ** 代码 setInterval("alert('setinterval');",3000); setTimeout("执行的js代码",毫秒数) 在指定的时间之后，执行js代码，执行一次 ** 有两个参数 *** 第一个参数要执行js代码（js的方法），第二个参数是时间（毫秒数） ** 代码 setTimeout("alert('settimeout');",3000); clearInterval(id) 取消由 setInterval() 设置的 timeout。 clearTimeout(id) 取消由setTimeout() 方法设置的 timeout。15、js的全局变量和局部变量
* 回顾：在java里面成员变量
（1）全局变量
* 在js里面，如果在一个script标签里面定义变量，在页面中的其他script标签里面都可以使用
（2）局部变量 * 在js的方法里面定义一个变量，这个变量只能在方法里面使用。 （3）浏览器里面自带的调试工具 * ie浏览器：点击键盘上f12，在页面下面出现一个条，点击控制台，出现调试的信息。 * 火狐浏览器：点击键盘上f12，在下面出现一个条，点击控制台，出现调试的信息。 ** 火狐浏览器里面需要安装firebug插件 * 谷歌浏览器：点击键盘上的f12,在下面出现一个条，点击console,出现调试的信息。16、js的全局函数
（1）不属于任何对象，可以使函数
（2）主要的函数
eval(): 把字符串当成js代码执行
** var str = “alert(‘123456’);”;
//alert(str);
eval(str);
isNaN() 检查某个值是否是数字 ** 如果是数字返回 false,如果不是一个数字返回 true。 parseInt() 解析一个字符串并返回一个整数 ** var str1 = "123"; alert(parseInt(str1)+1); encodeURI() 把字符串编码为 URI ** var str2 = "abc测试中文"; var encodestr2 = encodeURI(str2); document.write(str2); document.write("<br/>"); document.write(encodestr2); decodeURI() 解码某个编码的 URI ** var decodestr2 = decodeURI(encodestr2); JavaScript高级
1、js的函数
（1）在java里面定义方法
public void/int 方法名称(参数列表) {
方法体和返回值;
}
（2）在js里面定义函数有三种方式第一种：使用关键字 function 方法名称(参数列表) { 方法体和返回值 }* 注意一：参数列表，不需要写类型（var），直接写参数名称* 注意二：返回值，根据实际需要可以有也可以没有* 代码function test1() { alert("123456");}//test1();//实现两个数的相加function add1(a,b) { var sum = a+b; return sum;}alert(add1(2,3));第二种：匿名函数，使用关键字function(参数列表) { 方法体和返回值; } * 代码//第二种定义方式var test1 = function(a,b) { return a+b;}//调用函数alert(test1(3,4));第三种：动态函数（方法体和返回值，包含参数列表都是通过参数传递进来的）* 使用js里面的内置对象 new Function("参数列表","方法体和返回值")* 代码//第三种定义方式var param = "a,b";var method = "var sum;sum=a+b;return sum;";var test2 = new Function(param,method);//调用函数alert(test2(5,6));2、js的函数的重载
（1）在java里面存在重载，方法名称相同，参数列表不同
（2）js里面是否存在函数的重载？
第一，在js不存在重载
第二，可以使用js函数里面arguments数组模拟重载的效果
（3）模拟重载的效果
* 在js里面有一个数组arguments，保存传递进来的参数，使用这个数组模拟重载的效果
* 代码
//模拟重载的效果
//在js函数里面有一个数组 arguments，保存传递进来的参数的
function add1() {
//alert(arguments.length);
//遍历数组
/*for(var i=0;i
- 前端知识点
- 前端知识点
- 前端知识点
- 前端知识点
- 【前端】前端小知识点
- 前端小知识点总结
- 前端基础知识点
- web前端知识点整理
- 前端工程师必需知识点
- 前端面试知识点
- 前端知识点大全
- 前端知识点笔记
- 前端开发知识点
- 前端知识点 总结
- 前端开发知识点总结
- 前端开发知识点
- 前端最新知识点小记
- Easyui前端知识点收集
- java 猴子吃桃问题
- 访问量突破200万次
- 记录各大牛个人主页，紧密跟踪其学术动态
- 【Android多媒体（重采样与混频）】从录音流程分析AudioResampler
- 双主+haproxy手工切换的一个注意点
- 前端知识点
- 多行转多列并且分组合并列
- java.lang.OutOfMemoryError: PermGen space及其解决方法
- 网络监控软件Nagios， Nagios是一款开源的免费网络监视工具，能有效监控Windows、Linux和Unix的主机状态，交换机路由器等网络设备，打印机等。在系统或服务状态异常时发出邮件或短信报
- linux内存释放和使用限制
- JNI 比hallo world更深一步的hallo JNI
- 远程桌面Windows server 2008 相同账号登录，显示不同内容
- C语言--水仙花数
- The matching wildcard is strict, but no declaration can be found for element 'aop:aspectj’
