软件结构
B/S结构 Browser/Server 浏览器端和服务器端交互
C/S结构 Client/Server 客户端和服务器端交互
前端开发流程
根据需求设计网页画面→将设计做成静态网页→将静态网页修改为动态网页
网页结构主要分为:内容、表现、行为
内容:在页面中显示的数据,使用html技术实现;
表现:内容在页面上的展现形式,使用css技术实现;
行为:页面中元素与输入设备交互的响应,使用JavaScript技术实现。
技术介绍
HTML(Hyper Text Markup Language)超文本标记语言,HTML通过标签来标记要显示的网页中的各部分,网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告知浏览器如何显示其中的内容。
创建HTML文件
1.创建一个web工程(静态的web工程)
2.在工程下创建html页面
注:HTML文件不需要编译,直接由浏览器解释执行
HTML的书写规范
<!DOCTYPE html><!-- 约束声明 -->
<html lang="en"><!-- html标签标识html的开始 lang="en"表示英文 lang="zh_CN"表示中文 -->
<!-- html标签中一般分为两部分,分别是head 和 body -->
<head><!-- 表示头部信息 一般包括三部分title标签,css样式,js代码 -->
<meta charset="UTF-8"><!-- 表示当前页面使用UTF-8字符集 -->
<title>标题</title><!-- 表示标题 -->
</head>
<body><!-- body标签是整个html页面显示的主体内容 -->
new world
</body>
</html>
标签介绍
1.标签的格式:
<标签名>封装的数据</标签名>
2.标签名大小写不敏感;
3.标签拥有自己的属性;
1)分为基本属性:bgcolor="red" --bgcolor是背景颜色属性
2)事件属性:οnclick="alert('hello')" --onclick表示点击事件,alert()是js提供的警告框函数
4.标签又分为,单标签和双标签。
1)单标签格式:<标签名/> --<br/>换行 --<hr/>水平线
2)双标签格式:<标签名>封装数据</标签名>
标签语法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标签语法</title>
</head>
<body>
<!-- ①标签不能交叉嵌套 -->
正确:<div><span>new world</span></div>
错误:<div><span>new world</div></span>
<hr/>
<!-- ②标签必须正确关闭 -->
<!-- 有文本内容的标签 -->
正确:<div>new world</div>
错误:<div>new world
<hr/>
<!-- 没有文本内容的标签 -->
正确:<br/>1
错误:<br>2
<hr/>
<!-- ③属性必须有值,属性值必须加引号 -->
正确:<font color="red">new world</font>
错误:<font color>new world</font>
错误:<font color=red>new world</font>
<hr/>
<!-- 注释不能嵌套 -->
正确:<!-- 注释内容 -->
错误:<!-- 注释内容<!-- 注释内容 --> -->
</body>
</html>
font字体标签(过时)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font标签</title>
</head>
<body>
<!-- 在网页上显示字体标签,并修改字体为楷体,颜色为红色 -->
<font color="red" face="楷体" size="7">字体标签</font>
</body>
</html>
特殊字符
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特殊字符</title>
</head>
<body>
<!-- 把<br>换行标签变成文本转换成字符显示在页面上 -->
<!-- 常用特殊字符
< <
> >
空格
-->
标签<br>
</body>
</html>
标题标签
标题标签是h1 到 h6
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>标题标签</title>
</head>
<body>
<!-- 标题1至标题6
align属性是对其格式:(已过时)
left 左对齐
center 居中对齐
right 右对齐
-->
<h1 align="left">标题1</h1>
<h2 align="center">标题2</h2>
<h3 align="right">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>
超链接(★★★★★)
在网页中所有点击之后可以跳转的内容都是超链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
<!-- 超链接<a></a>
href属性设置连接的地址
target属性设置目标跳转的页面显示格式
_self 在原来的页面进行跳转
_blank 打开新的页面进行跳转-->
<a href="https://www.baidu.com">baidu</a><br/>
<a href="https://www.sina.com.cn" target="_self">sina</a><br/>
<a href="https://www.qq.com" target="_blank">qq</a>
</body>
</html>
列表标签
分为无序列表、有序列表、定义列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表标签</title>
</head>
<body>
<!-- ul标签表示无序列表 ol标签表示有序列表 li表示列表项 type显示列表项前面的符号 -->
<!-- 使用无序列表展示奔驰、宝马、奥迪、玛莎拉蒂 -->
<ul>
<li>玛莎拉蒂</li>
<li>奔驰</li>
<li>宝马</li>
<li>奥迪</li>
</ul>
<!-- 使用有序列表展示百达翡丽、劳力士、卡地亚、江诗丹顿 -->
<ol>
<li>百达翡丽</li>
<li>劳力士</li>
<li>卡地亚</li>
<li>江诗丹顿</li>
</ol>
</body>
</html>
img标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>img标签</title>
</head>
<body>
<!-- 显示一张照片并修改宽高和边框属性 -->
<!-- img标签是图片标签
src属性可以设置图片的路径
在web中分为相对路径和绝对路径
相对路径:.表示当文件所在的目录
..表示当前文件所在的上一级目录
文件名表示当前文件所在目录的文件,相当于./文件名 ./可以省略
绝对路径:http://ip:port/工程名/资源路径
width属性设置图片的宽度
height属性设置图片的高度
border属性设置图片边框的宽度(过时)
alt属性图片显示异常后文字提示
-->
<img src="../imgs/1.jpg" width="384" height="216" border="1"/><br/>
<img src="../imgs/2.jpg" width="192" height="108" border="1"/><br/>
<img src="../imgs/3.jpg" width="384" height="216" border="1"/><br/>
<img src="../imgs/4.jpg" width="192" height="108" border="1"/><br/>
<img src="../imgs/5.png" width="230" height="153" border="1" alt="图片丢失"/>
</body>
</html>
表格标签(★★★★★)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格标签</title>
</head>
<body>
<!-- table标签表示表格
border属性设置表格边框 width属性设置表格宽度 height属性设置表格高度
align属性设置表格相对页面的对齐方式 cellspacing属性设置表格的单元格间距
th表示表头标签 tr表示行标签 td表示列标签
align属性设置单元格文本对齐方式 colspan属性设置单元格可横跨的列数
b标签表示加粗标签
-->
<!-- 代表头的表格,三行三列并且显示边框 -->
<table align="center" border="1" width="300" height="300" cellspacing="0" >
<tr>
<th align="center" colspan="3">数字单元格表头</th>
</tr>
<tr>
<td>1.1</td>
<td>1.2</td>
<td>1.3</td>
</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>
<!-- 修改表格宽度、高度、对齐方式、单元格间距 -->
</body>
</html>
表格可跨行跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格可跨行跨列</title>
</head>
<body>
<!-- colspan属性设置单元格可跨越的列数 rowspan属性设置单元格可跨越的行数-->
<!-- 五行五列列表中第一行第一列单元格跨两列,第二行第一列的单元格跨两行,第四行第四列单元格跨两行两列 -->
<table border="1" align="center" cellspacing="0" border="1" width="500" height="500">
<tr>
<th colspan="5" align="center">单元格跨越行或列练习</th>
</tr>
<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>
</html>
iframe框架标签
iframe标签可以在一个html页面上打开一个小窗口来加载一个单独的页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe标签</title>
</head>
<body>
<!-- iframe标签可以在页面上开辟一个小区域显示单独的页面
iframe标签和a标签组合使用的步骤:
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性中设置iframe的name属性值
-->
单独的页面<br/>
<iframe src="标题标签.html" width="500" height="500" name="_SmallWindow"></iframe>
<br/>
<br/>
<ul>
<li><a href="标签语法.html" target="_SmallWindow">标签语法</a></li>
<li><a href="font标签.html" target="_SmallWindow">font标签</a></li>
<li><a href="特殊字符.html" target="_SmallWindow">特殊字符</a></li>
</ul>
</body>
</html>
表单标签(★★★★★)
表单是html页面用来收集用户信息的所有元素集合,并将信息发送给服务器。
表单显示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签的显示</title>
</head>
<body>
<!-- form标签表示表单
input type="text" 单行文本输入框 value属性设置默认显示内容
input type="password" 密码输入框(隐藏输入内容)
input type="radio" 单选框 name属性可以对其进行分组 checked="checked"属性设置默认选项
input type="checkbox" 复选框
input type="reset" 重置按钮 value属性修改按钮上的文本
input type="submit" 提交按钮
input type="button" 按钮
input type="file" 选择文件上传
input type="hidden" 隐藏域 当需要向服务器发送信息,而这些信息不需要用户参与,就可以使用隐藏域,提交信息时同时发送给服务器
select 下拉选框 option下拉选框的选项 selected属性设置默认选项
textarea 表示多行文本输入框(其实标签和结束标签中间的内容是默认值)
rows属性设置显示行数,超过行数有下拉选框 cols属性设置可以显示的字符长度
-->
<form>
用户名:<input type="text" value="默认值"/><br/>
密码:<input type="password" value="123456"/><br/>
确认密码:<input type="password" value="123456"/><br/>
性别:<input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女<br/>
兴趣爱好:<input type="checkbox"/>javaScript<input type="checkbox"/>java<input type="checkbox"/>C#<br/>
国籍:<select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>英国</option>
<option>瑞典</option>
</select><br/>
自我评价:<textarea rows="10" cols="20">默认值</textarea><br/>
<input type="reset" value="重置"/><br/>
<input type="submit" value="提交"/><br/>
<input type="button" value="按钮"/><br/>
<input type="file"/>
<input type="hidden"/>
</form>
</body>
</html>
表单格式化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单标签的显示</title>
</head>
<body>
<!-- 在from标签中插入table标签,然后将表单信息通过行列形式依次进行编辑,即可使表单信息工整对齐 -->
<form>
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名:</td>
<td><input type="text" value="默认值"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" value="123456"/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" value="123456"/></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" checked="checked"/>男<input type="radio" name="sex"/>女</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td><input type="checkbox"/>javaScript<input type="checkbox"/>java<input type="checkbox"/>C#</td>
</tr>
<tr>
<td>国籍:</td>
<td><select>
<option>--请选择国籍--</option>
<option selected="selected">中国</option>
<option>美国</option>
<option>英国</option>
<option>瑞典</option>
</select></td>
</tr>
<tr>
<td>自我评价:</td>
<td><textarea rows="10" cols="20">默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置"/></td>
<td align="center"><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>
</html>
表单提交细节
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单提交细节</title>
</head>
<body>
<!-- form表单标签
action属性设置提交的服务器地址
method属性设置提交的方式post或者get(默认值)等
https://localhost:8080/ 服务器地址
? 分隔符
pero=password&sex=on 请求参数(表单的信息)
1.表单提交时服务器没有发送数据的三种情况:
①表单项没有name属性;
②单选、复选(下拉选项中的option标签)都需要添加value属性,以便发送数据给服务器
③表单项不在提交的form标签中
GET请求的特点:
①浏览器地址栏中的地址是:action属性+[?+请求参数] 请求参数格式:name=value&name=value
②不安全,密码会被查看到
③表单内容包含非ASCⅡ字符或者超过100个字符,浏览器将不会把表单信息或者超过的信息发送给服务器(长度限制)
POST请求的特点:
①浏览器地址栏中只有action属性值
②相对于get请求比较安全
③理论上没有数据长度的限制
-->
<form action="https://localhost:8080" method="post">
<input type="hidden" name="pero" value="password">
<h1 align="center">用户注册</h1>
<table align="center">
<tr>
<td>用户名:</td>
<td><input type="text" name="username" value="默认值"/></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="password" value="123456"/></td>
</tr>
<tr>
<td>确认密码:</td>
<td><input type="password" value="123456"/></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" checked="checked" value="boy"/>男
<input type="radio" name="sex" value="girl"/>女</td>
</tr>
<tr>
<td>兴趣爱好:</td>
<td><input type="checkbox" name="hobby" value="javaScript"/>javaScript
<input type="checkbox" name="hobby" value="java"/>java
<input type="checkbox" name="hobby" value="C#"/>C#</td>
</tr>
<tr>
<td>国籍:</td>
<td><select name="country">
<option value="none">--请选择国籍--</option>
<option selected="selected" value="china">中国</option>
<option value="America">美国</option>
<option value="England">英国</option>
<option value="Sweden">瑞典</option>
</select></td>
</tr>
<tr>
<td>自我评价:</td>
<td><textarea name="desc" rows="10" cols="20">默认值</textarea></td>
</tr>
<tr>
<td><input type="reset" value="重置"/></td>
<td align="center"><input type="submit" value="提交"/></td>
</tr>
</table>
</form>
</body>
</html>
其他标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>其他标签</title>
</head>
<body>
<!-- div标签
默认独占1行
-->
<div>div标签1</div>
<div>div标签1</div>
<!-- span标签
长度是封装数据的长度
-->
<span>span标签1</span>
<span>span标签1</span>
<!-- p标签
默认会在段落的上方或者下方各空一行(如果已经有就不再空行)
-->
<p>段落标签1</p>
<p>段落标签2</p>下一行
</body>
</html>