个人博客网:https://wushaopei.github.io/ (你想要这里多有)
一、B/S 软件的结构
C / S 结构,即Client/Server(客户机/服务器)结构,是大家熟知的软件系统体系结构,通过将任务合理分配到Client端和Server端,降低了系统的通讯开销,可以充分利用两端硬件环境的优势。开发C/S架构可以采用多种语言,包括Java,C++,C#,以及Dephi等;
B / S 结构,即Browser/Server(浏览器/服务器)结构,是随着Internet技术的兴起,对C/S结构的一种变化或者改进的结构。在这种结构下,用户界面完全通过WWW浏览器实现。前端 在大部分企业就是做浏览器端展现相关的工作,会用到html,css,js,ps,ai等等,而“后端”的主要工作室程序开发、数据处理了,比如:php,asp,mysql,mssql。
简而言之:
- C / S client 客户端 server服务器
- B / S broswer 浏览器 server服务器(Tomcat服务器)
图解如下:
二、前端的开发流程示意:
三、网页的组成部分
页面由三部分内容组成:
分别是内容(结构)、表现、行为;
- 内容(结构),是我们在页面中可以看到的数据。我们称之为内容。一般内容,我们使用 html 技术来展示;
- 表现 ,指的是这些内容在页面上的展示形式。比如说,布局、颜色、大小等等。一般使用CSS 技术实现;
- 行为 , 指的是页面中元素与输入设备交互的响应。 一般使用 javascript 技术实现 。
四、HTML 简介
Hyper Text Markup Language (超文本标记语言) 简写:HTML
Html通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件,
通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)
五、用 Eclipse 创建html 文件
1、先创建一个静态的 web 工程
当出现如下图,说明工程创建成功。
WebContent目录是用来存放web工程的资源目录,比如说:
html页面,js文件,css文件,jsp文件,等等,很多资源文件都放在这个目录下。
2、在 WebContent 目录下创建一个 html 页面
修改 html 模板内容:
模板内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=${encoding}">
<title>Insert title here</title>
</head>
<body>
${cursor}
</body>
</html>
第一个html 页面实例代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><!-- html 表示 html 页面内容的开始 -->
<head><!-- head 标签是头标签,主要包含三部分内容:标题, css 样式, js 代码 -->
<!-- meta 告诉浏览器,当前文本内容的类型是什么,text/html;charset=UTF-8 表示使用 UTF-8 字符集查看 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>hello_javaweb</title><!-- title 查看 -->
</head>
<body><!-- body 标签是页面显示的主体内容 -->
hello -- javaweb
</body>
</html><!-- html 表示 html 页面内容的结束 -->
注:
Java 文件是需要先编译,再由 java 虚拟机跑起来。 但 html 文件它不需要编译,直接由浏览器进行解析执行。
七、 html 文件的书写规范
<html> 表示内容的开始
<head> <!-- head标签是头标签,主要包含三部分内容:标题,css样式,js代码 -->
<title></title> 页面标题
</head>
<body> <!-- body标签是页面显示的主体内容 -->
</body>
</html> 表示内容的结束
Html 的代码注释 <!-- 这是html 注释,可以在页面右键查看源代码中看到 -->
八、html 标签介绍
1、标签的格式:
<标签名> 封装的数据</标签名>
2、标签名大小写不敏感
3、标签拥有自己的属性
- 分为基本属性: bgcolor="red" 可以修改简单的样式效果
- 事件属性: οnclick="alert('你好!');" 可以做页面交互的响应
4、标签又分为,单标签和双标签
- 单标签格式: <标签名/>
- 双标签格式:<标签名> ...封装的数据 ...</标签名>
标签语法:
- 标签不能交叉嵌套 正确:<div><span>hello,JavaWeb</span></div>
- 标签必须正确关闭 正确:<div>hello,JavaWeb</div>
- 没有文本内容的标签 正确:<br />
- 属性必须有值,属性值必须加引号 正确:<font color="blue">hello,JavaWeb</font>
- 注释不能嵌套 正确:<!-- 注释内容 --> <br/>
注意事项:
html 代码不是很严谨,有时候标签不闭合,也不会报错
九、常用标签介绍
1、font 字体标签
font标签是字体标签,可以在html页面上显示文本,并修改文本的字体,字号,以及颜色
需求 1 :在网页上显示 我是字体标签,并修改字体为 宋体,颜色为红色
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 需求:在网页上显示 我是字体标签, 并修改字体为 宋体,颜色为红色
font 标签是字体标签
size 属性设置文本的大小
face 属性设置文本的字体
color 属性设置文本的颜色
-->
<font size="7" face="宋体" color="red">我是字体标签</font>
</body>
</html>
2、特殊字符
特殊字符:
< 是<
> 是>
空格
需求 1 :把 <br/> 换行标签 编程文本 转换成字符显示在页面上
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
我是 <br > 标签<br/>
世界很 大!
</body>
</html>
3、标题标签
h1 - h6 都是标题标签
h1 最大
h6 最小
align 对齐属性
left 左(默认)
center 中
right 右
需求1: 演示标题1 到 标题6
<body>
<h1 align="left">标题1</h1>
<h2 align="right">标题2</h2>
<h3 align="center">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
效果:
4、超链接
a 标签是超链接标签
href 设置链接的地址
target 设置哪个目标进行跳转
_self 当前窗口(默认值)
_blank 新窗口
需求1: 创建 三个普通的超链接
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.baidu.com" target="_self">百度 (_self)</a>
<a href="http://www.baidu.com" target="_blank">百度(_blank)</a>
</body>
5、列表标签
无序列表 由 ul 和 li 组成
ul 无序列表
type 属性设置列表项前面的符号
li 是列表项
需求1:使用无序列表的方式,把 四大天王 , 刘德华、黎明、张学友、郭富城 展示出来
<body>
<ul>
<li>刘德华</li>
<li>郭富城</li>
<li>张学友</li>
<li>黎明</li>
</ul>
</body>
效果图:
6、 img 标签
说明: img 可以用来展示一张图片
img 标签的使用:
img 标签是图像标签,可以用来显示图片
alt 设置当地址所指示的图片不存在的时候,用来替代显示的文本内容
src 设置你要显示的图片路径(地址,位置)
width 设置图片的宽度
height 设置图片的高度
border 设置图片边框大小。默认是 0
JavaSE 的地址分为两种:
相对路径:
相对路径从工程名开始算
绝对路径:
盘符: /目录名/文件名
html 页面中的地址也分为两种 (不使用 JAVASE的路径):
相对路径:
. 表示当前目录
.. 表示上一级目录
资源名 表示当前目录下/资源名
资源名 相当于 ./资源名(./可以省略)
绝对路径:
盘符:/目录名/文件名(错误)
http://ip:port/工程名/资源名 正确
需求1: 使用 img 标签显示一张美女的照片,并修改 宽高 和 边框属性
<body>
<img alt="骇客找不到" src="1.jpeg" width="170" height="130" border="1"/>
<img alt="骇客找不到" src="../2.jpeg" width="170" height="130" />
<img alt="骇客找不到" src="../img/3.jpeg" width="170" height="130" />
<img alt="骇客找不到" src="../4.jpeg" width="170" height="130" />
<img alt="骇客找不到" src="../img/5.jpeg" width="170" height="130" />
<!-- 绝对地址的演示 -->
<img alt="骇客找不到" src="6.jpeg" width="170" height="130" border="1"/>
</body>
效果截图:
7、表格标签
语法说明:
table 是 表格
align 是对齐属性(不推荐使用table的align属性)
cellspacing 设置单元格的间距
tr 是行
td 是单元格
th 表头标签
b 是加粗标签
center 标签是居中标签
被它包含起来的内容,都会居中显示
需求1: 做一个带表头的 三行 、三列 的表格, 并显示边框
需求2: 修改表格的宽度,高度,表格的对齐方式,单元格间距
<body>
<center>
<table>
<tr>
<th>
<b>1.1</b>
</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</center>
</body>
效果截图:
8、跨行跨列表格
语法说明:
colspan 设置一个单元格占几个列的宽度 默认是1
rowspan 设置一个单元格占几行的高度
需求1:
- 新建一个 五行、五列 的表格,
- 第一行,第一列的单元格要跨两列,
- 第二行第一列的单元格跨两行,
- 第四行第四列的单元格跨两行两列
<body>
<table width="500" height="500" border="1" cellspacing="0">
<tr>
<td colspan="2">1.1</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td>2.5</td>
</tr>
<tr>
<td>3.2</td>
<td>3.3</td>
<td>3.4</td>
<td>3.5</td>
</tr>
<tr>
<td>4.1</td>
<td>4.2</td>
<td>4.3</td>
<td rowspan="2" colspan="2">4.4</td>
</tr>
<tr>
<td>5.1</td>
<td>5.2</td>
<td>5.3</td>
</tr>
</table>
</body>
效果截图:
9、了解 iframe 框架标签(内嵌窗口)
语法说明:
iframe 标签可以在页面上。单独打开一个小窗口。显示一个独立的页面
src 属性设置要显示的独立的html 页面的地址(可以是相对路径,也可以绝对路径)
iframe 和 a 标签组合使用步骤:
1、在 iframe 标签上设置 name 属性的值。给 iframe 起一个名称
2、在 a 标签的 target 属性上设置 iframe 的 name 的属性值
示例:
<body>
<iframe src="2%20特殊字符.html" width="600" height="400" name="abc"></iframe>
<br/>
<br/>
<br/>
<a href="3 标题标签.html" target="abc">3 标题标签.html</a>
<a href="2%20特殊字符.html" target="abc">4 超链接.html</a>
<a href="5 列表标签.html" target="abc">5 列表标签.html</a>
</body>
效果截图:
10、表单标签
说明:
表单,是用来收集用户信息,发送给服务器的。
form 是 表单标签
input type = text 是普通文本输入框 value 属性设置默认值
input type = password 是密码输入框 value 属性设置默认值
input type = radio 单选框 name 可以对单选进行分组 checked="checked" 表示默认选中
input type = checkbox 多选框 checked="checked" 表示默认选中
input type = reset 是重置按钮
input type = submit 是提交按钮
input type = file 是文件上传域
input type = button 是按钮 value 属性设置按钮的文本
input type = hidden 是隐藏域 当我们需要往服务器发送某些数据,不希望用户知道或干预就可以使用隐藏域
select 标签是下拉列表
option 是下拉列表项 selected="selected" 表示默认选中
textarea 是多行文本输入框 (默认值是起始标签和结束标签中的内容)
rows 设置可以显示几行
cols 设置可以显示几个字
示例:
需求1:创建一个个人信息注册的表单界面。包含用户名,密码,确认密码。性别(单选),兴趣爱好(多选),国籍(下拉列表)。
隐藏域,自我评价(多行文本域)。重置,提交。
<body>
<form action="">
<input type="hidden"/>
用户名:<input type="text" value="wuxiansheng"/><br/>
密码:<input type="password" value="mima"/><br/>
确认密码:<input type="password"/> <br/>
性别:
<input name="sex" type="radio"/> 男<br/>
<input name="sex" type="radio" checked="checked"/> 女<br/>
兴趣爱好:
<input type="checkbox" > 看书
<input type="checkbox" checked="checked"/> 喝酒
<input type="checkbox" checked="checked"/> 码字
<input type="checkbox" checked="checked"/> 撩妹<br/>
国籍:
<select>
<option>---请选择---</option>
<option selected="selected">中国</option>
<option>新西兰</option>
<option>美国</option>
</select><br/>
自我评价:
<textarea rows="10" cols="100">默认值</textarea><br/>
<input type="reset"/> <input type="submit"/>
</form>
</body>
效果截图:
表单提交的细节:
form 标签是表单标签
action 设置服务器的地址
method 设置表单提交的方式,GET 或 POST
表单提交,但是数据没有发到服务器的几种常见情况:
1、表单项必须要有 name 属性值。提交的时候,才会发给服务器
2、单选、复选、下拉列表项,都必须要的 value 属性值。否则服务器只收到 on .
3、表单项必须要在提交的form 标签中,才会被发送给服务器。
GET 请求的特点:
1、浏览器地址栏上是 action 属性值?请求参数
请求参数是以 name=value&name=value进行拼接
2、不安全
3、有长度限制
POST 请求的特点:
1、浏览器地址栏只有 action 的属性值
2、相对 GET 请求安全
3、没有数据长度限制
11、其他标签
div 是块标签 默认独占一行
span 是内联标签 (span主要用来封装文本) 它的宽度就是它封装的文本的长度
p 是段落标签 用来格式化段落的文本 , 默认是在段落的上方和下方各空出一行来
示例:需求1:div、span、p标签的演示
<body>
<div>
div1
</div>
<div>
div2
</div>
<span>span1</span>
<span>span2</span>
<p>段落1</p>
<p>段落2</p>
</body>
效果截图: