DTD
DTD可定义合法的XML文档搭建模块,它使用一系列合法的元素来定义文档的结构
HTML5不基于SGML,所有不需要引用DTD
新增的标签
结构标签
<article></article> //定义一篇文章
<header></header> //定义头部
<nav></nav> //定义导航
<section></section> //定义一个区域
<aside></aside> //定义页面内容部分的侧边栏
<hgroup></hgroup> //定义文件中一个区块的相关信息
<figure></figure> //定义一组媒体内容以及它们的标题
<figcaption></figcaption> //定义figure元素的标题
<footer></footer> //定义一个页面或一个区域的底部
<dialog></dialog> //定义一个对话框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<header>
<div>logo</div>
<nav>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">4</a>
</nav>
</header>
<section>
<hgroup>
<h2>titile</h2>
<h3>文/greentea</h3>
<h4>简介</h4>
</hgroup>
<aside>
<a href="">section 1</a>
<a href="">section 2</a>
<a href="">section 3</a>
</aside>
<article>
文章....
</article>
</section>
<section>
<figure>
<figcaption>title</figcaption>
<div class="video">...</div>
</figure>
</section>
<section>
<dialog>
<dt>a:?</dt>
<dd>b:!</dd>
<dt>a:?</dt>
<dd>b:!</dd>
<dt>a:?</dt>
<dd>b:!</dd>
</dialog>
<dialog>
<dt>a:?</dt>
<dd>b:!</dd>
<dt>a:?</dt>
<dd>b:!</dd>
<dt>a:?</dt>
<dd>b:!</dd>
</dialog>
</section>
<footer>
</footer>
</body>
</html>
补充
- header/section/aside/article/footer 不要嵌套
- header/section/footer > aside/article/figure/hgroup/nav > div/figcaption
多媒体标签
<video src=""></video> //定义一个视频
<audio src=""></audio> //定义音频内容
<source> //定义媒体资源
<canvas></canvas> //定义图片
<embed src="" type=""> //定义外部的可交互的内容或插件,比如flash
<!-- 音频 -->
<audio src="../source/passion.mp3" autoplay="autoplay" loop="-1" controls="controls">这段文字显示就说明不支持此标签</audio>
<!-- autoplay自动播放,loop -1 无限循环 controls控制器 -->
<!-- 音频兼容的写法 -->
<audio autoplay="autoplay">
<source src="../source/passion.mp3" type="audio/mpeg">
</audio>
<!-- 视频 -->
<video src="../source/passion.mp4" controls="controls"></video>
<!-- 视频的另一种写法 -->
<video controls="controls" width="1024" height="768">
<source src="../source/passion.mp4" type="video/mp4">
</video>
embed
<embed src="../source/hb.swf" width="1024" height="768">
状态标签
<meter></meter> 状态(气压,气温)
<progress></progress> 状态(安装,加载)
<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>
<meter value="0.75">75%</meter>
<progress value="30" max="100"></progress>
<progress max="100"></progress> //注释value的代码可以有加载效果
列表标签
<datalist></datalist> //为input标记定义一个下拉列表,配合option
<details></details> //标记定义一个元素的详细内容,配合summary
<input type="text" placeholder="选择品牌" list="phonelist">
<datalist id="phonelist">
<option value="iphone">iphone</option>
<option value="samsung">samsung</option>
<option value="huawei">huawei</option>
<option value="meizu">meizu</option>
</datalist>
<details open="open> //默认打开
<summary>title</summary>
<p>内容</p>
</details>
注释标签
<!-- rp不要放在rt标签内 -->
<p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题</p>
其他标签
<mark></mark> //定义有标记的文本
<output></output> //定义一些输出类型,计算表单配合oninput事件
<mark>important</mark>
<form oninput="totalprice.value=parseInt(price.value)*parseInt(number.value)">
<input type="text" id="price" value="5000">
* <input type="text" id="number" value="1">
= <output name="totalprice" for="price number"></output>
</form>
属性
input新增类型
<!-- 在手机中会有体现 -->
<input type="email" name="email">
<input type="url" name="url">
<input type="tel" name="tel">
<input type="number" name="number"> <!-- 只能输入数字 -->
Date Pickers Input
Date //日,月,年
Month //月,年
Week //周,年
Time //时间(小时和分钟)
Datetime //选取时间,日,月,年(UTC时间)
Datetime-local //选取时间,日,月,年(本地时间)
date: <input type="date" name="date">
month: <input type="month" name="month">
week: <input type="week" name="week">
time: <input type="time" name="time">
datetime: <input type="datetime" name="datetime">
datetime-local: <input type="datetime-local" name="datetime-local">
input新增类型
range: <input type="range" name="range">
search: <input type="search" name="search">
color: <input type="color" name="color">
表单新增属性
- autocomplete //from或input自动完成功能
- autofocus //页面加载时,域自动地获得焦点
- multiple //规定在域中可选择多个值
- placeholder //提供一种提示
- required //规定必须在提交之前填写输入域(不能为空)
<form action="" autocomplete="on">
//placeholder使用于:text/search/url/telephone/email/password
<input type="text" name="urname" placeholder="输入用户名" required="required">
<input type="text" name="text" autofocus="autofocus">
<input type="email" name="email" autocomplete="off">
<input type="file" multiple="multiple">
<input type="submit">
</form>
链接标签属性
sizes: <link rel="stylesheet" href="icon.gif" type="image/gif" sizes="16*16">
<!-- base标签写在head标签内,可以让所有链接都新窗口打开 -->
target: <base href="http:localhost" target="_blank">
超链接: a:media="" <!-- 表示对设备进行优化 -->
a:hreflang="zh" <!-- 设置语言 -->
a:rel="external" <!-- 设置超链接的引用,这里超链接为外部链接 -->
script属性
defer:加载完脚本后并不执行,而是等整个页面加载完之后再执行 只能兼容IE
async:加载完脚本后立即执行,不用等整个页面都加载完,属于异步执行 兼容主流浏览器
<script defer="defer" src="./js/common1.js"></script>
<script async="async" src="./js/common2.js"></script>
ol标签属性
Start 起始值
Reversed 倒叙排列
<ol start="5" reversed="reversed">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
其他
离线应用
<html lang="en" manifest="cache.manifest">
HTML5本地存储
localStorage 和 sessionStorage
相同点
- setItem() 设置
- getItem() 获取
- removeItem() 删除
- 使用clear()删除所有内容
- 使用length获取存储内容个数
- 使用key()获取存储字段
image.png
localStorage.length //2
localStorage.key(0) //key1
localStorage.clear() //清空
sessionStorage同理
不同的存储时效
localStorage存储是持久化的,而sessionStorage存储会在网页回话结束后失效
不同的存储容量
localStorage 大约2-5Mb
sessionStorage 存储容量不一,部分浏览器不受限
Storage的注意点
- 防止存储容量溢出,使用try catch
- 只接受string
- sessionStorage失效机制
刷新页面并不会失效
相同URL不同标签页不能共享sessionStorage
IndexedDB数据库
1.indexedDB数据库是一种事物型数据库
2.是NoSQL数据库
3.使用JS对象存储数据
创建与删除
open()接收两个参数,第一个参数是数据的库的名,第二个参数是版本号
indexedDB.open('testDB',1) //返回IDBOpenDBRequest对象,而我们希望得到的DB对象在其result属性中
indexedDB.deleteDatabase('testDB')
image.png
这条指令请求的响应是一个 IDBDatabase对象，这就是IndexedDB对象
image.png
创建表
indexedDB.createObjectStore(osName,{autoIncrement : true}) //设置主键类型
HTML5离线存储
传统拖拽
<style>
.dialog{position: absolute;left: 100px;top: 50px;width: 200px;}
.title{background: #d7def0;width: 100%;height: 50px;line-height: 50px;cursor: move;}
.content{background: #f0f0f0;width: 100%;height: 200px;}
</style>
<body>
<div id="dialog" class="dialog">
<div class="title" id="title">title</div>
<div class="content"></div>
</div>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
$(".content").text('123')
var isMouseDown = false;
var lastPoint = {};
$("#dialog").on("mousedown",function(e){
console.log('1')
isMouseDown = true;
lastPoint.x = e.pageX;
lastPoint.y = e.pageY;
}).on("mousemove",function(e){
console.log(2)
if(isMouseDown){
var $dialog = $("#dialog");
var targetX = parseInt($dialog.css('left')) + e.pageX - lastPoint.x;
var targetY = parseInt($dialog.css('top')) + e.pageY - lastPoint.y;
//总长,让窗口不超过window
allX = targetX + parseInt($(".dialog").css('width'))
allY = targetY + parseInt($(".dialog").css('height'))
if($(window).width() >= allX && targetX >= 0 ){
$dialog.css('left', targetX + "px");
lastPoint.x = e.pageX;
}
if($(window).height() >= allY && targetY >= 0){
$dialog.css('top', targetY + "px");
lastPoint.y = e.pageY;
}
}
}).on("mouseup",function(){
isMouseDown = false;
lastPoint = {}
})
</script>
</body>
鼠标事件位置的四种方式
clientX,clientY:相对于window的(0,0)
pageX,pageY:相对于window的(0,0),但是不同的是如果有滚动条,会加上滚动条的距离
offestX,offestY:当前对象和鼠标之间的距离
screenX,screenY:相对于屏幕左上角
HTML5拖拽
- draggable 是否能被拖拽
- ondragstart 开始拖拽
- ondrop 元素放置在目标区域时触发(只触发一次),并且是成功拖拽进去后
- ondragover 元素正在拖动到放置目标时触发(拖动时一直在不停的触发)
- ondragenter 元素放入到有效的放置目标时触发
- ondragleave 元素移出放置目标是触发
- ondragend 拖拽结束时触发,不管是否拖拽成功,只要不拖拽,即可触发
- ondrag 拖动时触发(拖动时一直在不停的触发)
<head>
<meta charset="UTF-8">
<title>html5</title>
<style>
.container{width: 200px;height: 200px;background-color: yellow;}
.containerDrop{background-color: green;}
.target{width: 100px;height: 100px;background-color: pink;}
.hide{display: none;}
</style>
</head>
<body>
<div class="container" id="container" ondrop="drop(event)" ondragover="dragover(event)"
ondragenter="dragenter(event)" ondragleave="dragleave(event)" ondragend="dragendContainer(event)"></div>
<div class="target" id="target" draggable="true" ondragstart="dragstart(event)" ondrag="drag(event)" ondragend="ondragendTarget(event)"></div>
<script src="https://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script>
<script>
var dragstart = function(e){
e.dataTransfer.setData('text',e.target.id);
//实现拖动时不再克隆,而是出现一个图片,并且将jquery对象转化为dom对象
e.dataTransfer.setDragImage($("#image").clone().removeClass('hide')[0],0,0);
}
var drop = function(e){
e.preventDefault();
var data = e.dataTransfer.getData('text');
e.target.appendChild(document.getElementById(data));
console.log('drop')
}
var dragover = function(e){
e.preventDefault()
console.log('dragover')
}
var dragenter = function(e){
e.preventDefault();
$("#container").addClass('containerDrop');
}
var dragleave = function(e){
e.preventDefault();
$("#container").removeClass('containerDrop')
}
var dragendContainer = function(e){
// console.log('dragendContainer')
}
var drag = function(e){
// console.log('drag');
}
var ondragendTarget = function(e){
// consoel.log('ondragendTarget')
}
</script>
</body>
拖拽案例
我的github:https://github.com/Greentea1120/html5-demo
拖拽插件
http://pep.briangonzalez.org/
https://github.com/skidding/dragdealer
网友评论