HTML5知识点汇总

HTML5与HTML4的区别

web浏览器之间的兼容性很低

文档结构不够明确

web应用程序功能受限制

语法的改变

DOCTYPE声明

指定字符编码

可以省略标记的元素

具有boolean值得属性

省略引号

新增的元素和废除的元素

新增的结构元素

section、article、aside、header、hgroup、footer、nav、figure

新增的其他元素

video、audio、embed、mark、progress、meter、time、ruby、rt、rp、wbrcanvas、command、details、datalist、datagrid、keygen、output、source、menu

新增的input元素的类型

email、url、number、range、Date Pickers

废除的元素

frameset框架

basefont、big、center、font、s、tt、u

HTML5全局属性

contenteditable 元素可编辑

designmode 页面范围可编辑

hidden 隐藏元素

spellcheck 拼写语法检查

tabindex tab键切换元素

HTML5新增的主体结构元素（语义化）

article元素

表示独立的，可以被外部引用的内容，也可以嵌套使用

    
    


    

        

            
HTML5
            
学习HTML5
        
        

            

                作者
            
            
评论
            

                时间
            
        
        

            
底部
        
    
 
    

        
    

section元素

表示分块

标题与内容

    
    


    

        
标题
        
内容
    
 
    

        
标题
        
内容
        

            
标题
            
内容
        
        

            
标题
            
内容
        
    
 
    

        
section标题
        

            
标题
            
内容
        
    

不要将section元素作为设置样式的页面容器

如果article、aside、nav更符合，就不要使用section

没有标题，不使用section

nav元素

导航栏

    
    


    

        

            
主页
            
主页
            
主页
            
主页
        
    
    

        

            
HTML5与CSS3
            

                

                    
HTML5 
                    
CSS3 
                
            
        
        

            
HTML5
            
...
        
        

            
CSS3
            
...
        
        

            删除
            修改
        
    
    

        
版权声明：
    

aside元素

附属信息

    
    


    

        
js入门
    
    

        
语法
        
正文
        

            
名词解释
            
语法:...
        
    
    

        

            
评论
            

                
回复
                
回复
                
回复
            
        
    

time元素与微格式

    
    


    2016-10-16
    2016-10-16
    2016-10-16
    2016-10-16

pubdate属性

    
    


    

        

            
XXX
            

                日期
                2016-10-16
            
            

                其他时间
                2016-05-16
            
        
    

 

HTML5的非主体结构元素

header元素

    
    


    

        
web前端
        web前端技术
        

            
HTML5
            
HTML5
            
HTML5
        
    

footer元素

底部结构 

    
    


    

        

            

                底部标签
            
            

                底部标签
            
            

                底部标签
            
        
    
    

        
文章底部
    

hgroup元素

标题分组

    
    


    

        

            

                
标题
                
子标题
            
            
2016-01-01
        
        
内容主体
        

            这是底部
        
    

address元素

联系信息

    
    


    

        why
        why
    
    

        

            
联系人
            2016-05-07
        
    

网页编排规则

    
    


    

        
网页标题
        

            

                
链接
                
链接
                
链接
            
        
    
    

        

            
文章标题
            
文章子标题
        
        
正文
        

            

                

                    
评论
                    
正文
                
            
        
    
    
版权信息

HTML表单新增元素与属性

form属性

formaction属性

指定提交按钮提交到某个action

formmethod属性

formenctype属性

formtarget属性

autofocus属性

required属性

labels属性

表单验证提示

control属性

通过label的control属性获取其嵌套的input元素

    
    
    



    
        邮编：
        
        请输入六位数字
    
    

placeholder属性

list属性

可编辑下拉框

AutoComplete属性

提交表单后，再次填写时会自动提示

indeterminate属性

    
    


选项

Image提交按钮的width和height属性

pattern属性

正则验证文本框内容

selectiondirection属性

获取用户对文本框选中的方向

HTML5改进的input元素

Input类型

    
    



    url类型
    

    
    

    email类型
    

    
    

    date类型
    

    
    

    time类型
    

    
    

    datetime类型
    

    
    

    datetime-local类型
    

    
    

    month类型
    

    
    

    week类型
    

    
    

    number类型
    

    
    

    
    

    range类型
    

    
    
50
    

    search类型
    

    
    

    tel类型
    

    
    

    color类型
    

    
    #000000
    

表单验证

figure、figcaption、details、summary、mark元素

    
    


    

        
        
        
        
美女
    
    
    

        
概述
        
详细信息
    
 
    
mark元素的使用

ol、dl、cite、small元素

    
    


    
ol列表
    

        
列表1
        
列表2
        
列表3
        
列表4
        
列表5
    
 
    
dl列表
    

        
hello
        
你好
        
world
        
世界
    
 
    
cite元素
    
最好的书籍
 
    
small元素
    
最好的书籍

progress、meter元素

    
    




    
progress元素的使用
    
完成的百分比
        0%
    
    

 
meter元素



Range对象

一个Range对象代表页面上的一段连续区域。通过Range对象，可以获取或修改网页上的任何区域。



    
    



    
Selection对象与Range对象的使用
    
    

Range对象的方法

    
    




    这段文字是用来删除的

删除文字

    
    



    

        

            
内容
            
内容
            
内容
        
        

            
内容
            
内容
            
内容
        
    
    删除表格第一行

deleteContents，删除Range区域的内容

 

    
    



    

        内容
    
    删除内容
    删除元素

cloneRange，拷贝Range区域对象

 

    
    



    
四脚发的设计师地方都是
    复制内容

cloneContent，拷贝Rnage区域的内容

 

    
    




    一个div
    


克隆

extractContents，拷贝Range区域的内容，并移除

    
    




    内容


移动内容

insertNode，在Range区域中动态插入元素节点

 

    
    




    内容

移动按钮

compareBoundaryPoints，比较range区域的位置关系

 

    
    



p元素的内容

HTML5音频播放

Audio（音频）

HTML5提供了播放音频文件的标准

controls（控制器）

controls属性提供添加播放、暂停和音量控件

video（视频）

编码与解码工具

FFmpeg

HTML5拖放

ondragstart

ondragenter 拖拽进入监听

ondragover

ondrop

拖拽本地资源

HTML5画布标签

创建canvas

canvas绘制图形

canvas绘制图片

HTML5使用路径

    
    
    


    


moveTo与lineTo




    
    
    


    

绘制贝塞尔曲线

径向渐变

    
    
    


    


绘制渐变图形




    
    
    


    

绘制变形图形

绘制图形阴影

图形组合

SVG

绘制SVG

引入外部SVG文件

通过iframe引入

Web存储

localStorage 永久保存

 

sessionStorage session生命周期

应用缓存与Web Workers

web worker是运行在后台的js脚本

postMessage()

terminate()

事件onmessage

 

    
    
    


    

    
    


 
/**
 * Created by Why on 2016/10/23.
 */
 
var mydiv;
var worker;
window.onload = function () {
    mydiv = document.getElementById("mydiv");
    mydiv.innerHTML = new Date();
    document.getElementById("start").onclick = function () {
        if(!worker || null == worker){
            worker = new Worker("js/count.js");
            worker.onmessage = function (e) {
                console.log(e);
                mydiv.innerHTML = e.data;
            }
        }
    }
 
    document.getElementById("stop").onclick = function () {
        if(worker){
            worker.terminate();
            worker = null;
        }
    }
}
 
/**
 * Created by Why on 2016/10/23.
 */
 
function returnTime(){
    postMessage(new Date());
    setTimeout(returnTime,1000);
}
 
returnTime();

应用缓存

离线浏览

加载更快

减少服务器负载

 

实现应用程序缓存

html元素增加属性 manifest

 

HTML5服务器推送事件

传统服务器推送数据技术 WebSocket

 

HTTP协议，简易轮询

 

头信息

text/event-stream

 

var es = new EventSource(url); //事件源对象

onopen //开启连接事件

onerror //发生错误事件

onmessage //消息推送事件

响应式布局

*{background-color: aquamarine;}
 
@media screen and (min-width: 640px) {
    *{
        background-color: burlywood;
    }
}

* {
    margin: 0;
    padding: 0;
}
 
.header {
    height: 50px;
    background-color: antiquewhite;
}
 
.left {
    background-color: aquamarine;
}
 
.right {
    background-color: coral;
}
 
.main {
    background-color: chocolate;
}
 
.footer {
    height: 50px;
    background-color: darkorange;
}
 
.header, .container, .footer {
    margin: 10px auto;
}
 
@media screen and (min-width: 960px) {
    .header,
    .container,
    .footer {
        width: 960px;
    }
 
    .left, .main, .right {
        float: left;
    }
 
    .left, .right {
        width: 150px;
    }
 
    .main {
        width: 620px;
        margin-left: 20px;
        margin-right: 20px;
    }
 
    .container,.left, .main, .right {
        height: 500px;
    }
}
 
@media screen and (min-width: 600px) and (max-width: 960px) {
    .header,
    .container,
    .footer {
        width: 600px;
    }
 
    .left, .main {
        float: left;
    }
 
    .right{
        display: none;
    }
 
    .left {
        width: 150px;
    }
 
    .main {
        width: 430px;
        margin-left: 20px;
    }
 
    .container,.left, .main, .right {
        height: 500px;
    }
}
 
@media screen and (max-width: 600px){
    .header,
    .container,
    .footer {
        width: 300px;
    }
 
    .right{
        display: none;
    }
 
    .left {
        height: 100px;
    }
 
    .main{
        height: 400px;
        margin-top: 10px;
    }
}

HTML5构建应用布局和页面

HTML5在移动开发中的准则

尽量使用单页面开发（SPA）

 

慎重选择前端UI框架

 

动画、特效使用准则（60fps）

 

长度单位使用rem

 

浏览器消耗最小的CSS属性

 

-transform:translate

 

-transform:scale

 

-transform:rotate

 

-opacity

 

csstriggers.com

 

页面基本布局构成

流式布局-适合内容型应用

 

绝对定位布局-适合交互类应用

 

Flexbox布局-适合局部使用

 

CSS Grid布局

 

IE6支持HTML5、CSS3

引入谷歌html5.js

 

添加behavior:url(“ie-css3.htc”);属性