Java WEB（一）前端部分（HTML、CSS、js、jQuery）
Java WEB
- HTML：搭建网页的最基本元素；
- CSS：对网页进行美化
- JavaScript（js）：让静态网页变成动态，包括网页特效，以及与后台的交互；
- jQuery：是对js的一个封装；
HTML
- 超文本标记语言，浏览器能够直接运行的程序；
- HTML的语法很简单，就是使用一些tag来组装程序，文件后缀是html、htm；
- 可以使用HBuilder进行编写，https://www.dcloud.io/hbuilderx.html
部分常用HTML标签
<html></html> 整个代码的根节点
<head></head> 用来存放引用资源（css、js)
<body></body> 是代码的主体内容
正文
<h1></h1>---<h6></h6>
段落<p><p/>
换行<br/>
注释<!-- 内容 -->
横线分割 <hr/>
加粗<strong></strong>
常用的文本格式
<b></b> 加粗
<i></i> 斜体
<em></em> 斜体
<del></del> 字体横线
<ins></ins> 下划线
<sub></sub> 下浮
<sup></sup> 上浮
特殊符号
空格
小于 <
大于 >
版权 ©
注册商标 ®
乘号 ×
除号 ÷
图片
<img/>
src 指定图片路径
title 鼠标悬停文字
width 宽度
height高度
超链接 <a></a>
属性
href
target：_self、_blank
title
name
使用超链接实现锚点
<a href="#bottom" title="这是一个超链接" name="test">百度</a>
<a name="bottom">bottom</a>
表格
<table>
<tr>
<td></td>
</tr>
</table>
属性
cellspacing：列元素向外扩展的距离
cellpadding：列元素向内扩展的距离
align：水平方向的位置
valign：垂直方向的位置
td 属性：colspan、rowspan 合并单元格
frame框架，将不同的html页面整合到一起；
<frameset>必须删除<body></body>
<frame src="a.html">
<frame src="b.html">
</frameset>
<iframe/>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<frameset rows="30%,70%" cols="50%,50%">
<frame src="a.html">
<frame src="b.html">
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<table border="1" width=""600 height="300">
<tr>
<td colspan="3">学生成绩</td>
</tr>
<tr>
<td rowspan="2">张三</td>
<td>语文</td>
<td>98</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
<tr>
<td rowspan="2">李四</td>
<td>语文</td>
<td>88</td>
</tr>
<tr>
<td>数学</td>
<td>91</td>
</tr>
</table>
<iframe src="a.html" width="100%" height="300"></iframe>
</body>
</html>
表单
<form></form>
action 要跳转的 url
method 请求类型 get（地址栏显示参数信息）/post（地址栏 不显示参数信息）
表单中需要添加标签
input 标签
type text 文本输入框
password 密码输入框（看不到输入的内容）
radio 单选框
checkbox 复选框
reset 表单重置
select 标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="http://www.baidu.com" method="post">
<input type="text" name="id" /><br/>
<input type="password" name="username" /><br/>
<input type="radio" name="sex"/>男
<input type="radio" name="sex" checked/>女<br/>
<input type="checkbox"/>旅游
<input type="checkbox"/>看电影
<input type="checkbox"/>听音乐<br/>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select><br/>
<textarea rows="30" cols="60"> </textarea>
<input type="reset" value="重置"/>
<input type="submit" value="登录"/>
</form>
</body>
</html>
CSS
- 层叠样式表
- 用来美化HTML元素的，字体大小、字体颜色、背景颜色、宽度、高度、边框、圆角等等；
- 使用方法：
- 行内样式，直接添加在HTML标签内部的样式；
<div style="color:yellow;font-size:200px">Hello World</div>
- 内部样式，在head中添加，将样式写入；
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
color:red;
font-size:150px
}
</style>
</head>
<body>
<div> Hello World</div>
</body>
</html>
- 外部样式，创建一个CSS文件，将样式写入；
<html>
<head>
<meta charset="utd-8">
<title></title>
<link rel="Stylesheet" href="css.css">
</head>
<body>
<div>Hello World</div>
</body>
</html>
div{
color:green;
fo9nt-size:100px
}
- 基本语法：
由两部分组成：选择器+声明（多条）
selector{declaration1;declaration2;…}
声明和声明之间使用分号隔开；
声明又由一个属性和一个指组成；
color:yellow
div{
color:yellow;
font-size:124px
}
基本选择器
- 标签选择器
div{
color:yellow;
font-size:100px
}
- 类选择器
.c1{
color:green;
font-size:100px
}
3.ID选择器
#c1{
color:red;
font-size:100px
}
- 属性选择器
dic[name='c1]{
color:black;
font-size:100px
}
- 优先级：直接拼接、没有空格、没有符号
复合选择器
- 并集选择器：同时选中多个元素，用分割；
h1,h2{
color:green;
}
- 交集选择器：直接拼接，没有空格，没有符号
h1#i1{
color:red;
}
- 后代选择器：父子选择器中使用空格隔开
div h1{
color:black;
}
声明
文字属性：
font-size：字体大小
font-family：字体样式
font-style：normal、italic
text-indent：文本缩进
text-align：水平对齐
word-spacing：单词间隔
letter-spacing：字母间隔
text-transform：大小写转换
uppercase、lowercase
边框属性：
div{
margin-top: 10px;
width: 300px;
height: 300px;
background-color: yellow;
/* border-width: 10px;
border-style: solid;
border-color: red; */
border: 10px solid red;
border-radius: 50px;
}
页面背景样式：
background-color 背景色
background-image 背景图片
background-repeat 图片重复
background-position 移动图片 水平方向+垂直方向
JavaScript
- 简称js，是一种脚本语言，不需要编译，可以直接运行；
- Java–class–执行；
- js–浏览器读取一行一行执行；
- 基于对象和事件驱动的语言，应用于客户端（浏览器）；
- 基于对象：js中的所有对象已经全部创建了，开发者直接使用即可，不需要创建；
- 事件驱动：js方法的调用是基于用户动作的，点击某个按钮，自动触发方法的调用；
- js的组成：
- ECMAScript：欧洲计算机协会，指定js语法的；
- BOM：浏览器对象模型，browser、object model将浏览器中的组建看成是一个个对象；
- DOM：文档对象模型，document、object model将HTML代码中的各个标签看成是一个个对象；
- 使用方法：
- 嵌入HTML元素中
<div style="weith:300px;height:300px;background-color:#FFFF00;" onclick="alert(123)"></div>
- head中添加script代码块
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function text(){
alert(123)
}
</script>
</head>
<body>
<div style="width: 300px;height: 300px;background-color: #FFFF00;" onclick="test()"></div>
</body>
</html>
- 将js代码分离出来
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js.js" charset="utf-8">
</head>
<body>
<div style="weith:300px;height:3--px;background-color:#FFFF00;" onclick="text()"></div>
</body>
</html>
js、css–>html
js的数据类型，String、number、boolean、null、undefined、NaN（not a number）
function text(){
var a=1;
if(a<10){
alert(0);
}
switch(a){
case 1:
alert(1);
break;
}
for(var i=0;i<10;i++){
alert(i);
}
var b=1;
do{
alert(b);
b++;
}while(b<5)
}
js的语法和Java很类似，但是灵活性要比Java更高
function text(){
//dom
var obj=document.getElejmentById("h1");
obj.innerText="666";
//bom
window.location.href="http://www,baidu.com";
}
jQuery
- jQuery是js的一个类库，对js进行了封装可以更方便的进行js开发；
- 引入jQuary
<script src="jQuery-1.8.3.min.js"></sscript>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jQuery-1.8.3.min.js"></script>
<script src="js.js"></script>
</head>
<body>
<table width="300px;" height="300px;" border="1">
<tr>
<td>商品</td>
<td>价格</td>
</tr>
<tr>
<td>电脑</td>
<td>6000</td>
</tr>
<tr>
<td>电视</td>
<td>3000</td>
</tr>
<tr>
<td>冰箱</td>
<td>5000</td>
</tr>
<tr>
<td>空调</td>
<td>6000</td>
</tr>
<tr>
<td>洗衣机</td>
<td>3000</td>
</tr>
<tr>
<td>电视柜</td>
<td>1000</td>
</tr>
<tr>
<td>电脑</td>
<td>6000</td>
</tr>
<tr>
<td>电视</td>
<td>3000</td>
</tr>
<tr>
<td>冰箱</td>
<td>5000</td>
</tr>
<tr>
<td>空调</td>
<td>6000</td>
</tr>
<tr>
<td>洗衣机</td>
<td>3000</td>
</tr>
<tr>
<td>电视柜</td>
<td>1000</td>
</tr>
<tr>
<td>电脑</td>
<td>6000</td>
</tr>
<tr>
<td>电视</td>
<td>3000</td>
</tr>
<tr>
<td>冰箱</td>
<td>5000</td>
</tr>
<tr>
<td>空调</td>
<td>6000</td>
</tr>
<tr>
<td>洗衣机</td>
<td>3000</td>
</tr>
<tr>
<td>电视柜</td>
<td>1000</td>
</tr>
<tr>
<td>电脑</td>
<td>6000</td>
</tr>
<tr>
<td>电视</td>
<td>3000</td>
</tr>
<tr>
<td>冰箱</td>
<td>5000</td>
</tr>
<tr>
<td>空调</td>
<td>6000</td>
</tr>
<tr>
<td>洗衣机</td>
<td>3000</td>
</tr>
<tr>
<td>电视柜</td>
<td>1000</td>
</tr>
</table>
</body>
</html>
$(function(){
$("tr:even").not(":first").css("background-color","red");
});
jQuery基本语法
- $(selector).action();
- $()工厂函数，将dom对象转换为jQuery对象；
- selection选择器，类似于css的各种选项；
- action()业务用法，要执行的操作；
jQuery 常用的方法：
click() 单击
dblclick() 双击
focus() 获取焦点（光标）
blur() 失去焦点（光标）
hover() 鼠标悬停
remove() 移除节点
hide() 隐藏节点
show() 显示节点
empty() 清空
width() 设置宽度
height() 设置高度
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-1.8.3.min.js"> </script>
<script src="js.js"></script>
</head>
<body>
<form>
<input type="text" id="name" />
<button onclick="test()">提交 </button>
</form>
<div style="width: 300px;height: 300px;background-color: #FFFF00;" onclick="test()">
<h1>123</h1>
<h2>123</h2>
</div>
<h1 id="h1">hhh</h1>
<table width="300px;" height="300px;" border="1">
<tr>
<td>商品</td>
<td>价格</td>
</tr>
<tr>
<td>电脑</td>
<td>6000</td>
</tr>
<tr>
<td>电视</td>
<td>3000</td>
</tr>
<tr>
<td>冰箱</td>
<td>5000</td>
</tr>
<tr>
<td>空调</td>
<td>6000</td>
</tr>
<tr>
<td>洗衣机</td>
<td>3000</td>
</tr>
<tr>
<td>电视柜</td>
<td>1000</td>
</tr>
<tr>
<td>电脑</td>
<td>6000</td>
</tr>
<tr>
<td>电视</td>
<td>3000</td>
</tr>
<tr>
<td>冰箱</td>
<td>5000</td>
</tr>
<tr>
<td>空调</td>
<td>6000</td>
</tr>
<tr>
<td>洗衣机</td>
<td>3000</td>
</tr>
<tr>
<td>电视柜</td>
<td>1000</td>
</tr>
<tr>
<td>电脑</td>
<td>6000</td>
</tr>
<tr>
<td>电视</td>
<td>3000</td>
</tr>
<tr>
<td>冰箱</td>
<td>5000</td>
</tr>
<tr>
<td>空调</td>
<td>6000</td>
</tr>
<tr>
<td>洗衣机</td>
<td>3000</td>
</tr>
<tr>
<td>电视柜</td>
<td>1000</td>
</tr>
<tr>
<td>电脑</td>
<td>6000</td>
</tr>
<tr>
<td>电视</td>
<td>3000</td>
</tr>
<tr>
<td>冰箱</td>
<td>5000</td>
</tr>
<tr>
<td>空调</td>
<td>6000</td>
</tr>
<tr>
<td>洗衣机</td>
<td>3000</td>
</tr>
<tr>
<td>电视柜</td>
<td>1000</td>
</tr>
</table>
</body>
</html>
function test(){
$("div").width("600px");
$("div").height("900px");
}
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
