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


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

  • content
    {:toc}

十天总结

一. 知识总结

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

二.个人总结

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

Lesson10-周四(7.22)

问题解答

  1. 在github上面提交的时候,显示文件数量限制是100
    分不同的时间多次上传,码云限制的是20个文件
  2. 后端只能是Java,C++不行
  3. 想找实习必须要会开发项目
  4. 开发界面风格要统一
  5. 导出Excel和Echarts需要Java后端支持,需要专门学习ECharts的使用
  6. 点击左侧超链接后,没有在右侧显示网页,而是在左侧显示了 在超链接中要加入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找不到工作

任务:按需求,完成原型的开发(复制、粘贴)

学会点

  1. HTML表单(文本框、下拉列表、单选按钮、按钮)
  2. HTML表格
  3. HTML图片
  4. HTML超链接
  5. CSS选择器(id、class)

Lesson8-周二(7.20)

总结

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

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

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

技术类问题

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

问题解答

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

对未来的作用

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

Lesson7-周一(7.19)

总结

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

一.JS表单验证

  1. 通过ID定位文本框(其余方式类似)
document.getElementById
  1. 公司开发中要是用正则表达式,JS函数,DOM
    存款计算器中,我们使用了:onfocus事件,此时用在了文本框里
  2. 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. 计算利息的时候,得到的是小数,位数很多?
    计算机算的时候用二进制,我们填的是十进制;在二进制转十进制时,产生了误差
  2. 写完代码后,点下按钮没有反应
    (1)打开Chrome控制台Console,看有没有报错,根据错误提示,排错
    (2)如果console没有报错,一行一行检查代码
  3. 如果不输入也能算,得到NaN?
    使用JS做表单验证

其他问题

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

Lesson6-周六(7.17)

一.昨日问题总结

要专心专注

二.JavaScript的重大作用

  1. 对于Java研发工程师,JavaScript是必须的,要能熟练开发

  2. 对于Web前端开发工程师,JavaScript必须要深入、精通。这个岗位使用的开发语言就是JavaScript

  3. 大数据工程师、爬虫工程师等:JavaScript也是需要掌握

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

  1. 没有任何关系。是两种独立的语言。

  2. 不同的编程语言,他们的语法有一定的相似度。相似不代表有关系

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

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

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

五.JavaScript是什么

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

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

  1. B/S结构:Browser/Server ,浏览器/服务器结构。如:教务系统 有浏览器就能用

  2. C/S结构:Client/Server,客户机/服务器结构,如:QQ,需要在自己电脑上安全

  3. 单机软件:如:Word,在自己电脑上按,只能自己用

  4. 上网过程分析:
    -输入网址,敲下回车;浏览器向12306的服务器发出请求
    -响应:服务器收到浏览器请求后,服务器会把保存在服务器上的网页源码发回给浏览器
    -浏览器在收到源码后,对源码执行,产生最终的显示效果

七.JavaScript学习重要提醒

  1. JS程序的调试要利用Chrome或Firefox的控制台

  2. 写JS程序一定要细心,一旦写错排错真的比较难(针对初学者)

八.Chrome的调试

  1. 鼠标点击(不推荐,这样的打开方式不专业)

  2. F12(有的同学需要按下键盘上的Fn)

  3. 快捷键:Ctrl + Shift + I(推荐)

  4. 打开控制台,调试JS用console,调试

九.JavaScript学习重点

  1. 语法
  2. 函数
  3. 事件
  4. 正则表达式与表单验证
  5. DOM

十.JS输出(便于调试JS代码)

  1. alert()

  2. console.log()
    补充:JS代码放在什么地方

  3. 代码中

  4. 独立的js文件中

十一.JS语法

  1. JS是弱类型语言(没有类型)

  2. JS中变量定义可以用var也可不用

  3. JS语言大小写敏感(严格区分大小写)

  4. 语句末尾分号可写也可不写

  5. JS函数用function,函数名程序员自定,函数的形参由程序员自定,
    JS的函数没有返回值(因为是弱类型的语言)
    5.先理解思路,确定实现步骤
    6.把实现步骤写成代码

十二.排错(最麻烦,最重要)

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

Lesson5-周五(7.16)

昨日问题总结

  1. 如果要使用Bootstrap样式,那就所有地方都使用Bootstrap样式
    Bootstrap追求的是自适应,不太讲究美观,最好不要混着用
  2. 如果将来从事Web前端设计工作(网页美工),下苦工学习CSS,深入-------
    ----《CSS权威指南》,CSS要学好的话,临摹10个网站,达到相对熟练
    将来从事Java开发的,对CSS要求不高,能基本会用就行
  3. 网页上传到github后,图片不显示
    在网页代码里,src后带有目录,但是在github上没有建images目录,而是把图片直接上传,因此图片不显示,理解了,再去做
  4. 图片路径也对,但图片不显示
    原来图片路径不对,改了之后又上传,刷新网页没变化,是因为github滞后导致的,过一阵再刷新
  5. 按自己的想法写
  6. 大学学习 = 大学课程 + 公司技术 + 社会行业信息(走出去)
  7. 公司必备专业技能:
    (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有了更深刻的练习,使用也更加熟练,

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

今日感悟

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

昨日补充

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

一.CSS显示

  1. display:隐藏后,释放区域。

    display: none;/*不显示,隐藏,不保留图片位置
    
  2. visibility:隐藏后不释放区域

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

二.CSS浮动

  1. float

    float: left;/*让div浮动起来,脱离流布局*/
    
  2. 网页美工必须精通

  3. 主要用于:网页布局(CSS + DIV)

  4. 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方式核心代码


 


 


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的使用还不够熟练,还应该多加练习

今日总结

  1. 学会了CSS的基本语法以及美化界面的方法

  2. 掌握了CSS选择器和开发常用的样式

    (1)背景颜色

    (2)文本样式

    (3)字体样式

    (4)链接样式

    (5)表格样式

  3. 学会了使用盒子模型

  4. 学会了自己制作登录界面

  5. 学会了巧妙利用div来调整网页布局

一.CSS是什么?

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

二.CSS选择器(*****)

  1. 标记选择器
    以标记开头

例:

/*标记选择器*/
			div{
				color: red;
			}
			p{
				color: green;
			}
  1. id选择器
    id选择器以#开头

例:

/*id选择器以#开头*/
			#shanxiDiv{
				color: yellow;
			}
			#tyDiv{
				font-size: 40px;
			}
  1. class选择器
    class选择器:类选择器,可以相同,以.开头
    这三种选择器必须要学会

例:

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

三.CSS代码放置的位置

  1. 页内样式:放在head之间,用style 标记

    例:

    <head>
    		<meta charset="UTF-8">
    		<title>CSS代码放的位置title>
    		
    		<link rel="stylesheet" href="nuc.css">
    		<style type="text/css">
    			div{
    			color: red;
    		}
    		style>
    		
    	head>
    
  2. 行内样式:放在标记的style属性里面(行内样式优先级最高)

    例:

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

    例:


		<link rel="stylesheet" href="nuc.css">

四.开发常用样式

基于三种选择器进行使用

  1. 背景颜色(background-color)

    例:

    background-color:#FF8000 ;
    
  2. 文本样式(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. 字体样式
    (1)字体(font-family)

例:

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

(2)字号(font-size)

例:

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

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

  1. 链接样式(a:hover)

    例:

    <style>
    		a:hover{
    				color: red;
    				font-size: 50px;
    			}
    	style>
    
  2. 表格样式()
    细线表格,边框折叠(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>
  1. 边框样式
    边框变红(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;/*左侧外边距*/

五.盒子模型

  1. 与网页布局密切相关
  2. 美工必须精通
  3. 开发工程师理解并会用
  4. 重要:外边距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>

登录网页

  1. 用到了盒子模型(内部外部边距等)
  2. HTML表单元素(用户名、密码、登录按钮)

六.课后作业

见码云Day03中login.html文件

Lesson2-周二(7.13)

今日总结

  1. HTML只能做网页结构,大小写不区分,由浏览器执行
  2. 开发重点:表单、表格、超链接、图片、列表、iframe
  3. 学到什么程度就行? 能自己写出2中的内容
  4. 对开发人员的用途:做项目界面
  5. 今天主要掌握了表格的语法以及使用,了解了表格还可以用来使页面内容对齐,美化页面
  6. 复习了昨天自学的超链接的使,
  7. 明白了列表的使用方法
  8. 学会了公司开发常用的iframe框架
  9. 学会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的超链接(*****)

  1. 链接可以到自己的网页,也可以是外部网站
  2. 语法
   <a href="">a>

三.HTML中的图片(*****)

1.语法

	<img  width="" heigh="" src=".jpg">
  1. 图片带链接
    在超链接标记中加入图片
	<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语法比较宽松
常用字符实体

例:

	¥表示¥
	©表示©
	>表示>

九.iframe框架(常用)

使用方法—例:

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

高频面试题:post和get有什么区别?

  1. post方式提交表单,表单数据在地址栏不显示,比较安全
    get方式提交表单,数据会显示在地址栏上,不安全

  2. 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

你可能感兴趣的:(javascript,html,css)