html初步使用
<!DOCTYPE html>//文档类型说明注释
<html lang="en">//使用语言的地区en表示美国英国
<head>
<meta charset="UTF-8">//文件的字符集
<title>Title</title>文件的标题
</head>
<body>
hh,njad
</body>
</html>
font标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>front标签</title>
</head>
<!--color属性改变颜色
face属性修改字体 size属性修改文本大小-->
<body>
<font color="#8a2be2" size="40px" face="微软雅黑">北京 </font>
</body>
</html>
标题标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--h1是最大标签 h6是最小标签
align属性是对齐属性 left是左对齐 center是居中 right是右对齐-->
<h1>标签1</h1>
<h2>标签2</h2>
<h3 align="center">标签3</h3>
<h4>标签4</h4>
<h5>标签5</h5>
<h6 align="right">标签6</h6>
</body>
</html>
图片标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--img标签是图片标签用来显示图片
src属性设置图片的路径 width属性设置图片的宽度
height属性设置图片的高度 border属性图片边框大小
alt属性设置当前指定路径找不到图片代替显示的文本内容
-->
<h1>图片标签演示</h1>
<img src=".idea/1.png" width="400" border="10px" ><br/>
<img src=".idea/2.png" alt="美女找不到" ><br/>
</body>
</html>
超链接标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--a标签是超链接
href属性设置连接的地址 terget属性设置那个目标进行跳转
self表示当前页面 blank表示打开新页面进行跳转-->
<a href="http://www.sohu.com">搜狐</a>
<a href="http://www.sohu.com" target="_blank">搜狐2</a><br/>
</body>
</html>
ol有序标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--ol表示有序列表
li列表项 type属性指定列表项排序方式 type设定数目款式
1阿拉伯数字 a小写字母 A是大写字母 i是小写罗马数字 I是大写罗马数字-->
<h1>五虎将</h1>
<ol type="A" start="3">
<li>jack</li>
<li>tom</li>
<li>jbk</li>
<li>jlck</li>
<li>ck</li>
</ol>
</body>
</html>
ul无序标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--ul表示无序列表 li列表项 taget属性指定列表项符号-->
<h1>五虎将</h1>
<ul type="circle">
<li>jack</li>
<li>tom</li>
<li>jbk</li>
<li>jlck</li>
<li>ck</li>
</ul>
</body>
</html>
特殊符号
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--<是<
>是> 空格是 -->
jack <hr/>
<hr/>
smith smith2 hsp<br/>
</body>
</html>
表格标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--table标签是表格标签border 设置表格标签
width 设置表格宽度height align表格相对与页面的对齐方式
cellspacing设置单元格间距 tr是行标签 th是表头标签
td是单元格标签 align设置单元格文本对齐方式 b是加粗标签-->
<h1>表格标签的使用</h1>
<table width="500px" border="1" height="400" align="center">
<tr>
<td>第一行第一列</td>
<td>第一行第一列 </td>
<td>第一行第一列</td>
</tr>
<tr>
<td>第二行第一列</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
</tr>
<tr>
<td>第三行第一列</td>
<td>第三行第二列</td>
<td>第三行第三列</td>
</tr>
</table>
</body>
</html>
表格练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--合并列colspan 列数
合并行 rowspan 行数
cellspace指定单元格的空隙大小 0表示没有空隙
border表格边框 width表格的宽度-->
<table>
<tr border="1" width="500" cellspace="0"
bordercolor="red">
<td align="center" colspan="3">星期一菜谱</td>
</tr>
<tr>
<td rowspan="2">第二行第一列</td>
<td>第二行第二列</td>
<td>第三行第三列</td>
</tr>
<tr>
<td>第三行第2列</td>
<td>第三行第3列</td>
</tr>
<tr>
<td rowspan="2">第四行第一列</td>
<td>第四行第二列</td>
<td>第四行第三列</td>
</tr>
<tr>
<td>第五行第二列<img src="./2.png" width="100
"></td>
<td>第五行第三列</td>
</tr>
</table>
</body>
</html>
文章来源：https://www.toymoban.com/news/detail-522309.html
表单标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--form表示表单 action提交到那个页面
method提交方式 常用get和post
input type=text输入框 input type=password密码框
input type=submit提交框 input type=reset 重置按钮-->
<h1>登陆系统</h1>
<form action="ok.html" method="get">
用户名:<input type="text" name="username"><br/>
密码:<input type="text" name="username"><br/>
<input type="submit" value="登陆">
<input type="reset" value="重新填写">
</form>
</body>
</html>
文章来源地址https://www.toymoban.com/news/detail-522309.html
到了这里，关于javaweb学习的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[Java]JavaWeb学习笔记(动力节点老杜2022)【Javaweb+MVC架构模式完结】](https://imgs.yssmx.com/Uploads/2024/01/406081-1.png)
