JavaWeb前端
HTML介绍
超文本标记语言，里面定义了非常多的标签，语言的目的是用来描述网页，HTML只是一个标记语言，并不是类似于Java一类的编程语言，所以HTML中没有任何的逻辑性，所有的标签都有自己的功能，而我们需要做的就是使用这些标签来描述一个网页
标签主要分为三部分
1：HTML标签
相当于树的根，其余所有标签都需要在这个标签之内
2：head头部
我们网站的编码格式，网站的名称，被搜索引擎搜索的关键字，引入的外部内容等一切东西
3：body身体
一般情况，我们所有想显示在浏览器的内容都需要写在body中
总结
HTML中最主要的标签，主要分为单标签和双标签，一般情况下标签一定要有/闭合标签，哪怕单标签也要闭合
标签主要分为三大类
1：行级标签：
可以与其它标签在同一行显示，不会自动切换，不能设置宽高
2：块级标签：
不能与其它标签在同一行显示，可以自动换行，可以设置宽高
3：行内块标签
区分标签的两个主要标准
1：是否自动换行
2：是否能设置宽高
总结
都能做到就是块级，都不能做到就是行级，如果只能做到一个说明它是行内块标签
基本块状标签
标题标签
标签内的字体会加粗，加黑
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
段落标签（换行标签）
里面的字体是普通字
<p>一二三四五</p>
<p>上山打老虎上山打老虎上山打老虎上山打老虎上山打老虎上<br>山打老虎上山打 老虎上山打老虎上山打老虎上山打老虎上山打老虎上山打老虎上山打老虎</p>
折行标签
会显示一条横线
<hr>
布局块状标签
列表
有序列表
<ol>
<li>苹果</li>
<li>华为</li>
<li>小米</li>
</ol>
无序列表
<ul>
<li>苹果</li>
<li>华为</li>
<li>小米</li>
</ul>
列表属性
字标签会继承父标签的一些css样式，例如：li标签可以继承ul的样式，如果父子标签样式出现冲突默认会使用字标签自己的样式
li{
/* list-style: disc;/* 黑点默认 */ */
/* list-style: circle;/* 空心圆形 */ */
/* list-style: square;实心方块风格 */
/* list-style: none; /* 无风格 */ */
list-style: decimal;/* 数字风格，属于ol的默认风格 */
font-size: 25px;
color: blue;
text-align: left;
list-style: url(img/3975d9ac68ae57989d418683e1282049.png);
}
描述标签
dd的内容是用来描述dt标题的，所以dd的内容会较为靠后
<dl>
<dt>静夜思</dt>
<dd>床前明月光,疑是地上霜,举头望明月,低头思故乡</dd>
</dl>
表格
table：用来表示这是一个表格
tr：用来表示行，有多少个tr就有多少行
td：用来表示单元格，tr中有多少个td就代表有多少个单元格
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<tr>
<td>李小龙</td>
<td>男</td>
<td>21</td>
</tr>
<tr>
<td>何壮</td>
<td>男</td>
<td>21</td>
</tr>
<tr>
<td>郭晓蝶</td>
<td>女</td>
<td>18</td>
</tr>
</table>
表格属性
border：用来设置边框
colspan：用来跨列
rowspan：用来跨行
cellspacing：用来设置单元格之间的间距，0代表没有间距
<!-- 跨列合并 -->
<tr>
<td colspan="2">何壮</td>
<td>26</td>
<td>188</td>
</tr>
<!-- 跨行合并 -->
<tr>
<td rowspan="2">郭晓蝶</td>
<td>女</td>
<td>21</td>
<td>168</td>
</tr>
设置边框的颜色，以及只显示外边框
<table style="border: 1px solid blue;background-color: blueviolet;">
高级表格标签
<table border="0" cellspacing="0">
<caption style="background-color: yellow;">年终</caption>
<thead style="background-color: aqua;">
<tr>
<td>地区</td>
<td>1月</td>
<td>2月</td>
<td>小结</td>
</tr>
</thead>
<tbody style="background-color: red;">
<tr>
<td>上海</td>
<td>2000W</td>
<td>4000W</td>
<td>6000W</td>
</tr>
<tr>
<td>郑州</td>
<td>2000W</td>
<td>4000W</td>
<td>6000W</td>
</tr>
<tr>
<td>北京</td>
<td>2000W</td>
<td>4000W</td>
<td>6000W</td>
</tr>
</tbody>
<tfoot style="background-color: blue; ">
<tr>
<td>总计</td>
<td>10000W</td>
<td>2000W</td>
<td>2000W</td>
</tr>
</tfoot>
</table>
表单
form：表单是HTML与服务器沟通的唯一方式，当表单触发提交事件的时候，表单里面的内容就会被提交到服务器之中，提交的服务器路径就是action属性中的值，提交的方式是使用method中的方式提交
提交方式有两种
post：在提交的时候，url上不会显示任何数据信息，提高了数据的安全性，速度较慢，可以上传大型文件
get：默认的提交方式，会将数据显示在url之上，牺牲了安全性，提高了速度，不能提交大型数据，并且提交路径与表单的数据之间使用？分割，提交数据的时候是使用key = value的形式提交的，多个数据之间使用&分割
input中的name：表单在将数据提交到服务器之后，服务器需要去有凭证接收以及区分数据，这个凭证就是input中name属性的值，简单点说，后端只有根据name的值才能接收到数据
<form action="login" method="get">
<!-- 文本字段 -->
账号：<input type="text" name="username"/><br>
<!-- 单选按钮 -->
性别：<input type="radio" name="sex"value="男"/>男
<input type="radio" name="sex"value="女"/>女<br>
<!-- 密码域 -->
密码：<input type="password" name="ps"/><br>
<!-- 文件传入类型 -->
头像：<input type="file" name="file"/><br>
<!-- 日期类型 -->
生日：<input type="date" name="date"/><br>
<!-- 复选框 -->
爱好：<input type="checkbox" name="love"value="读书"/>读书
<input type="checkbox" name="love"value="听歌"/>听歌
<input type="checkbox" name="love"value="看电影"/>看电影
<input type="checkbox" name="love"value="旅游"/>旅游<br>
<!-- 简单下拉列表 -->
城市：<select>
<option value ="郑州">郑州</option>
<option value ="上海">上海</option>
<option value ="杭州">杭州</option>
<option value ="芜湖">芜湖</option>
</select><br>
<!-- 文本域 -->
备注：<textarea>
</textarea><br>
<!-- 创建按钮 -->
<input type="submit" value="提交"/>
</form>
文本属性
<span>就是普通的文本</span>
<b>加粗文本</b>
<i>斜线文本</i>
<sup>上标</sup>
<sub>下标</sub>
<u>下划线</u><br>
相对路径与绝对路径
绝对路径：是指从根目录开始计算寻找对应的路径
相对路径：是指从当前文件的路径去寻找目标文件
…/代表返回上一级目录
<img src="img/wallhaven-l3zmwy.jpg" alt="图片加载失败" title="这是一个发射器" width="500">
超链接
_blank：打开一个新窗口，并且每次都是新窗口
_parent：直接在自身页面进行跳转
_search：跳转到打开的新窗口，如果之前已经打开过窗口就直接跳转，不再打开新窗口
_self：直接在自身页面进行跳转
_top：顶级网页进行跳转，如果自身就是顶级网页则自身跳转
<a href="./李白.html" target="_top">静夜思</a>
<!-- 发送邮件功能 -->
<a href="mailto:761771589@qq.com">站长信箱</a>
<!-- 锚链接 -->
<a href="#aaaaa">返回顶部</a>
超链接伪类
<style>
a:link{ /* 未选择 */
font-size: 100px;
color: red;
text-decoration: none;
}
a:hover{ /* 鼠标悬浮 */
font-size: 100px;
color: blue;
text-decoration: none;
}
a:active{ /* 鼠标点击，但是没有松开 */
font-size: 100px;
color: yellow;
}
a:visited{ /* 访问之后 */
font-size: 100px;
color: brown;
}
</style>
转义字符
在HTML中无论敲多少个空格都是一个，如果需要空格就需要转义字符
代表一个空格
> 代表大于号
< 代表小于号
" 代表双引号
© 代表版权号
CSS
是指层叠样式表，CSS的主要作用就是用来美化网站，因为网站中很多标签本身是很丑的，此时就需要进行一些美化
CSS主要分为三种
1：行内样式
写在标签内的样式，只针对当前的标签
2：内部样式
写在head之内的样式，可以针对本页面所有的标签来设置统一样式
3：外部样式
引入别人写好的CSS
问题
这么多样式，如果同时都使用了，会显示哪种呢？
优先使用行内样式，次选内部样式，最后外部样式
HTML中有那么多标签，很多标签还是重复标签，我们如何选择指定标签赋予样式呢？
| CSS选择器 | 实例 | 作用 |
|---|---|---|
| 标签选择器 | p{} | 选择所有的p标签，所有p标签都使用{}之内的样式 |
| id选择器 | #a{} | 选择id是a的标签，需要注意id不要重复 |
| class选择器 | .b{} | 选择class是b的标签，多个标签可以使用同一个class |
| 组合选择器 | ||
| 伪类选择器 | ||
| 后代选择器 | ||
| 子元素选择器 | ||
| 通配符选择器 | ||
| … |
在HTML中每一个标签都有id以及class属性，其中id的值不能重复，class的值是可以重复的
在HTML中每个标签除了使用CSS美化以外，可能自身也带一些美化的属性，这些属性也可能会起到美化的作用，不要将属性与CSS弄混
背景属性
body{
width: 500px;
height: 500px;
/* 设置背景图，禁止平铺 */
background: url(./wallhaven-l3zmwy.jpg) no-repeat;
background-size: 50%; 背景图拉伸
/* 设置背景图的位置 */
background-position: left 50% top -50% ;
background-position: right 500px;
background-position-x: 500px;
background-position-y: 200px;
background-color: #7FFFD4;/* 设置背景色 */
}
#d1{
/* 标签默认没有宽高，如果标签没有手动设置宽高的话，实际的大小是按照标签之中的内容来决定 */
width: 500px;
height: 500px;
background-image: url(img/eae854182dea9ceded95206bd86422ac.png);
background-repeat: no-repeat;
background-color: #0000FF;
}
#d2{
/* 标签默认没有宽高，如果标签没有手动设置宽高的话，实际的大小是按照标签之中的内容来决定 */
width: 500px;
height: 500px;
background-repeat: no-repeat;/* 背景平铺 */
background-color: #ffff00;
}
/* 盒子容器 */
<body>
<div id="d1">
</div>
<div id="d2">
</div>
</body>
盒子模型
在HEML中几乎所有的标签都能使用盒子模型来进行显示，盒子模型由以下部分组成
1：元素内容 标签里面存放的值
2：内边距padding 是指边框距离元素的距离
3:边框border 就是边框线
4:外边框margin 是指自己和其他元素的距离，如果设置成负数则元素会碰撞到一起
一个标签实际上在浏览器中占用的空间是：元素自身的宽高+内边距+边框+外边距组成
<style>
#d1{
width: 300px;
height: 300px;
background-color: blueviolet;
border: solid 0.3125rem cadetblue; /* 边框 */
padding: 0.925rem 0.925rem 0.925rem 0.925rem ;/* 内边距*/
/* 外边距（只有外边距才能为负） */
margin: 1.25rem 1.25rem 11.25rem 1.25rem;
}
#d2{
width: 300px;
height: 300px;
background-color: #00FFFF;
border: solid 1.25rem cadetblue;
padding: 0.925rem 0.925rem 0.925rem 0.925rem;
/* 上 右 下 左*/
margin: -33.25rem 1.25rem 1.25rem 28.25rem;
}
</style>
浮动
1：可以让块状元素失去换行的功能（变成行内元素）
2：虽然浮动可以让块状元素失去换行，但是如果宽度不够的话，一样会换行显示，并且浮动的同时会紧贴上一个浮动元素的边框
3：浮动之后，元素会变成行内元素，容易被块状元素覆盖掉
简单点说，浮动让块级标签，变成了行级标签，并且如果浮动效果最后不清除的话，元素会被其他标签覆盖掉
<style type="text/css">
#d1{
width: 100%;
height: 12.5rem;
background-color: #5F9EA0;
}
#d2{
width: 50%;
height: 37.5rem;
background-color: #aaaaff;
/* 让元素向左侧浮动，变成行内标签，元素自身宽高不受影响*/
float: left;
}
#d3{
width: 50%;
height: 37.5rem;
background-color: #ff007f;
float: right;
}
#d4{
width: 100%;
height: 12.5rem;
background-color: #ffff00;
/* 清除浮动效果,重新换行显示标签，如果不清除浮动效果的话，div4则不会进行换行操作而是直接覆盖d2与d3*/
clear: left;
</style>
display
<style type="text/css">
#d1{
width: 100%;
height: 12.5rem;
background-color: #5F9EA0;
}
#d2{
width: 50%;
height: 37.5rem;
background-color: #aaaaff;
/* display inline：div会被显示成内联元素，自身的宽高等都会失效，并且不会进行换行操作 */
display: inline;
}
#d3{
width: 50%;
height: 37.5rem;
background-color: #ff007f;
/* display none：div会被隐藏起来，所有的内容都不会被显示 */
/* display block：块级标签的正常值，元素前后会进行换行操作*/
display: block;
}
#d4{
width: 100%;
height: 12.5rem;
background-color: #ffff00;
clear: left;
</style>
定位
<style type="text/css">
#d1{
width: 200px;
height: 200px;
background-color: #00FFFF;
/* 开启相对定位：相对定位是指，移动的时候以自身元素本身的位置来进行计算*/
position: relative;
left: 200px;
top: 100px;
}
#d2{
width: 200px;
height: 200px;
background-color: #000000;
/* 开启绝对定位：首先会看自己的祖辈元素是否移动过，如果移动过就会从最后一次移动的位置开始计算坐标，如果祖辈元素没有移动过，则 会从body的位置开始计算坐标*/
position: absolute;
top: 100px;
}
#dd{
width: 300px;
height: 300px;
background-color: #5F9EA0;
position: relative
left: 100px;
top: 100px;
}
body{
margin: 0px 0px 0px 0px;
}
</style>
按钮标签
<form action="">
账号：<input type="text" name="name"><br>
密码：<input type="password" name="password"><br>
<button type="submit">登录</button>
<button type="reset">重置</button>
</form>
Java Script
Java Script 虽然名字中带有java，但是实际上却与Java无关，之所以名称中带有Java是因为JS是一门弱类型的语言（脚本语言）
在最初的时候JS无人问津，此时Java已经在编程语言中占据了很重要的地位，所以JS为了蹭热度给自己改名叫JavaScript
JS主要是用于嵌入到HTML中的浏览器去执行，目前几乎所有的主流浏览器都已经支持JS了，JS嵌入到HTML中主要功能是让页面动起来，而动一般都是需要条件的，不可能完全无规律的乱动，所以一般页面在动之前都需要一些前置条件，而这些前置条件我们称之为JS事件（点击事件，鼠标悬浮事件，鼠标失去焦点事件，按键事件等），简单点说，就是使用JS可以在发生事件的时候动态的添加或删除标签以及修改标签的CSS属性等操作
JS的核心分为三部分组成
1、ECMAScript（核心基础）
只要包括基本的语法，变量，循环，选择分支语句，运算符等内容
2、BOM（浏览器对象模型）
将浏览器当成一个对象来使用，里面有一些操作浏览器窗口的方法等
3、DOM（文档对象模型）
就是讲HTML中所有标签都当成对象来看待
JS中变量的作用
1、直接声明在script标签内的变量是全局变量，可以在所有的JS函数中使用
2、函数内声明的叫局部变量，作用域是当前作用域
3、无论在什么位置，如果声明的变量没有指定var的话，这个变量会被注册成win属性（可以当全局变量使用，尽量不要这样）
注：1、在JS中字符串可以在单引号之内，或者双引号之内
2、JS中可以使用两个等号以及三个等号进行对比，两个等号包含隐式的数据类型转换，而三个等号没有
对象（JSON）
<button onclick="method()">点我</button>
<script type="text/javascript">
/* JS中没有类的概念，有对象的概念，我们可以使用类似JSON格式创建JS对象，所有的对象都是var类型，创建对象语法如下： */
var dog = {name:"小花",age:66,color:"蓝色",mm:function(){
alert(123);
alert(456);
alert(789);
},nn:function(){
alert("第二个方法");
}};
function method(){
//跳转网址
location.href="https://www.baidu.com";
/* alert(dog.color);
dog.mm();
dog.nn(); */
/* 确认框，会弹出 */
var b = confirm("确认删除吗");
if(b){
alert("你删除了");
}else{
alert("你取消了");
}
}
</script>
异步编程
<button onclick="method()">点我开始</button>
<button onclick="stop()">点我结束</button>
<script type="text/javascript">
var i = 1;
var j;
function method(){
// var j = setTimeout(n,5000);
j = setInterval(n,1000);
}
function n(){
// alert(i++);
console.log(i++);
}
function stop(){
// clearTimeout(j);
clearInterval(j);
}
</script>
var与let
在函数之内使用var声明变量，其作用域是整个函数
在函数之内使用let声明变量，其作用域是当前声明的作用域
DOM
interText与innerHTML
innerHTML可以使用新的值来覆盖掉标签中旧的值，值只会被当成文本，不会被当成标签
i.innerText="<h>这是一个新的文本</h1>";
innerText使用新的值，来覆盖掉标签中旧的值，值中可以包含新的标签
i.innerHTML = "<h1>这是一个新的文本</h1>";
用处
修改标签class属性
var i1 = document.getElementById("i1");
if (i1.className == "fa fa-star-o") {
/* 修改标签class属性的值 */
i1.className = "fa fa-star";
} else {
i1.className = "fa fa-star-o";
}
使用JS创建标签对象并改变标签的属性
var p = document.createElement("p");
p.style.color = "blue";
/* 如何使用JS创建一个标签对象 */
var p = document.createElement("p");
/* 给新创建的标签指定颜色 */
p.style.color = "blue";
/* 创建一个文本对象 */
var text = document.createTextNode("少年，Java欢迎你");
/* 将文本填入到标签之中 */
p.appendChild(text);
/* 将创建的p标签填充到div d2之内 */
document.getElementById("d2").appendChild(p);
document.getElementById("p").remove();
获取父级或子级标签并对标签进行操作
var s = document.getElementById("s1");
/* 通过父级标签，删除标签 */
s.parentNode.parentNode.parentNode.parentNode.removeChild(hhh);
/* 通过标签名称，来获取标签，需要注意的是，通过标签名称获得到的会是一个数组对象 */
var b = document.getElementsByTagName("body");
/* 由于body标签只有一个，所以直接取了下标0，然后获得里面的子标签，需要注意获得child的时候获得到的会是数组 */
var c = b[0].childNodes;
/* 遍历子标签 */
for(var k = 0;k<c.length;k++){
alert(c[k]);
}
动态给按钮绑定事件
需要注意函数名称不能加括号，如果加上括号就变成了执行函数，而不是给b1绑定函数了，如果绑定的函数需要进行传参的话，我们需要使用匿名函数来进行隐藏调用传参
document.getElementById("b1").addEventListener("click", z);
document.getElementById("b1").addEventListener("click", function() {
x("张三");
});
function z() {
alert("被绑定事件z");
}
function x(a) {
alert(a);
alert("被绑定事件x");
}
设置（清除）延迟
setInterval("changeImg()",1000);
clearInterval(inter);
案例
淘宝轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#d{
width: 520px;
height: 300px;
/* 隐藏其他的图片 */
overflow: hidden;
padding: 0px 0px 0px 0px;
}
button{
width: 20px;
height: 20px;
/* 旋转角度呈圆型 */
border-radius: 50%;
/* 去掉边框 */
border: none;
}
#d2{
width: 120px;
height: 22px;
position: absolute;
top: 265px;
left: 200px;
/* rgba背景透明度 */
background-color: rgba(255,255,255,0.1);
}
#b1{
background-color: red;
}
</style>
</head>
<body>
<div id="d">
<table>
<tr>
<td><img src="./淘宝图片/1.jpg" ></td>
<td><img src="./淘宝图片/2.jpg" ></td>
<td><img src="./淘宝图片/3.jpg" ></td>
<td><img src="./淘宝图片/4.jpg" ></td>
<td><img src="./淘宝图片/5.jpg" ></td>
</tr>
</table>
</div>
<div id="d2">
<button id="b1" onclick="method(this)"></button>
<button id="b2" onclick="method(this)"></button>
<button id="b3" onclick="method(this)"></button>
<button id="b4" onclick="method(this)"></button>
<button id="b5" onclick="method(this)"></button>
</div>
<script type="text/javascript">
var lastBut = null;
var inter = null;
var i = 0;
function method(but){
if(lastBut != null){
lastBut.style.backgroundColor = "white";
}
but.style.backgroundColor = "red";
lastBut = but;
switch(but.id){
case "b1":
d.scrollLeft = 0;
i = 0;
break;
case "b2":
d.scrollLeft = 524;
i = 524;
break;
case "b3":
d.scrollLeft = 1048;
i = 1048;
break;
case "b4":
d.scrollLeft = 1572;
i = 1572;
break;
case "b5":
d.scrollLeft = 2096;
i = 2096;
}
clearInterval(inter);
inter = null;
}
function n(){
if(lastBut!=null){
lastBut.style.backgroundColor = "white";
}
// 屏幕滚动
d.scrollLeft += 2;
// 一个数去记录移动了多少px
i += 2;
if(i<524){
b1.style.backgroundColor = "red";
lastBut = b1;
}else if(i<1048){
b2.style.backgroundColor = "red";
lastBut = b2;
}else if(i<1572){
b3.style.backgroundColor = "red";
lastBut = b3;
}else if(i<2096){
b4.style.backgroundColor = "red";
lastBut = b4;
}else if(i<2620){
b5.style.backgroundColor = "red";
lastBut = b5;
}
if(i==0||i==524||i==1048||i==1572||i==2096||i==2620){
clearInterval(inter);
inter = null;
}
if(i>2620){
i = 0;
d.scrollLeft = 0;
b1.style.backgroundColor = "red";
lastBut = b1;
}
}
function m(){
if(inter == null){
inter = setInterval(n,0.1);
}
}
setInterval(m,3000);
</script>
</body>
</html>
大风车
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body{
margin: 0px 0px 0px 0px;
background: url(./img/caodi.png) no-repeat;
}
#i1{
position: absolute;
top: 180px;
left: 330px;
}
#i2{
position: absolute;
top: 555px;
left: 882px;
}
#i3{
position: absolute;
top: 430px;
left: 1210px;
}
</style>
</head>
<body>
<button type="button" onclick="start(15)">一档</button>
<button type="button" onclick="start(0)">二档</button>
<button type="button" onclick="start(0.5)">三档</button>
<button type="button" onclick="stop()">停止</button>
<img src="img/fengche.png" id="i1" style="width: 500px;"/>
<img src="img/fengche.png" id="i2" style="width: 300px;"/>
<img src="img/fengche.png" id="i3" style="width: 400px;"/>
<script type="text/javascript">
// 用于接收延迟
var interval = null;
function start(i){
stop();
// 调用延迟函数
interval = setInterval(method,i);
}
// 风车转动的角度
var k = 0;
// 风车转动
function method(){
// 获取img数组
var img = document.getElementsByTagName("img");
// 改变风车的角度
k>360? k = 0 : k+=3;
// 遍历数组
for(var j=0;j<img.length;j++){
/* 转换角度 */
img[j].style.transform = ('rotate('+k+'deg)');
}
}
// 停止转动
function stop(){
if(interval != null){
// 清除延迟，以达到风车停止的目的
clearInterval(interval);
}
}
</script>
</body>
</html>
500
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
