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