JavaWeb--HTML

一、B/S软件的结构

JavaEEB/S(Brower/Server )浏览器端/服务端
JavaSEC/S(Client/Server)客户端/服务端

二、前端开发流程

1.美术实现(PS):网页设计师根据需求设计网页
2.前端工程师(H5):前端工程师将设计做成静态网页
3.java程序员(JSP):后台工程师将静态网页修改为动态网页

三、网页的组成部分

  1. 内容(结构):是我们在页面中可以看到的数据。我们称之为内容,一般内容我们使用html技术来展现。
  2. 表现:指的是这些内容在页面上的展示形式。比如说,布局、颜色、大小等。一般使用CSS技术实现。
  3. 行为:指的是页面中元素与输入设备交互的响应。一般使用JavaScript技术实现。

四、HTML简介

Hyper Text Markup Language:超文本标记语言
HTML通过标签来标记要显示的页面中的各个部分。网页文件本身是一种文本文件,通过在文本文件中添加标记符,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)

五、创建HTML文件

  1. 创建一个web工程(静态的web工程)
  2. 在工程下创建html页面
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    hello
</body>
</html>

Notice:Java文件时需要先编译,再由Java虚拟机跑起来,但HTML文件它不需要编译,直接由浏览器进行解析执行。

六、HTML文件的书写规范

<html>                      表示整个html页面的开始
<head>                      头信息
    <title>标题</title>      标题
</head>
<body>                      body是页面主题内容
    页面主题内容
</body>
</html>                     表示整个html页面的结束

七、HTML标签的介绍

  1. 标签的格式:<标签名>封装的数据</标签名>
  2. 标签名大小写不敏感
  3. 标签拥有自己的属性
    ①基本属性:可以修改简单的样式效果
    ②事件属性:可以直接设置事件响应后的代码
  4. 标签又分为单标签和双标签
    ①单标签格式:<标签名 />
    ②双标签格式:<标签名>…封装的数据…</标签名>
  5. 标签的语法
    ①标签不能交叉嵌套
    ②标签必须正确关闭
    ③属性必须有值,属性值必须加引号
    ④注释不能嵌套

八、常用标签介绍

1.font字体标签

可以用来修改文本的字体、颜色、大小(尺寸)

  • color属性修改颜色
  • face属性修改字体
  • size属性修改文本大小

2.特殊字符

显示结果描述实体名称
<小于号&lt ;
>大于号&gt ;
"引号&quot ;
空格&nbsp ;

3.标题标签

h1~h6都是标题标签,h1最大,h6最小。

①align属性是对齐属性

  • left 左对齐(默认)
  • center 居中
  • right 右对齐

4.超链接标签

a标签是 超链接

①href属性设置连接的地址
②target属性设置哪个目标进行跳转

  • _self 表示当前页面(默认)
  • _blank 表示打开页面来进行跳转

5.列表标签

ul是无序列表

  • type属性可以修改列表项前面的符号

li是列表项

6.img标签

img标签是图片标签,用来显示图片

  • src属性可以设置图片的路径
  • width属性设置图片的宽度
  • height属性设置图片的高度
  • border属性设置图片边框的大小
  • alt属性设置当指定路径找不到图片时,用来代替显示的文本内容

(1)在JavaSE中路径也分为相对路径和绝对路径

  • 相对路径:从工程名开始算
  • 绝对路径:盘符:/目录/文件名

(2)在web中路径分为相对路径和绝对路径

  • 相对路径:
    . 表示当前文件所在的目录
    … 表示当前文件所在的上一级目录
    文件名 表示当前文件所在目录的文件,相当于 ./文件名(./可以省略)
  • 绝对路径:
    格式是:http://ip地址/工程名/资源路径

7.表格标签

table标签是表格标签

  • border设置表格单元
  • width设置表格宽度
  • height设置表格高度
  • align设置表格相对于页面的对对齐方式
  • cellspacing设置单元格间距

tr是行标签
th是表头标签
td是单元格标签
b是加粗标签

8.跨行跨列表格

  • colspan属性设置跨列
  • rowspan属性设置跨行

9.了解iframe框架标签(内嵌窗口)

iframe标签它可以在一个html页面上打开一个小窗口去加载一个单独的页面。

iframe标签和a标签组合使用的步骤:

  1. 在iframe标签中使用name属性定义一个名称
  2. 在a标签的target属性上设置iframe的name属性值

10.表单标签

表单就是html页面中用来收集用户信息的所有元素集合,然后把这些信息发送给服务器。

form标签就是表单

  • intput type=“text” 是文件输入框,value设置默认显示内容
  • intput type=“password” 是密码输入框,value设置默认显示内容
  • intput type=“radio” 是单选框,name属性可以对其进行分组,checked = “checked”表示默认选中
  • intput type=“checkbox” 是复选框,checked = “checked”表示默认选中
  • intput type="reset"是重置按钮,value属性修改按钮上的文本
  • intput type="submit"是提交按钮,value属性修改按钮上的文本
  • intput type="button"是按钮,value属性修改按钮上的文本
  • input type=“file” 是文件上传域
  • input type=hidden 是隐藏域,当我们要发送某些信息,而这些信息,不需要用户参与,就可以使用隐藏域(提交的时候同时发送给服务器)

select标签是下拉列表框

option标签是下拉列表框中的选项,selected = “selected”设置默认选中

textarea标签表示多行文本输入框(起始标签和结束标签中的内容是默认值)

  • rows属性设置可以显示几行的高度
  • cols属性设置每行可以显示几个字符宽度

11.表单提交的细节

form标签是表单标签

  • action属性设置提交的服务器地址
  • method属性设置提交的方式GET(默认值)或POST

GET请求的特点是:

  1. 浏览器地址栏中的地址是:action属性[+?+请求参数],请求参数的格式是:name = value&name = value
  2. 不安全
  3. 它有数据长度的限制

POST请求的特点是:

  1. 浏览器地址栏中只有action属性值
  2. 相对于GET请求要安全
  3. 理论上没有数据长度的限制

表单提交的时候,数据没有发送给服务器的三种情况:
7. 表单项没有name属性
8. 单选、复选(下拉列表中的option标签)都需要添加value属性,以便发送给服务器
9. 表单项不在提交的form标签中

12.其他标签

div标签默认独占一行
span标签的长度是封装数据的长度
p段落标签默认会在段落的上方或下方各空出一行(如果已有就不再空)

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值