Java前端
1、HTML基础
1.三个常用标签：<h1>标题</h1> <p>段落</p> <hr>横线（开始标签 元素内容 结束标签）
2.元素概念：从开始标签到结束标签的所有代码。
3.元素分类：（1）块元素：换行，自动与其他元素分离成两行，可以作为容器在内部添加其他元素。
（2）内联元素：不换行，会和其他元素并联排列。
4.元素属性的语法：<标签 属性1=参数1>
5.元素属性的作用：为元素提供更多的信息，大多数元素都可以拥有属性。
6.二个常用属性：（1）align属性作用：指定内容的对齐方式。
（2）bgcolor属性作用：添加背景颜色。
7.文本元素：将一段文本设置成相匹配的结构和含义。
8.文本元素：b元素（加粗文字）、br元素（强制换行）、i元素（文字倾斜）、span元素（一般文本）...
9.超链接：a标签:<a href=""></a>
(1)target属性的四个值：
1)_self:当前位置<a href="http://www.baidu.com"target="_self">百度</a>
2)_blank:新窗口<a href="http://www.baidu.com"target="_blank">百度</a>
（_top(最顶层框架），_parent（父框架），暂不讲解，后边再说）
(2)id属性：通用属性，可以理解为元素的身份证；name属性：可以理解为元素的名字
<a href="#1">锚点1</a>
<a href="#2">锚点2</a>
<a id="1">锚点1
<a id="2">锚点2
10.img元素：
(1)src属性:必要属性，制定图片来源的路径；
(2)alt属性:当图片无法显示时的替代文字；
(3)width和height属性：指定图片的宽度和高度；单位是像素或百分比；
(4)title属性：属性值为字符串，效果是当鼠标移到该位置时显示内容
<img src="计算机.jpg"alt="计算机"width="100"height="150"title="1111">
11.列表：
(1)无序列表的基本格式：ul标签定义列表，li标签定义列表项目；
<ul type="disc">
<li>q</li>
<li>q</li>
<li>q</li>
</ul>
(2)无序列表的type属性：1.disc(默认值);2.circle;3.square
(3)有序列表的基本格式：ol标签定义列表，li标签定义列表项目；
(4)有序列表的type属性：1.整数(默认值);2.大小写字母;3.大小写罗马字母
(5)有序列表的start属性：定义列表的开始序号，比如第一项不是数字1，而是10开始
(6)有序列表的value属性：定义某个单个列表项的序号；
(7)自定义列表的基本格式：dl标签定义列表，dt标签定义列表项目；dd定义列表内容；
12.表格元素：
(1)表格构成三个基本元素：
1）table:表格的范围，外框；用来定义表格，表格其他元素包含在table标签里面
<table border="1">
2）tr:表格的行；
3）td:表格的单元格；
(2)th元素：为表格添加标题行
th元素用来定义表格的标题单元格，他是tr元素的子元素，必须放在tr标签里边；tr元素的内容会自动居中对齐并加粗文字；
(3)colspan元素：横向合并单元格
属性值为正整数，表示该单元格横向合并的列数，语法<td colspan="6">q</td>
(4)rowspan元素：纵向合并单元格
属性值为正整数，表示该单元格纵向合并的列数，语法<td rowspan="6">q</td>
(5)caption元素：给表格添加标题
用来制定表格的标题或者说明；是table的子元素，必须放在table中使用
(6)thead\tfoot\tbaody元素：
thead元素：表格的表头；tfoot元素：表格的页脚；tbaody：表格的主体；表格规范的写法应该包含着三部分内容<thead style="background: red">
注：这三个主要结合CSS、javaScript来使用
(7)colgroup元素：
1)colgroup元素用来组合列，他的span属性可以设置组合列的数目；他可以包含一个子元素col；
2)colgroup元素为table的子元素，必须在caption之后，thead之前。
<colgroup span="2" style="width: 200px" ></colgroup>
(8)col元素：
1)col元素用来设定列的属性，他也可以使用span属性；
2)col元素一般作为colgroup元素的子元素配合使用。
<col span="2" style="background: red">
13.样式基础：
引入样式的三种方法：
1)外部样式表：通过link元素引入外部样式表；<link rel="stylesheet" type="text/css" href="">(head里面)
2)内部样式表：<style type="text/css">p{color: red}</style> (head里面)
3)内联样式表：<p type="color:red"></p>
14.内联框架：
(1)iframe元素用来在文档中添加一个内联框架
(2)iframe为body元素的资源税，必须放置在body中使用
(3)主要属性：src;name;/id;width;height
15.table布局：
(1)去除网页白边：<body style="margin: 0">
(2)table大小：width:100%;height:708px
(3)创建行内框架：<iframe src=""name="m"></iframe>
(超链接里面target="m",则显示于行内框架)
18.div元素和布局：div元素是通用的块元素，内部可以包含其他各种元素包括其他div元素；可以通过CSS设置样式来完成复杂的页面布局。
19.表单：
（1）input元素：
1）type属性：指定输入内容的类型，默认为text：单行文本框
2）name属性：输入内容的识别名称，传递参数时候的参数名称
3）value属性：默认值
4）maxlength：输入的最大字数
5）readonly属性：只读属性，设置内容不可变更，提交时会一起发送至服务器
6）disabled属性：设置为不可用（不可操作）
7）required属性：设置该内容为必须填写项，否则无法提交
8）placeholder属性：设置默认值，当文本框获得焦点时被清空
9）autocomplet属性：属性值为on/off，定义是否开启浏览器自动记忆功能
10）autofocus属性：自动获得焦点
11）accesskey属性：指定快捷键windows中，按Alt+"快捷键"，便会获得焦点
12）tabindex属性：指定按Tab键时，项目间的移动顺序
（2）type属性的属性值：
1）默认为text
2）password：密码输入
3）submit：提交按钮，点击将数据发送至服务器
4）reset：重置按钮
5）button：普通按钮
6）imge：图片式提交按钮
7）hidden：隐藏字段（1.该内容不会显示页面上2.一般为网页设计者设置的变量数据，提交时，隐藏内容会提交到服务器）
8）email：电子邮箱（对输入内容进行验证）
9）url：网址（对输入内容进行验证）
10）tel：电话号码（不会对输入内容进行验证）
11）number：范围输入（可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值）
12）range：活动条（可以配合input的max/min/step/value规定允许输入的最大值/最小值/步长/默认值）
13）时间类：time/datetime-local/date/month/week
14)color：颜色的选择输入框
15）search：搜索框（用来提供用户输入搜索的关键词）
16）file：文件选取输入框（可通过accept属性规定选取文件的类型，比如图片/视频2.可通过multipe属性设定一次允许选择多个文件）
17）checkbox：复选框（通过checked属性可将某个选项设为默认的选取状态，再次单击取消选择）
18）radio：单选框（1.通过checked属性可将某个选项设为默认的选取状态，再次单击取消选择2.必须将同一组单选项设置一个相同的name属性值）
（3）select元素：
1）建立一个下拉菜单选项列表
2）option元素建立下拉菜单选项列表的一个菜单项
3）optgroup元素用来对option元素进行组合分组
4）multipe属性用来定义是否可以多选
5）可以添加disabled属性（禁用）和autofocus属性（自动聚焦）
（4）table元素：
1）用来为input元素定义标记，建立一个与之相关联的标签
2）for属性，让标签与指定的input元素建立关联
（5）table属性：
1）在option元素中可以设定比标签内容更优先的选项
2）optgroup的分组名称
（6）textarea元素：
1）建立多行输入文本框
2）元素标签中的内容将以文本框默认值的形式呈现
3）rows属性：设置多行文本的行数（高度）
4）cols属性：设置多行文本的每行显示的字数（宽度）
（7）button元素：
1）建立一个按钮，功能上来说，与input元素建立的按钮相同
2）双标签，其内部可以配置图片与文字，进行更复杂的样式设计
3）type属性：submit/reset/button与input元素设置的按钮含义相同
4）name/value/disable/autofocus属性，与input的用法相同
5）form属性：设定按钮隶属于哪一个或多个表单
6）formmethod属性：设定表单的提交方式，将覆盖原来的提交方式
7）formnovalidate属性：设定表单将会覆盖原来的novalidate属性（数据提交时不进行验证）
8）formaction属性：指定表单数据发送对象，将覆盖原来的action属性设定
9）formenctype属性：指定表单的数据发送类型，将覆盖原本的enctype属性设定
10）formtarget属性：将覆盖原本的target属性设定
2、CSS基础
1.插入样式的三种方法：
（1）内联样式表（行内）
（2）内部样式表（style中）
（3）外部样式表：
1）创建一个外部样式表
2）在head中使用link元素插入样式表
2.CSS语法：
（1）单一元素的多个属性之间用分号隔开；若只有一个可以省略
（2）多个元素之间用逗号隔开
（3）如果值为若干单词，则要给值加引号；除了这种情况外其他时候不可以加引号
（4）CSS代码的注释
（5）层叠、继承、冲突：外观样式可以继承，而布局有关的样式不可以继承
（6）可以在同一个HTML文档内部引用多个外部样式表
3.选择器：
（1）通用选择器：“*”
（2）元素选择器
（3）id选择器：前面有一个#号
（4）类选择器：前面加符号.
1）给一个元素加上多个类名
2）指定某一特点的类
（5）属性选择器：
1）E[att]：选择具有att属性的E元素。需要选择有某个属性的元素，而不论属性值是什么，可以使用简单属性选择器。可以根据多个属性进行选择，只需要将属性选择器连接在一起即可。
2）E[att="val"]：选择具有att属性且属性值等于val的E元素。进一步缩小选择范围。
3）E[att~="val"]：选择具有att属性且属性值有多个，其中一个的值等于val的E元素。
4）E[att|="val"]：选择具有att属性且属性值为以val开头并用连接符"-"分隔的字符串的E元素。
5）E[att^="val"]：选择具有att属性且属性值为以val开头的字符串的E元素。
6）E[att$="val"]：选择具有att属性且属性值为以val结尾的字符串的E元素。
7）E[att*="val"]：选择具有att属性且属性值为包含val的字符串的E元素。
（6）关系型选择器：
1）后代选择器（包含选择器）ul li{} :可以选择作为某元素后代的元素。
2）子元素选择器ul>li：只能选择作为某元素子元素的元素，缩小了选择范围。
3）相邻选择符：E+F：选择紧贴在E元素之后F元素。
4）兄弟选择器E~F：选择E元素所有兄弟元素F。
（7）伪元素选择器：
1）E:first-letter/E::first-letter设置元素内的第一个字符的样式。
2）E:first-line/E::first-line设置元素内的第一个字符的样式。
3）E:before/E::before在每个E元素的内容之前插入内容。用来和content属性一起用。
4）E:after/E::after在每个E元素的内容之后插入内容。用来和content属性一起用。
5）E::selection设置对象被选择时的颜色。
4.盒子模型：内容(content)、内边距(padding)、边框(border)、外边距(margin)
2、js
1.简介：
（1）基于对象和事件驱动的脚本语言，作用在客户端（浏览器）上。
（2）特点：交互性好、安全性（不可以直接访问本地硬盘）、跨平台性（浏览器就可以解析）。
（3）js和java没有关系
（4）js和java的不同点：
1）js基于对象，java面向对象。
2）js解析就可以执行，java先编译，再执行。
3）js是弱类型的语言，java是强类型的语言。
（5）js语言的组成：
1）ECMAScript标准 定义语法
2）BOM（浏览器对象模型） 代表整个浏览器（对象和API）
3）DOM（文件对象模型） 代表整个文档
2.js和HTML结合到一起使用：
（1）HTML提供一个标签：<script type="text/javascript" >js代码</script>
（2）引入外部文件的方式：<script type="text/javascript" src="引入js文件的地址"></script>
3.语法：
（1）关键字：break、else、new、var等等
（2）标识符：和java一样
（3）注释：和java一样
（4）声明变量：使用一个关键字：var
（5）数据类型：Number（数字类型，没有整数和小数之分）
String（字符串，单引号和双引号都是）
Boolean（和java一样）
Null（空，一般给引用赋值）
Undefined（未定义，声明变量，没有赋值）
（6）js运算符：和java一样（==：判断值 ===：判断值和判断类型）
（7）js的语句：一般和java一样
1）if（）里面1 2 3 10都表示true，0或者null表示false
2）普通for循环，声明变量使用var关键字
3）加强for循环：for（变量 in 对象）
（8）js定义方法：
1）使用关键字function声明方法
2）方式：
1.function 方法名称（参数列表（没有var的关键字）x,y）{
方法体
return 返回值；（有则写，无省略）
}
2.var 方法名称=function （参数列表（没有var的关键字）x,y）{
方法体
return 返回值；（有则写，无省略）
}
3）js没有重载的方式
4.定义对象
（1）
1）定义js对象：var obj=new Object();
2）指定属性：obj.name="张三"
3）定义方法：obj.show=function(){方法体}
（2）
1）定义对象：function creatObj(){
//创建obj对象
var obj=new Object();
//设置属性
obj.name="张三";
obj.age=1;
//返回对象
return obj;
}
2）获取obj对象：var obj=creatObj()；
（3）
定义person对象：function Person(){
//使用关键字this（和java一样）
this.name="张三";
this.age=1;
//返回Person对象
return this;
}
//获取person对象
var a=new Person();
5.String对象：
（1）定义字符串：var str="hello";
（2）调用对象的方法：
1）alert（str.length）;
2）粗体显示str字符串：alert（str.bold()）;
3）在页面上打印字符串：document.write(str.bold()）;
4）和java中类似的方法：var s=str.charAt(1);
5）截取字符串：var s2=str.substring(1,3); （包头不包尾）var s3=str.substr(1,3);（3是长度）
6.Array对象：
（1）数组定义：var arrs=["a","b",10]; （长度不固定）
（2）数组对象方式创建：var arrs=new Array("a","b",10);
（3）调用数组中提供的方法：var str=arrs.join("-");
7.Date对象：
（1）创建日期对象，获取到当前日期时间：var date=new Date();
（2）把date转换日期格式：var s=date.toLocaleString();var s=date.toLocaleDateString();
（3）获取到年、月、日数据：var s=date.getFullYear();
（4）获取到毫秒数：var s=date.getTime();
（5）解析字符串获取到毫秒数：var s=Date.parse("2018/11/11");
创建成日期对象：var date2=new Date(m);
转换成数据格式：var s=date2.toLocaleDateString();document.write(s）;
8.Math对象：
（1）上舍入：var num=5.29；var m=Math.ceil(num);
（2）下舍入：var m=Math.floor(num);
（3）获取随机数：var m=Math.random();
9.RegExp对象：
(1）正则表达式对象：var reg=new RegExp("[0-9]{2}");
(2）定义表达式：var reg=/^[0-9]{2}$/
(3)调用方法进行判断：var f=reg.test("12");
10.全局函数:
var str="alert('hello')";
eval(str); //执行字符串的js代码
11.BOM对象（浏览器对象模型）:
(1)History对象：
1）执行下一个地址：history.forward();
2）执行上一个地址：history.back();
3）去上(-1)或下(1)地址：history.go(1);
(2)Location对象：
1）获取当前地址栏的值：alert(location.href);
2）设置当前地址栏地址：location.href="htttp:www.baidu.com";
(3)Window对象：
1）指当前整个浏览器
2）询问框：window.confirm("确定删除?") (window可省略，和alert一样）
3）定时器：setTimeout("show1()",2000); （执行一次）
timeid= setInterval("show1()",2000); （无限执行）
清除定时器：clearTimeout(timeid)；clearInterval(timeid)；
12.DOM编程:
(1)document对象：
1）通过id来获取元素对象：var input1=document.getElementById("name");
alert(input1.value);
2）通过name属性来获取一些标签对象：var inputs=document.getElementsByName("uname");
3）通过标签的名称获取到标签对象：var inputs=document.getElementByTagName("input");
案例：全选/全不选：hobby.checked=true/false;
(2)添加子节点：
1）创建li节点：var li=document.createElement("li");
2）创建广州文本的节点（字符串）：var g=document.createTextNode("广州");
3）把广州文本节点添加到li节点下：li.appendChild(g);
4）再把li节点添加到ul节点下：document.getElementById("t").appendChild(li);
(3)删除子节点：获取当前节点，再获取父节点，再删除：obj.parentNode.removeChild(obj);
(4)innerHTML属性：
1）给div中添加hello，先获取div：div.innerHTML="<font color='green'>hello</font>";
2）获取焦点：onfocus ="show2()" 失去焦点：onblur="show3()"
13.常用事件:
(1)改变事件：onchange="show()"
(2)双击事件：ondblclick="show()"
(3)页面或图像被完成加载：onload=function(){方法体（页面加载完再执行）}
(4)提交按钮被点击：onsubmit="return show()" （show()返回ture,正常提交，返回false，不提交）
4157
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
