几天前看了一个大佬的关于2020年校招面试复盘，感觉真的该努力了，所以开始自学从web前端开发开始，希望自己明年也可以进自己想去的公司。
大佬文章链接：https://blog.csdn.net/ZYZMZM_/article/details/91358702
我是根据大佬的CSDN学习的，本身自己是有点HTML和CSS的基础，不过想要学习web前端开发的话建议先去W3school(https://www.w3school.com.cn/web/web_www.asp)学习一下HTML基础和CSS基础，但是不需要全部看完只需要知道两个的基本用法就行，属性之类的建议边看代码边学，反正我自己是看过就忘，写的时候用到也都是现场百度，对于javascript就建议直接看代码，因为如果学过java差不多看javascript的代码也不费力。软件的话我用的IntelliJ IDEA感觉还挺不错的，建议将以下代码复制到自己用的软件上看。
第一个代码我也是参考大佬的，看懂之后自己又重新简化了一下感觉会更好理解一点，大佬原文：https://blog.csdn.net/ZYZMZM_/article/details/80233402
文章最后有几个比较难理解的标签解释
下面是计算器的html,css,javascript代码：
HTML代码如下
<!DOCTYPE html>
<html lang="en"><!--告诉浏览器代码主要使用的语言，lang-language的缩写，en-english的缩写-->
<head>
<meta charset="utf-8"/><!--charset=utf-8表示当前文档可以出现多种语言，utf-8表示万国语-->
<title>计算器例子</title>
<link href="example.css" rel="stylesheet"/>
</head>
<body>
<div class="center">
<form>
<p ><font color="red" size="5">简单计算器</font></p>
<p>number1 :<input type="text" id="1"/> </p>
<p>number2 :<input type="text" id="2"/></p>
<p><button type="button" id="3" style="width:70px;height:20px;" onclick="getResult('+')">+</button>
<button type="button" id="4" style="width:70px;height:20px;" onclick="getResult('-')">-</button>
<button type="button" id="5" style="width:70px;height:20px;" onclick="getResult('*')">*</button>
<button type="button" id="6" style="width:70px;height:20px;" onclick="getResult('/')">/</button>
</p>
<p>result:<input type="text" id="7" disabled="disable" size="3"/></p>
<p><input type="reset" value="reset" style="width:70px;height:20px;"/>
<input type="button" value="close" style="width:70px;height:20px;" onclick="window.close()"/>
</p>
</form>
</div>
<script src="calculator.js" type="text/javascript "></script>
</body>
</html>
CSS代码如下
@charset "utf-8";
body{
background:url(timg.jpg) center center;
background-size:cover;
margin:200px 500px;
padding: 10px 50px;
position: relative;
}
.center{
text-align:center;
padding: auto;
margin: auto;
}
JavaScript代码如下
alert("欢迎使用简单计算器")
function getResult(id){
var n1=parseFloat(document.getElementById("1").value);
var n2=parseFloat(document.getElementById("2").value);
var result="";
if(isNaN(n1)||isNaN(n2))
{
alert("请在文本框中输入内容");
}
switch(id)
{
case '+':
result=n1+n2;
break;
case '-':
result=n1-n2;
break;
case '*':
result=n1*n2;
break;
case '/':
if(n2==0)
{
alert("分母不为零");
break;
}
result=n1/n2;
break;
}
document.getElementById("7").value = result
//x=document.getElementById("7");x.innerHTML=result; 为什么不行？
}
做出来效果
说实话稍微有点丑
关于其中的一些标签，可以在W3school上自己查找，这边列出来的是我自己理解起来比较困难的
//meta，代码上有关于它的一个注释，这个属性可提供有关某个HTML的元信息，我们定义一个网页的关键字的时候就用到它的一个属性，具体可在W3school上查看。
//form，为用户输入创建HTML表单，像我们使用的留言板，评论等可以填写数据的文本框，需要将评论发表，那么我们将把内容发送到哪里呢？使用，这个一般需要和（显示一个内容为“提交”的按钮）标签使用，而且submit按钮只能提交和自己同一个表单中的文本框内容。这样子我们就可以把内容提交到我们想要提交的地址当中。
这边附一个链接地址：https://baijiahao.baidu.com/sid=1631481433493074116&wfr=spider&for=pc
可能讲的更清楚一点。
//label这个标签我的代码没有出现，在大佬的代码中出现了，一开始不太理解所以查了一下，label标签其实就是为了加强用户体验性的。这边有一个讲的非常清楚的文章，地址如下：
https://zhidao.baidu.com/question/311244389.html
3892
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
