学习路线
狂神说java
1、菜鸟教程的java基础
2、网络编程
3、多线程
4、IO
5、注解和反解
6、前端基础
7、MySQL数据库
8、JavaWeb
学习参考
https://www.cnblogs.com/coderzjz/p/13670088.html
https://blog.csdn.net/weixin_43824233/article/details/106176990
https://blog.csdn.net/qq_36188127/article/details/108867650
https://blog.csdn.net/weixin_43751396/article/details/106315011
前端基础
HTML
- 属性和属性值对大小写不敏感，但是新版本的 (X)HTML 要求使用小写属性。
- 在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号。
- 请确保将 HTML 标题 标签只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。搜索引擎使用标题为您的网页的结构和内容编制索引。
<!DOCTYPE html> <!-- 声明为 HTML5 文档 -->
<html> <!-- <html> 元素是 HTML 页面的根元素 -->
<head> <!-- <head> 元素包含了文档的元（meta）数据 -->
<title>菜鸟教程(runoob.com)</title> <!-- <title> 元素描述了文档的标题 -->
<base href="//www.runoob.com/images/" target="_blank"> <!-- 定义页面中所有链接默认的链接目标地址和target -->
<!-- 描述HTML文档的描述，关键词，作者，字符集 -->
<meta charset="utf-8"> <!-- 定义网页编码格式为 utf-8 -->
<meta name="author" content="runoob">
<link rel="stylesheet" type="text/css" href="styles.css"> <!-- 使用了外部样式文件来格式化文本 -->
</head> <!-- XX -->
<body> <!-- <body> 元素包含了可见的页面内容 -->
<h1 style="text-align:center;">一个大标题</h1> <!-- <h1> 元素定义一个 居中对齐的 大标题 -->
<p style="font-family:arial;color:red;font-size:20px;">第一个段落。</p> <!-- <p> 元素定义一个 字体的样式 段落 -->
<!-- 文本格式化 -->
<a href="https://www.runoob.com">这是一个链接</a> <!-- 链接是通过标签 <a> 来定义的 -->
<a href="#tips">查看最小标题</a> <!-- 访问有用的提示部分 -->
<a href="//www.runoob.com/" target="_top">跳出框架链接!</a>
<img loading="lazy" src="/images/logo.png" alt="runoob.com" width="258" height="39" />
<!-- 图像是通过标签 <img> 来定义的；在浏览器无法载入图像时，替换文本alt属性告诉读者她们失去的信息 -->
<h6><a id="tips">最小的标题。</a></h6> <!-- 有用的提示部分 --> <!-- <h6> 元素定义一个最小的标题-->
<br> <!-- 空元素：换行 -->
<br /> <!-- 关闭空元素：在开始标签中添加斜杠 -->
<p>这里要<br>换行了。</p> <!-- <p> 元素定义一个段落 -->
<!-- 文本格式化 -->
<b>1、加粗文本</b><br><br>
<i>2、斜体文本</i><br><br>
<code>3、电脑自动输出</code><br><br>
4、这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<pre>
5、此例演示如何使用 pre 标签
6、对"空行"和双引号
空格
进行控制
</pre>
<p>7、这是<del>删除</del> <ins>下划线</ins>!</p>
<!-- 创建表格 -->
<table border="0" cellspacing="0"> <!-- 边框属性 单元格间距属性 -->
<caption>Monthly savings</caption>
<tr>
<th>Name</th>
<th colspan="2">Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
<!-- 无序/嵌套列表 -->
<ul>
<li>Coffee</li>
<li>Tea
<ul>
<li>Black tea</li>
<li>Green tea
<ul>
<li>China</li>
<li>Africa</li>
</ul>
</li>
</ul>
</li>
<li>Milk</li>
</ul>
<!-- 有序列表 -->
<ol start="50" type="I"> <!-- 开始的序号大小；没有默认为1 列表格式 -->
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<!-- 自定义列表： -->
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
</body>
</html>
<!-- 在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签 -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<!-- div演示 -->
<div id="container" style="width:500px">
<div id="header" style="background-color:#FFA500;">
<h1 style="margin-bottom:0;">主要的网页标题</h1></div>
<div id="menu" style="background-color:#FFD700;height:190px;width:100px;float:left;">
<b>菜单</b><br>
HTML<br>
CSS<br>
JavaScript</div>
<div id="content" style="background-color:#EEEEEE;height:190px;width:400px;float:left;">
内容在这里<br>
<!-- 表单 -->
<form action="demo-form.php">
First name: <input type="text" name="FirstName" value="Mickey"><br>
<input type="checkbox" name="vehicle[]" value="Car" checked="checked"> I have a car<br>
<input type="radio" name="sex" value="Male"> Male<br>
<input type="radio" name="sex" value="Womale"> Womale<br>
<!-- 同一组的单选按钮，name 取值一定要一致 ，如上sex -->
<input type="submit" value="提交"><br>
<textarea rows="2" cols="20">
我是一个文本框。
</textarea>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected>Fiat</option>
<option value="audi">Audi</option>
</select>
<input type="reset"> <!-- 定义重置按钮 -->
<input type="reset" name="button" id="button" value="重置">
</form></div>
<iframe src="demo_iframe.htm" name="iframe_a" height="100px" width="300px"></iframe>
<p><a href="//www.runoob.com" target="iframe_a">RUNOOB.COM</a></p>
<!-- 因为 a 标签的 target 属性是名为 iframe_a 的 iframe 框架 -->
<!-- 所以在点击链接时页面会显示在 iframe框架中。-->
<p id="demo">
JavaScript 可以触发事件，就像按钮点击 -> 改变 HTML 元素的样式
</p>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="Hello JavaScript!"; //直接在HTML输出
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000"; // 改变样式
}
</script>
<noscript>抱歉，你的浏览器不支持 JavaScript!</noscript><!-- <noscript> 标签提供无法使用脚本时的替代内容-->
<button type="button" onclick="myFunction()">点击这里触发事件</button>
<div id="footer" style="background-color:#FFA500;clear:both;text-align:center;">
版权 © runoob.com</div>
</div>
</body>
</html>
CSS
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 选择器 { 声明; } */
body
{
background-color:#d0e4fe;
background-image:url('gradient2.png');
background-repeat:repeat-x; /* no-repeat：不平铺 */
background-attachment:fixed; /* 背景图片固定 */
}
/* id 选择器以 "#" 来定义 */
#para1
{
color:orange;
text-align:center;
}
/* class 类选择器以一个点"."号显示 */
p.style
{
color:red;
font-size:1.875em; /* 30px/16=1.875em */
text-indent:50px; /* 指定文本的第一行的缩进 */
text-transform:capitalize; /* 每个单词的首字母大写 */
}
/* 链接 */
a:link,a:visited {display:block;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;} /* 未访问链接 已访问链接 */
a:hover {color:#000000;text-decoration:underline;} /* 鼠标移动到链接上 */
a:active {color:#000000;text-decoration:underline;} /* 鼠标点击时 */
/* 列表 */
ul.a {list-style-type:circle;}
ol.d {list-style-type:armenian;}
/* 表格 */
#customers
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
border-collapse:collapse; /* 折叠边框 */
}
#customers td, #customers th
{
font-size:1em;
border:1px solid #98bf21; /* 表格边框和颜色 */
padding:3px 7px 2px 7px; /* 表格填充 */
background-color:#FFFFFF;
}
#customers th /* 表格文字 */
{
font-size:1.1em;
text-align:left;
padding-top:5px;
padding-bottom:4px;
background-color:#A7C942;
color:#ffffff;
}
#customers tr.alt td
{
color:#000000;
background-color:#EAF2D3;
}
</style>
</head>
<body>
<!-- CSS 优先规则：内联样式 > id 选择器 > 类选择器 -->
<h1 id="para1">CSS 实例!</h1>
<p class="style">robot这是一个段落。</p>
<p><b><a href="/css/" target="_blank">这是一个链接</a></b></p>
<!-- link visited hover active 需要严格按顺序才能看到效果。 -->
<ul class="a">
<li>Circle type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ul>
<ol class="d">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<table id="customers">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tr>
<td>Alfreds Futterkiste</td>
<td>Maria Anders</td>
<td>Germany</td>
</tr>
<tr class="alt">
<td>Berglunds snabbköp</td>
<td>Christina Berglund</td>
<td>Sweden</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<style>
/* 内联元素 */
p {display:inline;}
/* 块元素 */
span
{
display:block;
}
/* 隐藏元素 */
h1.none {display:none;}
h1.hidden {visibility:hidden;}
/* 定位元素 */
div.sticky {
position: -webkit-sticky; /* 还有静态、相对、固定、绝对定位 */
position: sticky;
top: 0;
padding: 5px;
background-color: #cae8ca;
border: 2px solid #4CAF50;
z-index:-1; /* z-index属性指定了一个元素的堆叠顺序 */
}
.center {
padding: 70px 0; /* 居中 */
text-align: center;
border: 3px solid green;
width: 100px;
height: 40px;
overflow:auto; /* overflow 属性规定当内容溢出元素框时发生的事情 */
}
.right {
float: right; /* 右对齐 */
width: 300px;
border: 3px solid #73AD21;
padding: 10px;
}
/* 导航条 */
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block; /* 注意,整个区域是可点击的链接,而不仅仅是文本 */
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
/* 鼠标移动到选项上修改背景颜色 */
.dropdown:hover .dropbtn {
background-color: #3e8e41;
}
</style>
</head>
<body>
<div class="sticky">
该元素使用了粘性定位;
</div>
<div class="center">
<p>我是<br>垂直<br>居中<br>的。</p>
</div>
<div class="right">
<p>我是右对齐。</p>
</div>
<p>display 属性的值为 "inline"的结果</p>
<p>两个元素显示在同一水平线上。</p>
<span>display 属性值为 "block" 的结果</span> <span>这两个元素之间的换行符。</span>
<h1>隐藏属性</h1>
<h1 class="none">这是一个隐藏标题</h1> <!-- 实例中的隐藏标题不占用空间 -->
<h1 class="hidden">这是一个隐藏标题</h1> <!-- 实例中的隐藏标题仍然占用空间 -->
<div class="dropdown">
<button class="dropbtn">下拉菜单</button>
<div class="dropdown-content">
<a href="//www.runoob.com">菜鸟教程 1</a>
<a href="//www.runoob.com">菜鸟教程 2</a>
<a href="//www.runoob.com">菜鸟教程 3</a>
</div>
</div>
</body>
</html>
JavaScript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function myFunction1(){
document.getElementById("demo").innerHTML="head中的JavaScript函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction1()">head中的JavaScript函数</button>
<button type="button" onclick="myFunction2()">body中的JavaScript函数</button>
<script>
function myFunction2()
{
document.getElementById("demo").innerHTML="body中的JavaScript函数";
}
</script>
<p>替换 "Microsoft" 为 "Runoob" :</p>
<button onclick="myFunction()">点我</button>
<p id="demo1">请访问 Microsoft!</p>
<script>
function myFunction() {
var str = document.getElementById("demo1").innerHTML;
var txt = str.replace("Microsoft","Runoob"); //正则表达式：搜索/替换
document.getElementById("demo1").innerHTML = txt;
}
</script>
<script>
var person={
firstname : "John",
lastname : "Doe",
id : 5566
};
window.alert(person.firstname);//使用 window.alert() 弹出警告框。
console.log(person["firstname"]);//使用 console.log() 写入到浏览器的控制台。
</script>
<p>不管输入是否正确，输入框都会再输入后清空。</p>
<p>请输入 5 ~ 10 之间的数字：</p>
<input id="demo2" type="text">
<button type="button" onclick="myFunction()">点我</button>
<p id="p01"></p>
<script>
function myFunction() {
var message, x;
message = document.getElementById("p01");
message.innerHTML = "";
x = document.getElementById("demo2").value;
try {
if(x == "") throw "值是空的";
if(isNaN(x)) throw "值不是一个数字";
x = Number(x);
if(x > 10) throw "太大";
if(x < 5) throw "太小";
}
catch(err) {
message.innerHTML = "错误: " + err + ".";
}
finally {
document.getElementById("demo2").value = "";
}
}
</script>
</body>
</html>
扫一扫
4567
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
