Java Web 学习笔记01 HTML基本用法

最新推荐文章于 2024-09-21 20:10:00 发布
最新推荐文章于 2024-09-21 20:10:00 发布
阅读量391 收藏
点赞数
分类专栏： Java Web 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhangzhang__yan/article/details/107824180
版权

HTML

HTML

Java Web软件架构：B/S 、C/S

1、概述

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

2、HTML语法

基本语法规范

html 标签 90% 都是一对一对出现的
单个标签 自己结束自己image、input、br、hr

<!-- ①标签不能交叉嵌套 -->	
正确：<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 tr td）

<!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、超链接（< a > < /a > a标签是get请求）

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>

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、密码框

<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、插入图片（ < img alter="" src="" /> ）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<img alt="加载图片失败" src="img/a.jpg">
</body>
</html>

在这里插入图片描述

7、列表（有序 < ol > 无序 < ul > type="" -> 决定了展示的样式）

<!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、标题段落（< h1 > < p > ）

<!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>

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

Yeah_zy
关注
专栏目录
Python爬虫学习笔记-第二课(网络请求模块上)
tzr0725的博客
12-11 2751
网络请求模块上1. 相关概念介绍1.1 向网站发起请求的方式：1.2 url-全球统一资源定位符1.3 user-agent 用户代理1.4 referer1.5 状态码1.6 抓包工具 爬虫的分类 通用网络爬虫，例如百度、Google、360； 聚焦网络爬虫，根据既定的目标有选择的抓取某一特定主题的内容。 1. 相关概念介绍 1.1 向网站发起请求的方式： Get 查询参数会在url地址中显示； 通常应用于直接从服务器上获取数据，不会对服务器上的数据产生影响； 图片 Post 查询参数不会显示在ur
img标签及其它替换元素
Winifred_1997的博客
07-12 2277
图片是内联元素，同时是内联替换元素，内联替换元素可以设置宽高。 为了网页美观，初始化标签中会做一项工作：转化img为block块状元素display: block;，并消除图片的margin border，置为0。 什么是替换元素与非替换元素？ ⑴替换元素：         替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。 比如：
图片标签和多媒体标签的使用
yin_mo的博客
06-18 313
[img]标签是用来定义图片的标签。 [img src="" alt="" title=""] src：代表source，填写的是要放入图片的路径。 alt：代表alter，是用来放置当图片无法正常显示时替换的文本。 title：当鼠标（光标）悬停在图片上时，指针右下角提示的内容。 多媒体标签 embed：可用来插入各种媒体 [embed src=""] src：代表source，用来放入文件的路径 属性设置 自动播放(autostart)： [embed src="" autostart=true]
html 基础
weixin_45846427的博客
11-07 188
今天主要学习了html中的图像链接 表格 表单 一、图像 链接 它分为 1、绝对路径 从文件所在的最高级目录下开始的完整路径 分类： 1.访问互联网上的资源 协议名称+主机名（IP地址/域名）+目录的路径和文件名 2.访问本机的资源 真正存在的物理路径：盘符一直到资源文件经过的路径 2、相对路径 从文件所在的位置开始查找 资源文件所在的位置经过的路径 分类： 1.当前文件与资源文件在同目录下 直接...
Java Web ------ HTML 基础讲解
d1183的博客
05-04 222
1.网页的基本结构 <!-- 声明网页的版本 --> <!doctype html> <!-- 唯一的根元素 --> <html> <!-- 对网页的基本配置 --> <head> <!-- 声明网页的编码 --> <meta charset="utf-8"> <!-- 声明网页的...
Java Web 学习笔记02 CSS基本用法
zhangzhang__yan的博客
08-06 84
Css一 一
[ 一 ] JAVA概述-学习笔记
Jenlibein的博客
07-23 1114
JAVA学习概述本文章为JAVA学习笔记，参考尚硅谷教程。
java web 学习笔记
08-04
Java Web学习笔记主要涵盖的是与开发Web应用程序相关的Java技术，包括Servlet、JSP、过滤器、监听器、MVC框架（如Spring MVC）、会话管理、请求和响应处理、数据库连接以及各种工具的使用等。这里我们将深入探讨这些...
Java-Web学习笔记.docx
09-30
Java Web 学习笔记是 Java 语言在 Web 开发方面的学习笔记，涵盖了 Java Web 项目目录结构、Servlet、JSP 等核心知识点。本笔记旨在帮助读者快速掌握 Java Web 开发的基础知识。 一、概述 Java Web 项目目录结构是 ...
Java基础尚硅谷宋红康学习笔记
05-29
9. **Spring框架**：Spring是Java企业级应用的主流框架，提供依赖注入、AOP、数据访问、Web应用等功能。 10. **Java并发编程**：包括线程池、锁机制（如synchronized、ReentrantLock）、并发容器（如...
java web 学习笔记,超详细好用.docx
12-30
Java Web 学习笔记主要涉及了文件上传这一关键知识点，这是在开发Web应用程序时常见的功能，比如用户上传头像、图片或附件等。文件上传在HTML表单中通过特定的方式实现，包括以下几点： 1. **表单提交方式**：为了...
Java后端学习笔记代码Java后端学习笔记代码
10-18
本压缩包"Java后端学习笔记代码"显然是一个针对Java后端开发的学习资源集合，包含了作者在学习过程中编写的代码示例和笔记。以下是基于这个主题的详细知识点解析： 1. **Java基础**: 作为Java后端开发的起点，掌握...
HTML基础标签
yiXin_Chen的博客
12-05 686
html标签的分类: 1) 块元素: 独占一行的元素. 不与其它元素出现在同一行的元素. 2) 内联元素(行元素): 可以与其它元素同处一行的元素. 1. div标签：独占一行 <!-- (division :分隔) 是最常用, 最基础的块元素. 除了块元素的基本效果外, 不带有其它任何的样式效果 -->2.span标签：最基础的行元素 例：<span>文本效果测试</span> 3.标题标签: h1 ~ h6 效果: 1...
HTML粉色烟花秀
兔子王
09-21 946
HTML语言实现的粉红色跨年烟花秀的完整代码。
MFC获取网页的html文本
bcbobo21cn的专栏
09-19 162
MFC CHttpFile类提供请求和读取 HTTP 服务器上文件的功能；
【HTML样式】加载动画专题 每周更新
m0_73918768的博客
09-20 693
方块移动加载动画 电子风变脸 正方体组合 跳跃式加载动画 下一篇文章应该是Linux安装Java和Maven的脚本 如果想看的可以点个关注~
DevExpress WinForms v24.1新版亮点：升级的HTML & CSS支持
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
09-18 1253
DevExpress WinForms控件2024年第一个重大版本——v24.1全新发布，新版本更好的支持HTML & CSS、增强文档管理器功能等，欢迎下载最新版体验！
html外部链接css怎么引用
最新发布
weixin_43187635的博客
09-21 172
在 HTML 文件中，可以通过 标签引用外部的 CSS 文件，从而将样式与结构分离。这个标签通常放在 HTML 文档的 部分，来确保在页面加载时样式能够正确应用。href=“styles.css”：指定外部 CSS 文件的路径，这里是相对路径 styles.css，也可以使用绝对路径或 URL。type=“text/css”：指定文件类型为 CSS（现在可以省略，默认就是 CSS）。这样，HTML 页面中的所有元素都会根据 styles.css 文件中的样式规则进行渲染。
html实现好看的多种风格手风琴折叠菜单效果合集(附源码)
接受定制，友情互惠，致力于前端的全类型模板，打造通用模板源码，进阶于前后端联合模板，适用于全类型。
09-18 997
html实现好看的多种风格手风琴折叠菜单效果合集(附源码)，html模板源码，手风琴效果源码，手风琴模板源码，内置九种风格的手风琴源码，适用于各种场合，内置代码，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。
Java Web学习笔记：解决常见异常和技术总结
Java Web 学习笔记是作者总结的学习笔记，旨在记录 Java Web 开发中遇到的常见问题和解决方法，以及一些常用的技术。笔记涵盖了多个方面，包括异常解决、Java EE 规范、Apache Commons 库、SLF4J 日志记录等。 常见...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值