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

最新推荐文章于 2024-11-06 16:04:23 发布
最新推荐文章于 2024-11-06 16:04:23 发布
阅读量402 收藏
点赞数
分类专栏： 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 2784
网络请求模块上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 2296
图片是内联元素，同时是内联替换元素，内联替换元素可以设置宽高。 为了网页美观，初始化标签中会做一项工作：转化img为block块状元素display: block;，并消除图片的margin border，置为0。 什么是替换元素与非替换元素？ ⑴替换元素：         替换元素是浏览器根据其标签的元素与属性来判断显示具体的内容。 比如：
<img>标签的alt属性简单介绍
weixin_34240657的博客
03-01 2293
alt属性可能会被很多人忽略，貌似在实际应用中可有可无。 在网页的表现方面确实有点可有可无，因为它真正能够起到作用的时候不多。 alt是alternate的缩写，是表示备选的意思。 也就是说当img图片由于某些原因无法显示的时候，则使用alt属性定义的文字替代。 当然显示的方式在不同的浏览器可能有所不同，但是在实际应用中谁又用这个alt文本来作为无法显示...
图片标签和多媒体标签的使用
yin_mo的博客
06-18 330
[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 197
今天主要学习了html中的图像链接 表格 表单 一、图像 链接 它分为 1、绝对路径 从文件所在的最高级目录下开始的完整路径 分类： 1.访问互联网上的资源 协议名称+主机名（IP地址/域名）+目录的路径和文件名 2.访问本机的资源 真正存在的物理路径：盘符一直到资源文件经过的路径 2、相对路径 从文件所在的位置开始查找 资源文件所在的位置经过的路径 分类： 1.当前文件与资源文件在同目录下 直接...
Java Web 学习笔记02 CSS基本用法
zhangzhang__yan的博客
08-06 95
Css一 一
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 Web学习笔记：解决常见异常和技术总结
Java Web 学习笔记是作者总结的学习笔记，旨在记录 Java Web 开发中遇到的常见问题和解决方法，以及一些常用的技术。笔记涵盖了多个方面，包括异常解决、Java EE 规范、Apache Commons 库、SLF4J 日志记录等。 常见...
Java Web ------ HTML 基础讲解
d1183的博客
05-04 238
1.网页的基本结构 <!-- 声明网页的版本 --> <!doctype html> <!-- 唯一的根元素 --> <html> <!-- 对网页的基本配置 --> <head> <!-- 声明网页的编码 --> <meta charset="utf-8"> <!-- 声明网页的...
HTML基础标签
yiXin_Chen的博客
12-05 697
html标签的分类: 1) 块元素: 独占一行的元素. 不与其它元素出现在同一行的元素. 2) 内联元素(行元素): 可以与其它元素同处一行的元素. 1. div标签：独占一行 <!-- (division :分隔) 是最常用, 最基础的块元素. 除了块元素的基本效果外, 不带有其它任何的样式效果 -->2.span标签：最基础的行元素 例：<span>文本效果测试</span> 3.标题标签: h1 ~ h6 效果: 1...
前端基础路线一：HTML编码规范
SOLar7SysteM的博客
03-06 1464
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
html img标签alt属性吗,img标签可以不用alt属性吗
weixin_33007357的博客
06-04 1961
HTML5+css3个人主页，要CSS布局HTML小编今天和大家分享要描点，怎么操作？对于个人主页来说还是很简单的。主要是素材容易准备。html5+CSS3的描点其实与普通的描点方式是一样的HTML语言中img标签的alt属性和title属性的作用与区别图片img标签alt属性对seo是否有影响请问标签里的属性是用来干什么的？alt属性是元素的必选属性，它给出了图像的备选文本，供图像无法显示时采用...
HTML 标签属性——＜a＞、＜img＞、＜form＞、＜input＞、＜table＞ 标签属性详解
Allen-
11-02 738
HTML元素除了可以使用全局属性外，还有许多特定于某些元素的属性。这些特定属性能够极大地增强元素的功能性和用户体验。
DevExpress中文教程 - 如何使用AI模型检查HTML编辑中的语法？
需要界面开发、IDE工具研发中文教程资料的小伙伴，记得私信我~
11-04 699
本文将主要展示如何将AI相关功能添加到HTML编辑控件并调整其UI获得最佳用户体验，欢迎下载最新版组件体验！
html第一个网页
最新发布
Qhumaing的博客
11-06 621
创建你的第一个HTML网页是一个激动人心的步骤。
HTML 表单设计与验证
jht_520的博客
11-02 203
在提交表单时，使用 JavaScript 进行了三个验证检查：确保名称字段不为空、电子邮件字段不为空，并且密码字段长度至少为 8 个字符。如果任何一个验证条件失败，表单将不会提交，并显示相应的错误消息。在验证逻辑中，你可以使用各种条件语句和正则表达式来检查用户输入。例如，你可以使用正则表达式验证电子邮件格式，使用条件语句验证密码的长度等。如果验证成功，你可以允许表单提交到指定的目标 URL。属性，用于指定输入框的类型，例如文本框、密码框、电子邮件输入框等。属性，用于指定选项的值，还有一个可选的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值