java的web开发之旅——第1站&html

最新推荐文章于 2024-03-31 19:45:30 发布
最新推荐文章于 2024-03-31 19:45:30 发布
阅读量289 收藏 1
点赞数
文章标签： html 前端 java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_49948651/article/details/121499909
版权

HTML

1. HTML的简述

1.1 HTML是什么

HTML：（Hyper Text Markup Language） 超文本标记语言

文本： 相当于记事本里写的文字。 展示信息
超文本： 超越了文本仅仅展示信息的功能范畴。泛指：图片、有样式的文字、点击跳转页面的文字

语言： 工具。
标记： 标签

HTML是由标签所组成的语言，能展示超文本效果，HTML是用来写网页的，是设计页面的基础。

1.2 HTML的语法

HTML代码是由头和体组成。

<html>
	<head>
	<title> 标题</title>
</head>
	<body>需要展示给用户看的信息内容</body>
</html>
html特征
HTML文件的扩展名为html或者htm。Htm是老的命名规范，html的新的
HTML文件由浏览器直接解析执行，无需编译，直接由上到下依次解析执行
HTML标签通常由开始标签和结束标签组成。例如:title 标题 /title
开始标签和结束标签之间的内容叫做内容体
HTML没有内容体的标签叫做空标签。仅由一个标签组成。例如：br/ 换行
HTML标签不区分大小写，为了方便阅读，建议使用小写
HTML标签是有属性的，格式为：属性名=”属性值”，属性值用引号引起。引号包含单引号和双引号

HTML标签建议包裹嵌套，不建议交叉嵌套。如下图所示请添加图片描述

2. HTML的基本标签

2.1 字体标签和格式化标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体与格式化</title>
</head>
<body>
	<!-- 字体标签 -->
	<font color="blue" size=1 face="宋体">今天是</font>
	<font color="red" size=7 face="楷体">2021-11-7</font>
	</br></br></br></br>

	<!-- 格式化标签 -->
	<h1>E&nbsp;&nbsp;&nbsp;D&nbsp;&nbsp;&nbsp;G</h1>
	<h6>EDG</h6>
	7777777<br/><br/>
	<p align="center" >EDG牛逼！</p>
	<p>淀粉落泪！</p>
	<p align="center">4396！</p>
	<p align="right">我们是冠军！</p>
	
</body>
</html>

在这里插入图片描述

2.1.1 font

字体标签，用于展示效果中修饰文字样式
<font 属性名=”属性值”>文字

  1. size: 控制字体大小.最小1 ~ 最大7。 如果设置范围不在1~7之间，设置无效
  2. color： 控制字体颜色. 使用英文设置（例如：red,blue…）
  3. face： 控制字体类型。只能设置系统字库中存在的字体类型

2.1.2 p&/p

段落标签，用于展示效果中划分段落。并且自动在段前和段后自动加空白行
align: 段落内容的对齐方式（默认是left，居左；Right 居右；Center 居中）

2.1.3 h1&/h1

标题标签，用于展示效果中划分标题，其中h1最大，h6最小

2.1.4 &nbsp

HTML源码中的多个空格，效果中最终会合并成一个
空格符号，用于展示效果中显示一个空白的位置

2.2 图片标签

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片</title>
</head>
<body>
	<!-- 图片标签 -->
	<img src="../img/ig.jpeg" width="40%"/>
	<img src="E:\eclipse\html01\src\main\webapp\img\edg.jpg" width="600" height="400"/> 
	<img src="http://dingyue.ws.126.net/2019/1215/
	475cedfap00q2j1yg00lsc000pe00dwc.png" width="15%" >
</body>
</html>

在这里插入图片描述

2.2.1 img /

用于在页面效果中展示一张图片。
src： 指明图片的路径。（必有属性）

  1. 内网路径：
    绝对路径：文件在硬盘上的具体位置。【不建议使用】
    例如：E:\eclipse\html01\src\main\webapp\img\edg.jpg
    相对路径：从引入者所在目录出发 【尽量使用相对路径】
    例如：…/img/ig.jpeg
    …/ 表示上一层目录
    ./ 表示当前目录
  2. 互联网路径：
    必须前面加上http://
    例如：http://dingyue.ws.126.net/2019/1215/475cedfap00q2j1yg00lsc000pe00dwc.png

width： 图片宽度
height： 图片的高度
宽度和高度的设置：默认单位是px，像素。
例如：width=”400” 其实设置的是 width=”400px”。固定设置方式百分比设置。
例如：width=”50%”， 是父标签的百分比。 会随着页面大小而动态改变。

2.3 列表标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
	<!-- 列表标签 -->
		<!-- 1.无序列表 -->
	<ul>
		<li>I G</li>
		<li>EDG</li>
		<li>FPX</li>
	</ul>
		<!-- 2.有序序列表 -->
	<ol>
		<li>I G</li>
		<li>EDG</li>
		<li>FPX</li>
	</ol>
</body>
</html>

在这里插入图片描述

2.3.1 ul&/ul

无序列表标签，用于在效果中定义一个无序列表

2.3.2 li&/li

列表条目项标签，用于在效果中定义一个列表的条目

2.3.3 ol&/ol

有序列表标签，用于在效果中定义一个有序列表

2.4 超链接标签

2.4.1 a&/a

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>超链接</title>
</head>
<body>
	<!-- 超链接标签 -->
	<a href="html02.html">
		<img alt="夺冠图片！" src="../img/win.jpg" width="300" heigt="500">
	</a>  
	 <br/> <br/>
	
	<a href="https://www.bilibili.com/video/
	BV14b411w7La?from=search&seid=1909793427174034692
	&spm_id_from=333.337.0.0">I G夺冠视频！</a><br/>
	 
	<a href="https://www.bilibili.com/video/
	BV1EP4y1j7kV?from=search&seid=16401085397966658151
	&spm_id_from=333.337.0.0">EDG夺冠视频！</a> <br/>
	
	<a href="https://www.bilibili.com/video/
	BV1aE411Y7Ej?from=search&seid=907586961839785142
	&spm_id_from=333.337.0.0l">FPX夺冠视频！</a> <br/>
	
</body>
</html>

在这里插入图片描述

超链接标签，用于在效果中定义一个可以点击跳转的链接
href： 超链接跳转的路径 (必有属性)

  1. 内网本机路径：
    相对路径和绝对路径
  2. 互联网路径：http://地址

超链接正常工作：

  1. a标签中必须有内容
  2. a标签必须有href属性
注意
a标签内容体，不仅仅是文字，也可以是其他内容，例如图片
a标签的href属性，不仅仅可以链接到html上，也可以链接到其他文件上，例如图片

2.5 表格标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
	<!-- 表格标签 -->
	<table border=10 width="50%" align="left">
		<tr>
			<th>夺冠</th>
			<th>I G</th>
			<th>EDG</th>
			<th>FPX</th>
		</tr>
		<tr>
			<td>2018</td>
			<td>冠军！</td>
			<td>八强</td>
			<td> 无</td>
		</tr>
		<tr>
			<td>2019</td>
			<td>四强</td>
			<td> 无</td>
			<td>冠军！</td>
		</tr>
		<tr>
			<td>2021</td>
			<td> 无</td>
			<td>冠军！</td>
			<td>十六名</td>
		</tr>
	</table>
	<br/><br/><br/>	<br/><br/><br/><br/><br/><br/>
	
	<!-- 合并单元格 -->
	<table border=5 width="40%" align="left">
		<tr>
			<th colspan=2>1</th>
			<th>3</th>
			<th>4</th>
			<th>5</th>
		</tr>
		<tr>
			<td rowspan=3>01</td>
			<td>02</td>
			<td>03</td>
			<td>04</td>
			<td>05</td>
		</tr>
		<tr>
			<td>02</td>
			<td colspan=2 rowspan=2>03</td>
			<td>05</td>
		</tr>
		<tr>
			<td>02</td>
			<td>05</td>
		</tr>
	</table>
	
</body>
</html>

在这里插入图片描述

2.5.1 table&/table

表格标签，用于在效果中定义一个表格
border： 设置表格的边框粗细
width： 设置表格的宽度

2.5.2 tr&/tr

表格的行标签，用于在效果中定义一个表格行

2.5.3 td&/td

表格的单元格标签，用于在效果中定义一个表格行中的单元格

2.5.4 th&/th

表格的表头单元格标签，用于在效果中定义一个表格行中的表头单元格
th 和 td 唯一区别：th 内容 居中加粗

2.5.5 表格单元格合并

td 或者 th 都有两个单元格合并属性：
colspan： 跨列合并单元格
rowspan： 跨行合并单元格

合并步骤：
1.确定合并哪几个单元格，确定是跨列合并还是跨行合并
2.在第一个出现的单元格上书写 合并单元格属性
3.合并几个单元格，属性值就书写几
4.被合并的单元格必须删掉

2.6 块标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>块</title>
</head>
<body>
	<div>div-123</div>
	<div>div-456</div>
	<span>span-123</span>
	<span>span-456</span>
	  
</body>
</html>

在这里插入图片描述

2.6.1 div&/div

块级的块标签，适用于大量数据展示

  1. 默认占满一行
  2. 会自动换行

2.6.2 span&/span

行级的块标签，适用于少量数据展示。

  1. span有多少内容，就会占用多大空间。
  2. Span不会自动换行

2.6.3 Div和span的应用场景：

请添加图片描述

3. HTML的表单标签

3.1 输入项标签

3.1.1 input/标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<form>
		用户名：<input name="username"/><br/>
		密码：<input type="password" name="password"/><br/>
		大学：<input type="text" name="university" value="DUT"/><br/>
		性别：<input type="radio" name="sex" value="man" checked="checked"/>男
			<input type="radio" name="sex" value="woman"/>女
			<!-- 
			<input type="radio" name="sex1"/>攻
			<input type="radio" name="sex1"/>受
			 -->
		
		
		<input type="submit"/>
	</form>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
	<form>
		<input type="hidden" name="uid" value="asf526g526asfa2">
		用户名：<input name="username"/><br/>
		爱好：<input type="checkbox" name="habby" value="basketball">篮球
			<input type="checkbox" name="habby" value="football">足球
			<input type="checkbox" name="habby" value="volleyball">排球
			<input type="checkbox" name="habby" value="badminton">羽毛球
			<input type="checkbox" name="habby" value="DUT" checked="checked">DUT
			<br/>
		照片：<input type="file" name="photo"/>
			<br/>
		介绍：<input name="introduce" readonly="readonly" value="子陌是大帅逼"/>
			<br/>
		特点：<input name="characteristic" disabled="disabled" value="事实无法改变"/>
			<br/>
		<input type="reset"/>
		<input type="submit" value="注册"><br/>
		<input type="button" value="快按我！按我！"/>
	</form>
</body>
</html>

表单输入项标签之一，用户可以在该标签上 通过填写和选择 进行数据的输入。

  1. type: 设置该标签的种类
1. text:文本框。 默认
2. password:密码框。 内容为非明文
3. radio:单选框。 在同一组内有单选效果
4. checkbox:复选框。 在同一组内有复选效果
5. submit:提交按钮。用于控制表单提交数据
6. reset:重置按钮。 用于将表单输入项恢复到默认状态
7. file:附件框。用于文件上传
8. hidden:隐藏域。一般用作提交服务器需要拿到，但用户不需要看到的数据
9. button:普通按钮。需要和JS事件一起用

  1. name: 单选框、复选框进行数据的分组。/ 设置该标签对应的参数名
    某个表单输入项需要通过参数列表提交，就必须设置name属性

  2. value: 设置该标签对应的参数值。 / 作为按钮的名字

value属性的设置策略：
1. 文本框、密码框这样的表单输入项，可以不强制指定value，因为用户可以自由输入
2. 单选框、复选框这样的表单输入项，必须强制指定value，因为用户无法输入，只能选择，如果不指定value，那么提交上去的只有on
  1. checked: 设置单选框/复选框的默认选中状态
  2. readonly: 设置该标签的参数值只读，用户无法手动更改。数据是可以正常提交
  3. disabled: 设置该标签不可用，参数值无法更改，且参数值也无法提交

3.2 选择框标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="">
		<select name="lpl">
			<option value="1">IG</option>
			<option value="2">EDG</option>
			<option value="3">RNG</option>
			<option value="4">WE</option>
			<option value="5">OMG</option>
		</select><br/><br/>
		
		<select name="选手">
			<option>请选择你最爱的角色</option>
			<option value="1">7777777</option>
			<option value="2">4396</option>
			<option value="3" selected="selected">养猪</option>
		</select><br/>
		<input type="submit">
	</form>
</body>
</html>

3.2.1 select&/select标签

定义一个选择框

  1. name: 设置该标签对应的参数名
  2. multiple： 设置该标签选项全部显示，并且可以进行多选提交。默认为单选。

3.2.2 option&/option标签

选项标签，用于为一个选择框添加一个选项

  1. value: 设置需要提交的参数值。
  2. selected: 设置选项的默认选中状态
注意事项：
Option的内容体一般是用来进行展示
参数值 应该是option的value属性值

3.3 文本域标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form>
		简介：<textarea name="introduce" rows="3" cols="20">DUT</textarea><br/>
		<input type="submit"/>
	</form>
</body>
</html>

3.3.1 textarea&/textarea标签

表单输入项标签之一，用户可以在该标签上 通过输入 进行数据的输入。
name: 设置该标签对应的参数名

文本域和文本框区别：
文本框不能换行，文本域可以
文本框参数值是value属性，文本域参数值是标签的内容体

3.4 表单标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<form action="html02.html" method="get">
		用户名get：<input name="uname"/><br/>
		<input type="submit"/>
	</form>
	
	<form action="E:\eclipse\html01\src\main
	\webapp\html\html02.html" method="post">
		用户名post：<input name="uname"/><br/>
		<input type="submit"/>
	</form>
</body>
</html>

3.4.1 form&/form标签。

用于在效果中定义一个表单，用于提交用户填写的数据。

  1. action: 将数据提交到何处。
    默认提交到本页。
路径
本机内网相对路径：html02.html
本机内网绝对路径：E:\eclipse\html01\src\main\webapp\html\html02.html
互联网路径：http://www.baidu.com/xxx
  1. **method:**将数据以何种方式提交
    提交方式可定义：get(默认） 或者 post
    Get提交方式特点：把数据拼接到地址栏上
    Post提交方式特点：没有把提交数据拼接到地址栏上，而是放在请求体
    尽量使用post方式提交表单
Get和post提交方式区别：
get提交的参数列表拼接到了地址栏后面；post方式不会 拼接地址栏
get方式提交的数据 敏感信息不安全；Post方式提交的数据 相对安全
get方式提交的数据量 有限； Post方式从理论上提交的数据量无限大

3.5 提交表单注意事项

3.5.1、提交中文，为什么要使用URL编码？

正常提交数据：密码为：DUT
?password=DUT&username=zimo
非正常提交数据：密码为：D&U&T
?password=D&U&Tusername=zimo

URL编码目的解决：特殊符号，中文
例如：& —> %26
?password=D&U&Tusername=zimo
编码完：?password=D %26U %26T&username=zimo

为了保证表单数据传递时能更好区分出name和value，保证数据传递的完整性。

4. 恭喜通过第一关！

DUT_子陌
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JSP实践之旅.exe
08-30
关于JSP实践之旅 简明介绍 JSP内幕 JSP官方白皮书 国内不谈java 基本语法介绍 2001年度Java最佳技术和产品 JSP入门介绍 三种Web开发主流技术的评价之PHP<br>三种Web开发主流技术的评价之ASP...
The Java™ Tutorials
11-15
1. **基础概念**：这部分介绍了Java编程的基础，包括如何安装Java开发工具包（JDK），编写第一个Java程序，理解类、对象和包的概念，以及控制流程语句如if、for、while等。 2. **面向对象编程**：深入讲解了面向...
HTML+CSS小白入门与进阶教程
热门推荐
qq_29192703的博客
08-07 9万+
本文旨在让你快速了解HTML语法结构，通过实例操作快速从无到有的入门与进阶。Html语言学习的特点有点像刚开始学word软件，word的功能就像html标签，用多了就熟悉了，不常用的一些功能现学现用即可（你要不知道什么是标签的意思不要着急，下面会讲到）。 [注]本文使用的开发软件是Notepad++，我在文章的最后提供的所有需要素材和网站源码，但我希望你能在看完整篇文章后再去下载，文章中实验代码...
初学HTML详细全过程
m0_56364861的博客
04-21 3629
写的比较啰嗦，主要为了确保以后复习还能看懂。
HTML 标签的学习
m0_66030479的博客
06-06 528
html的学习
HTML基础教程（非常详细）从零基础入门到精通，看完这一篇就够了。
ZL_1618的博客
09-06 1万+
HTML全称Hyper Text Markup Language, 翻译成中文就是超文本标记语言，是一种最基础的网页开发语言, 需要注意的是HTML并不是编程语言, 而是一种标记语言超文本可以理解为超越了文本的意思, 也就是超级文本, 超文本不只是普通的文本内容, 还可以加入图片,视频,声音等内容, 甚至可以从一个文件跳转到另一个文件(超级链接文本)标记语言可以理解为一套标记标签,也就是由许多标记标签组成的语言。
HTML详细教程
qq_40046544的博客
10-17 6490
HTML 是网页使用的语言，定义了网页的结构和内容。浏览器访问网站，其实就是从服务器下载 HTML 代码，然后渲染出网页。HTML 的全名是超文本标记语言（HyperText Markup Language），上个世纪 90 年代由欧洲核子研究中心的物理学家蒂姆·伯纳斯-李（Tim Berners-Lee）发明。它的最大特点就是支持超链接，可以跳转到其他网页，从而构成了整个互联网。1999 年，HTML 4.0.1 发布，成为广泛接受的 HTML 标准。
j2ee 开发工具教程
10-27
本教程将聚焦于Eclipse 3.2.1版本及其插件的安装与使用，这将为你的J2EE开发之旅奠定坚实的基础。 ### 一、Eclipse 3.2.1简介 Eclipse 3.2.1是Eclipse平台的一个稳定版本，发布于2006年，它提供了强大的代码编辑、...
JAVA12天全掌握
08-11
这不仅是一场快速学习的挑战，也是一个深度理解Java编程基础的全面之旅。通过本课程，学员将从零开始，逐步建立起扎实的Java编程基础，为未来在软件开发领域的发展打下坚实的基础。 第一天：Java简介与环境配置 1. ...
酒店管理系统————酒店管理系统
02-08
- **Java基础**：系统的基础架构通常建立在Java SE（标准版）之上，使用Java的核心类库进行开发。 - **Java EE**：为了实现服务器端功能，如数据库连接、会话管理、事务处理等，可能利用了Java EE（企业版）中的...
html5图片分割后animal动画
08-31
html5图片分割后animal动画 canvas css分割图片动画 调用库animate.css magic.css 分行列 上百种组合 android 调试通过
全部HTML代码学习
12-05
.全部HTML代码学习 全部HTML代码学习文件类型 <html></html> （放在档案的开头与结尾） 文件主题 <title></title> （必须放在「文头」区块内） 文头 <head></head> （描述性资料，像是「主题」） 文体 <body></body> （文件本体） 结构性定义（由浏览器控制的显示风格） 标题 <h?></h?> （从1到6，有六层选择） 3.0 标题的对齐 <h? align=left|center|right></h?> 3.0 区分 <div></div> 3.0 区分的对齐 <div align=left|right|center|justify></div> 引文区块 <blockquote></blockquote> （通常会内缩） 强调 （通常会以斜体显示） 特别强调 <strong></strong> （通常会以加粗显示） 引文 <cite></cite> （通常会以斜体显示） 码 <code></code> （显示原始码之用） 样本 <samp></samp> 键盘输入 <kbd></kbd> 变数 <var></var> 定义 <dfn></dfn> （有些浏览器不提供） 地址 <address></address> 3.0 大字 <big></big> 3.0 小字 <small></small>
0基础看这一篇就够了HTML教程(详细汇总)
最新发布
lh11223326的博客
03-31 1801
HTML也称Hyper Text Markup Language，意思是超文本标记语言，同时HTML也是前端的基础，在web中HTML和CSS是编程的必备之一。HTML标签非常注重语义化，很多标签都是通俗易懂，在学习web中更重要的是开发技巧和思维。
HTML学习
m0_61422721的博客
07-20 371
每个.html文件都有的代码叫做初始代码，要复合html文件的规范写法。!+tab键快速的创建html的初始代码。
HTML学习-源码
qq_37431752的博客
02-27 1710
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;link href="https://csdnimg.cn/public/favico
HTML 表格
木晓的博客
12-16 149
你可以使用 HTML 创建表格。 表格 表格由 <table> 标签来定义。每个表格均有若干行 （由 <tr> 标签定义） ，每行被分割为若干单元格 （由 <td> 标签定义 ）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 <table border="1"...
HTML 入门
maimang1001的专栏
03-01 425
什么是 HTML? HTML(HyperText Markup Language) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于开发者。它由一系列的元素（elements）组成，这些元素可以用来包围不同部分的内容，使其以某种方式呈现或者工作。 注：HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。例如，标签<title>写作<title>、<TITLE>、<Tit...
HTML学习心得(6)
Heimdall_vata的博客
06-15 1015
HTML学习心得(6) JS 什么是javaScript javaScript和Java有什么联系 根据目前我自己的理解，不要被名字有相似字节所欺骗，这两个语言其实没有什么联系，如果说有的话，应该就是关键字和对象的一些范畴有点相似或者说是有种模仿的感觉。但是实际上一个作为脚本的轻量语言[^7]，一个作为有完整体制的大型语言[^8],两者是没有任何可比性的。 JS的内链外链 ...
HTML语言学习网站
Sayesan的专栏
08-11 573
http://www.w3school.com.cn/
毕业论文ssm407基于java web的公益网站的设计与实现+jsp论文.doc
08-08
此公益网站利用当下成熟完善的 SSM 框架，使用跨平台的可开发大型商业网站的Java 语言，以及最受欢迎的 RDBMS 应用软件之一的 Mysql 数据库进行程序开发。实现了公益活动基础数据的管理，志愿者申请,用户管理,新闻...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值