吃_早餐
吃_早餐

HTML&CSS&JS学习

若不从事前端开发或美工等相关工作，掌握以下内容即可

文章目录

  • 学习成果
    • UOLab联合开放实验室管理系统
    • 中北大学毕业设计管理系统
    • 教务系统登陆
    • 个人社保计算
    • 个人存款在线计算器
  • 7.12--lesson1
    • HTML：表单
  • 7.13--lesson2
    • HTML：表格
    • HTML：超链接
    • HTML：图片
    • HTML：列表
    • HTML：标题
    • HTML：颜色
    • HTML：字符实体
    • HTML：iframe框架
    • 面试常问：get post区别
    • 12306用户注册
  • 7.14--lesson3
    • CSS：简介
    • CSS：选择器
    • CSS：代码放的位置
    • CSS：开发常用样式
  • 7.15--lesson4
    • CSS：显示
    • CSS：浮动
    • bootstrap
  • 7.16--lesson5
    • bootstrap表格
  • 7.17--lesson6
    • 学习心得
    • 上网过程
    • JavaScript学习重点
    • JavaScript函数
  • 7.19--lesson7
    • JavaScript正则表达式
    • JavaScript事件
    • JavaScript表单验证

学习成果

UOLab联合开放实验室管理系统

源码链接可下载查看

中北大学毕业设计管理系统


<html>
	<head>
		<meta charset="UTF-8">
		<title>中北大学毕业设计管理系统title>
		<style>
			body{background-color: #4781C9;}
			#logindiv{
				background-color: white;
				margin: 0 auto;
				margin-top: 130px;
				height: 530px;
				width: 550px;
				padding-top:30px ;
			}
			#uname{
				height: 55px;
				width: 426px;
				background-color: transparent;
				border: 1px solid lightgray;
				padding-left: 30px ;
				margin-bottom: 10px;
				margin-left: -30px;
				border-radius: 5px;
			}
			#upsw{
				height: 55px;
				width: 426px;
				background-color: transparent;
				border: 1px solid lightgray;
				padding-left: 30px ;
				margin-bottom: 10px;
				margin-left: -30px;
				border-radius: 5px;
			}
			#login{
				height: 55px;
				width: 456px;
				background-color: orangered;
				border: 1px solid lightgray;
				color: white;
				font-size: 28px;
				font-family: "微软雅黑";
				border-radius: 5px;
				margin-bottom: 10px;
			}
			#linkdiv{
				margin-top: 10px;
			}
			#bottomdiv{
				margin-top: 30px;
				font-family: "仿宋";
			}
			#weibomig{
				margin-left: 15px;
				margin-right: 15px;
			}
			#thirdmig{
				margin-left: -6px;
				margin-bottom: -4px;
			}
		style>
	head>
	<body>
		<form action="heihei.html" method="get">
		<div align="center" id="logindiv">
			<img width="300px" height="85px" src="images/nuc.png"/>
			<h1>毕业设计管理系统h1>
			<img id="firstimg" src="images/user.png" />
			<input id="uname" type="text" placeholder="请输入用户名"/><br>
			<img id="secondimg" src="images/password.png" />
			<input id="upsw" type="password" placeholder="请输入密码"/><br>
			<input id="login" type="submit" value="登陆"/><br />
			<div id="linkdiv">
				<a href="three.html"><img src="images/weixin.png" />a>
				<a href="three.html"><img id="weibomig" src="images/weibo.png" />a>
				<a href="three.html"><img src="images/qq.png"/>a>
			div>
			<div id="bottomdiv">
				<p>
					开发者：王佳蕊 中北大学软件学院
					<img id="thirdmig" hspace="20px" width="20px" src="images/1.jpg"/>
				p>
			div>
		div>
		form>
		
	body>
html>

教务系统登陆


<html>
	<head>
		<meta charset="UTF-8">
		<title>教务系统登陆title>
		<style>
			body{
				background-color: #1E9FFF;
			}
			#logindiv{
				background-color: white;
				width: 400px;
				height: 440px;
				margin: 0 auto;/*居中*/
				margin-top: 150px;/*顶端外边距*/
				padding-top: 20px;/*顶端内边距*/
				text-align: center;/*文字居中*/
			}
			h1{
				font-family:"微软雅黑" ;
				color: #1E9FFF;
				margin: 0px;
			}
			#uname{
				width: 318.4px;
				height: 38px;
				border-radius: 5px;
				border: 1px solid lightgray;
				margin-left: -30px;
				background-color: transparent;
				padding-left: 30px;
			}
			#upsw{
				width: 318.4px;
				height: 38px;
				border-radius:5px;
				border: 1px solid lightgray;
				margin-left: -30px;
				background-color: transparent;
				padding-left: 30px;
				margin-top: 20px;
			}
			#ubt{
				width: 350.4px;
				height: 38px;
				background-color: #1E9FFF;
				margin-top: 20px;
				border-radius: 5px;
				color: white;
				border: 1px;
			}
		style>
	head>
	<body>
		<form action="text.html" method="get">
			<div id="logindiv">
			<h1>UOlab联合开放实验室h1>
			<h1 style="margin-bottom: 20px;" 10px;>管理平台h1>
			<img src="images/user.png" />
			<input type="text" id="uname" placeholder="用户名"/><br>
			<img src="images/password.png">
			<input type="password" id="upsw" placeholder="密码"><br>
			<input id="ubt" type="submit" value="登陆"/>
			div>
		form>
		
	body>
html>

个人社保计算


<html>
	<head>
		<meta charset="UTF-8">
		<title>个人社保计算title>
		
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		 
		
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
		 
		
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
	<script>
		function jisuan(){
			//获得工资，看输入是否合法
			var sal = document.getElementById("salary").value;
			//判断是否合法
			var regExp = /^[0-9]{4,5}$/;
			if(!regExp.test(sal)){
				document.getElementById("salary").value="必须输入4-5位数字";
				document.getElementById("salary").style="color:red";
				return;
			}
			//合法的话开始计算
			var salNum = parseInt(sal);//把字符串转成数字
			
			var ylgr = salNum * 0.08;
			var ylgs = salNum * 0.02;
			document.getElementById("ylgr").innerHTML=ylgr;
			document.getElementById("ylgs").innerHTML=ylgs;
			
			var ybgr = salNum * 0.02;
			var ybgs = salNum * 0.06;
			document.getElementById("ybgr").innerHTML=ybgr;
			document.getElementById("ybgs").innerHTML=ybgs;
			
			var sygr = salNum * 0.005;
			var sygs = salNum * 0.015;
			document.getElementById("sygr").innerHTML=sygr;
			document.getElementById("sygs").innerHTML=sygs;
			
			var gsgs = salNum * 0.005;
			document.getElementById("gsgs").innerHTML=gsgs;
			
			var shengyu = salNum * 0.008;
			document.getElementById("shengyu").innerHTML=shengyu;
			
			var gjjgr = salNum * 0.005;
			var gjjgs = salNum * 0.015;
			document.getElementById("gjjgr").innerHTML=gjjgr;
			document.getElementById("gjjgs").innerHTML=gjjgs;
			
			var grhj = ylgr + ybgr + sygr + gjjgr;
			var gshj = ylgs + ybgs + sygs + gsgs + shengyu + gjjgs;
			document.getElementById("grhj").innerHTML=grhj;
			document.getElementById("gshj").innerHTML=gshj;
			
			var total = salNum + gshj;
			document.getElementById("total").innerHTML=total;
		}
		function clearContent(){
			document.getElementById("salary").value="";
			document.getElementById("salary").style="color：black";
		}
	script>
	head>
	<body>
		<div class="container text-center">
			<img height="100px" img-circle width="100px" src="images/1.jpg"/>
			<table class=" table text-center table-bordered">
			<tr>
				<td>工资td>
				<td colspan="3">
					<input onfocus="clearContent()" class="form-control" placeholder="请输入工资" id="salary" type="text">
				td>
				<td>
					<button onclick="jisuan()" class="btn btn-danger btn-block" >计算button>
				td>
			tr>
			<tr class="bg-primary">
				<td>险种td>
				<td>个人%td>
				<td>个人td>
				<td>公司%td>
				<td>公司td>
			tr>
			<tr>
				<td>养老td>
				<td>8%td>
				<td id="ylgr">td>
				<td>20%td>
				<td id="ylgs">td>
			tr>
			<tr>
				<td>医疗td>
				<td>2%td>
				<td id="ybgr">td>
				<td>6%td>
				<td id="ybgs">td>
			tr>
			<tr>
				<td>失业td>
				<td>0.5%td>
				<td id="sygr">td>
				<td>1.5%td>
				<td id="sygs">td>
			tr>
			<tr>
				<td>工伤td>
				<td>td>
				<td>td>
				<td>0.5%td>
				<td id="gsgs">td>
			tr>
			<tr>
				<td>生育td>
				<td>td>
				<td>td>
				<td>0.8%td>
				<td id="shengyu">td>
			tr>
			<tr>
				<td>公积金td>
				<td>12%td>
				<td id="gjjgr">td>
				<td>12%td>
				<td id="gjjgs">td>
			tr>
			<tr>
				<td>合计td>
				<td>个人合计td>
				<td id="grhj">td>
				<td>公司合计td>
				<td id="gshj">td>
			tr>
			<tr>
				<td>总额td>
				<td id="total" colspan="4">td>
			tr>
			table>
			开发者：王佳蕊 中北大学软件学院小学期实训
		div>
	body>
html>

个人存款在线计算器


<html>
	<head>
		<meta charset="UTF-8">
		<title>个人存款在线计算器title>
		
		<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		 
		
		<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js">script>
		 
		
		<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js">script>
		<script>
			//定义一个函数完成存款的计算
			function calc(){
				//一开始处做表单验证，检验输入的是否是数字
				//1.获取存款金额（读取文本框里用户输入的数据，即读取id）
				//把文本框（document.getElementById）通过ID先拿到,然后拿值（value）
				var cunkuanjine = document.getElementById("amount").value;
				//定义一个正则（规则）表达式，假设要求存款金额是六位数字
				//[0-9]:表示只能是数字；{2,6}:表示2到6位数字
				var regExp = /^[0-9]{2,6}$/;
				if(!regExp.test(cunkuanjine)){
					//说明用户输入不合法输入不合法
					document.getElementById("amount").value = "输入不合法，必须是2-6位数字"
					document.getElementById("amount").style = "color:red";
					return;
				}
				//把带双引号的数字变为不带双引号的数字，用perseInt（）函数
				var cunkuannum = parseInt(cunkuanjine);//字符串转成整数
				//2.开始计算
				//取得存款年限，即取得年利率
				var lilv = document.getElementById("year").value;//利率
				var lixi = cunkuannum * lilv;//利息
				var total = cunkuannum + lixi;//本息合计
				//3.把计算结果写入相应文本框
				document.getElementById("lixi").value = lixi;
				document.getElementById("total").value = total;
			}
			function clearContent(){
				//清空文本框
				document.getElementById("amount").value = '';
				document.getElementById("amount").style = "color:black";
				return;
			}
		script>
	head>
	<body>
		<div class="container text-center">
			<h1>个人网银-存款计算h1>
			<table class="table table-bordered text-center">
				<tr class="bg-primary">
					<td colspan="2">个人存款计算器td>
				tr>
				<tr>
					<td>存款金额td>
					<td>
						<input  onfocus="clearContent()" class="form-control" placeholder="请输入存款金额" type="text" id="amount"/>
					td>
				tr>
				<tr>
					<td>存款年限td>
					<td>
						<select id="year" class="form-control">
							<option value="0.0175">一年(1.75%)option>
							<option value="0.045">两年(2.25%)option>
							<option value="0.0825">三年(2.75%)option>
							<option value="0.1100">四年(2.75%)option>
							<option value="0.1375">五年(2.75%)option>
						select>
					td>
				tr>
				<tr>
					<td>所得利息td>
					<td>
						<input id="lixi" type="text" class="form-control" readonly="readonly" />
					td>
				tr>
				<tr>
					<td>本息合计td>
					<td>
						<input id="total" type="text" class="form-control" readonly="readonly" />
					td>
				tr>
				<tr>
					<td colspan="2">
						
						<button onclick="calc()" class="btn bg-primary btn-block">计算button>
					td>
				tr>
			table>
			开发者：王佳蕊 中北大学软件学院2020级
		div>
	body>
html>

7.12–lesson1

HTML：表单

  • 课堂笔记
  • HTML介绍
  1. HTML是什么？What（推荐使用5W1H学习法） 叫做：超文本标记语言。最新版本：HTML5，简称H5 HTML代码由谁执行？浏览器。主流的5大浏览器： Chrome、Firefox、Opera、Safari、Edge； 建议：从现在起停止使用360、qq等浏览器。
  2. 为什么用它？Why 要做Web项目，界面必须得用它。
  3. 谁来用？Who 后端开发人员一定要会、Web前端开发工程师、网页美工（UI）
  4. 什么时候用？When 做项目需要时候就用。
  5. 用在哪里？Where 用在网页上，搭建网页结构或元素。
  6. 怎么用？How 按教程学，在项目中实战使用。通过实际使用来学。

  • HTML标准
    HTML是由W3C制定的国际标准。W3C：国际万维网组织。 最新版：HTML5

  • 提醒

  1. 不要背代码！！！ 通过多写，来永久记忆。
  2. 学编程最佳方式：多写！！！！一定要动手做！ （听不会，看不会）
  3. 理解的基础上记忆，理解的越多，死记越少！
  4. 每日提交（和公司一样）
  • 课堂知识点

<html>

	<head>
     
		<meta charset="utf-8" />
		<title>title>
	head>

	<body>
	body>
html>

HTML语言不区分大小写

  1. 表单：

  2. 文本框：

  3. 密码框：

  4. 单选按钮：

    ​ 注意：单选时name必须相同，不然起不到单选的作用，会出现bug

  5. 下拉选择：

  6. 复选框：

  7. 文本域：