<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>狗子的工作站</title>
</head>
<body>
<div align="left">
<img src="https://avatar.csdnimg.cn/E/2/1/1_qq_39391544_1624348562.jpg" alt="">
</div>
<h1 align="center" ><font color="#4682B4">狗子Dev奇风岁月</font> </h1>
<button><a href="https://www.baidu.com/">
<img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="百度加载失败" >
</a>
</button><br>
<form action="/login.jsp" method="GET">
<input type="text" placeholder="账号" size="20" name="name">
<input type="password" placeholder="请输入密码" name="password">
<input type="reset" value="reset">
<input type="submit" value="submit(戳小猪也能提交)"><br>
<input type="image" src="https://how2j.cn/example.gif" title="戳俺老猪也能提交">
</form>
<input type="text" value="有初始值的文本框">
<input type="button" value="按我也没用">
<iframe src= width="600" height="300"></iframe>
<p>使用预格式的情况:</p>
<pre>
public class HelloWorld {
public static void main(String[] args) {
System.out.println("Hello World");
}
}
</pre>
<p>
<ul type="square">
<p>1.日常(无序列表)</p>
<li>吃</li>
<li>喝</li>
<li>玩</li>
<li>睡</li>
</ul>
<ol type="I" start="I">
<p>2.今日安排(有序列表)</p>
<li><b>吃饭</b><i></i></li>
<li><i>睡觉</i></li>
<li><a href="><b><i>写日记</i></b> </a></li>
</ol>
<dl>
<p>3.定义列表</p>
<dt>基地</dt>
<dd><a href=" title="┭┮﹏┭┮">博客园</a></dd>
<dd><a href="title="(*/ω＼*)">CSDN</a></dd>
</dl>
</p>
<div style="width:100px;height: 100px;background-color: #66f9fe;">小蓝块(一个div)</div>
<span>我是个文本标签,比赛安排见下图<br></span>
<img src="./比赛安排.png" title="时间表" alt="您的计划已丢失,请重新做狗" width="500">
</body>
<br><br><br>
<table border="4" width="200px"> <!--border是设置边框，属性值为粗细-->
<caption>信息表</caption> <!--表格标题-->
<tr>
<th>学号</th> <!--表头 （在tr行标签中用th） 默认字体加粗-->
<th>姓名</th>
<th>口头禅</th>
</tr>
<tr>
<td colspan="2">2021</td> <!--colspan是合并列-->
<td rowspan="2" bgcolor="pink">阿巴阿巴</td> <!--rowspan是合并行-->
</tr>
<tr>
<td>2020</td>
<td>dog</td>
</tr>
</table>
<div>
<p>今晚计划</p>
学习java<input type="checkbox" name="activity" value="java"><br>
睡觉<input type="checkbox" name="activity" value="sleep"><br>
打DOTA<input type="checkbox" name="activity" value="dota"><br>
英雄联盟<input type="checkbox" name="activity" value="lol">
<select>
<option >A</option>
<option >B</option>
<option >C</option>
</select>
</div>
<br><br><textarea placeholder="留下宝贵的意见吧"></textarea>
<div align="right">
<img src="https://avatar.csdnimg.cn/E/2/1/1_qq_39391544_1624348562.jpg" alt="">
</div>
</html>
效果
login.jsp源代码(日后J2EE会涉及)
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" isELIgnored="false"%>
<%
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("name");
String password = request.getParameter("password");
%>
您提交的账号名是 :<%=name%> <br/>
您提交的密码是 :<%=password%>
<br>
<a href="javascript:history.back()">返回</a>
div是块元素，默认是占用100%的宽度,自动换行
常见的块元素还有h1,table,p
span是内联元素，宽度由其内容的宽度决定,不会自动换行
常见的内联元素还有img,a,b,strong,input提交数据
设置type="submit"
IE下button的type的默认值为button不具备提交功能
其他浏览器type的默认值是submit