HTML5系统学习

其他 2020-02-09 11:11:31 阅读次数: 0

---------------------加油加油武汉加油中国加油！------------------------------------------------------------------------------------2020-02-04----------------------------------------

一.属性篇

1.placeholder
<input type = "text" placeholder = "手机/邮箱/用户名">
2.input新增的type
<!--Calender类-->
<input type = "date"><!--chrome支持，Safari，IE不支持 -->
<input type = "time">
<input type = "datetime-local">
<input type = "week">
<input type = "number"><!--只允许填数字，以上以下兼容性都不好-->
<input type = "email">
<input type = "color">
<input type = "range" min="1" max = "100" name = "range"><!--进度条-->
<input type = "search"><!--会自动提示以前填过的信息-->
<input type = "url">
3.contenteditable
//使字母wangjunkai可在屏幕中直接修改，可以继承给子元素，不要嵌套，没有兼容性问题
<div contenteditable = "true">wangjunkai</div>
4.Drag被拖拽元素
<div class = "k" draggable = "true"></div><!--chrome,safari可用-->
<!--<a>标签,<img src = " ">标签,默认携带拖拽功能。-->

<!--拖拽的生命周期
  1.拖拽开始，拖拽进行中，拖拽结束。
  2.被拖拽的物体，目标区域
-->
<!--按下物体的瞬间是不会触发事件的-->
<script>
//拖拽开始
var oDragDiv = document.getElementByClassName("a")[0];
oDragDiv.ondragstart = function(e){
      console.log(e);   
}
//拖拽中
oDragDiv.ongrag = function(e){
      console.log(e);
}
//拖拽结束
oDragDiv.ondragend = function(e){
      console.log(e);
}
</script>

//一个拖拽事件，拖拽移动正方形

<style>
    .a{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: aqua;
    }
</style>
<body>
   <div class="a" draggable="true"></div>
</body>
<script>
    var oDragDiv = document.getElementsByClassName("a")[0];
    var beginX = 0;
    var beginY = 0;
    oDragDiv.ondragstart = function(e){
        beginX = e.clientX;
        beginY = e.clientY;
    }
    oDragDiv.ondragend = function(e){
        var x = e.clientX-beginX;
        var y = e.clientY-beginY;
        oDragDiv.style.left = oDragDiv.offsetLeft+x+"px";
        oDragDiv.style.right = oDragDiv.offsetRight+y+"px";
    }
</script>

//拖拽到目标，目标元素的事件

<style>
    .a{
        width: 200px;
        height: 200px;
        position: absolute;
        background-color: aqua;
    }
    .target{
        position: absolute;
        width: 300px;
        height: 300px;
        border: 1px solid;
        left: 600px;
    }
</style>
<body>
   <div class="a" draggable="true"></div>
   <div class="target"></div>
</body>
// 所有的标签元素当周期事件结束时，默认事件回到原处。
    // 事件是由行为触发的，但是一个行为不止触发一个事件。
   <script>
    var oDragDiv = document.getElementsByClassName("a")[0];
    oDragDiv.ondragstart = function(e){
      
    }
    oDragDiv.ondragend = function(e){
    }
    var oDragTarget = document.getElementsByClassName("target")[0];
    oDragTarget.ondragenter = function(e){//不是元素图形进入就触发，是拖拽的鼠标进入才触发。
           
    }
    oDragTarget.ondragover = function(e){//在目标区域移动触发
        e.preventDefault();
    }
    oDragTarget.ondragleave = function(e){//离开目标区域触发

    }
    oDragTarget.ondrop = function(e){//在ondragover中触发default，才能触发drop事件。
    }
</script>

//拖拽事件
在这里插入图片描述

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .a{
        width: 150px;
        height: auto;
        position: absolute;
        border: 1px solid;
        padding-bottom: 10px;
    }
    .target{
        position: absolute;
        width: 150px;
        height: autopx;
        border: 1px solid;
        left: 300px;
        padding-bottom: 10px;
    }
    li{
        position: relative;
        width: 100px;
        height: 30px;
        background-color: #abcdef;
        margin: 10px auto 0px auto;
        list-style: none;
    }
</style>
<body>
   <div class="a" draggable="true">
       <ul>
           <li></li>
           <li></li>
           <li></li>
       </ul>
   </div>
   <div class="target"></div>
</body>
<script>
    var dragDom;
    var liList = document.getElementsByTagName("li");
    for(var i = 0;i<liList.length;i++){
        liList[i].setAttribute("draggable",true);
        liList[i].ondragstart = function(e){
            dragDom = e.target;
        }
    }
    var box2 = document.getElementsByClassName("target")[0];
    box2.ondragover = function(e){
        e.preventDefault();
    }
    box2.ondrop = function(e){
        box2.appendChild(dragDom);
        dragDom = null;
    }
</script>
5.DataTransfer
oDragDiv.ondragstart = function(e){ 
//拖动后改变鼠标样式，不常用，兼容性极差。
   e.dataTransfer.effectAllowed = "link|copy|move";
}
//还有一个dropeffect 在ondrop函数中；

二，标签篇

1.语义化标签 
<header></header>
<footer></footer>
<nav></nav>
<article></article>
<section></section>//段落
<name></name>
<aside></aside>//侧边栏
2.canvas画线

在这里插入图片描述

   <style>
        canvas{
            width: 500px;
            height: 300px;
            border: 1px solid;
        }
    </style>
</head>
<body>
    <canvas id="can" width="700px" height="500px"></canvas><!--设置画布大小-->
</body>
<script>
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    // 起点
    ctx.moveTo(100,100);
    // 线的粗细
    ctx.lineWidth = 10;
    //画
    ctx.lineTo(200,100);
    ctx.lineTo(200,200);
    ctx.lineTo(128,298);
    // 闭合(针对一个笔画来说)
    ctx.closePath();
    // 填充
    ctx.fill();
    ctx.stroke();
    // 重新开启路径
    ctx.beginPath();
    ctx.lineWidth=5;
    ctx.moveTo(300,100);
    ctx.lineTo(300,200);
    ctx.stroke();
</script>

//用canvas画矩形

<script>
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    //（起始位x，起始位y，长x，宽y）;
    // 分步画
    ctx.rect(100,100,200,100);
    ctx.stroke();
    //直接画一个矩形
     ctx.strokeRect(100,100,200,100);
     //直接画出来一个填充的矩形
    ctx.fillRect(100,100,200,100);
</script>

//画一个会移动的矩形

<body>
    <canvas id="can" width="300px" height="300px"></canvas><!--设置画布大小-->
</body>
<script>
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    var height = 100;
    //直接画一个矩形   
     var timer = setInterval(function(){
         //相当于清屏
         ctx.clearRect(0,0,500,300);
        ctx.strokeRect(100,height,50,50);
        height += 5;
     },1000/60);
</script>

//画圆

<body>
    <canvas id="can" width="300px" height="300px"></canvas><!--设置画布大小-->
</body>
<!-- 圆心（x,y），半径(r)，弧度(起始弧度，结束弧度)，方向（顺时针0|逆时针1） -->
<script>
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    ctx.arc(100,100,50,0,Math.PI / 2,1);
    ctx.stroke();
</script>

//画圆角矩形

<body>
    <canvas id="can" width="300px" height="300px"></canvas><!--设置画布大小-->
</body>
<!-- B(x,y),c(x,y),圆角大小 -->
<script>
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    ctx.moveTo(100,110);
    ctx.arcTo(100,200,200,200,10);
    ctx.arcTo(200,200,200,100,10);
    ctx.arcTo(200,100,100,100,10);
    ctx.arcTo(100,100,100,200,10);
    ctx.fill();
    ctx.stroke();
</script>

//贝塞尔曲线

 // 二次贝塞尔曲线
   ctx.quadraticCurveTo(200,200,300,100);
 // 三次贝塞尔曲线
   ctx.bezierCurveTo(200,200,300,100,400,200);

//canvas坐标平移旋转与缩放

扫描二维码关注公众号，回复： 9031649 查看本文章 
<!--旋转-->
var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    // 旋转的时候是根据坐标系原点旋转的，以下是改变坐标系原点的位置
    ctx.translate(100,100)
    // 旋转
    ctx.rotate(Math.PI / 6);
    ctx.moveTo(0,0);
    ctx.lineTo(100,0);
    ctx.stroke();
    
<!--缩放-->
   ctx.beginPath();
   ctx.scale(2,1);//（X,Y）
   ctx.strokeRect(100,100,100,100);

②canvas的save和restore

  ctx.save();//保存坐标系的平移数据，缩放数据，旋转数据；
   ctx.beginPath();
   ctx.translate(100,100);
   ctx.rotate(Math.PI / 4);
   ctx.strokeRect(0,0,100,50);
   ctx.beginPath();
   ctx.restore();//重置画板，新图和旧图互不干扰
   ctx.translate(100,100);
   ctx,fillRect(200,0,100,50);

③canvas背景填充

//填充颜色
ctx.fillStyle = "blue";
//填充图片，从画板原点开始
var img = new Image();
img.src = "./good.png";
img.onload = function(){
   ctx.beginPath();
   //修改画板原点
   ctx.translate(100,100);
   var bg = ctx.creatPattern(img,"no-repeat");
   ctx.fillStyle = bg;
   ctx.fillRect(0,0,200,100);
}

④canvas线性渐变

 var bg = ctx.createLinearGradient(0,0,200,200);
 //渐变颜色
 bg.addColorStop(0,"white");
 bg.addColorStop(1,"black");
 ctx.fillStyle = bg;
 //修改坐标原点
 ctx.translate(100,100);
 ctx.fillRect(0,0,200,200);

⑤canvas辐射渐变

var bg = ctx.createRadialGradient(100,100,30,100,100,100);
bg.addColorStop(0,"white");
bg.addColorStop(0.5,"black");
ctx.fillStyle = bg
ctx.fillRect(0,0,200,200);

⑥canvas的阴影

ctx.shadowColor = "blue";
ctx.shadowBlur = 30;
ctx.shadowOffsetX = 15;//X方向平移了15
ctx.strokeRect(0,0,200,200);

⑦canvas渲染文字

ctx.font = "30px Georgia";
//文字描边（“文字”，x坐标，y坐标）
ctx.strokeText("wjk",200,300);
//文字填充
ctx.fillText("wjk",200,350);

⑧canvas线端样式

//线两端变圆|加方形帽子
ctx.lineCap = "round|square";
//交汇线的定点变圆滑|去掉尖|去尖锐
ctx.lineJoin = "round|bevel|miter";

⑨canvas图形叠加

context.globalCompositeOperation = 'lighter';//可以加很多值实现叠加各种效果，不一一说了；
3.svg画线与矩形
SVG:矢量图，放大不会失真，适合大面积的贴图，通常动画较少或者较简单，标签和css去画；

Canvas：适合小面积的绘图，适合动画

 <style>
       .line1{
           stroke: black;
           stroke-width:3px;
       }
       .line2{
           stroke: red;
           stroke-width: 5px;
       }
    </style>
</head>
<body>
    <svg width = "500px" height = "300px" style="border: 1px solid">
        <line x1 =  "100" y1 = "100" x2 = "200" y2 = "100" class="line1"></line>
        <line x1 =  "200" y1 = "100" x2 = "200" y2 = "200" class="line1"></line>
        <!-- rx|ry:圆角 -->
        <!-- 画矩形 -->
        <rect height = "50" width = "100" x = "0" y = "0" rx = "10" ry = "10"></rect>
    </svg>
    </body>

②svg画圆和椭圆，折线

<style>
circle{
   fill:transparent;
   stroke:red;
}
polyline{
    fill:transparent;
    stroke:blueviolet;
    stroke-width:3px;
}
</style>
//画圆（半径，x，y）
<circle r = "50" cx = "50" cy = "220"></circle>
//画椭圆
<ellipse rx = "100" ry = "30" cx = "400" cy = "200"></ellipse>
//画折线
<polyline points = "0 0,50 50,100 100"></polyline>
③svg画多边形和文本
//多边形
<polyline points = "0 0,5 5,"></polyline>//不会首尾相连
<polygon points = '0 0,8 8'></polygon>//首尾相连
//文本
<text x = "300" y = "50">wjk<text>
④svg透明度与线条样式
polyline{
<!-- 线条透明度-->
   stroke-opacity:0.5;
<!--填充透明度-->
    fill-opacity:0.3;
    stroke-linecap:square|round;
    //两线相交
    stroke-linejoin:round|miter;
}
⑤svg的path标签
path{
   stroke:red;
}
//M:移动到..开始画   L：画到..(绝对位置)  l（相对位置）:
<path d = "M 100 100 L 100 100 l 100 100"></path>
//M：起点 H:水平方向  Z：闭合区间 V：纵向移动
<path d = "M 100 100 H 100  V 100"></path>
⑥svg的path画弧
//椭圆
<path d = "M 100 100 A 100（x轴半径） 50（y轴半径） 0（旋转角度） 1 1（顺时针，逆时针） "></path>
⑦svg的path线性渐变
<defs>//先定义
    <linearGradient id = "bg1" x1 = "0" y1 = "0" x2 = "0" y2 = "100%">
         <stop offset = "0%" style = "stop-color: rgb(255,255,0)"></step>
          <stop offset = "0%" style = "stop-color: rgb(255,0,0)"></step>
     </linearGradient>
</defs>
⑦svg的高斯模糊
<defs>
  <filter>
      <feGaussianBlur in sourceGraphic stdDeviation = "20"></feGaussianBlur>
  </filter>
  <rect x = "100" y = "100" height = "100" width = "200" style = "filter:url(#Gaussian)">
<defs>
⑧svg的虚线及简单动画
.line1{
     stroke:black;
     stroke-width:10px;
     //虚线
     stroke-dasharray:200px;
     //偏移（左偏）
     stroke-dashoffset:200px；
     animation:move 2s linear infinite alternate-reverse;
     @keyframes move{
     0%{
      stroke-dashoffset:200px;
      100%{
         stroke-dashoffset:0px;    
      }
    }
  }
}
⑦svg的viewbox(比例尺)
//放大一倍
<svg width = "500px" height = "300px" viewBox = "0(x),0(y),250,150" style = "border:1 px solid">
4.audio与video播放器
<audio src = "xxx.mov"></audio>
<video src = "xxx.mov"></video>

做视频播放器案例，明天补上。

-------------------------------待续---------------------------------------------

哪天才能学到vue
发布了60 篇原创文章 · 获赞 17 · 访问量 6399
私信 关注

猜你喜欢

转载自blog.csdn.net/qq_42177478/article/details/104174601
今日推荐
Apache Doris 2.0.10 版本正式发布！
开源日报 | 大模型开战；大模型独角兽被曝卖身；周鸿祎建议谷歌开源所有产品；最大开源AI社区提供1000万美元共享GPU
开源日报 | Chrome内置Gemini的意义不在于Gemini；中国AI追随之路的五大误区；ECharts创始人“下海”养鱼；谷歌I/O开发者大会什么都有，只是没有惊喜
微软回应中国区AI团队“打包赴美”传闻
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
周排行
阿里云短信服务平台注册
Windows下的字符串处理(1)
sqoop: mysql导入数据到hdfs, hive, hbase
commons.lang中常用的工具类
离线安装PostgreSQL11.6
使用PyTorch简单实现卷积神经网络模型
一文彻底搞定谱聚类
一道面试题引发的血案
One Chat for Mac(聊天工具)
TCP/IP的底层队列是如何实现的？
每日归档
更多
2024-05-17(34)
2024-05-16(6)
2024-05-15(24)
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022