文档
html文档：https://download.csdn.net/download/pengjunlee/9959414
知识点
pageEncoding="gbk"是jsp内容的编码方式，包括.html的编码；
html5很方便，html5的新特性使input的提交更方便；
html头部<head>标签还可将用户重定向到新的网址，<head>标签里还写：该网页在客户端默认用什么字符集打开；
<p>（段落）标签里不能有h、div、ul、ol等块级元素，<p>标签里只能嵌套内联元素，标题<h>标签自带p标签；
<label>内嵌套radio可优化体验增大单选按钮的点击面积，摒弃写radio元素后写label的写法；
<a>标签默认置于td的左侧；
<button>元素默认置于td的中间；
table标签的width="50%"，指该表格的宽度占浏览器宽度的50%，table默认置于左侧，若table标记align="left"，表单右侧自动填充文本；
request接收submit或form的action；
onclick -> onclick未返回假 -> onsubmit -> onsubmit未返回假 -> submit提交；onsubmit是提交之前触发的函数；超链接onclick返回假则不执行href，超链接先执行onclick，后执行href；
超链接是执行doGet函数，如果超链接仅指定要执行的servlet则不能执行dopost方法，可能会执行其它方法；
一小段代码
<!DOCTYPE html> <html lang="en"> <head> <!--运行该html文件以自动刷新网页--> <meta http-equiv="refresh" content="10"> </head> <body> <iframe src="要自动刷新的网址"></iframe> </body> </html>
<%-- iframe相关--%> <iframe name="iframe1" src="inner.html"></iframe> <a href="inner2.html" target="iframe1">切换</a>
<%-- 搜索框--%> <input type="search" name="" value="" placeholder="这是搜索框"/>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>firefly工作日志模板</title> <link rel="stylesheet" href="css/box.css"> <link rel="stylesheet" href="css/friendList.css"> <script src="js/jquery-3.2.1.min.js"></script> <script src="js/work_log.js"></script> </head> <body> <div class="index"> <a id="wl" href="#work-log">工作日志</a> <a id="yls-a" href="#yls-div">***系统</a> </div> <div class="box" id="work-log"> <select title="选择日期" id="xzrq" onchange="changeselect()" class="sel"> <option>2019-11-11</option> <option>2019-11-12</option> </select>工作日志<br/> <!--1天 -- 1个ol 页面只显示选中的那天的ol--> <ol id="yy-2019-11-11"> </ol> <ol id="yy-2019-11-12"> </ol> </div> <div class="box" id="yls-div"> <h4></h4> <p> </p> </div> </body> </html>
<%-- 备忘录框架--%> <div id="note"> <h3 title="所有备忘录，都在这里" align="center">备忘录</h3> <div class="module"> <h4 align="center"></h4> <ul> <li></li> </ul> </div> <div class="module"> <h4 align="center"></h4> <ul> <li></li> </ul> </div> <div class="module"> <h4 align="center">说明</h4> <table> <thead> <tr> <th>名称</th> <th>备注</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> </tr> </tbody> </table> </div> <div class="module"> <h4 title="还有一些说明" align="center">秘密（登录）</h4> <table> <thead> <tr> <th>目标</th> <th>ID</th> <th>密码</th> </tr> </thead> <tbody> <tr> <td></td> <td></td> <td></td> </tr> <tr> <td></td> <td colspan="2"></td> </tr> </tbody> </table> </div> </div>
/*备忘录*/ #note{ width: 700px; height: 600px; margin: 20px auto 20px 20px; border: 1px solid #ec971f; overflow-y: scroll; } /*备忘录模块*/ .module { width: 500px; height: 300px; background-color: aliceblue; margin: 20px auto 20px auto; overflow-y: scroll; } .module li{ list-style: none; /*设置浮动之后不会向右溢出*/ float: left; margin: 10px 20px 0px 0px; } .module table { border: 1px solid red; margin: 0px auto 0px auto; } .module table td{ border: 1px solid rebeccapurple; } .module table tr{ line-height: 30px; }