结构
C/S结构
Client+Sever 客户端+服务器端
需要在电脑上安装的重终端，或一个特定的客户端才能运行。
B/S结构
Browser+Server 浏览器+服务器
JAVA主要后端语言，用于开发服务器端程序。
网页开发
学习内容：
语言：
html
css
javaScript
两个框架：
VUE.js
ElementUI UI user interface 用户界面
HTML语言
1.概述：
HTML（）指超文本标记语言
文本：文字字符
超文本：页面内可以包含图片，链接的一系列网页内容。
标记：标签，标识
html中的标记指的就是标签。
2.骨架标签
html
<!--
html注释
<!DOCTYPE html> 声明html语言的版本信息，为html5版本，告诉浏览器以html5标准解释运行
-->
<!DOCTYPE html>
<!-- HTML骨架标签 -->
<!--
html标签是网页中的根标签，所有内容都应该写在此标签中
-->
<html>
<!-- 头标签 -->
<head>
<meta charset="utf-8" /><!-- 网页字符集 -->
<meta name="keywords" content="手机，家电"/><!-- 设置网页关键字，让搜索引擎查找 -->
<title>我的第一张网页</title><!--网页标题-->
<link href="img/baidu.ico" rel="icon" />
</head>
<!-- 身体标签，用来写网页内容的 -->
<body>
<!--
标签结构和写法
<标签名>
<开始标签> </结束标签> 闭合标签（双标签）
<标签名 属性=" " />完成一个特定的设置功能，没有标签体， 自闭和标签（单标签）
<meta charset="utf-8" />
<br/> 换行标签
<b></b> 字体加粗
标签中可以有属性，可以改变标签原有显示风格
属性写在标签的开始标签中
一个标签可以有多个属性
属性名="值"
例如：
<body text="red" bgcolor="black">
-->
<b><font size="10">百度</b> <br/><b><font size="6">腾讯</b>
<br/>
<font color="blue" size="4">
<b>
<a href="https://www.qq.com/">
腾讯网
</a>
</b>
</font>
</body>
</html>3.标签
html
<body>
<!-- 题目标签
一个标签独占一行
align="left"控制内容在本行内的水平对齐方式
-->
<b>题目标签</b>
<h1 align="left">一级标签</h1>
<h2 align="center">二级标签</h2>
<h3 align="right">三级标签</h3>
<!--
p段落标签
一个p标签，表示一个独立的段落
段落与段落之间有间隔
-->
<b>p段落标签</b>
<p>
啥黄金三撒娇拿手机你手机阿大吉萨达合计
</p>
<p>
换手机阿昆达就打算你等会
</p>
<!--
换行标签
<br/> 标签名
-->
<b>无序列表</b>
<!--
无序列表标签
<ul>
<li>列表行1</li>
<li>列表行2</li>
</ul>
-->
<ul>
<li>列表行1</li>
<li>列表行2</li>
<li>列表行3</li>
<li>列表行4</li>
</ul>
<!-- 有序列表 -->
<b>有序列表</b>
<ol>
<li>列表行1</li>
<li>列表行2</li>
<li>列表行3</li>
<li>列表行4</li>
</ol>
<!--
type="*" 表示自动排序时第一位的是*，然后按照*依次排序
-->
<ol type="A">
<li>列表行1</li>
<li>列表行2</li>
<li>列表行3</li>
<li>列表行4</li>
</ol>
</body>4.超链接标签
href (Hypertext Reference 超文本引用)规定链接指向UIL页面
target 打开位置，
"_self"默认打开位置，在当前窗口打开新的网页
"_blank" 创建新窗口打开。
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
table 表示一个表格
tr 表示一行
th 表示一个单元格，还是表头，内容会加粗，并且居中
td 表示一个普通单元格
表中数据只能写在单元格中。
cellpadding 内边距，内容到表格边界的距离
cellspacing 外边距，单元格到单元格之间的距离
-->
<table border="1" width="400" cellpadding="10" cellspacing="0">
<!-- 行 -->
<tr >
<th>姓名</th>
<th wide="100">班级</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr height="40">
<!-- 列 -->
<td>王乐</td>
<td>计算机2202</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td>朱磊</td>
<td>计算机2201</td>
<td>22</td>
<td>男</td>
</tr>
</table>
</body>
</html>5.组件
html
就一个区域，拥有许多输入和选择的组件
让用户可以输入选择信息，最终将数据提交到服务器端
<form action="财务报表.html" method="get">
action="服务器地址" method="请求方式"
input
type="text" 单行输入文本框
name="accound" 定义组件名 向后端提交用
value=""组件的值
readonly 设置组件只读，不能修改，提交表单时，可以被提交到服务器端
placeholder="请输入用户名"输入框提示信息
disabled 禁用组件，不会提交内容到服务器
<input type="submit"/> 提交按钮
type="password" 密码框
type="radio" 单选框
单选框通过name分组，name相同的为一组
checked 属性可以为默认选中一项
type="checkbox"多选框
type="file" 文件选择框
下拉选择组件
checked 属性可以为默认选中一项
<select>
<option>请选择</option>
<option>选择1</option>
<option>选择2</option>
</select> 最终提交选中的选择值
<textarea></textarea>多行文本框
<input type="reset"/> 重置按钮，将表单重置到默认值
<input type="button" value="登录" onclick=""/>
设置按钮，给出名字， onclick并触发事件
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="财务报表.html" method="get">
账号:<input type="text" name="accound" value="" placeholder="输入账户信息"/><br />
密码:<input type="password" name="password"/><br />
性别:<input type="radio" name="gender" value="男"/ checked> 男
<input type="radio" name="gender" value="女"/> 女
<br />
课程:<input type="checkbox" name="course" value="java"/>java
<input type="checkbox" name="course" value="python"/>python
<input type="checkbox" name="course" value="c"/>c
<input type="checkbox" name="course" value="c++"/>c++
<br />
附件:<input type="file" name="file"/>
<br />
省份:<select>
<option value="100">请选择</option>
<option value="101">北京</option>
<option value="102">上海</option>
<option value="103" selected>陕西</option>
</select>
<br />
地址:<textarea rows="5" cols="30"></textarea>
<br />
<input type="submit" value="保存"/><br />
<input type="reset"/>
<input type="button" value="登录" onclick=""/>
</form>
</body>
</html>