2021-07-22-第一次实训(HTML+CSS+JS)

最新推荐文章于 2023-03-19 11:41:21 发布

拾光1024

最新推荐文章于 2023-03-19 11:41:21 发布

阅读量1.4k

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/m0_53743471/article/details/126255656

版权

layout: post
#标题配置
title: 第一次实训(HTML+CSS+JS)
#时间配置
date: 2021-07-22 11:00:00 +0800
#目录配置
categories: JavaWeb
#标签配置
tag: 学习笔记

content
{:toc}

十天总结

一. 知识总结

通过这10天的学习与练习，大体上了解了公司开发项目的流程
学会了HTML表单，表格，图片以及超链接
学会了CSS代码的用处，代码放置位置，CSS选择器以及开发常用CSS样式
掌握了 Bootstrap技术的使用，了解了 Bootstrap技术使用的场景以及目的
了解了JavaScript的概念（JavaScript是脚本语言，在浏览器端执行；JavaScript与Java没有关系，JavaScript简称JS）以及用途（1. 做前端开发必备语言 2. 做表单验证 3. 做网页特效）
了解了JavaScript代码的放置位置以及JavaScript函数的定义方式
清楚了JavaScript要与事件结合进行使用
明白了正则表达式的使用以及其语法规则
学会了使用正则表达式进行表单验证

二.个人总结

这十天进步很大，掌握了许多新知识，写代码水平也有所提高
目标已达成，部署情况：
云主机链接https://wzkweb.azurewebsites.net/UOLabNUC2020/login.html
github链接https://w-40.github.io/NUC_WZK/UOLabNUC2020/login.html
每天早上下午的时间全部投入学习前端知识，晚上空闲时间用来继续学习Java的知识
目前没有不懂的东西，也没有不熟练的东西，只是指法还需要多加练习
对公司岗位以及行业，职业的发展有了初步的认识，明确了未来的发展方向

Lesson10-周四（7.22）

问题解答

在github上面提交的时候，显示文件数量限制是100
分不同的时间多次上传，码云限制的是20个文件
后端只能是Java，C++不行
想找实习必须要会开发项目
开发界面风格要统一
导出Excel和Echarts需要Java后端支持，需要专门学习ECharts的使用
点击左侧超链接后，没有在右侧显示网页，而是在左侧显示了在超链接中要加入target=“rightFrame”

前端技术未涉及的

（1）JSON **
（2）Layui **
（3）ECharts **
（4）jQuery **
（5）WebStorm **
（6）Vue.js **
（7）Node.js
（8）LESS
（9）SASS
（10）Flex布局
（11）HTML5
（12）CSS3

后端：前后端分离的微服务架构开发

前后端分离微服务架构开发按发过去的路线图和清单来学习即可。需要提前学。

Lesson9-周三（7.21）

问题解答

1.一定要考虑二次择业（同城跳槽、跨城工作）
往远处想。不要选Python、安全、C#、Go，所有的选择都要服从现实
太原C++/C找不到工作

任务：按需求，完成原型的开发（复制、粘贴）

学会点

HTML表单（文本框、下拉列表、单选按钮、按钮）
HTML表格
HTML图片
HTML超链接
CSS选择器（id、class）

Lesson8-周二（7.20）

总结

学会了如何修改项目模板完成需求
掌握了修改代码的流程

今日工作任务：开发《UOLab联合开放实验室管理系统》项目原型（界面）

1.给同学们提供美工做的模板
2.学会如何在模板基础上改，把项目功能放在模板上
3.暑假期间完成开发，开学提交
4.组织验收（待定）

技术类问题

代码写完了，点了计算按钮后，没反应
JS中的排错方式：
1）打开控制台看console里面有没有代码中报错，有个行号，到源码里面找错
2）在js的代码里面加输入语句：alert()\console.log()，在控制台里显示跟踪程序的执行过程，可以看到从哪里执行不下去了
多写多犯错，积累经验
不能使用汉字符号，尤其是汉字空格

问题解答

做科研、当大学老师、进国有企业：必须读研，最好读到博士
如果只是做开发、找工作：读研可以暂缓。将来根据工作需要读研，更有针对性
根据自己的职业目标，来确定是否要读研
读研本质：在导师引导下的自学和做项目
科研做什么（科学家）：发明创新、填补空白。比如：疫苗、芯片
做工程工作，做软件研发：考研暂缓
课外学什么知识来提升自己
1）定岗位职业目标
2）根据职业目标学习岗位需要的技术或知识
假期结束时：确定自己的职业目标，大二发力，大三实习
自己应该如何练习（借力）
1）找过来人
2）参考一些视频
3）参加线下培训
考研和直接就业怎么抉择，专业分方向如何选择
如果觉得自己考上的把握很大，可以去考；如果只是试一试，建议直接工作
考研失利，工作没有。大二做两手准备，大二一年搞定技术，达到能被录用的程度。大三第二学期再去考研。这样比较安全。上大学，安全。考研和工作必须有一头。大学成功期盼的
项目就是软件，软件有界面，目前学习就是要做软件的界面
个人接单网站：猪八戒网。根据自己的职业目标选择学什么技术，接什么单。
能够达到接单程度的话，意味着大家找工作没问题了；暑假时间不够
自学编程需要1-1.5年时间，坚持；不难，是陌生
在正确的时间，做正确的事情，努力就好。
这个专业要学多少门语言
上班的话精通一门就可以

对未来的作用

大二第2学期，做Java Web项目；一定会用到这次学的技术
大三第一学期，做SSM框架的项目；也会用到这次学的技术
做Java研发工程师、Web前端开发工程师的话，一定会用

Lesson7-周一（7.19）

总结

学会了进行JS表单验证
学会了正则表达式的格式
掌握了通过id定位文本框的方式，并能类比学会其他方式

一.JS表单验证

通过ID定位文本框（其余方式类似）

document.getElementById

公司开发中要是用正则表达式，JS函数，DOM
存款计算器中，我们使用了：onfocus事件，此时用在了文本框里
onfocus（获得焦点）
例：

οnfοcus="clearContent()"//clearContent()是自定义函数

function clearContent(){
			document.getElementById("amount").value='';//空
			document.getElementById("amount").style="color:black";字体颜色变为黑色
		}

正则表达式

例子：

/^[0-9]{4,5}$/
var regExp = /^[0-9]{2,6}$/;//正则表达式语法,0-9是只能是数字，2,6是最多六位，最少两万

技术问题

计算利息的时候，得到的是小数，位数很多？
计算机算的时候用二进制，我们填的是十进制；在二进制转十进制时，产生了误差
写完代码后，点下按钮没有反应
（1）打开Chrome控制台Console，看有没有报错，根据错误提示，排错
（2）如果console没有报错，一行一行检查代码
如果不输入也能算，得到NaN？
使用JS做表单验证

其他问题

（1）不要排斥专业
（2）学编程，动手才能学会，耐心认真检查代码
（3）无需焦虑，找见问题根源，解决就对了
（4）学编程时视频只是辅助，不能主导，尤其没有开发经验的人
（5）保持自信，想办法解决问题，检查下去
建议：下学期除了考试外，一定要把时间放到公司技术和项目开发上
大学不是高中，高中是为了考试考大学，大学是为了工作

Lesson6-周六（7.17）

一.昨日问题总结

要专心专注

二.JavaScript的重大作用

对于Java研发工程师，JavaScript是必须的，要能熟练开发
对于Web前端开发工程师，JavaScript必须要深入、精通。这个岗位使用的开发语言就是JavaScript
大数据工程师、爬虫工程师等：JavaScript也是需要掌握

三.JavaScript和C语言有关系吗？

没有任何关系。是两种独立的语言。
不同的编程语言，他们的语法有一定的相似度。相似不代表有关系

四.不同的编程语言的应用场景(领域)

C语言（强调算法、数据结构）
面向过程的。主要用于：只能设备上的软件开发（嵌入式）、操作系统底层开发、
算法等。安卓手机的底层就是C开发的、Windows的底层也用C开发、偏底层
C++语言
面向对象。主要用于：图形界面软件开发（美图秀秀，PS，酷狗音乐）、通信软件（QQ），
游戏、控制软件（带有图形界面的控制软件）、STM32开发
Java语言（*不太强调算法和数据结构，数据结构是现成的）
面向对象。主要用于：基于B/S结构的大型管理信息系统开发（12306、教务系统）
大数据开发（Hadoop）、安卓手机应用开发、智能电子设备开发（数字电视机顶盒）
Python
Python2和Python3.胶水语言，什么都能干，全能型选手。主要用于：信息安全编程、爬虫、
大数据分析、AI等
JavaScript语言
面向对象的。脚本语言：运行在浏览器上。主要：网页上的动态效果、网页和用户的交互

-----------编程语言没有好坏之分，根据应用场景，选择不同的语言
-----------在公司里，做啥就是做啥的。精细化分工
-----------算法：在公司里，有专门的算法工程师岗位，数学功底深厚

五.JavaScript是什么

脚本语言，运行在浏览器中，也就是运行在客户机中。各种浏览器都能执行JS
但是不同的浏览器对JS的支撑程度不尽相同。进行浏览器的兼容性测试
JavaScript不是W3C的标准，由欧洲计算机制造商协会
HTML、CSS、JS都是由浏览器执行的

六.上网的过程，前端代码的执行过程

B/S结构：Browser/Server ，浏览器/服务器结构。如：教务系统有浏览器就能用
C/S结构：Client/Server，客户机/服务器结构，如：QQ，需要在自己电脑上安全
单机软件：如：Word，在自己电脑上按，只能自己用
上网过程分析：
-输入网址，敲下回车；浏览器向12306的服务器发出请求
-响应：服务器收到浏览器请求后，服务器会把保存在服务器上的网页源码发回给浏览器
-浏览器在收到源码后，对源码执行，产生最终的显示效果

七.JavaScript学习重要提醒

JS程序的调试要利用Chrome或Firefox的控制台
写JS程序一定要细心，一旦写错排错真的比较难（针对初学者）

八.Chrome的调试

鼠标点击（不推荐，这样的打开方式不专业）
F12(有的同学需要按下键盘上的Fn)
快捷键：Ctrl + Shift + I（推荐）
打开控制台，调试JS用console，调试

九.JavaScript学习重点

语法
函数
事件
正则表达式与表单验证
DOM

十.JS输出（便于调试JS代码）

alert()
console.log()
补充：JS代码放在什么地方
代码中
独立的js文件中

十一.JS语法

JS是弱类型语言（没有类型）
JS中变量定义可以用var也可不用
JS语言大小写敏感（严格区分大小写）
语句末尾分号可写也可不写
JS函数用function，函数名程序员自定，函数的形参由程序员自定，
JS的函数没有返回值（因为是弱类型的语言）
5.先理解思路，确定实现步骤
6.把实现步骤写成代码

十二.排错（最麻烦，最重要）

写代码容易，排错费劲
仔细分析自己的代码，看哪里写错了，这个过程可能较长，但我们要经理
3.多写代码，多出错，累经验
4.不要放弃
.

Lesson5-周五（7.16）

昨日问题总结

如果要使用Bootstrap样式，那就所有地方都使用Bootstrap样式
Bootstrap追求的是自适应，不太讲究美观，最好不要混着用
如果将来从事Web前端设计工作（网页美工），下苦工学习CSS，深入-------
----《CSS权威指南》，CSS要学好的话，临摹10个网站，达到相对熟练
将来从事Java开发的，对CSS要求不高，能基本会用就行
网页上传到github后，图片不显示
在网页代码里，src后带有目录，但是在github上没有建images目录，而是把图片直接上传，因此图片不显示，理解了，再去做
图片路径也对，但图片不显示
原来图片路径不对，改了之后又上传，刷新网页没变化，是因为github滞后导致的，过一阵再刷新
按自己的想法写
大学学习 = 大学课程 + 公司技术 + 社会行业信息（走出去）
公司必备专业技能：
（1）知道读大学目的所在，积累工作的资本，技术 + 能力文凭只是锦上添花
（2）在这个暑假就明确未来做什么岗位
Java研发工程师、C/C++开发工程师，Web前端开发工程师、信息安全工程师、嵌入式开发工程师、UI设计工程师、实施逛超市、售前工程师、需求分析工程师

一.Bootstrap表格

例：

<table class="table table-bordered text-center">
			<!--表格内容居中，表格佳边框-->
				<tr class="bg-primary"><!--背景变蓝-->

创建只读文本框
<td>
						<input type="text" id="total" class="form-control" readonly="readonly">
					</td>

二.任务：个人存款计算软件界面

见Day05中calc.html

三.任务：个人社保计算软件界面

见Day05中money.html

为js做准备

Lesson4-周四（7.15）

问题总结

通过今天的练习，对div有了更深刻的练习，使用也更加熟练，

解决了昨日遗留的使用不熟练的问题

今日感悟

掌握了在github上部署网页的方法
学号了CSS显示与CSS浮动的应用场景以及使用方法
了解了Bootstrap技术的工作原理是网格系统（把屏幕分成12列，使用者可以按自己需要组合列），使用Bootstrap后，CSS样式就不用自己写了
了解了用Bootstrap技术美化自己网页的方法并能够成功用在自己制作的网页中
对div的使用有了更加深刻的认识

昨日补充

CSS开发心理：一边写CSS，一边预览，再改CSS；经过长时间调试，达到最终目的
CSS同一问题解决方案不唯一
css选择器（标记，id，class）
CSS代码位置
边框样式（边框变红）
工作后，网页界面是由美工（UI）来做，我们在他的基础上开发后端程序
7.将网页部署到互联网上的方法
第一步：开发自己的网页
第二步：购买云主机Linux系统（阿里云主机），获得一个IP地址
第三步：把自己做好的网页远程上传到云主机
第四步：百度搜索域名注册，注册一个自己的域名，域名在工信部通管局备案，取得备案号；
把自己的域名和IP做绑定，通过阿里云完成，此时，网站就可以用域名备案

一.CSS显示

display：隐藏后，释放区域。

display: none;/*不显示，隐藏，不保留图片位置

visibility：隐藏后不释放区域

visibility: hidden;/*隐藏，但保留图片的位置*/

二.CSS浮动

float

float: left;/*让div浮动起来，脱离流布局*/

网页美工必须精通
主要用于：网页布局（CSS + DIV）
CSS+DIV做网页布局离不开浮动要理解浮动的意思
看网页效果，返回来理解用意

三.Bootstrap技术

1. Bootstrap介绍

（1）用Bootstrap做的网页，能够自动适应屏幕，在任何设备上都能完整显示
（2）移动优先（Bootstrap伴随着智能手机而来）
（3）Bootstrap技术是基于：HTML、CSS、JavaScript
（4）Bootstrap本质：写好的CSS样式库（拿来就用）
（5）Bootstrap不是编程语言，是一种技术

2. Bootstrap如何使用（两种）

（1）把.Bootstrap文件从官网下载下来，复制到自己的项目里
（2）直接使用CDN（内容分发网络，其实就是放在公网上的文件）
使用CDN方式电脑必须联网

Bootstrap CDN方式核心代码
<!-- 新 Bootstrap 核心 CSS 文件 -->
<link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 
<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
 
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

3. 如何学习Bootstrap

看官方文档

4. Bootstrap工作原理

-----网格系统（把屏幕分成12列，使用者可以按自己需要组合列）
-----使用Bootstrap后，CSS样式就不用自己写了

5.如何在github上搭建静态网站

（1）注册github账号
（2）把写好的网页上传到项目里
（3）在设置中找到pages，点击main，

（4）用github提供的网址+自己html文件的网址即可访问

（5）可用草料二维码（cli.im）把网址转为二维码

四.课后作业

见码云Day04中NUC_Login.html

Lesson3-周三（7.14）

问题总结

对div的使用还不够熟练，还应该多加练习

今日总结

学会了CSS的基本语法以及美化界面的方法
掌握了CSS选择器和开发常用的样式

（1）背景颜色

（2）文本样式

（3）字体样式

（4）链接样式

（5）表格样式
学会了使用盒子模型
学会了自己制作登录界面
学会了巧妙利用div来调整网页布局

一.CSS是什么？

层叠式样式表，简称为样式(Cascading Style Sheets)，CSS要大写
由W3C组织制定的标准，最新版CSS3
CSS由浏览器执行
作用：美化网页（HTML不具备美化网页的功能）

二.CSS选择器（*****）

标记选择器
以标记开头

例：

/*标记选择器*/
			div{
				color: red;
			}
			p{
				color: green;
			}

id选择器
id选择器以#开头

例：

/*id选择器以#开头*/
			#shanxiDiv{
				color: yellow;
			}
			#tyDiv{
				font-size: 40px;
			}

class选择器
class选择器：类选择器，可以相同，以.开头
这三种选择器必须要学会

例：

/*class选择器：类选择器，可以相同，以.开头*/
			.nuc{
				color: blue;
				font-size: 45px;
			}

三.CSS代码放置的位置

页内样式：放在head之间，用style 标记

例：

<head>
		<meta charset="UTF-8">
		<title>CSS代码放的位置</title>
		<!--引入外部CSS文件-->
		<link rel="stylesheet" href="nuc.css">
		<style type="text/css">
			div{
			color: red;
		}
		</style>
		
	</head>

行内样式：放在标记的style属性里面（行内样式优先级最高）

例：
```
<p style="color: green;font-size: 20px;">真实的故事</p>
```
外部样式：放在独立的CSS文件中，在网页上用link标记引入

例：

<!--引入外部CSS文件-->
		<link rel="stylesheet" href="nuc.css">

四.开发常用样式

基于三种选择器进行使用

背景颜色（background-color）

例：
```
background-color:#FF8000 ;
```
文本样式（color）

例：

.nuc{
				color: red;
			}

文字对齐方式（text-align）

例：

.nuc{
				text-align: center;/*文字对齐方式*/
			}

文字装饰：

（1）文字下划线（text-decoration：underline）

例：

.nuc{
				text-decoration: underline;/*文字装饰*/
			}

（2）文字删除线（text-decoration：line-through），医用HIS系统

例：

#my{
				text-decoration: line-through;
			}

（3）删除文字下划线（text-decoration：none）用于删除超链接下划线

例：

a{
				text-decoration: none;//去掉下划线
			}

字体样式
(1)字体（font-family）

例：

<style>
		.myflag{
			font-family: "仿宋";
		}
	</style>

(2)字号（font-size）

例：

<style>
		.myflag{
			font-size: 80px;
		}
	</style>

网页上的文字默认是16px；在工程上网页上的文字一般是12px或14px

链接样式（a:hover）

例：

<style>
		a:hover{
				color: red;
				font-size: 50px;
			}
	</style>

表格样式（）
细线表格，边框折叠（border-collapse：collapse）
表格线

例：


<style>
    /*给table,tr,td同时施加样式*/
	table,tr,td{
		/*边框宽度1px、实现、黑色*/
		border: 1px solid black;
	}
  </style>

text-align: center;/*表格文字居中*/

例：

表格大小及文字位置样式
<style>
	table{
				width: 500px;
				height: 80px;
				text-align: center;/*表格文字居中*/
			}
     </style>

边框样式
边框变红（border:1px solid red）

#uname{
				border: 1px solid red;/*边框变红*/
			}

圆角（border-radius）

例：

border-radius: 5px;/*边框四个角被弧度*/
padding-left: 60px;/*内边距*/
margin: 0 auto;/*让div居中*/
padding-top: 30px;/*顶端内边距*/
margin-top: 30px;/*顶端外边距*/
margin-left: 10px;/*左侧外边距*/

五.盒子模型

与网页布局密切相关
美工必须精通
开发工程师理解并会用
重要：外边距margin，内边距padding；内外边距是相对的，看站在
哪一方来说。边框有四个方向：上下左右

例：

<html>
	<head>
		<meta charset="UTF-8">
		<title>盒子模型</title>
		<style>
			#firstdiv{
				width: 480px;
				height: 480px;
				border: 1px solid red;
				padding-top: 40px;
				padding-left: 60px;/*内边距*/
				margin: 0 auto;/*让div居中*/
			}
			#seconddiv{
				width: 260px;
				height: 260px;
				border: 4px solid cyan;
				padding-top: 30px;/*顶端内边距*/
			}
			#loginBtn{
				margin-top: 30px;/*顶端外边距*/
				margin-left: 10px;/*左侧外边距*/
			}
		</style>
	</head>
	<body>
		<div id="firstdiv">
			<div id="seconddiv">
				<button id="loginBtn">登录</button>
			</div>
		</div>
	</body>
</html>

登录网页

用到了盒子模型（内部外部边距等）
HTML表单元素（用户名、密码、登录按钮）

六.课后作业

见码云Day03中login.html文件

Lesson2-周二（7.13）

今日总结

HTML只能做网页结构，大小写不区分，由浏览器执行
开发重点：表单、表格、超链接、图片、列表、iframe
学到什么程度就行？能自己写出2中的内容
对开发人员的用途：做项目界面
今天主要掌握了表格的语法以及使用，了解了表格还可以用来使页面内容对齐，美化页面
复习了昨天自学的超链接的使，
明白了列表的使用方法
学会了公司开发常用的iframe框架
学会html主要语法

一.昨日补充

1.HTML标记多数是成对出现，有开始有结束，带斜杠的表示结束

2.form是表单，head是网页的头部，body是网页的身体

3.表单是收集用户数据发给服务器

4.输入有键盘输入和点击输入，placeholder是给用户提示

5.name是为将来做准备，与后台开发进行交互，网页上的每一个表单都可以起名字，名字可以相同但尽量不要相同(name 给控件起名字，一般不重复)。

6.br的斜杠有和没有都可以

7.HTML语言不区分大小写

8.checked，selected都是默认选中，使用场合不一样

9.input是标记，其他的是标记的属性，value是文本框填的内容

二.HTML表格（*****）

	<table></table>表格标记
	<tr></tr>表格行
	<td></td>表格列
	在<table>里面放<tr>，在<tr>里面放<td>
	合并单元格使用<td colspan="2"></td>  ，合并两个单元格（列）

三.HTML的超链接（*****）

链接可以到自己的网页，也可以是外部网站
语法

   <a href=""></a>

三.HTML中的图片（*****）

1.语法

	<img  width="" heigh="" src=".jpg">

图片带链接
在超链接标记中加入图片

	<a href=""><img width="" heigh="" src=".jpg"></a>

四.HTML列表

有序列表和无序列表

有序列表<ol></ol>     无序列表<ul></ul>
	<li></li>列表项

有序列表：

<ol>
			<li>软件工程专业</li>
			<li>自动化专业</li>
			<li>电子信息工程</li>
			<li>电子信息工程</li>
		</ol>

无序列表：

<ul>
			<li>中北大学</li>
			<li>北京理工大学</li>
			<li>东北大学</li>
		</ul>

五.标题

HTML共六级标题

	<h1></h1>
	<h2></h2>
	<h3></h3>
	<h4></h4>
	<h5></h5>
	<h6></h6>

六.段落和DIV块

段落p：会自动换行

	<p>段落</p>

块div：会自动换行

	<div>块</div>

不会自动换行

	<span></span>

也不会自动换行

	<label>标签</label>

七.HTML颜色

颜色表示两种：用颜色名；颜色的值，是16进制，以#开头
颜色是由三种色调配而成：RGB（red，green，blue）
-----做网页的在公司里是谁？网页美工或UI工程师；我们开发人员是用他们
做好的。我们不去做网页，更不会去做网站，我们只需要能看懂他们

八.字符实体

面试题：HTML中的空格怎么表示？
-----HTML是W3C的标准，但不是强制标准，每个浏览器对他的支持程度都不尽相同，HTML语法比较宽松
常用字符实体

例：

	&yen;表示¥
	&copy;表示©
	&gt;表示>

九.iframe框架（常用）

使用方法—例：

<body>
		<iframe width="1370px" height="700px" src="http://www.qq.com" name="mycontent"></iframe>
	</body>

高频面试题：post和get有什么区别？

post方式提交表单，表单数据在地址栏不显示，比较安全
get方式提交表单，数据会显示在地址栏上，不安全
post提交数据，数据量大小不限；get一般最大为2K，所以一般采用posy

十.课后作业

见day02的12306_register_table.html文件

Lesson1-周一（7.12）

一.问题总结

1.自己存在的问题：

（1）打代码的正确率还有待提升，经常打错字
（2）学习后忘记的速度较快，还需多加练习强化记忆

2.啥没学会：暂时没有没学会的内容

3.心得体会以及收获：

1.了解了32位和64位软件的存储目录分别是Program Files（x86）和Program Files
2.明白了Windows不区分大小写而Linux,unix,Mac OS下严格区分大小写
3.了解了本次实训要达成的目标:做出项目原型并在github上部署，全球用户可访问
4.明白了项目的构成=前端界面+后端技术+数据库
5.明白了前端技术包括：（1）HTML  （2）css （3）JavaScript （4）jQuery （5）Bootstrap
					（6）Vue.js
				以及开发工具：1.Chrome 2.HBuilder
5.了解了公司项目开发流程（*****）
	（1）  招投标  岗位：商务（销售、售前工程师）
	（2）  签合同
	（3）  建立项目组（项目经理、高级开发工程师、中级开发、初级开发）
	（4）  需求调研与分析  岗位：需求分析工程师
	（5）  数据库设计   岗位：DBA
	（6）  架构设计     岗位：架构师
	（7）  详细设计     岗位：系统分析师或系统分析员
	（8）  开发（编程） ***** 
	（9）  测试  岗位：测试经理、测试工程师、用例工程师
	（10）部署实施   岗位：实施工程师
	（11）验收       甲方验收，乙方是软件开发公司
	（12）维护  岗位：技术支持或运维工程师
6.认识了在公司里项目开发前端采用的框架：
	（1） 公司内部框架，对外不公开
	（2） Layui
	（3） ElementUI
前端开发工具公司用什么？
	（1） 前端开发工程师用：WebStorm
	（2） 移动Web APP开发：用HBuilder
7.掌握了html的部分基本语法
8.自我感觉这种边听边练的方法更适合自己，能够提升学习效率，加快学习速度

学习笔记部分：

一、Markdown学习（5W1H学习法）

1.Markdown是用来做什么的

Markdown是写软件文档用的，软件工程师标配
有自己的代码，但非常简单
浏览器就能识别Markdown代码

2.什么时候用Markdown

写专业软件文档用；github或gitee，可以用来日常写笔记，总结，或书。

二.HTML介绍

1.HTML是什么，怎么执行？

HTML叫超文本标记语言。最新版本：HTML5（H5）；
HTML代码由浏览器执行；
五大主流浏览器:Chrome、Firefox、Opera、Safari、Edge；

2.为什么用它？

做Web项目，界面必须得用它

3.谁来用？

后端开发人员一定要会、Web前端开发工程师、网页美工（UI）都要用。

4.什么时候用？

做项目的时候用

5.用在哪里？

用在网页上，搭建网页结构和元素

6.怎么用？

按教程学，在项目中实战使用，通过实际来学

三、HTML标准

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

四、HTML表单开发（*****）

0.表单怎么写

	<form action="网页名"></form> 成对出现

1.文本框怎么写？

	<input type="text"><br>

2.密码框

	<input type="password"><br>

3.单选按钮

	<input type="radio" name="按钮名称"><br>

4.下拉选择怎么写

	<select>
				<option>选项一</option>
				<option>选项二</option>
				<option>选项三</option>
			</select><br>

5.复选框怎么写

	<input type="checkbox"><br>

6.文本域怎么写

	<textarea rows="5" clos="50">
				文本域  5行50列
			</textarea><br>

7.文件上传

	<input type="file"><br>

8.提交按钮

	<input type="submit" value="按钮名称"><br>

9.重置按钮

	<input type="reset" value="清空重填">

10.如何跳转网页

	<form action="receive.html" method="post">
	<input type="submit" value="注册">

点击提交按钮后将会跳转到action后面的网页

五.课后作业

写12306注册表单（不考虑效果和样式）

见Day01文件夹中12304_register_table.html

拾光1024

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
2021-07-22-第一次实训(HTML+CSS+JS)

2020-2021-2小学期实训
复制链接

扫一扫

2021-07-22-第一次实训(HTML+CSS+JS)

layout: post #标题配置 title: 第一次实训(HTML+CSS+JS) #时间配置 date: 2021-07-22 11:00:00 +0800 #目录配置 categories: JavaWeb #标签配置 tag: 学习笔记

十天总结

一. 知识总结

二.个人总结

Lesson10-周四（7.22）

问题解答

前端技术未涉及的

后端：前后端分离的微服务架构开发

Lesson9-周三（7.21）

问题解答

任务：按需求，完成原型的开发（复制、粘贴）

学会点

Lesson8-周二（7.20）

总结

今日工作任务：开发《UOLab联合开放实验室管理系统》项目原型（界面）

技术类问题

问题解答

对未来的作用

Lesson7-周一（7.19）

总结

一.JS表单验证

正则表达式

技术问题

其他问题

Lesson6-周六（7.17）

一.昨日问题总结

二.JavaScript的重大作用

三.JavaScript和C语言有关系吗？

四.不同的编程语言的应用场景(领域)

五.JavaScript是什么

六.上网的过程，前端代码的执行过程

七.JavaScript学习重要提醒

八.Chrome的调试

九.JavaScript学习重点

十.JS输出（便于调试JS代码）

十一.JS语法

十二.排错（最麻烦，最重要）

Lesson5-周五（7.16）

昨日问题总结

按自己的想法写

一.Bootstrap表格

二.任务：个人存款计算软件界面

三.任务：个人社保计算软件界面

Lesson4-周四（7.15）

问题总结

今日感悟

昨日补充

一.CSS显示

二.CSS浮动

三.Bootstrap技术

1. Bootstrap介绍

2. Bootstrap如何使用（两种）

3. 如何学习Bootstrap

4. Bootstrap工作原理

5.如何在github上搭建静态网站

四.课后作业

Lesson3-周三（7.14）

问题总结

今日总结

一.CSS是什么？

二.CSS选择器（*****）

三.CSS代码放置的位置

四.开发常用样式

文字装饰：

五.盒子模型

登录网页

六.课后作业

Lesson2-周二（7.13）

今日总结

一.昨日补充

1.HTML标记多数是成对出现，有开始有结束，带斜杠的表示结束

2.form是表单，head是网页的头部，body是网页的身体

3.表单是收集用户数据发给服务器

4.输入有键盘输入和点击输入，placeholder是给用户提示

5.name是为将来做准备，与后台开发进行交互，网页上的每一个表单都可以起名字，名字可以相同但尽量不要相同(name 给控件起名字，一般不重复)。

6.br的斜杠有和没有都可以

7.HTML语言不区分大小写

8.checked，selected都是默认选中，使用场合不一样

9.input是标记，其他的是标记的属性，value是文本框填的内容

layout: post
#标题配置
title: 第一次实训(HTML+CSS+JS)
#时间配置
date: 2021-07-22 11:00:00 +0800
#目录配置
categories: JavaWeb
#标签配置
tag: 学习笔记