Index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>网页制作练习</title>
    <script src="Webjs3.js"></script>
    <script src="Sqljs3.js"></script>
    <style type="text/css">
        div{
            width: 800px
            margin-top:0px; width:510px; height:200px; margin-right:auto; margin-left:auto;
        }
        [title=te]{
            /*属性和值选择器*/
            color: aliceblue;
        }
    </style>
</head>

<body background="雪花2.jpg" οnlοad="init()" >
<table>
    <tr>
        <td>姓名:  </td>
        <td><input type="text" id="name1"></td>
    </tr>
    <tr>
        <td>E-mail: </td>
        <td><input type="text" id="email1"> </td>
    </tr>
    <tr>
        <td>电话号码: </td>
        <td><input type="text" id="tel1"></td>
    </tr>
    <tr>
        <td>备注:  </td>
        <td><input type="text" id="memo1"> </td>
    </tr>
    <tr>
        <td></td>
        <td><input type="button" value="保存" οnclick="saveStorage()"></td>
    </tr>
</table>
<hr>
<p>
    检索:
    <input type="text" id="find1">
    <input type="button" value="检索" οnclick="findStorage('msg1')">
</p>
<p id="msg1"></p>

    <div >

        <br>  <br> <br> <br> <br> <br> <br>

        <iframe src="framea.html" frameborder="0" width="100%" height="500px">
            Frametotal<br />
        </iframe>
        <br> <br> <br> <br> <br>

    </div>
    <br> <br> <br> <br> <br><br> <br> <br> <br> <br><br> <br> <br> <br> <br><br> <br> <br> <br> <br><br> <br> <br> <br> <br>
    <form action="http://localhost/service.php" method="get">
        用户名:
        <input type="text" name="yonghu">
        密码  :
        <input type="password" name="mima">
        <input type="submit" value="确定">
    </form>

    <br><br><br><br><br>
    SQL实现Web留言板<br>
    <table>
        <tr>
            <td>姓名: </td>
            <td><input type="text" id="name"></td>
        </tr>
        <tr>
            <td>留言: </td>
            <td><input type="text" id="memo"></td>
        </tr>
        <tr>
            <td></td>
            <td>
                <input type="button" value="保存" οnclick="saveData()" >
            </td>
            <td>
                <input type="button" value="删除某个表" οnclick="dropTable()">
            </td>
        </tr>
    </table>
    <hr>
    <table id="datatable" border="1"></table>
    <p id="msg"><a></a></p>

</body>
</html>


framea.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>FrameA</title>
    <style type="text/css">
        body{
            margin: 0px;
        }
        div#containor{
            width: 500px;
            height:200px;
            background-color: palegreen;
        }
        div#title{
            width: 500px;
            height: 50px;
            background-color: beige;
        }
        div#menu{
            width: 50%;
            height: 200px;
            background-color: aquamarine;
            float: left;
        }
        div#bottom{
            width: 50%;
            height: 200px;
            background-color: dodgerblue;
            float: left;
        }
        div#frame{
            width:500px ;
            float: left;
        }
    </style>
</head>
<body >
    <div id="containor" >

        <div id="title">头部</div>
        <div id="menu">菜单</div>
        <div id="bottom">底部</div>
        <div id="frame">框架
            <iframe src="frameb.html" frameborder="0" width="500px" height="350px" >
                Framea<br>
            </iframe>
        </div>
    </div>
</body>
</html>


frameb.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>FrameB</title>
    <script src="Webjs1.js"></script>
    <script src="Webjs2.js"></script>
    <link href="Css1.css" type="text/css">
</head>
<body bgcolor="#8a2be2" >
    WebStorage制作Web留言板<br>
    <p id="msg"></p>
    <input type="text" id="input">
    <input type="button" value="保存数据" οnclick="saveStorage2('input')">
    <input type="button" value="读取数据" οnclick="loadStorage2('msg')">

    <br> <br> <br>

    <textarea id="memo" cols="60" rows="10"></textarea><br>
    <input type="button" value="保存" οnclick="saveStorage3('memo')">
    <input type="button" value="显示" οnclick="loadStorage3('msg')">
    <input type="button" value="清除数据" οnclick="clearStorage()">

    <br> <br>

    <a href="index2.html" target="_blank">返回index首页</a>
</body>
</html>


Webjs1.js:

/**
 * Created by Vodka on 2017/2/26.
 */

function saveStorage1(id){
    var target = document.getElementById(id);
    var str = target.value;
    //保存数据的方法 key value
    sessionStorage.setItem("message",str);
}

function loadStorage1(id){
    var target = document.getElementById(id);
    //读取数据
    var msg = sessionStorage.getItem("message");
    target.innerHTML = msg;
}

function saveStorage2(id){
    var target = document.getElementById(id);
    var str = target.value;
    //保存数据的方法 key value
   localStorage.setItem("message",str);
}

function loadStorage2(id){
    var target = document.getElementById(id);
    //读取数据
    var msg = localStorage.getItem("message");
    target.innerHTML = msg;
}


Webjs2.js:

/**
 * Created by Vodka on 2017/2/26.
 */

function saveStorage3(id){
    var data = document.getElementById(id).value;
    var time = new Date().getTime();
    localStorage.setItem(time,data);
    alert("数据已储存");
    loadStorage('msg');
}

function loadStorage3(id){
    var result = "<table border ='1'>";
    for(var i=0;i<localStorage.length;i++){
        var key = localStorage.key(i);
        var value = localStorage.getItem(key);
        var date = new Date();
        date.setTime(key);
        result += "<tr><td>"+value+"</td><td>"+date+"</td></tr>";
    }
    result += "</table>";
    var target = document.getElementById(id);
    target.innerHTML = result;
}

function clearStorage(){
    localStorage.clear();
    alert("数据已删除");
    loadStorage('msg');
}


Webjs3.js:

/**
 * Created by Vodka on 2017/2/26.
 */

function saveStorage(){
    var data = new Object;
    data.name1 = document.getElementById("name1").value;
    data.email1 = document.getElementById("email1").value;
    data.tel1 = document.getElementById("tel1").value;
    data.memo1 = document.getElementById("memo1").value;
    var str = JSON.stringify(data);
    localStorage.setItem(data.name1,str);
    alert("数据已储存");
}

function findStorage(id){
    var find=document.getElementById('find1').value;
    var str = localStorage.getItem(find);
    var data = JSON.parse(str);
    var result = "姓名:"+data.name1+"<br>";
        result += "E-mail:"+data.email1+"<br>";
        result += "电话:"+data.tel1+"<br>";
        result += "备注:"+data.memo1+"<br>";
    target = document.getElementById(id);
    target.innerHTML = result;
}


Sqljs3.js:

/**
 * Created by Vodka on 2017/2/26.
 */

var datatable = null;
var db = openDatabase("MyData","","My Database",1024*100);
function init(){
    datatable = document.getElementById("datatable");
}

//删除html中table下的所有的子节点
function removeAllData(){
    for(var i = datatable.childNodes.length-1;i>=0;i--){
        datatable.removeChild(datatable.childNodes[i]);
    }
    var tr = document.createElement("tr");
    var th1 = document.createElement("th");
    var th2 = document.createElement("th");
    var th3 = document.createElement("th");
    th1.innerHTML = "姓名";
    th2.innerHTML = "留言";
    th3.innerHTML = "时间";
    tr.appendChild(th1);
    tr.appendChild(th2);
    tr.appendChild(th3);
    datatable.appendChild(tr);
}

//显示数据信息内容
function showData(row){
    var tr = document.createElement("tr");
    var td1 = document.createElement("td");
    td1.innerHTML = row.name;
    var td2 = document.createElement("td");
    td2.innerHTML = row.message;
    var td3 = document.createElement("td");
    var t = new Date();
    t.setTime(row.time);
    td3.innerHTML = t.toLocaleDateString()+" "+ t.toLocaleTimeString();
    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);
    datatable.appendChild(tr);
}

//显示当前本地数据库中所有的数据信息
function showAllData(){
    db.transaction(function(tx){
        tx.executeSql("create table if not exists MsgData(name text,message text,time integer)",[]);
        tx.executeSql("select * from MsgData",[],function(tx,rs){
            removeAllData();
            for(var i=0;i<rs.rows.length;i++){
                showData(rs.rows.item(i));
            }
        });
    })
}

//向本地数据库中添加数据
function addData(name,message,time){
    db.transaction(function(tx){
        tx.executeSql("INSERT INTO MsgData VALUES(?,?,?)",[name,message,time],function(tx,rs){
            alert("成功");
        },
            function(tx,error){
                alert(error.source+"::"+error.message);
            }
        )
        })
}

//保存table中提交的数据
function saveData(){
    var name = document.getElementById("name").value;
    var memo = document.getElementById("memo").value;
    var time = new Date().getTime();
    addData(name,memo,time);
    showAllData();
}

//删除某一个表
function dropTable(){
    var tableName = window.prompt("请输入要删除的表名称:","");
    db.transaction(function(tx){
        tx.executeSql("drop table"+tableName+"",[],function(tx,rs){
            alert("表删除成功!");
        },function(tx,error){
            alert(error.source+"::"+error.message);
        });
    })
}

Css1.css:

body{
    background-image: url("雪花2.jpg");
}
/*派生选择器*/
table tr{
    color: #FF0000;
}

/* id选择器 带有# */
#p a{
    color: lightgreen;


    background-image: url("飞哥.jpg");
    background-repeat: no-repeat;
    /*背景是否平铺填满*/
    background-position: 0px 0px;
    /*设置背景位置*/
    background-attachment: fixed;
    /*设置背景是否随着页面滚动*/


    text-align : right;
    /*左右对齐方式*/
    text-indent: -2em;
    /*首行缩进设置*/
    padding-left:2em ;
    /*内边框距左距离设置*/
    text-transform: uppercase;
    /*字母大小写设置*/
    text-shadow: 5px 5px 1px #FF0000;
    /*距左距离、距上距离、清晰度设置、背景颜色*/
    width: 100px;
    text-wrap: normal;
    /*自动换行设置(英文不会拆开)*/
    font-size: 40px;
    /*字体大小*/
    font-family:fantasy ;
    /*字体种类*/

}

/* 类选择器 带有. (用的最多)*/
.pclass{
    color: antiquewhite;
}

@font-face {
    font-family: myfont;
    src: url("");
}

/*元素选择器 无.或# */
a:link{
    /*普通的未被访问的连接*/
    color: black;
    text-decoration: none;
}
a:visited{
    /*已经访问过的连接*/
    color: darkblue;
}
a:hover{
    /*鼠标位于连接上方*/
    color: chartreuse;
}
a:active{
    /*连接被点击时*/
    color: chartreuse;
}

ul li{
    list-style-image: url("蓝飘.gif");
}
/*class可以重复 id不能重复*/
ul.ul1{
    list-style-position: inside;
}

#tb,tr,th,td{
    border: 1px solid blue;
    text-align: center;
}
#tb{
    width: auto;
    height: auto;
    border-collapse: collapse;
}

p{
    outline-style:groove;
    outline-color: gold;
    outline-width: 1px;
}