Java Web学习01（HTML）

最新推荐文章于 2024-10-29 14:54:04 发布
最新推荐文章于 2024-10-29 14:54:04 发布
阅读量307 收藏
点赞数
分类专栏： JavaWeb 文章标签： web html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45866560/article/details/107821199
版权

HTML

1、HTML概述

Java Web 软件架构：B/S
（1）超文本标记语言：Hyper Text Markup Language
（2）HTML文件由一组标签构成，经过浏览器解析之后可以显示网页内容。
（3）HTML文档的构成
在这里插入图片描述

2、HTML 语法

注意：

<!-- ①标签不能交叉嵌套 -->
正确：<p><i>早安，Alex</i></p>
错误：<p><i>早安，Alex</p></i>

<!-- ②标签必须正确关闭 -->
<!-- i.有文本内容的标签： -->
正确：<p>早安，Alex</p>
错误：<p>早安，Alex

<!-- ii.没有文本内容的标签： -->
正确：aaaaaa<br />bbbbbbbb
错误：aaaaaa<br>bbbbbbbb

<!-- ③属性必须有值，属性值必须加引号 -->
正确：<font color="blue">早安，Alex</font>
错误：<font color>早安，Alex</font>
错误：<font color=red>早安，Alex</font>
	
<!-- ④注释不能嵌套 -->
正确：<!-- 注释内容 -->
错误：<!-- 注释内容<!-- 嵌套的注释 --> 溢出的注释 -->

3、表格

table.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<table border="1" align="center" width="80%">
	<tr><th>姓名</th><th>位置</th><th>公司</th><th>财富</th></tr>
	<tr>
		<td>王健林</td>
		<td>北京</td>
		<td>万达</td>
		<td>2211</td>
	</tr>
	<tr>
		<td>马云</td>
		<td>杭州</td>
		<td>阿里巴巴</td>
		<td>1889</td>
	</tr>
	<tr>
		<td>马化腾</td>
		<td>深圳</td>
		<td>腾讯</td>
		<td>1642</td>
	</tr>
	<tr>
		<td>王卫</td>
		<td>深圳</td>
		<td>顺丰速运</td>
		<td>1240</td>
	</tr>
</table>
</body>
</html>

结果：
在这里插入图片描述

4、超链接

（1）a.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<a href="pages/target.html">跳转到目标页面，目标页面有美女！</a>
</body>
</html>

（2）target.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	美女！
</body>
</html>

结果：
在这里插入图片描述
在这里插入图片描述

5、表单

（1）form标签

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<!-- 创建表单 -->
	<!-- 使用form标签定义表单
		使用action属性指定提交数据的位置
		使用method属性指定提交数据的方式
			GET：会将提交的数据附着在URL地址后面，在浏览器地址栏可以看到
			POST：不会提交的数据附着在URL地址后面，在浏览器地址栏看不到
	 -->
	<form action="target.html" method="post">
	
		用户名：<input type="text" name="userName" /><br /><br />
		密码：<input type="password" name="password" /><br /><br />
		
		<!-- 提交按钮：type="submit"，使用value属性指定它是页面上显示的文字 -->
		<input type="submit" value="登录" />
	
	</form>
</body>
</html>

结果：
在这里插入图片描述

（2）文本框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- file:///D:/workspace/test/Web02_UI/WebContent/04.表单/target.html?username=Tom&email=tom@126.com&password=abc123&other=%E6%97%A0-->

<form action="target.html" method="get">
	用户名：<input type="text" name="username" /><br /><br />
	邮箱：<input type="text" name="email" /><br /><br />
	密码：<input type="text" name="password" /><br /><br />
	其他：<input type="text" name="other" /><br /><br />
	<input type="submit" value="登录" />
	<br /><br />
</form>
</body>
</html>

结果：
在这里插入图片描述

（3）密码框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="target.html" method="get">
	
	密码：<input type="password" name="password" /><br /><br />
	
	<input type="submit" value="登录" />
	
	<br /><br />
	
</form>

</body>
</html>

结果：
在这里插入图片描述

（4）单选框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="target.html" method="get">
	
	性别：
	<input type="radio" name="gender" value="male" />男生
	<input type="radio" name="gender" checked="checked" value="female" />女生
	<input type="radio" name="gender" value="eastSuccess" />东方不败<br /><br /><br /><br />
	
	<input type="submit" value="提交" />
	
	<br /><br />
	
</form>
</body>
</html>

结果：
在这里插入图片描述

（5）多选框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<form action="target.html" method="get">
	
	你喜欢的足球队<br /><br />
	
	巴西<input type="checkbox" name="soccerTeam" value="Brazil" />
	德国<input type="checkbox" name="soccerTeam" value="German" />
	荷兰<input type="checkbox" name="soccerTeam" value="Holland" /><br /><br /><br /><br />
	
	<input type="submit" value="提交" />
	
	<br /><br />
	
</form>
</body>
</html>

target.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

Target Page...

</body>
</html>

结果：
在这里插入图片描述
在这里插入图片描述

6、插入图片

image.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<img alt="加载图片失败" src="img/a.jpg">

</body>
</html>

结果：
在这里插入图片描述

7、列表

List.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 在这里创建无序列表 -->
<ul>
	<li>火影忍者</li>
	<li>死神</li>
	<li>海贼王</li>
	<li>名侦探柯南</li>
	<li>网球王子</li>
</ul>

<br /><br />

<!-- 在这里创建有序列表 -->
<ol>
	<li>漩涡鸣人</li>
	<li>黑崎一护</li>
	<li>路飞</li>
	<li>柯南</li>
	<li>越前龙马</li>
</ol>
</body>
</html>

结果：
在这里插入图片描述

8、标题段落

article.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>

<!-- 在这里创建标题 -->
<h1>江畔独步寻花</h1>
<h3>唐·杜甫</h3>
<!-- 在这里创建段落 -->
<p>黄四娘家花满蹊</p>
<p>千朵万朵压枝低</p>
<p>留连戏蝶时时舞</p>
<p>自在娇莺恰恰啼</p>

</body>
</html>

结果：
在这里插入图片描述

Liduomi
关注
专栏目录
JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用（超详细，附源码）
showswoller的博客
09-26 2355
JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用（超详细，附源码）
JAVA WEB学习心得
weixin_44387373的博客
09-16 1869
Javaweb学习心得
【完整代码】如何在html中插入图片/视频
weixin_68516344的博客
08-08 1万+
【完整代码】如何在html中插入图片/视频
HTML5 仿华为微商城 UI
09-07
仿华为微商城 UI html5
HTML5与HTML4.01的区别
weixin_38599724的博客
06-26 1505
在 HTML 4.01 中有三种 <!DOCTYPE> 声明 HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素（比如 font）。不允许框架集（Framesets） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/htm...
黑猴子的家：JavaWeb 之 HTML
黑猴子的博客
12-12 140
1、HTML 概述 （1）超文本标记语言：Hyper Text Markup Language （2）HTML文件由一组标签构成，经过浏览器解析之后可以显示网页内容。 （3）HTML文档的构成 2、基本语法规范等 基本语法规范及具体的使用见工程：模板 -> Web01_UI 3、HTML 语法 grammar.html <!DOCTYPE ...
java web开发（学习路线）
嵌入式-老费，一个分享专业嵌入式知识的blog
09-28 2341
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 java语言天生就是为计算机网络开发而存在的。之前，学习java的时候，总觉得奇怪，为什么java语言用来做服务器很多，做web开发很多，但是做单机软件却不多。究其原因，主要还是java这门语言从一开始就是为网络设计的。单机版本身是工具类应用，而java主要用于平台类应用。当然用java开发单机应用也可以的，比如前端页面用vue来画，后端用java，这也不是不可以，就是部署的时候麻烦
Java学习路线总结，搬砖工逆袭Java架构师
热门推荐
学Java，找哪吒
09-07 25万+
定期分享Java硬核技术干货、分享Java学习路线、分享Java经典面试题
java web学习心得
qq_42375391的博客
06-30 1万+
时光转瞬即逝，一个学期的java web课程完美结束了。在张老师的辛苦教导下，我学到了很多知识，例如：Web应用的基本概念与系统架构，HTML界面技术，CSS技术，JavaScript脚本技术，Servlet服务器编程技术、JSP编程技术及Web JDBC数据库开发技术等等。在收获这么多知识的同时，我也有了很多感受。 在刚开始接触这门课程时，感觉很困难，不知道从哪里下手，但在老师的教导下，多实践，多摸索，不要怕犯错误。一点点的，我开始走上了这门课程的正轨。在每次上课之前，一定要提前预习下节课程内容，...
Java Web 学习路线
AfinalStone的专栏
10-25 2508
近来一直在看和jsp相关的技术文章，打算把java web系统的学习一下，不管做什么事情，首先有个大概的路线和规划应该是蛮重要的。今天看到一遍还不错的学习路线，文章时间有点久了，不知道所述内容是否已经陈旧。 一、Java核心这是学习Java的基础，掌握程度的深浅甚至直接影响后面的整个学习进程。Java的核心主要包括几个部分： 1、初级的有语法基础、面向对象思想。 学习任何一门语言语法都是必须的，
基于Java和HTML的Java Web学习项目设计源码
06-07
本项目为“基于Java和HTML的Java Web学习项目设计源码”，包含83个文件，其中包括67个XML配置文件、3个Java源文件、3个Markdown文档、2个Gitignore忽略配置文件、2个Idea项目配置文件、2个Properties配置文件、1个...
基于SpringBoot和三层架构设计的Java Web学习源码
10-06
该项目为基于SpringBoot框架和三层架构设计的Java Web学习源码，共计180个文件，涵盖118个XML配置文件、25个Java源文件、25个class文件、3个properties文件、2个gitignore文件、2个md文件、2个html文件以及1个name...
java web 课程学习记录
03-04
Java Web课程学习记录主要涵盖了Java在Web开发领域的应用和相关技术。这门课程旨在帮助学习者掌握使用Java语言进行Web应用程序开发的基本技能和概念。在Java Web开发中，我们通常会涉及以下几个关键知识点： 1. **...
JAVA WEB学习课件及代码详解第二部分
07-07
JAVA的J2EE WEB学习资料，其中包括了学习视频、讲义、笔记、以及练习代码等，适合刚接触JAVA同时需要搭建WEB平台的同学使用。 此为第一部分，包括以下课程内容： 1、day05_JDBC 2、day06_JDBC连接池&JDBCTemplate 3...
Java项目: 基于Java Web 开发示范学习项目
01-04
在这个"Java项目: 基于Java Web 开发示范学习项目"中，我们可以深入探讨Java Web开发的核心概念和技术。 1. **Servlet**: Servlet是Java编程语言中的一个接口，用于扩展服务器的功能。在Java Web应用中，Servlet...
2024年Java后端学习路线
weixin_67268418的博客
01-10 1万+
Java基础JavaWeb数据库：MySql，Redis开发中间件：Maven ，Git ，Docker，RabbitMQ开发框架：SSM，spring boot，mybatis-plus、springcloud。
HTML入门教程4：HTML属性
软考鸭
10-29 881
HTML属性是附加在HTML标签上的额外信息，它们以键值对的形式出现，并放置在标签的起始部分内。这些属性为浏览器提供了额外的指令，以更准确地渲染网页内容。通过本文的介绍，相信大家对HTML属性有了更深入的了解。HTML属性是网页开发中的基础且重要的部分，它们能够极大地增强网页的功能和表现力。在实际开发中，我们应该灵活运用HTML属性，结合CSS和JavaScript等技术，创造出更加丰富和动态的网页内容。同时，也希望大家能够在开发过程中不断学习和探索新的HTML属性，以提升自己的网页开发技能。
HTML入门教程18：HTML类
软考鸭
10-29 302
在HTML中，你使用class属性来为元素分配类名。类名可以是任何你选择的名称，但最好使用能够描述元素用途或样式的名称。类名前面用一个点（.）表示，但在HTML中给元素分配类名时不需要这个点。< div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素 < div class = " my-class " > 这是一个具有类的div元素
炫酷的登录框!(附源码)
最新发布
m0_50864141的博客
10-29 1830
【代码】炫酷的登录框!(附源码)
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值