知识点Web 前端开发 CSS学习指南

HTML5+CSS3整体回顾

2016-10-19  本文已影响4671人  程序员poetry

转载请声明 原文链接

这篇文章主要总结H5的一些新增的功能以及一些基础归纳，这里只是一个提纲，并不是很详细，后面会一直完善补充新的内容，本文是一些笔记记录，放在这里供自己参考也供他人学习！

HTML5概览

第一课 HTML5结构

一些总结--from-dunitian
常用的一些新的结构标签
结构标签 多媒体交互标签 特殊样式标签 兼容性不是很好的标签
删除的HTML标签
传统的布局 HTML5标签布局 实例-from-dunitian 草图--from-dunitian

第二课 HTML5智能表单

HTML4.01 form表单复习
HTML5智能表单
Input 类型 - Date Pickers（日期选择器）
HTML5新增表单属性
表单验证

第三课 css3选择器

css3属性快速一览 css3属性快速一览 CSS3结构选择器 Css3属性选择器

第四课 CSS3新增文本属性

第五课 CSS3盒模型

标准盒子模型 IE盒子模型 flex布局语法篇小结

第六课 css3新增背景属性

第七课 css3新增颜色属性

名称 颜色 颜色 取值
r red 红色 0-255
g green 绿色 0-255
b blue 蓝色 0-255
a alpha 透明 0-1
HSL色轮

第八课 CSS3边框系列

圆角-阴影
border-top-left-radius: 2em 0.5em;
border-top-right-radius: 1em 3em;
border-bottom-right-radius: 4em 0.5em;
border-bottom-left-radius: 1em 3em;
边框系列-图片
属性 版本 简介
border-image CSS3 设置或检索对象的边框使用图像来填充
border-image-source CSS3 设置或检索对象的边框是否用图像定义样式或图像来源路径
border-image-slice CSS3 设置或检索对象的边框背景图的分割方式
border-image-width CSS3 设置或检索对象的边框厚度
border-image-outset CSS3 设置或检索对象的边框背景图的扩展
border-image-repeat CSS3 设置或检索对象的边框图像的平铺方式
Paste_Image.png

第九课 CSS3运动体系

过渡
obj.addEventListener('webkitTransitionEnd',function(){})

obj.addEventListener('transitionend',function(){})
动画
属性 描述
@keyframes 规定动画。
animation 所有动画属性的简写属性，除了 animation-play-state 属性。
animation-name 规定 @keyframes 动画的名称。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。
animation-timing-function 规定动画的速度曲线。
animation-delay 规定动画何时开始。
animation-iteration-count 规定动画被播放的次数。
animation-direction 规定动画是否在下一周期逆向地播放。
animation-play-state 规定动画是否正在运行或暂停。
animation-fill-mode 规定对象动画时间之外的状态。
值 描述
linear 动画从头到尾的速度是相同的。
ease 默认。动画以低速开始，然后加快，在结束前变慢。
ease-in 动画以低速开始。
ease-out 动画以低速结束。
ease-in-out 动画以低速开始和结束。
cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。

第十课 transform 2D转换

第十一课 transform 3D转换

第十二课 视频音频

Video的使用
< video src="文件地址" controls="controls">
    您的浏览器暂不支持video标签。播放视频
</ video >

< video  controls="controls"  width="300">
    <source src="move.ogg" type="video/ogg" >
    <source src="move.mp4" type="video/mp4" >
    您的浏览器暂不支持video标签。播放视频
</ video >
属性 值 描述
Autoplay Autoplay 视频就绪自动播放
controls controls 向用户显示播放控件
Width Pixels(像素) 设置播放器宽度
Height Pixels(像素) 设置播放器高度
Loop Loop 播放完是否继续播放该视频，循环播放
Preload load{auto,meta,none} 规定是否预加载视频。
Src url 视频url地址
Poster Imgurl 加载等待的画面图片
Autobuffer Autobuffer 设置为浏览器缓冲方式，不设置autoply才有效
方法 属性 事件
play() currentSrc play
pause() currentTime pause
load() videoWidth progress
canPlayType() videoHeight error

第十三课 canvas

<canvas width="" height="" id="">
    您的浏览器不支持canvas，请更换浏览器！
</canvas>

第十四课 SVG绘图

<?xml version="1.1" encoding="utf-8"?>
<!DOCTYPE svg 
PUBLIC "-//W3C//DTD SVG 1.1//EN"  "http://www.w3.org/
Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg"></svg>

第十五课 地理信息与本地存储

地理位置
<button id="btn">请求位置信息</button>
<div id="box"></div>

var btn = document.getElementById("btn");
var box = document.getElementById("box");
        
btn.onclick = function(){
            navigator.geolocation.getCurrentPosition(function(position){
                box.innerHTML +="经度："+position.coords.longitude + "<br>";
                box.innerHTML +="纬度："+position.coords.latitude + "<br>";
                box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
                box.innerHTML +="海拔的准确度："+position.coords.altitudeAccuracy + "<br>";
                box.innerHTML +="地面速度"+position.coords.speed + "<br>";
                box.innerHTML +="行进方向"+position.coords.heading + "<br>";
                box.innerHTML +="请求时间"+new Date(position.timestamp) + "<br>";
            },function(err){
                alert(err.code);
            },{
                enableHighAccuracy:false,//精确请求
                timeout:5000,//设置超时
                maximumAge:1000//缓存时间
            });
        }

在线演示

var btn = document.getElementById("btn");
var box = document.getElementById("box");
        
btn.onclick = function(){
            navigator.geolocation.watchPosition(function(position){
                box.innerHTML +="经度："+position.coords.longitude + "<br>";
                box.innerHTML +="纬度："+position.coords.latitude + "<br>";
                box.innerHTML +="海拔："+position.coords.accuracy + "<br>";
                box.innerHTML +="海拔的准确度："+position.coords.altitudeAccuracy + "<br>";
                box.innerHTML +="地面速度"+position.coords.speed + "<br>";
                box.innerHTML +="行进方向"+position.coords.heading + "<br>";
                box.innerHTML +="请求时间"+new Date(position.timestamp) + "<br>";
            },function(err){
                alert(err.code);
            },{
                enableHighAccuracy:false,//精确请求
                timeout:5000,//设置超时
                maximumAge:1000//缓存时间
            });
        }

在线演示

#container {
    width:600px; 
    height: 300px;
    margin:40px auto;
    border:1px solid red;
} 

<div id="container"></div>  
<script type="text/javascript" 
src="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36">
</script>

var map = new AMap.Map('container');

在线演示

#container {width:500px; height:500px; margin:100px auto;}  
.menu{
    width:100px;
    box-shadow: 0 0 5px #000;
    margin:auto;
    background:#fff;
}
.menu ul li{
    list-style:none;
    line-height:30px;
    text-align:center;
    cursor:pointer;
}
#box{
    width:400px;
    height:40px;
    position:absolute;
    top:150px;
    left:50%;
    margin-left:-200px;
    background:#fff;
    box-shadow:0 0 10px #000;
}
input{
    height:38px;
    width:300px;
    border:none;
    outline:none;
}
#btn{
    width:80px;
}

<div id="container"></div> 
<div id="box">
    <input type="text" id="city" placeholder="请输入城市...">
    <input type="button" value="搜索" id="btn">
</div>
<script type="text/javascript" 
src="http://webapi.amap.com/maps?v=1.3&key=278b7b8b4728ba302b7e566fc2a97b36">
</script>

var btn = document.getElementById("btn");
var city = document.getElementById("city");
var map = new AMap.Map('container');
var toolBar,mouseTool,contextMenu;
//在地图中添加操作toolBar插件、mouseTool插件
map.plugin(["AMap.ToolBar","AMap.MouseTool"],function(){
    toolBar = new AMap.ToolBar();
    map.addControl(toolBar);
    mouseTool = new AMap.MouseTool(map);
});
var menuContext = document.createElement("div");
menuContext.innerHTML = "<div class=menu><ul><li onclick='zoomMenu(0)'>缩小</li>
<li onclick='zoomMenu(1)'>放大</li>
<li onclick='distanceMeasureMenu()'>距离量测</li>
<li onclick = 'addMarkerMenu()'>添加标记</li></ul></div>";
//创建一个自定义的右键菜单
contextMenu = new AMap.ContextMenu({isCustom:true,content:menuContext});
//给地图绑鼠标右键功能弹出右键菜单
AMap.event.addListener(map,"rightclick",function(e){
    contextMenu.open(map,e.lnglat);//e.lnglat鼠标点击的经纬度
    contextMenuPosition = e.lnglat;
})
//右键菜单缩放地图
function zoomMenu(n){
    if(n === 0){map.zoomOut();}
    if(n === 1){map.zoomIn();}
    contextMenu.close();
}
contextMenu.close();
//测量距离功能
function distanceMeasureMenu(){
    mouseTool.rule();
    contextMenu.close();
}
//添加标注功能
function addMarkerMenu(){
    mouseTool.close();
    var marker = new AMap.Marker({
        map: map,
        position: contextMenuPosition, //基点位置
        offset: {x:-5,y:-10} //相对于基点位置
    });
    contextMenu.close();
}
//搜索城市
btn.onclick = function(){
    var val = city.value;
    map.setCity(val);
}

在线演示

本地存储

第十六课 HTML5新增JS方法

H5在JavaScript中新增的方法一览 
/**
* 动态加载script文件 （推荐方法） 只需请求一次 可加载多个JavaScript文件，减少请求次数以及页面的加载阻塞
*/
function loadScript(url,callback){
    var script = document.createElement("script");
    script.type = "text/javascript";
    if(script.readyState){//IE
        script.onreadystatechange = function(){
            if(script.readyState == "loaded" || script.readyState == "complete"){
                onreadystatechange = null;
                callback();
            }
        }
        
    }else {
        script.onload = function(){
            callback();
        }
    }
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}
loadScript("js/defer.js",function(){
    console.log("加载成功");
      //  加载成功回调
});
loadScript("js/async.js",function(){
    console.log("加载成功");
   //  加载成功回调
});

第十七课 HTML5拖拽事件

<div id="drap" draggable="true"></div>
<div id="box"></div>

#drap {
    width: 100px;
    height: 100px;
    background: red;
}
#box {
    width: 500px;
    height: 500px;
    border: 2px solid blue;
    margin: 50px auto;
}

//被拖拽元素事件
drap.ondragstart = function(ev){ // 拖拽前
    var ev = ev || window.event;

    //火狐浏览器下需设置dataTransfer对象才可以拖拽除图片外的其他标签
    ev.dataTransfer.setData("key","poetries");

    //effectAllowed : 设置光标样式(none, copy, copyLink, copyMove, link, linkMove,move, all 和uninitialized)
    ev.dataTransfer.effectAllowed = "copy";

    //设置被拖拽的小元素 setDragImage ：三个参数（指定的元素，坐标X，坐标Y）
    ev.dataTransfer.setDragImage(pic,25,25);

    this.style.background = "green";
}

drap.ondrag = function(){ // 拖拽过程中
    this.innerText = "被拖拽中...";
}

drap.ondragend = function(){ // 拖拽结束
    this.style.background = "red";
    this.innerHTML = "";
}

//目标元素事件
box.ondragenter = function(){ //进入目标元素触发
    this.innerHTML = "可将文件拖放到这里!";
}
box.ondragover = function(ev){ //进入目标、离开目标之间，连续触发
    var ev = ev || window.event;
    ev.preventDefault(); 
    this.style.background = "pink";
}
box.ondragleave = function(){ //离开目标元素触发
    this.innerHTML = "";
    this.style.background = "none";
}
box.ondrop = function(ev){//在目标元素上释放鼠标触发
    //alert("拖放结束")
    this.innerHTML = ev.dataTransfer.getData("key");
}

在线演示

<h1>请拖拽图片到红框中</h1>
<div id="box"><span>可以将文件拖放到这里！！</span></div>
<div id="dustbin">垃圾回收站</div>

#box{
    position:relative;
    width:500px;
    height:500px;
    border:2px solid red;
    margin:100px auto 0px;
    
}
#box span{
    position:absolute;
    left:0;
    top:0;
    right:0;
    bottom:0;
    height:50px;
    width:192px;
    margin:auto;
    display:none;
}
img{
    width:100px;height:100px;
}
#dustbin{
    width:200px;
    height:100px;
    background:#000;
    color:#fff;
    font-size:40px;
    text-align:center;
    line-height:100px;
    margin:auto;
}

var box = document.getElementById("box");
var dusTbin = document.getElementById("dustbin");
var span = box.getElementsByTagName("span")[0];
//目标元素事件
var img = '';
box.ondragenter = function(){//进入目标元素触发
    span.style.display = "block";
}
box.ondragover = function(ev){//在目标元素上连续触发
    var ev = ev||window.event;
    ev.preventDefault();//阻止默认事件
    span.style.display = "block";
}
box.ondragleave = function(){//离开目标元素
    span.style.display = "none";
}
box.ondrop = function(ev){//在目标元素上面释放鼠标触发
    //alert("拖拽结束！！");
    var ev = ev||window.event;
    ev.preventDefault();//阻止默认事件
    span.style.display = "none";
    var file = ev.dataTransfer.files;
    //alert(file[0].type);
    for (var i=0; i<file.length ;i++ )
    {
        if (file[i].type.indexOf("image")!=-1)
        {
            var read = new FileReader();//新建一个读取文件对象
            read.readAsDataURL(file[i]);//读取文件
            read.onload = function(){//读取文件成功之后调用什么函数
                var img = document.createElement("img");
                //alert(this.result);
                img.src = this.result;
                box.appendChild(img);
                //获取img节点 实现删除功能
                var oImg = document.getElementsByTagName("img");
                if (oImg)
                {
                    for (var j=0;j<oImg.length ;j++ )
                    {
                        oImg[j].ondragstart = function(ev){
                            ev.dataTransfer.setData("data",ev.target.innerHTML);
                            img = ev.target;
                        }
                        oImg[j].ondragend = function(ev){
                            ev.dataTransfer.clearData("data");//清楚数据
                            img = null;
                        }
                    }

                }
                //实现删除功能(移除img节点)
                dusTbin.ondragover = function(ev){
                    ev.preventDefault();
                }
                dusTbin.ondrop = function(){
                    if (img)
                    {
                        img.parentNode.removeChild(img);
                    }
                }
            }
        }else{
            alert("请上传图片！");
        }
        
    }
    
}

在线演示

<div class="wrap" id="wrap">
  <ul id="box">
    <li style="background:#f3f" draggable="true">1</li>
    <li style="background:#ff6" draggable="true">2</li>
    <li style="background:#c60" draggable="true">3</li>
    <li style="background:#903" draggable="true">4</li>
    <li style="background:#0f6" draggable="true">5</li>
    <li style="background:#636" draggable="true">6</li>
    <li style="background:#36f" draggable="true">7</li>
    <li style="background:#033" draggable="true">8</li>
  </ul>
</div>

.wrap{
  width:500px;
  height:500px;
  margin:50px auto;
}
ul li{
  list-style:none;
  width:500px;
  height:50px;
  color:#fff;
  text-align:center;
  line-height:50px;
  font-size:40px;
  font-weight:bold;
}

var oUl = document.getElementById("box");
var oLi = oUl.getElementsByTagName("li");
var curr = 0;
function sort(){
  for (var i = 0;i < oLi.length;i++) {
    oLi[i].index = i;
    oLi[i].ondragstart = function(ev){
      var ev = ev || window.event;
      ev.dataTransfer.setData("data",this.innerHTML);
      //this.innerHTML = "被拖拽中...";
      curr = this.index;
    }

    oLi[i].ondragenter = function(){
      for(var i = 0;i < oLi.length;i++){
        oLi[i].style.border = "none";
      }
      if(curr != this.index){
        this.style.border = "2px solid #000";
      }
    }
    oLi[i].ondragover = function(e){
      var e = e || window.event;
      e.preventDefault();
    }
    oLi[i].ondrop = function(ev){ //鼠标释放的时候
      //oUl.insertBefore(oLi[curr],this);//insertBefore(新节点，目标节点)
      inserAfter(oLi[curr],this);
      this.style.border = "none";
      //oLi[curr].innerHTML = ev.DataTransfer.getData("data");
      sort();
    }
  }
}
sort();

function inserAfter(newItem,targerItem){
  var parentItem = targerItem.parentNode;
  if(parentItem.lastChild == targerItem){
    parentItem.appendChild(newItem);
  }else {
    parentItem.insertBefore(newItem,targerItem.nextSibling);
  }
}

在线演示

第十八课 跨文档操作

附录一　css3响应式布局
<link rel="stylesheet" href="css/index.css" media="print" />

 @import url("css/demo.css") screen;
 @media screen{    }

<link rel=”stylesheet” media=”all and
 (orientation:portrait)” href=”portrait.css”>

<link rel=”stylesheet” media=”all
 and (orientation:landscape)”href=”landscape.css”>

@media screen and (min-width:360px) and (max-width:500px) {}

<link rel="stylesheet" type="text/css" 
href="indexA.css"  media="screen and (min-width: 800px)">

<link rel="stylesheet" type="text/css" 
href="indexB.css" media="screen and (min-width: 600px) and (max-width: 800px)">

<link rel="stylesheet" type="text/css" 
href="indexC.css"    media="screen and (max-width: 600px)">
附录二　HTML5速查表
上一篇下一篇

猜你喜欢

热点阅读