1、前言
@H_404_2@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
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>
<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、跨行跨列表格★★★
9、内嵌窗口---iframe
- ifarme 标签可以在页面上开辟一个小区域显示一个单独的页面
- ifarme 和 a 标签组合使用的步骤:
- 在 iframe 标签中使用 name 属性定义一个名称
- 在 a 标签的 target 属性上设置 iframe 的 name 的属性值
type= |
含义 |
其他属性 |
text
文本输入框
value设置默认显示
password
密码输入框
value
radio
单选框
name设置到同一组保证单选
checked=“checked”默认选中
checkBox
复选框
checked=“checked”默认选中
file
文件上传域
reset
重置按钮
value设置按钮名字
submit
提交
value设置按钮名字
button
按钮
value设置按钮名字
hidden
隐藏域
信息不需用户参与直接提交给服务器
textarea
多行文本输入框
起始标签和结束标签中的内容是默认值
row和cols设置大小
<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段落）：默认会在段落的上方或下方各空出一行来（如果已有就不再空）
（编辑：北几岛）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
