HTML5知识梳理

  • 时间:
  • 来源:互联网
  • 文章标签:

一、属性篇

1、placeholder 提示信息

 <input type="text" placeholder="请输入账号">
 <input type="password" placeholder="请输入密码">

2、input 的新type属性 在form表单下的Calendar类 标有New的是html5新增加

H5新增加的input属性大多数浏览器都不支持(除了Chrome)所以基本不适用,附带一张仅供参考的兼容图。

3、contenteditable (内容可编辑)-- 无兼容性问题 该属性可以被子元素继承 默认值为flase

<div contenteditable="true">我可以被修改
    <br>
    <span>我也可以被修改 因为我继承的父级</span>
</div>

4、draggable (被拖拽元素)

<div class="demo" draggable="true"></div> 
<!-- 兼容性 chrome safari 可以正常使用  Firefox 不好使-->
 <!-- 拖拽的声明周期,拖拽的组成
    1、拖拽开始 拖拽进行中 拖拽结束 
    2、按下物体的瞬间是不会触发事件的 
  --> 

1)被拖拽的物体上的事件:ondragstart,ondrag,ondragend

var dragDiv = document.getElementsByClassName('demo')[0];
         // 用户开始拖动元素触发
         dragDiv.ondragstart = function(e){
             console.log(e);
         } 
         // 物体正在拖拽中触发  
         dragDiv.ondrag = function(e) {
            console.log(e);
        } 
        // 用户拖拽元素结束触发 
        dragDiv.ondragend = function (e) {
            console.log (e);
        }

下面代码实现一个拖拽的小demo

    var dragDiv = document.getElementsByClassName('demo')[0];
    var beginX = 0;
    var beginY = 0;
        dragDiv.ondragstart = function (e) {
            beginX = e.clientX;
            beginY = e.clientY;
        }
        dragDiv.ondragend = function (e) {
            var x = e.clientX - beginX;
            var y = e.clientY - beginY;
            dragDiv.style.left = dragDiv.offsetLeft + x + 'px';
            dragDiv.style.top = dragDiv.offsetTop + y + 'px';
        }

2)目标区域上的事件 ondragenter ondragover ondragleave ondrop

<div class="box" draggable="true"></div>
<div class="target"></div>
<script>
    var targetDiv = document.getElementsByClassName("target")[0]
    targetDiv.ondragenter = function(e){
        // 并不是元素图形进入目标区域触发,而是拖拽的鼠标进入目标区域触发
        console.log(e)
    }
    targetDiv.ondragover = function(e){
        // 鼠标进入目标区域时不停触发
        console.log(e)
        // e.preventDefault();
    }
    targetDiv.ondragleave = function(e){
        // 离开目标区域触发
        console.log(e)
    }
    targetDiv.ondrop = function(e){
        // 当鼠标在目标区域松开时 想要在目标区域用ondrop,需要取消ondragover的默认事件
        // 所有标签元素,当拖拽周期结束时,默认事件时是回到原处
        // 事件是由行为触发的,但是一个行为可以不止触发一个事件
        // ondrapover --> 回到原处  --> 执行drop
        console.log(e)
    }
</script>

二、标签篇

1、语义化标签

<!-- 本质都是div只不过是名字不同 具有不同含义而已 -->
<header></header> <!--头部-->
<footer></footer> <!--尾部-->
<nav></nav> <!-- 导航栏 -->
<article></article> <!-- 文章,可以被直接引用 -->
<section></section> <!-- 段落 -->
<aside></aside><!-- 侧边栏,几乎不用 -->

2、canvas标签 --画板

  • 1、HTML5 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成。
  • 2、 标签只是图形容器,您必须使用脚本来绘制图形。
  • 3、若想书写canvas代码有提示的话 可以在前面加上
    /** @type {HTMLCanvasElement} */
    (1)创建一个画布
<canvas id="cav" width="300px" height="200px" style="border: 1px solid red;"></canvas> 
//注意: 标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义的画布的大小.

(2)使用 JavaScript 来绘制图像
canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成:

<script>
        var canvas = document.getElementById('cav');
        var cxt = canvas.getContext("2d");   
        cxt.moveTo(100,100);   //定义起点位置
        cxt.lineTo(200,100);   //定义落点位置
        cxt.lineTo(200,200);
        cxt.closePath();    //自动闭合 只针对某一个路径一笔画出的图形才有用
        cxt.stroke();       // 绘画路径
        cxt.fill();         //  填充路径
     </script>

(3)案例: 使用canvas绘画矩形的几种不同方法
1、使用线条绘画

  <script>
         var canvas = document.getElementById('cav');
         var cxt = canvas.getContext('2d');
         // 用线绘画矩形 
         cxt.lineWidth = 10; //设置线的粗细
         cxt.moveTo(100,100);
         cxt.lineTo(300,100);
         cxt.lineTo(300,200);
         cxt.lineTo(100,200);
         cxt.closePath();
         cxt.stroke();
         cxt.fill();
    </script>

2、 使用rect() 方法

cxt.rect(100,100,200,100);  
// 四个参数分别为 起点横坐标 纵坐标 矩形的长度 矩形的宽度
cxt.stroke(); 

3、使用strokeRect() 方法

cxt.strokeRect(100,100,200,100); //一行代码就可以绘制

4、 fillRect()方法是绘制一个填充的矩形

cxt.fillRect(100,100,200,100);

(4)用canvas画图
1、画个圆

<script>
    /** @type {HTMLCanvasElement} */
    var canvas = document.getElementById('cav');
    var ctx = canvas.getContext('2d');
    //   画圆  arc(x , y , r  ,起始弧度,终点弧度,顺时针还是逆时针)
    //           xy代表起始横纵坐标 r--半径      顺时针用0 逆时针用1
    ctx.arc(100, 100, 50, 0, Math.PI / 2, 0);
    ctx.stroke();
  </script>

2、画个带圆角的矩形

<script> 
        /** @type{HTMLCanvasElement} */
        var canvas = document.getElementById('cav');
        var cxt = canvas.getContext('2d');
        cxt.moveTo(100,120);
        cxt.arcTo(100,200,400,200,20);
        // 五个参数代码 圆角的起始方向 圆角的终点方向 圆角的大小
        cxt.arcTo(400,200,400,100,20);
        cxt.arcTo(400,100,100,100,20);
        cxt.arcTo(100,100,100,200,20);
        cxt.stroke();
    </script>

2.1、canvas的属性旋转和缩放

1)旋转rotate
根据画布原点进行旋转的

<script> 
   /** @type{HTMLCanvasElement}*/
      var canvas = document.getElementById('cav');
      var ctx =canvas.getContext('2d');
      ctx.beginPath();   
      ctx.rotate(Math.PI / 6);  //根据画布原点旋转
      ctx.moveTo(200,0);
      ctx.lineTo(200,200);
      ctx.stroke();
   </script>

2)translate
改变坐标系原点

<script> 
   /** @type{HTMLCanvasElement}*/
      var canvas = document.getElementById('cav');
      var ctx =canvas.getContext('2d');
      ctx.beginPath();
      ctx.translate(100,100); //坐标系平移
      ctx.rotate(Math.PI / 6);  //根据画布原点旋转
      ctx.moveTo(0,0);
      ctx.lineTo(100,100);
      ctx.stroke();
   </script>

3)scale 伸缩系数

      ctx.beginPath();
      ctx.scale(2,1);  //2:1是将横坐标*2 纵坐标*1 长度*2 高度*1
      //每个坐标点都乘了个系数
      ctx.strokeRect(100,100,100,100);

4、canvas中的save()和restore()方法

1)save 是保存当前的状态
2)restore是变回上一个状态

<script> 
/** @type{HTMLCanvasElement}*/
   var canvas = document.getElementById('cav');
   var ctx =canvas.getContext('2d');
   //为了不使一个画布里画多个图形相互间产生干扰 使用save保存
   //save是保存当前的状态 restore是变回上一个状态
   ctx.save(); //保存了定义前的状态
   ctx.beginPath();
   ctx.translate(100,100);
   ctx.rotate(Math.PI / 6);
   ctx.strokeRect(0,0,100,50);
   ctx.beginPath();
   ctx.restore(); // 恢复了定义前的初始状态。不会受之前的translate的影响
   ctx.fillRect(200,0,100,50);
</script>

2.2、canvas的背景填充

1)背景填充可以用fillstyle=“”改变填充的颜色
2)背景填充可以用图片
3)背景图片填充是根据画布原点开始填充的

<script>
        /** @type{HTMLCanvasElement}*/
        var canvas = document.getElementById('cav');
        var ctx = canvas.getContext('2d');
        var img = new Image();
        img.width = '200px';
        img.height = '200px';
        img.src = './dog.jpg';
        // 因为图片src属性异步加载的原因 使用onload属性 
        img.onload = function () {
            ctx.beginPath();
            ctx.translate(100,100)
            var bg = ctx.createPattern(img, 'no-repeat');
            ctx.fillStyle = bg;
            ctx.fillRect(0, 0, 300, 200);
        }
    </script>

2.3、canvas的线性渐变

<script> 
/** @type{HTMLCanvasElement}*/
   var canvas = document.getElementById('cav');
   var ctx =canvas.getContext('2d');
   var bg = ctx.createLinearGradient(0,0,100,100);
                                 //4个参数代表的是渐变的方向 理解为一个一元一次方程 
   bg.addColorStop(0,'#fff');
  // bg.addColorStop(0.5,'yellow'); //设置关键帧
   bg.addColorStop(1,'blue');
   ctx.fillStyle = bg;
   ctx.fillRect(0,0,100,100);  //需要注意的是线性渐变的起始点还是画布的原点
</script>

2.4、canvas的阴影

<script> 
/** @type{HTMLCanvasElement}*/
   var canvas = document.getElementById('cav');
   var ctx =canvas.getContext('2d');
   ctx.beginPath();
   ctx.shadowColor = 'red';  //阴影的颜色
   ctx.shadowBlur = 30 ;    //阴影的大小
   ctx.shadowOffsetX = 15; //阴影水平方向平移
   ctx.shadowOffsetY = 15;
   ctx.strokeRect(100,100,100,100);
</script>

2.5、canvas的文字填充

   <script>
          /** @type{HTMLCanvasElement} */
           var canvas = document.getElementById('cav');
           var ctx = canvas.getContext('2d');
           ctx.beginPath();
           ctx.font = '30px Georgia';    //要填写两个参数分别是字体大小 和字体格式
           ctx.strokeText('xiaoke',100,100); // 填写的文字 填写文字的位置
           ctx.fillStyle = 'red';       //可以改变filltext填写文字的颜色
           ctx.fillText('xiaowang',100,200);
           /** 
            1、stroke写的是空心字体 而filltext 写的是填充字体 
            2、可以用fillStyle改变 fillText填写文字的颜色 
            3、font属性能同时改变 strokeText和fillText文字的大小
           */
       </script>

3.svg篇

3.1 svg画线和矩形

    <style>
        line{
            stroke: black;
        }
    </style>

 <!-- 
        SVG:矢量图,放大不会失真,适合大面积的贴图。通常动画较少或者简单,通过标签和css去画
        canvas:适合用于小面积的绘画,适合动画
     -->
     <svg width="500px" height="300px" style="border: 1px solid;">
         <line x1="100" y1="100" x2="200" y2="100"></line>
         <line x1='200' y1='100' x2="200" y2="200"></line>
         <line x1='200' y1='200' x2="100" y2="200"></line>
         <line x1='100' y1='200' x2="100" y2="100"></line>
         <rect width="100" height="100" x="0" y="0"></rect>
         // 用rect画的一个矩形  
     </svg> 
     

3.2 svg画圆,椭圆和折线

1)在用rect ,circle ,ellipse ,等画出的图形都是填充的。
解决办法是添加css样式 fill: transparent; stroke: red; 从而变成非填充图形
2)案例 svg画圆和椭圆 以及折线。

style>  
      circle ,
      polyline
             {
            fill: transparent;
            stroke: red;
             }
    </style>
<svg width="500px" height="300px" style="border: 1px solid;">
         <circle r='50' cx="100" cy="100"></circle> //圆
         <ellipse rx="100" ry="50" cx=100 cy=50></ellipse> //椭圆
     <polyline points= "0 0 ,100 100 ,200 100 ,200 200"></polyline>
</svg>

3.3 polyline 和 polygon 的区别

1)都是画线段的
2)polyline画到哪里就停在哪里 ,而polygon有自动封闭图形的功能
3)插入以下代码便于对比

 <style> 
     polyline,
     polygon
     {
         fill: transparent;
         stroke: red;
     }
    </style>
   <svg width="500" height="500" style="border: 1px solid red;">
     <!-- <polyline points="0 0 ,100 100,200 100 ,200 200 ,100 200 "></polyline> -->
     <polygon points="0 0 ,100 100,200 100 ,200 200 ,100 200 "></polygon>
    </svg>

3.4 text标签

   <svg width="500" height="500" style="border: 1px solid red;">
        <text x='200' y="200" >小柯handsome</text>
    </svg>

3.5 svg中stroke的一些主要属性

<!-- stroke 属性 
      1 、stroke :  定义一条线,文本或元素轮廓颜色
      2 、stroke-opacity 改变线条的透明度 
      3 、stroke-width   改变线条的粗细 
      4 、stroke-linecap 在线条的尾部加上个“帽子” 有以下属性值round(圆形)square(正方形)都是
      在原有的基础上加上一小块
      5 、stroke-linejoin 在线条与线条相交的部位变形 
    -->
      <style>
        polyline {
            fill: transparent;
            stroke: black;
            stroke-opacity: 0.5;
            stroke-width: 10px;
            stroke-linecap:round;
            stroke-linejoin: round;
        }
    </style>
     <svg width="500" height="500" style="border: 1px solid red;">
        <polyline points="0 0 ,100 100,200 100 ,200 200 ,100 200 "></polyline>
    </svg>

3.6 SVG 路径 - path

元素用于定义一个路径。

下面的命令可用于路径数据:

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath
注意:以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

<svg width="500" height="500" style="border: 1px solid red;">
       <path d="M150 0 L75 200 L225 200 Z" />
    </svg>

3.7、SVG 渐变 - 线性

 <svg width="500" height="500" style="border: 1px solid black;">
        <defs>
            <linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%">
                <stop offset="0%" style="stop-color: rgb(255, 255, 0);"></stop>
                <!-- 设置起始的关键帧 -->
                <stop offset="100%" style="stop-color: rgb(255, 0, 0);"></stop>
                <!-- 设置终点的关键帧 -->
            </linearGradient>

        </defs>
        <rect width="200" height="300" x="0" y="0" style="fill: url(#bg1);"></rect>
    </svg>

总结:1、linearGradient标签必须写在defs里面
2、当需要使用时,画一个形状然后用fill:url()引用

4、音频播放 audio

此功能和视频播放属性功能一样 只是比视频播放少了视频功能

5、视频播放 video

5.1、 controls:供添加播放、暂停和音量控件。
<video src="./jiangnan.mp4" controls></video>
5.2、 autoplay:视频在就绪后立马播放
<video src="./jiangnan.mp4" controls autoplay></video>
5.3、loop:循环播放
<video src="./jiangnan.mp4" controls loop></video>
5.4、preload:在页面加载时加载视频

如果使用 “autoplay”,则忽略该属性。Chrome:preload默认值为auto,加载部分视频;
在谷歌浏览器中,以下演示在控制台中进行或写点击事件触发使用,否则会报错。是因为谷歌浏览器自动播放的政策导致的。(autoplay政策,为了避免标签产生随机噪音禁止没有交互前使用js进行播放)

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.
5.5、play() 开始,pause() 暂停
5.6、currentTime和duration

currentTime 设置或返回音频/视频中的当前播放位置(以秒计)
duration: 返回当前音频/视频的长度(以秒计)

5.7、volume:当前音量

设置音量的属性 值在0到1之间

video.volume = 0.5;
5.8、playbackRate:播放倍速
video.playbackRate = 1 ;
video.playbackRate = 1.25;
video.playbackRate = 1.5;
video.playbackRate = 2.0; 
5.9 video 小demo 自己设置播放 暂停 音量加减 倍数等功能 (设计的有点丑 但是功能都实现了)

1、html部分代码

<div class="video_player">
        <video src="./jiangnan.mp4" autoplay></video>
        <div class="menu">
            <div class="play">播放</div>
            <div class="time">0:00/0:00</div>
            <div class="progress_bar">
                <div></div>
                <i></i>
            </div>
            <div class="multiple"> 正常
                <ul class="multiple_list">
                    <li>X1.0</li>
                    <li>X1.25</li>
                    <li>X1.5</li>
                    <li>X2.0</li>
                </ul>
            </div>
            <div class="voice">
                <i class=" iconfont icon-yinliang1"></i>
                <div class="voice_progress">
                    <div></div>
                    <i></i>
                </div>
            </div>
        </div>
    </div>

2、css部分的代码

 <link rel="stylesheet" href="https://at.alicdn.com/t/font_1873040_depdp7v84dk.css">
    
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .video_player {
            position: relative;
            width: 800px;
            height: 500px;
            margin: 0 auto;
        }

        .video_player video {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .video_player .menu {
            height: 40px;
            width: 800px;
            position: absolute;
            bottom: 0px;

            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .video_player .play {
            width: 50px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            left: 10px;
            top: 5px;
            color: #fff;

            border-radius: 10px;
            cursor: pointer;
        }

        .video_player .time {
            width: 100px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            left: 60px;
            top: 5px;
            color: #fff;
        }

        .progress_bar {

            width: 100%;
            height: 3px;
            top: -2px;
            position: absolute;
            background-color: gray;
        }

        .progress_bar div {
            height: 3px;
            position: absolute;
            top: 0px;
            width: 10px;
            background-color: rgba(255, 70, 0, 0.6);
        }

        .progress_bar i {
            position: absolute;
            width: 7px;
            height: 7px;
            top: -3px;
            border-radius: 3px;
            background-color: rgba(255, 100, 0, 1);
        }

        .video_player .multiple {
            width: 70px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position: absolute;
            left: 250px;
            top: 5px;
            color: #fff;
            border-radius: 10px;
            cursor: pointer;
        }

        .multiple .multiple_list {
            background-color: rgba(0, 0, 0, 0.5);
            width: 80px;
            height: 120px;
            position: absolute;
            top: -120px;
            list-style: none;
            display: none;

        }

        .multiple .multiple_list li:hover {
            background-color: green;
            color: black;
        } 
        .video_player .voice {
            width: 200px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            position:relative;
            left: 300px;
            top: 5px;
            color: #fff;
            cursor: pointer;
        }  
        .video_player .iconfont {
            font-size: 25px;  
        } 
        .voice_progress {
            width: 70px;
            height: 5px;
            position: absolute;
            left: 120px;
            background-color: gray;
            top: 13px;
        }
        .voice_progress div {
            height: 5px;
            position: absolute;
            top: 0px;
            width: 10px;
            background-color: rgba(0, 110, 255, 0.5);
        }

        .voice_progress i {
            width: 8px;
            height: 8px;
            border-radius: 4px;
            position: absolute;
            background-color: rgba(0, 110, 255, 1);
            left: 10px;
            top: -1px;
        }

    </style>

3、js部分的代码

   <script>
        var video_player = document.getElementsByClassName('video_player')[0];
        var video = video_player.getElementsByTagName('video')[0];
        var menu = video_player.getElementsByClassName("menu")[0];
        var play = menu.getElementsByClassName('play')[0];
        var time = menu.getElementsByClassName('time')[0];
        var progress = menu.getElementsByClassName('progress_bar')[0];
        var multiple = menu.getElementsByClassName('multiple')[0];
        var multiple_list = multiple.getElementsByTagName('ul')[0];
        var Omultiple_list = multiple_list.getElementsByTagName("li");
        var voice  = menu.getElementsByClassName('voice')[0];
        var voice_progress = voice.getElementsByClassName("voice_progress")[0];
        var voice_icon = voice.getElementsByTagName('i')[0];
        video_player.onmouseenter = function () {
            menu.style.display = 'block';
        }

        video_player.onmouseleave = function () {
            menu.style.display = "none";
        }

        play.onclick = function () {
            if (video.paused) {
                video.play();
                play.innerHTML = '播放'
            } else {
                video.pause();
                play.innerHTML = "暂停";
            }
        } 
        
        setInterval(function () {
            var toltalTime = video.duration;
            var nowTime = video.currentTime;
            time.innerHTML = parseInt(nowTime / 60) + ":" + parseInt(nowTime % 60) + "/" + parseInt(toltalTime /
                60) + ":" + parseInt(toltalTime % 60);
            var width = (nowTime / toltalTime) * progress.clientWidth;
            progress.getElementsByTagName('div')[0].style.width = width + 'px';
            progress.getElementsByTagName('i')[0].style.left = width + 'px';
        }, 200)

        progress.onmouseenter = function () {
            progress.style.height = "10px";
            progress.style.top = "-10px"
            progress.getElementsByTagName('div')[0].style.height = "10px"
            progress.getElementsByTagName('i')[0].style.height = "10px";
            progress.getElementsByTagName('i')[0].style.top = "0px"
        }
        progress.onmouseleave = function () {
            progress.style.height = "3px";
            progress.style.top = "-2px"
            progress.getElementsByTagName('div')[0].style.height = "3px"
            progress.getElementsByTagName('i')[0].style.height = "7px";
            progress.getElementsByTagName('i')[0].style.top = "-3px"
        }
        progress.onclick = function (e) {
            var location = e.layerX;
            video.currentTime = (location / progress.clientWidth) * video.duration;
            console.log(e ,"progress");

        }

        multiple.onclick = function () {
            multiple_list.style.display = "block";
            
        }

        multiple_list.onmouseleave = function () {
            multiple_list.style.display = "none"
        }
        for (var i = 0; i < Omultiple_list.length; i++) {
            (function (i) {
                Omultiple_list[i].onclick = function () {
                    if (i == 0) {
                        video.playbackRate = 1;
                    } else if (i == 1.25) {
                        video.playbackRate = 1.25;
                    } else if (i == 1.5) {
                        video.playbackRate = 1.5;
                    } else if (i == 2) {
                        video.playbackRate = 2;
                    }
                }
            }(i))
        }   
              var nowVolume = 0;
           voice_icon.onclick = function(){
                
               if(video.volume > 0) {
                   nowVolume =  video.volume ;
                   voice_icon.classList.remove('icon-yinliang1');
                   voice_icon.classList.add('icon-jingyin');
                   video.volume = 0 ;
               } 
               else if (video.volume == 0) {
                   voice_icon.classList.remove('icon-jingyin');
                   voice_icon.classList.add('icon-yinliang1');
                   video.volume = nowVolume;
               }
           } 
           voice_progress.onclick = function(e){
                video.volume = e.layerX / voice_progress.offsetWidth ;
                voice_progress.getElementsByTagName('div')[0].style.width = e.layerX + 'px';
                voice_progress.getElementsByTagName('i')[0].style.left = e.layerX + 'px';
           } 
    </script>

本文链接http://www.taodudu.cc/news/show-83111.html