JavaWeb学习（Day5）

最新推荐文章于 2025-06-09 21:35:33 发布

Jerry~~京

最新推荐文章于 2025-06-09 21:35:33 发布

阅读量99

点赞数

分类专栏： JavaWeb 文章标签： html

本文链接：https://blog.youkuaiyun.com/qq_53136634/article/details/121204062

版权

JavaWeb 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了Web的基本概念，包括JavaWeb、C/S与B/S架构的优缺点。重点讲解了静态资源和动态资源的区别，并详细阐述了HTML作为静态资源的主要组成部分，如HTML、CSS和JavaScript的作用。此外，文章还深入探讨了HTML的常用标签，如标题、段落、图片、链接、表格等，以及表单元素在数据采集和交互中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Day5学习进度

1.web概念概述

2.HTML

一、web概念概述

1.JavaWeb：

使用Java语言开发基于互联网的项目

2.软件架构

①C/S架构

在用户本地有一个客户端程序，在远程有一个服务器程序。

优点：用户体验好

缺点：开发、安装、部署、维护麻烦

②B/S架构

只需要一个浏览器，用户通过不同的网址（URL），客户访问不同的服务器端程序。

优点：开发、安装、部署、维护简单

缺点：对硬件要求较高；应用过大，用户体验会受到影响。

资源分类：静态资源、动态资源

a.静态资源：使用静态网页开发技术发布的资源

特点：

所有用户访问，得到的结果都一样
如：文本、图片、音频、视频，HTML、CSS、JavaSript
如果用户请求的是静态资源，那么服务器会直接将静态资源发送给服务器，浏览器中内置着静态资源解析引擎，可以展示静态资源。

b.动态资源：使用动态网页技术发布的资源

特点：

所有用户访问，得到的结果可能不一样
如：jsp/Servlet、php、asp…
如果用户请求的是动态资源，那么服务器会将动态资源，转换位静态资源，再发送给服务器

静态资源：

HTML：用于搭建基础网页，展示页面的内容

CSS：用于美化页面，布局页面

JavaScript：控制页面的元素，让其有一些动态效果

二、HTML（超文本标记语言）

HTML：最基础的网页开发语言

超文本：是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本。

标记语言：由标签构成的语言（HTML、XML）（不是编程语言）

1.HTML快速入门

1.html后缀名为.html或者.htm

2.标签分为

围堵标签：由开始标签和结束标签。如：、

自闭和标签：开始标签和结束标签再一起。如：

3.标签可以嵌套（需要正常嵌套）

4.在开始标签处可以定义属性，属性由键值对构成，值需要用单引号或者双引号引起来。

5.html的标签不区分大小写，但建议小写。

<html>
    <head>
        <title>title</title>
    </head>
    <body>
        <font color = 'red'>hello world</font><br/>
        <font color = 'blue'>hello world</font>
    </body>
</html>

2.标签

①文件标签：构成html最基本的标签

html：html文档的根标签

head：头标签，用于指定html文档的一些属性，引入外部的资源。

title：标题标签

body：体标签

<!DOCTYPE html>：html5定义该文档为html文档

②文本标签：和文本有关的标签

<br/>：换行

<h1>：一级标题，带换行（标题标签）（同理h1-h6）

<p>：段落标签

<hr>：显示一条水平线

<b>：字体加粗

<i>：字体斜体

<font>：字体标签（属性：color、size、face）

<center>：居中

③图片标签

<img>：图片标签，自闭和标签

属性：src指定图片路径

相对路径：

./：表示当前目录下

…/：表示上一级目录

④列表标签

有序列表：ol、li
无序列表：ul、li

⑤链接标签

<a>：定义一个超链接

属性：

href：指定访问资源的url

target：指定打开资源的方式

⑥表格标签

<table>：定义表格

<tr>：定义行

<td>：定义单元格

<th>：定义表头单元格

⑦块标签

<span>：内联标签，行内标签，不换行

<div>：块级标签，每一行div占满一整行

⑧语义化标签

<header>、<footer>：没有任何样式，仅有语义。

⑨表单标签

用于采集用户输入的数据，和服务器进行交互。

<form>：定义一个范围，代表数据采集的范围。

属性：action（要提交数据到哪里，url）、method（get、post等）

get：会封装到请求行中，不安全；请求参数大小受限；

post：会封装到请求体中，安全；请求参数没有受限；

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>表单标签</title>
</head>
<body>
  <form action = "#" method="get">
  用户名：<input name="username"><br/>
  密码：<input name="password"><br/>
    <input type="submit" value="登录">
  </form>
</body>
</html>

3.例子

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
  <meta charset="UTF-8">
  <title>注册页面</title>
</head>
<body>
<form action="#" method="post">
  <table border="1" align="center" width="500">
    <!--第一行-->
    <tr>
      <td><label for="username">用户名</label>  </td>
      <td><input type="text" placeholder="请输入用户名" name="username" id="username"></td>
    </tr>
    <!--第二行-->
    <tr>
      <td><label for="password">密码</label> </td>
      <td><input type="password" placeholder="请输入密码" name="password" id="password"></td>
    </tr>
    <!--第三行-->
    <tr>
      <td>Email</td>
      <td><input type="email" placeholder="请输入Email" name="Email"></td>
    </tr>
    <!--第四行-->
    <tr>
      <td>姓名</td>
      <td><input type="text" placeholder="请输入姓名" name="name"></td>
    </tr>
    <!--第五行-->
    <tr>
      <td>手机号</td>
      <td><input type="text" placeholder="请输入手机号" name="name"></td>
    </tr>
    <!--第六行-->
    <tr>
      <td>性别</td>
      <td>
        <input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female">女
      </td>
    </tr>
    <!--第七行-->
    <tr>
      <td>出生日期</td>
      <td><input type="date" name="date"></td>
    </tr>
    <!--第八行-->
    <tr>
      <td>验证码</td>
      <td><input type="text" name="code"></td>
    </tr>
    <!--第九行-->
    <tr>
      <td colspan="2" align="center"><input type="submit"  value="提交"></td>
    </tr>
  </table>
</form>
</body>
</html>

效果
在这里插入图片描述