H5基础 2

作者: Xavier_yang | 来源:发表于2016-10-26 14:24 被阅读0次

H5学习01之HTML标签
H5基础 2
Number three
2019-08-01
合理分配上王者策略经营类手游首富传说H5天梯战在线玩
迷茫朋友的前端开发学习路线
H5制作、自媒体内容如何获得平台推荐
H5学习从0到1-H5的基本标签（2）
Android与H5混合开发「kotlin，WebView」
基础

HTML的表单

表单是用于获取不同类型的用户的输入

常用的表单标签

平时比较常用的表单

复选框能够进行多选
<input type="checkbox" 复选框的类型是 checkbox
单选按钮

需要加上name属性这样他们才是一组,在这一组里面选择一个
选择你的性别:
男<input type="radio" name="sex" >
女<input type="radio" name="sex">

下拉列表

 <select>
    <option>www.baidu.com</option>
    <option>www.google.com</option>
</select>

文本域

规定文本域的大小包含行数和列数

    <textarea cols="30" rows="30">请在此填写个人信息</textarea>

创建按钮
value里面的内容是按钮显示的文字 submit不设置value就是提交,专门的提交按钮
```
 <input type="button" value="按钮">
<input type="submit" value="确认">
```

HTML的框架

框架的标签 frame

框架对于页面的设计起着很大的作用

框架集标签 frameset

这个已经在H5中被删除了
不能在body中添加
框架集标签定义如何将窗口分割为框架
每一个frameset定义一些列行或列
rows/cols的值规定了每行或者每列占据屏幕的面积

    <frameset cols="20%,50%">
    <frame src="framea.html"></frame>
    <frame src="frameb.html"></frame>
    </frameset>

常用的标签: noresize 固定框架的大小 cols 列 rows行
内联框架 iframe 现在依然在流行使用

固定大小,如果里面的内容过大,就会出现进度条

    <iframe src="frameb.html" frameborder="0" width="400px"></iframe>
    frameborder是去掉框架的边框

a标签的target还有两个内容,就是_parent,_top.其中,_parent是在父框架中打开的,_top是在最顶级的框架中打开的,就是原始的页面

HTML背景

背景标签 background 能够引入图片
背景颜色 bgcolor 只能设置颜色
颜色

颜色是由一个十六进制的符号来进行定义的,这个符号由红色,绿色,蓝色的值来组成 RGB
颜色最小值是:0 (#00) 最大值是:255(#FF)
红色: #FF0000 绿色:#00FF00 蓝色#0000FF

HTML的实体

1.实体:HTML中预留字符串必须被替换成字符实体比如:< > & ^ * 等等

XHTML

什么是XHTML

XHTML指的是可扩展的超文本标记语言
与HTML4.01几乎相同
XHTML是更严格更纯净的HTML版本
XHTML是以XML应用的方式定义的HTML

为什么使用XHTML

为了代码的完整性和良好性

文档声明:

DTD:规定了使用通用标记语言的网页语法

三种XHTML文档类型

strict(严格类型)

transitional(过度类型)
frameset(框架类型)

XHTML的元素

元素必须正确嵌套
元素必须始终关闭
元素必须小写
文档必须有一个根元素

Web Storage

使用cookie保存数据存在几个玩问题

大小:cookies的大小被限制在4KB
带宽:cookies是随HTTP失误一起被发送的,因此会浪费一部分发送cookies时使用的带宽
复杂性:要正确的操纵cookies是很困难的

针对cookies这些问题,在H5中,重新提供了一种在客户端本地保存数据的功能,他就是web storage

web storage功能就是在web上存储数据的功能,这里针对的是客户端本地而言的,具体分为两种:

sessionStorage:将数据保存在session对象中,session是指用户在浏览某个网站的时候,从进入网站到浏览器关闭对经过的这段时间,也就是用户浏览这个网站所花费的时间.session对象可以用来保存在这段时间内所要求保存的任何数据
localStorage:将数据保存在客户端本地的硬件设备中,即使浏览器被关闭,改数据仍然存在,下一次打开浏览器访问网站时仍然可以继续使用

sessionStorageDE 使用

javascript中的内容
function saveStorage(id) {
var target = document.getElementById(id)
var str = target.value;
//保存数据的方法 key value 这里的message相当于key
sessionStorage.setItem("message",str)
}

function  loadStorage(id) {
var target =     document.getElementById(id)
//读取数据的方法 通过上面的key获取value
var msg = sessionStorage.getItem("message")
target.innerHTML = msg;
}

<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="appWebJ.js"></script>
</head>
<body>
<p id="msg"></p>
<input type="text" id="input">
<input type="button" value="保存数据" onclick="saveStorage('input')">
<input type="button" value="读取数据" onclick="loadStorage('msg')">
</body>
</html>

localStorage的使用

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

本地数据库

HTML5使用了两种本地数据库:SQLLite,indexedDB
使用SQLLite写一个留言板

这个是html里面的内容

    <!DOCTYPE html>
    <html lang="en">
        <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="sql3js.js"></script>
    </head>
    <body onload="init()">
    <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="保存"onclick="saveData()"></td>
    </tr>
    </table>
    <hr>
    <table id="datatable" border="1">
    <p id="msg"></p>
    </table>
    </body>
    </html>

这个是javascript里面的内容

var datatable = null;
var db = openDatabase("MyData","","My DataBase",1024*100);
function  init() {
datatable = document.getElementById("datatable");
showAllData();
}
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);
        }
    )

})
}
function saveData() {
var name = document.getElementById("name").value;
var memo = document.getElementById("memo").value;
var time = new Date().getTime();
addData(name,memo,time);
showAllData();}

indexDB数据库

网友评论

本文标题：H5基础 2

本文链接：https://www.haomeiwen.com/subject/mzbcyttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

H5基础 2

HTML的表单

HTML的框架

HTML背景

HTML的实体

XHTML

Web Storage

本地数据库

indexDB数据库

相关文章

H5学习01之HTML标签

H5基础 2

Number three

2019-08-01

合理分配上王者策略经营类手游首富传说H5天梯战在线玩

迷茫朋友的前端开发学习路线

H5制作、自媒体内容如何获得平台推荐

H5学习从0到1-H5的基本标签（2）

Android与H5混合开发「kotlin，WebView」

基础

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读