1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>狗子的工作站</title> 6 </head> 7 <body> 8 <div align="left"> 9 <img src="https://avatar.csdnimg.cn/E/2/1/1_qq_39391544_1624348562.jpg" alt=""> 10 </div> 11 <h1 align="center" ><font color="#4682B4">狗子Dev奇风岁月</font> </h1> 12 <button><a href="https://www.baidu.com/"> 13 <img src="https://www.baidu.com/img/flexible/logo/pc/result.png" alt="百度加载失败" > 14 </a> 15 </button><br> 16 <form action="/login.jsp" method="GET"> 17 <input type="text" placeholder="账号" size="20" name="name"> 18 <input type="password" placeholder="请输入密码" name="password"> 19 <input type="reset" value="reset"> 20 <input type="submit" value="submit(戳小猪也能提交)"><br> 21 <input type="image" src="https://how2j.cn/example.gif" title="戳俺老猪也能提交"> 22 </form> 23 24 <input type="text" value="有初始值的文本框"> 25 <input type="button" value="按我也没用"> 26 <iframe src="https://blog.csdn.net/qq_39391544" width="600" height="300"></iframe> 27 28 29 <p>使用预格式的情况:</p> 30 <pre> 31 public class HelloWorld { 32 33 public static void main(String[] args) { 34 System.out.println("Hello World"); 35 } 36 } 37 </pre> 38 <p> 39 40 <ul type="square"> 41 <p>1.日常(无序列表)</p> 42 <li>吃</li> 43 <li>喝</li> 44 <li>玩</li> 45 <li>睡</li> 46 </ul> 47 48 <ol type="I" start="I"> 49 <p>2.今日安排(有序列表)</p> 50 <li><b>吃饭</b><i></i></li> 51 <li><i>睡觉</i></li> 52 <li><a href="https://www.cnblogs.com/Knight02/"><b><i>写日记</i></b> </a></li> 53 </ol> 54 <dl> 55 <p>3.定义列表</p> 56 <dt>基地</dt> 57 <dd><a href="https://www.cnblogs.com/Knight02/" title="┭┮﹏┭┮">博客园</a></dd> 58 <dd><a href="https://blog.csdn.net/qq_39391544" title="(*/ω＼*)">CSDN</a></dd> 59 </dl> 60 </p> 61 <div style="width:100px;height: 100px;background-color: #66f9fe;">小蓝块(一个div)</div> 62 <span>我是个文本标签,比赛安排见下图<br></span> 63 <img src="./比赛安排.png" title="时间表" alt="您的计划已丢失,请重新做狗" width="500"> 64 </body> 65 <br><br><br> 66 67 <table border="4" width="200px"> <!--border是设置边框，属性值为粗细--> 68 <caption>信息表</caption> <!--表格标题--> 69 <tr> 70 <th>学号</th> <!--表头 （在tr行标签中用th） 默认字体加粗--> 71 <th>姓名</th> 72 <th>口头禅</th> 73 </tr> 74 75 <tr> 76 <td colspan="2">2021</td> <!--colspan是合并列--> 77 <td rowspan="2" bgcolor="pink">阿巴阿巴</td> <!--rowspan是合并行--> 78 </tr> 79 <tr> 80 <td>2020</td> 81 <td>dog</td> 82 </tr> 83 </table> 84 85 <div> 86 <p>今晚计划</p> 87 学习java<input type="checkbox" name="activity" value="java"><br> 88 睡觉<input type="checkbox" name="activity" value="sleep"><br> 89 打DOTA<input type="checkbox" name="activity" value="dota"><br> 90 英雄联盟<input type="checkbox" name="activity" value="lol"> 91 <select> 92 <option >A</option> 93 <option >B</option> 94 <option >C</option> 95 </select> 96 </div> 97 98 <br><br><textarea placeholder="留下宝贵的意见吧"></textarea> 99 <div align="right"> 100 <img src="https://avatar.csdnimg.cn/E/2/1/1_qq_39391544_1624348562.jpg" alt=""> 101 </div> 102 </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是块元素，即自动换行
常见的块元素还有h1,table,p
span是内联元素，即不会换行
常见的内联元素还有img,a,b,strong
提交数据
设置type="submit"
IE下button的type的默认值为button不具备提交功能
其他浏览器type的默认值是submit