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>
    ![](img.png)
    <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

Html5

Html5

DTD

新增的标签

结构标签

多媒体标签

状态标签

列表标签

注释标签

其他标签

属性

input新增类型

Date Pickers Input

input新增类型

表单新增属性

链接标签属性

script属性

ol标签属性

其他

HTML5本地存储

localStorage 和 sessionStorage

相同点

不同的存储时效

不同的存储容量

Storage的注意点

IndexedDB数据库

创建与删除

创建表

HTML5离线存储

传统拖拽

鼠标事件位置的四种方式

HTML5拖拽

拖拽案例

拖拽插件