JavaWeb（JavaEE）前端入门
B/S软件结构：
B：客户端（Browser）
S：服务器端（Server）
JavaEE项目：
客户端：浏览器
服务器端：WEB服务器
JavaSE 是C/S结构 Client/Server
前端的开发流程
- 美术实现：网页设计师根据需求设计网页
- 前端工程师：前端工程师将设计做成静态页面
- 后端开发师：后端工程师将静态页面修改为动态网页
网页的组成部分：
内容（结构）、表现、行为 即HTML、CSS、JavaScript
- 内容（结构）：是我们在页面中可以看到的数据。一般使用HTML技术来展示
- 表现：指的是这些内容在页面上的展示形式。如：布局、颜色、大小等。一般使用CSS技术来实现
- 行为：指的是页面中元素与输入设备交互的响应。一般使用JavaScript技术实现
HTML
- 简介
Hyper Text Markup Language（超文本标记语言）的简写
HTML通过标签来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容。如：文字如何处理，画面如何安排，图片如何显示等。 - 创建HTML文件（IDEA）
1. 创建一个web工程（静态的web工程）
2. 在工程下创建HTML页面
再点击右键选择浏览器打开就可以看到我们的静态页面了。 - HTML的编写规范
<!-- 注意，这是一个注释，可以在浏览器页面右键查看源代码中看到 -->
<!DOCTYPE html> <!-- 约束，声明 -->
<html lang="en"> <!-- html标签表示html的开始，lang="en" 即 language is English;中文是"zh_CN" -->
<!-- html标签一般分为两部分，分别是head和body -->
<head> <!-- head表示头部信息，一般包含三部分内容，title标题，CSS样式，JS代码 -->
<meta charset="UTF-8"> <!--表示当前页面使用UTF-8字符 -->
<title>Hello</title> <!-- 表示标题 -->
</head>
<body> <!-- body标签是整个html页面显示的主体内容-->
Hello World!
</body>
</html>
<!--“/”表示结束-->
- HTML标签介绍
1. 标签的格式：
<标签名>封装的数据</标签名>
2. 标签名大小写不敏感
3. 标签拥有自己的属性
基本属性：bgcolor=“red”—背景颜色为红色—————可以修改简单的样式效果
事件属性：οnclick=“alert(‘你好！’);”
onclick表示单机（点击）事件，alert() 是JavaScript语言提供的一个警告框函数，它可以接收任意参数，参数就是警告框的函数信息
4. 标签分为单标签和双标签
单标签（自结束标签）格式：<标签名/> 如：br（换行）、hr（水平线）
双标签格式：<标签名>封装的数据</标签名> - 标签的语法：
1. 标签不能交叉嵌套
正确：<div><span>Good morning!</span></div>
错误：<div><span>Good morning!</div></span>
浏览器会自动帮你修复一些语法错误，如上错误即可修复，但是在IDE中会报错
2. 标签必须正确关闭
有文本内容的标签：
正确：<div>Good morning!</div>
错误：<div>Good morning!
没有文本内容的标签
正确：<br />
错误：<br >
3. 属性必须要有值，属性值必须加引号
4. 注释不能嵌套 - 常用标签介绍
文档常用标签介绍
1. font字体标签：可规定文本的字体、字体尺寸、字体颜色，在HTML5中不赞成使用
font有三个属性：color（字体颜色）、face（字体名称列表）、size（从1到7指定文本的尺寸）
2. 特殊字符：
通常情况下，HTML会裁掉文档中的空格。假如你在文档中连续输入10个空格，那么HTML会去掉其中9个。所以一般要使用特殊字符 来增加空格
3. 标题标签：标题标签是h1到h6
属性有align：表示对齐方式，有left（默认值）、right、center三个值，分别表示左对齐、右对齐、居中
4. 超链接<a></a>
超链接常用属性：
href属性设置连接的地址
target属性设置跳转的方式，有两个值：
_self:表示当前页面（窗口）——是默认值
_blank:表示打开新页面（窗口）
在网页中，所有点击之后可以跳转的内容都是超链接
5. 列表标签
1. 无序列表（常用）
2. 有序列表
6. img图片标签：img标签可以在HTML页面上显示图片
src属性可以设置图片的路径
在web中路径分为相对路径和绝对路径：
相对路径：
· 表示当前文件所在的目录
·· 表示当前文件所在的上一级目录
文件名 表示当前文件所在目录的文件，相当于./文件名（./可以省略）
绝对路径：
格式：http://ip:port/工程名/资源路径
在JavaSE中路径也分为相对路径和绝对路径：
相对路径：从工程名开始算
绝对路径：盘符:/目录/文件名
有属性width,height可以设置图片的高和宽，border属性可以设置图片的边框，alt属性设置当指定路径找不到图片时，用来代替显示的文本内容（异常显示）
7. 表格标签（table）——重点
<!--这是一个表格-->
<table border="2" width="300" height="300" align="center" cellspacing="0" >
<tr>
<td align="center"><b>a11</b></td>
<td align="center"><b>a12</b></td>
<td align="center"><b>a13</b></td>
</tr>
<tr>
<td align="center"><b>a21</b></td>
<td align="center"><b>a22</b></td>
<td align="center"><b>a23</b></td>
</tr>
<tr>
<td align="center"><b>a31</b></td>
<td align="center"><b>a32</b></td>
<td align="center"><b>a33</b></td>
</tr>
<tr>
<th>th标签可以实现加粗和居中的效果</th>
<th>就像这样</th>
<th>这样</th>
</tr>
</table>
效果如下
| a11 | a12 | a13 |
| a21 | a22 | a23 |
| a31 | a32 | a33 |
| th标签可以实现加粗和居中的效果 | 就像这样 | 这样 |
|---|
border——设置表格边框
width——设置表格宽度
height——设置表格高度
tr——行标签
th——表头标签
td——单元格标签
b——加粗标签
cellspacing——设置单元格间距
alight是设置单元格文本对齐方式的属性
8. 跨行跨列表格——重点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
</head>
<body>
<!-- 需求:
新建一个五行、五列的表格，
第一行，第一列的单元格要跨两列，
第二行第一列的单元格跨两行，
第四行第四列的单元格跨两行两列。
colspan 属性设置跨列
rowspan 属性设置跨行
-->
<table align="center" width="500" height="500" cellspacing="0" border="1">
<tr>
<td colspan="2">a11</td>
<td>a13</td>
<td>a14</td>
<td>a15</td>
</tr>
<tr>
<td rowspan="2">a21</td>
<td>a22</td>
<td>a23</td>
<td>a24</td>
<td>a25</td>
</tr>
<tr>
<td>a32</td>
<td>a33</td>
<td>a34</td>
<td>a35</td>
</tr>
<tr>
<td>a41</td>
<td>a42</td>
<td>a43</td>
<td colspan="2" rowspan="2">a44</td>
</tr>
<tr>
<td>a51</td>
<td>a52</td>
<td>a53</td>
</tr>
</table>
</body>
</html>
输出结果：
| a11 | a13 | a14 | a15 | |
| a21 | a22 | a23 | a24 | a25 |
| a32 | a33 | a34 | a35 | |
| a41 | a42 | a43 | a44 | |
| a51 | a52 | a53 | ||
9. iframe框架标签（内嵌窗口）——了解
iframe标签可以在一个HTML页面上打开一个小窗口，去加载一个单独的页面
iframe和a标签组合使用的步骤：
1.在iframe标签中使用name属性定义一个名称
2.在a标签的target属性上设置iframe的name的属性值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Iframe</title>
</head>
<body>
我是一个单独的完整的页面<br/><br/>
<!--iframe标签可以在页面上开辟一个小区域显示一个单独的页面 -->
<iframe src="跨行跨列表.html" width="500" height="500" name="abc"></iframe><br/><br/>
<ul>
<li><h4><a href="跨行跨列表.html" target="abc">跨行跨列表</a></h4></li>
<li><h5><a href="Hello.html" target="abc">Hello</a></h5></li>
<li><h5><a href="iframe.html" target="abc">iframe</a></h5></li>
</ul>
</body>
</html>
10.表单标签（form）——重点
表单就是HTML页面中，用来收集用户信息的所有元素集合，然后把这些信息发送给服务器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!-- 需求
创建一个个人信息注册的表单界面，包含用户名、密码、确认密码。性别（单选），兴趣爱好（多选）、国籍（下拉列表）。
隐藏域，自我评价（多行文本域）。重置，提交。
input type="text" 是文本输入框，不换行，value设置默认显示内容
input type="password" 是密码输入框，不换行，value设置默认显示内容
type="radio" 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
type="checkbox" 是复选框
type="reset" 是重置按钮,value属性可以修改按钮上的文本内容
type="submit" 是提交按钮,value属性可以修改按钮上的文本内容
type="button" 是按钮，可以通过value属性定义按钮上的文本
type="file" 是文件上传域
type="hidden" 是隐藏域 当我们需要发送某些信息，而这些信息，不需要用户参与，就可以使用隐藏域
————提交的时候同时发送给服务器
select 标签是下拉列表框
option 标签是下拉列表框中的选项 selected="selected"设置默认选中
textarea rows="10" cols="20"
textarea 表示多行文本输入框
rows 属性设置可以显示的行数
cols 属性设置每行可以显示几个字符宽度
-->
<form>
用户名称：<input type="text" value="请输入用户名称"/><br>
密码：<input type="password" value="请输入密码"/><br>
确认密码：<input type="password" value="请确认密码"/><br>
性别：<input type="radio" name="sex" checked="checked">男<input type="radio" name="sex">女<br>
兴趣爱好：<input type="checkbox" checked="checked"/>唱跳Rap<input type="checkbox"/>篮球<input type="checkbox"/>跑步<br>
国籍：<select>
<option>---请选择国籍---</option>
<option>中国</option>
<option>美国</option>
<option>俄罗斯</option>
<option>法国</option>
<option>德国</option>
<option>英国</option>
<option>小日本</option>
<option>印度</option>
<option>意大利</option>
<option>韩国</option>
<option>也门</option>
<option>南非</option>
<option>古巴</option>
<option>加拿大</option>
</select><br>
自我评价：<br><textarea rows="10" cols="20">我是默认值</textarea><br>
选择文件：<input type="file"><br>
<input type="reset">  <input type="submit"><br>
<button>重置</button>  <button>提交</button>
</form>
</body>
</html>
11.表单格式化
如：
<table>
<tr><td>用户名称：</td>
<td><input type="text" value="请输入用户名称"/><br></td>
</tr>
</table>
12.表单提交的细节
<form action="http://zdzblog.fun" method="get">
action属性设置提交的服务器地址
method属性设置提交的方式：get（默认）或post
表单提交的时候数据没有发送给服务器的三种情况
1.表单项没有name属性值——每个表单项都要加上name，如：
<tr>
<td>性别：</td>
<td> <input type="radio" name="sex" checked="checked">男
<input type="radio" name="sex">女<br></td>
</tr>
2.单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
3.表单项不再提交的form标签中
GET请求的特点是：
1.浏览器地址栏中的地址是：action属性[+？+请求参数]
请求参数的格式是：name=value&name=value&…
http://zdzblog.fun/ ? action=register & sex=on
2.不安全——所有的信息都在地址栏里显示
3.它有数据长度的限制
如果表单值包含ASCII字符或者超过100个字符，必须改用POST
POST请求的特点是：
1.浏览器地址栏中只有action属性值
2.对于GET更安全
3.理论上没有数据长度的限制
7. 其他标签
div、span、p标签等，学后端了解就行
div标签 默认独占一行
span标签 它的长度是封装数据的长度
p标签 段落标签，默认会在段落上方或下方各空出一行来（如果以有就不再空）
CSS（Cascading Style Sheet）
CSS是层叠样式表单，是用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记语言。
- CSS的语法规则
选择器{
属性:值
font-size:80px;
}
选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）
属性（property）：是你要改变的样式名，并且每一个属性都至少有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号，但是建议都加上
注：一般一行只描述一个属性 - CSS注释
/*注释内容*/ - CSS和HTML的结合方式
（1）第一种：
在标签的style属性上设置"key:value value;"，修改标签样式
如：<div style="border: 1px solid red;">div标签1</div>
缺点：
如果标签多了，样式多了，代码量非常庞大
可读性非常差
CSS代码没什么复用性可言
（2） 第二种：
在head标签中，使用style标签来定义各种自己需要的CSS样式，如：
xxx{
key:value value;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS</title>
<!--style标签专门用来定义CSS样式代码-->
<style type="text/css">
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
</style>
</head>
<body>
<div>div标签1</div><br>
<div>div标签2</div><br>
<p><span>span标签1</span></p>
<p><span>span标签2</span></p>
</body>
</html>
这个时候<style></style>里即为CSS的代码，要采用CSS的语法格式，所有的div都可以用div这个选择器定义的样式，span同理
缺点：
只能在同一页面内复用代码，不能在多个页面中复用CSS代码
维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
（3）第三种：
把CSS样式写成一个单独的CSS文件，再通过link标签引入即可复用
div{
border: 1px solid red;
}
span{
border: 1px solid red;
}
下面是HTML引入CSS的写法
<link rel="stylesheet" type="text/css" href="../CSS/test.css">
4. 标签名选择器
标签名选择器的格式是：
标签名{
属性：值
}
标签名选择器可以决定哪些标签被动的使用这个样式。即上面第二种和第三种CSS与HTML结合模式中实例的标签名
5. id选择器
id选择器的格式是：
#id属性值 {
属性：值
}
id选择器可以让我们通过id属性选择性的去使用这个样式
#id001{
color:red;
border: 1px solid yellow;
font-size: 30px;
}
在HTML里面：
<link rel="stylesheet" type="text/css" href="../CSS/idCSS.css"> 在head中使用link引入css文件
<div id="id001">div标签1</div><br> 在标签中通过id选择使用的CSS样式
在选择id选择器时，一个id只能被使用一次
6. class选择器
class类型选择器的格式：
.class属性值{
属性：值
}
class类型选择器，可以通过class属性有效的选择性地去使用这个样式，同一个class选择器可以被多个标签选择使用
7. 组合选择器
组合选择器的格式：
选择器1，选择器2，…，选择器n{ /这些选择器可以是id，类，标签名等/
属性：值
}
组合选择器可以让多个选择器共用同一个代码
CSS常用样式
- 颜色
color: red;
颜色可以写颜色名如：black，blue，red，green等
颜色也可以写rgb值和十六进制表示值：如rgb(255,0,0)，#00F6DE，如果写十六进制值必须加# - 宽度
width: 19px;
宽度可以写像素值：19px;
也可以写百分比值：20%; - 高度
height: 20px;
宽度可以写像素值：19px;
也可以写百分比值：20%; - 背景颜色
background-color:#0F2D4C; - 字体样式
color:#FF0000;字体颜色红色
font-size:20ox;字体大小 - 边框：颜色、实线、边框
border:1px solid red; - DIV居中
margin-left:auto;
margin-right:auto; - 文本居中
text-align:center; - 超链接去下划线
text-decoration:none; - 表格细线
table{
border:1px solid black; /* 设置边框*/
border-collapse;collapse; /*将边框合并*/
}
td,th{
border:1px solid black; /*设置边框*/
- 列表去除修饰
ul{
list-style:none;
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
