Java WEB（一）前端部分（HTML、CSS、js、jQuery）
Java WEB（一）前端部分（HTML、CSS、js、jQuery）
- Java WEB
- HTML
- CSS
- 基本选择器
- 复合选择器
- 声明
- JavaScript
- js、css-->html
- jQuery
- 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">bottoma> 表格
<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/>
<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>
<html><head><meta charset="utf-8"><title>title>head><body><tr><td colspan="3">学生成绩td> tr> <tr><td rowspan="2">张三td> <td>语文td> <td>98td> tr> <tr><td>数学td> <td>91td> tr> <tr><td rowspan="2">李四td> <td>语文td> <td>88td> tr> <tr><td>数学td> <td>91td> 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 标签
<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 Worlddiv>
- 内部样式，在head中添加，将样式写入；
<html><head><meta charset="utf-8"><title>title><style>div{color:red;font-size:150px}style>head><body><div> Hello Worlddiv>body>
html>
- 外部样式，创建一个CSS文件，将样式写入；
<html><head><meta charset="utd-8"><title>title><link rel="Stylesheet" href="css.css">head><body><div>Hello Worlddiv>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(){//domvar obj=document.getElejmentById("h1");obj.innerText="666";//bomwindow.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");
}
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
