HTML笔记

文档

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;
}