Java Web学习01（HTML）

最新推荐文章于 2024-05-01 12:03:21 发布
最新推荐文章于 2024-05-01 12:03:21 发布
阅读量280 收藏
点赞数
分类专栏： 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
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 仿华为微商城 UI
09-07
仿华为微商城 UI html5
【完整代码】如何在html中插入图片/视频
热门推荐
weixin_68516344的博客
08-08 1万+
【完整代码】如何在html中插入图片/视频
JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用（超详细，附源码）
showswoller的博客
09-26 2151
JAVA Web入门之HTML中表格、表单、下列列表框、多行文本、超链接和图片标记的应用（超详细，附源码）
HTML5与HTML4.01的区别
weixin_38599724的博客
06-26 1439
在 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 123
1、HTML 概述 （1）超文本标记语言：Hyper Text Markup Language （2）HTML文件由一组标签构成，经过浏览器解析之后可以显示网页内容。 （3）HTML文档的构成 2、基本语法规范等 基本语法规范及具体的使用见工程：模板 -> Web01_UI 3、HTML 语法 grammar.html <!DOCTYPE ...
java web开发（学习路线）
嵌入式-老费，一个分享专业嵌入式知识的blog
09-28 2027
【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】 java语言天生就是为计算机网络开发而存在的。之前，学习java的时候，总觉得奇怪，为什么java语言用来做服务器很多，做web开发很多，但是做单机软件却不多。究其原因，主要还是java这门语言从一开始就是为网络设计的。单机版本身是工具类应用，而java主要用于平台类应用。当然用java开发单机应用也可以的，比如前端页面用vue来画，后端用java，这也不是不可以，就是部署的时候麻烦
JAVA WEB学习课件及代码详解第二部分
07-07
JAVA的J2EE WEB学习资料，其中包括了学习视频、讲义、笔记、以及练习代码等，适合刚接触JAVA同时需要搭建WEB平台的同学使用。 此为第一部分，包括以下课程内容： 1、day05_JDBC 2、day06_JDBC连接池&JDBCTemplate 3...
java学习html学习测试.rar
06-29
特点：BS:(Browser/Server,浏览器/服务器模式),web应用 可以实现跨平台，客户端零维护，但是个性化能力低，响应速度较慢。 问题：数据放在服务端和客户端的利与弊？ 1.3 浏览器内核 Trident：代表作品是IE，俗称IE...
Java Web实例学习文档_pdf
04-07
将此文档分享给大家，格式为pdf，欢迎大家评论。从最基本的jdk下载安装，到项目部署。包括排序算法、算法应用、html、jsp、xml、邮件发送、数据库、JFeeChart、ajax...等，应接不暇。
java web前端.docx
02-20
本文档是本人学习java web前端时所写笔记 拿出来分享 包含了前端基础的大部分内容 HTML CSS JS DOM编程 jQuery框架 AJAX基础
Java Web学习(apk)
03-31
JavaWeb学习是Android客户端目前最全面的免费离线JavaWeb学习书籍，主要内容包括: 1、Html标签、表格、表单等基础内容 2、Javascript基础 3、Javascript脚本高级特效 4、B/S架构工作原理 5、Jsp标签、表达式、...
这是一个简单的照明材料网站，后续还会更新
m0_64180190的博客
04-29 2327
产品中心|联系方式|新闻动态网页首页|产品中心|联系方式|新闻动态
用html画一个四叶草
liulang68的博客
04-20 2153
以上是部分代码，需要请看主页加联系方式。
HTML 学习笔记
m0_62870588的博客
04-28 1032
html超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。 1.HTML文档的后缀名 (1) .html (2) .htm 这里更推荐使用 ".html "，命名应该遵从含义清晰、简洁、一致性原则。".htm"写法是来源于老的8.3文件格式，DOS操作系统只支持后缀名的长度为三位，现在的版本则没有对命名长度的限制，因此建议选择无限制命名长度的方式" html"。 2.HTML网页结构 下面是一个HTML的叶面结构
CSS中的圆角和阴影
小何代码咖啡馆
04-21 1658
在 CSS3 中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）水平阴影(horizontal shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（必需值）垂直阴影(vertical shadow)，可以为负值。（可选值）将外（盒子的背面）阴影改为内（盒子之上）阴影。CSS3 中新增了盒子阴影，可以使用。属性为盒子添加阴影。（可选值）阴影模糊程度。（可选值）阴影模糊程度。
使用html画一个键盘
liulang68的博客
04-22 3710
【代码】使用html画一个键盘。
前端html中iframe的基本使用
Keep trying, keep going
04-30 766
的容器，通过 CSS 控制容器的样式和尺寸。此示例中的通信是在同一个域名下进行的，因此没有出现跨域问题。// 通过通过父窗口找到子窗口的window， 再向子窗口发送消息。因此，postMessage的作用是 父窗口向子窗口发送了一条消息。// 父窗口 监听子窗口发出的消息(如果有；需要注意的是，由于跨域安全策略的限制，父窗口只能与同源的。事件，当页面加载完成时，隐藏覆盖层，显示。是父窗口（当前窗口）中的一个引用，通过。中加载的文档的通信。元素嵌入子窗口的，可以通过。对象，并与子窗口进行通信。
HTML_CSS学习:CSSLearning
最新发布
m0_74972727的博客
05-01 513
【代码】HTML_CSS学习:CSSLearning。
Springboot + MySQL + html 实现文件的上传、存储、下载、删除
xuezhe5212的博客
04-28 1888
Springboot + MySQL + html 实现文件的上传、存储、下载、删除
java web学习步骤
09-09
2. 掌握HTML、CSS和JavaScript：学习Java Web开发之前，需要掌握前端开发技术，包括HTML、CSS和JavaScript等。这些技术用于构建网页的结构、样式和交互效果。 3. 学习Servlet：Servlet是Java Web开发的基础技术之一...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值