1、前言
1.1软件架构
- javaEE是C/S架构
- JavaWeb是B/S架构
1.2、页面三个组成部分
- 内容：我们看到的数据。用HTML来展示
- 表现：内容的展示形式。用CSS实现
- 行为：页面中的元素和输入设备交互的响应。用JavaScript实现
2、HTML简介
- HTML：Hyper Text Markup Language（超文本标记语言）
- HTML通过标签来标记网页上的文本内容，不同的标签可以让浏览器解析到不同的显示效果。可以说，学习HTML就是学习他的各种标签。
3、创建HTML文件（MacOS）
- 在一个Java EE工程中，HTML页面是写在web目录下的。
4、HTML书写框架
<html>
<head>
<meta charset="UTF-8">
<title>页面的标题</title>
</head>
<body>
页面的内容
</body>
</html>
5、HTML标签简介
5.1、格式
<标签名>内容<标签名/>
5.2、特点
- 大小写不敏感
- 标签有自己的属性
- 基本属性：color=“red”
- 事件属性：onclick=“alter（你好）”
- 标签分为
- 单标签
- 双标签
5.3、常用标签
1、font
-
color
-
face
-
size
<font color="red" face="宋体" size="1到7">hello</font>
2、特殊字符的替换
| 特殊字符 | 实体 | 记忆方法 |
|---|---|---|
| 空格 | | nb space |
| 小于号 | < | less than |
| 大于号 | ≷ | great than |
3、标题标签
- h1到h6
- align：left左对齐、center居中、right右对齐
4、超链接★★★★★
- a（anchor锚点）
- href（Hyperlick REFerence）：连接到的地址
- taget：_self：在当前页面打开、_blank：新页面打开
5、列表标签
- 无序列表
- 记忆：
- ul：unordered list
- li：list item
- 记忆：
<ul>
<li>单元格的内容1</li>
<li>单元格的内容2</li>
<li>单元格的内容3</li>
</ul>
- 有序列表
- 记忆
- ol：ordered list
- 记忆
<ol>
<li>单元格的内容1</li>
<li>单元格的内容2</li>
<li>单元格的内容3</li>
</ol>
6、图像标签
-
<img/>
- src：图片路径
- width：宽度（单位是像素）
- height：高度（单位是像素）
- border：边框（单位是像素）
- alt：找不到图片时显示的文字
-
路径
-
java中的路径
- 绝对路径：盘符:/目录/文件名
- 相对路径：从工程名开始算
-
html中的路径
- 绝对路径：http://ip:port/工程名/资源路径
- 相对路径：
符号 意思 . 当前文件所在目录（目录就是文件） .. 当前文件所在的上一级目录 直接用文件名 表示当前文件所在目录的文件
相当于 ./文件名，即./可以省略
-
7、表格标签★★★★★
<table align="center" border="1" width="300" height="300" cellspacing="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<td>2.1</td>
<td>2.2</td>
<td>2.3</td>
</tr>
</table>
- table：
- align：left、center、right
- width和height
- border
- cellspacing：单元格之间的距离
- tr（table row）
- td（table data）
- th（table header）
8、跨行跨列表格★★★
- 在td标签操作
- rowspan：跨行
- colspan：跨列
9、内嵌窗口---iframe
- ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
- ifarme 和 a 标签组合使用的步骤:
- 在 iframe 标签中使用 name 属性定义一个名称
- 在 a 标签的 target 属性上设置 iframe 的 name 的属性值
10、表单标签form★★★★★
-
表单就是 html 页面中,用来收集用户信息的所有元素集合.然后把这些信息发送给服务器
-
input标签中的各种type=“”
| type= | 含义 | 其他属性 |
|---|---|---|
| text | 文本输入框 | value设置默认显示 |
| password | 密码输入框 | value |
| radio | 单选框 | name设置到同一组保证单选 checked=“checked”默认选中 |
| checkbox | 复选框 | checked=“checked”默认选中 |
| file | 文件上传域 | |
| reset | 重置按钮 | value设置按钮名字 |
| submit | 提交 | value设置按钮名字 |
| button | 按钮 | value设置按钮名字 |
| hidden | 隐藏域 | 信息不需用户参与直接提交给服务器 |
| textarea | 多行文本输入框 | 起始标签和结束标签中的内容是默认值 row和cols设置大小 |
- 下拉框不再input中
<select>
<option>中国</option>
<option selected="selected">美国</option> 默认选中
<option>日本</option>
</select>
11、表单格式化
- 为表单起名
- 其他项放到表格中，在表格中调整样式
12、表单提交
-
form 标签是表单标签
- action 属性设置提交的服务器地址
- method 属性设置提交的方式 GET(默认值)或 POST
-
表单提交的时候，数据没有发送给服务器的三种情况：
- 表单项没有 name 属性值
- 单选、复选（下拉列表中的 option 标签）都需要添加 value 属性，以便发送给服务器
- 表单项不在提交的 form 标签中
-
【面试题√】√√√√
-
GET 请求的特点是：
- 浏览器地址栏中的地址是：action 属性[+?+请求参数]，请求参数的格式是：name=value&name=value
- 不安全
- 它有数据长度的限制
-
POST 请求的特点是：
- 浏览器地址栏中只有 action 属性值
- 相对于 GET 请求要安全
- 理论上没有数据长度的限制
-
总结和说明：
- ？是分隔符
- 记忆：形式、安全、长度
13、其他标签
-
div 标签（division分开）：默认独占一行
-
span 标签（span跨度）：它的长度是封装数据的长度
-
p 段落标签（parse段落）：默认会在段落的上方或下方各空出一行来（如果已有就不再空）