SOURCE

console 命令行工具 X clear 

                    

                        
>

                        
                    

                

            

            
console

            
var c=document.getElementById("mycan");
var ctx=c.getContext("2d");

// 绘制一个线
ctx.moveTo(0,0);
ctx.lineTo(100,75);
ctx.stroke();

// 绘制一个圆
ctx.beginPath();
ctx.arc(100,75,50,0,2*Math.PI);
ctx.stroke();

// 一个实体，一个虚体文字
ctx.font="20px Arial";
ctx.fillText("hello!",70,20)
ctx.strokeText("hello!",75,150);

// 创建渐变
var grd=ctx.createLinearGradient(0,0,200,0);
grd.addColorStop(0,"red");
grd.addColorStop(1,"green");
 
// 填充渐变
ctx.fillStyle=grd;
ctx.fillRect(0,50,200,50);


// 函数，使图片可拖动
function allowDrop(ev)
{
    ev.preventDefault();
}

function drag(ev)
{
    ev.dataTransfer.setData("Text",ev.target.id);
}

function drop(ev)
{
    ev.preventDefault();
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
}

            
<!DOCTYPE>
<html>

    <head>
        <meta charset="utf-8">
        <title>这是HTML5</title>
    </head>

    <body>
        <h1>html5的一些</h1>
        <p class="time1">2022-2-25</p>
        <a class="ta" href="https://www.runoob.com/css/css-tutorial.html" target="iframe_a">前往学习</a>
        <br/>
        <a class="search" href="http://www.baidu.com" target="iframe_a">前往查询问题</a>

        <iframe src="https://static.runoob.com/images/mix/img_tree.png" name="iframe_a"></iframe>

        <br/>
        <h2>Canvas</h2>
        <br/>
        <p>canvas是创建一个画布，用有JavaScript的绘图</p>
        <canvas id="mycan" width="200" height="150" style="border:1px solid #000000;">
            <!-- 只能定义画布，绘制要依靠脚本 -->
        </canvas>
       <img src="http://t2-mfs.ys7.com/mall/f974f116bc13cfdf3277e460e97a9fca.jpg" width="120" height="150">

        <h2>这是mathml</h2>

        <math>
            <mrow>
                <mrow>
                    <msup>
                        <mi>a</mi>
                        <mn>2</mn>
                    </msup>
                </mrow>
                <mo>+</mo>
                <mrow>
                    <mi>b</mi>
                    <mn>2</mn>
                </mrow>
                <mo>+</mo>
                <mrow>
                    <mn>2</mn>
                    <mo></mo>
                    <mi>a</mi>
                    <mo></mo>
                    <mi>b</mi>
                </mrow>
            </mrow>

            <mo>=</mo>

            <mrow>
                <msup>
                    <mo>(</mo>
                    <mi>a</mi>
                    <mo>+</mo>
                    <mi>b</mi>
                    <mo>)</mo>
                    <mn>2</mn>
                </msup>
            </mrow>
        </math>
        <br/>

        <math>
            <!-- 这是创建的一个矩阵，但是可能有一点点点问题 -->
            <mrow>
            <mi>A</mi>
            <mo>=</mo>
                        
            <mfenced open="[" close="]">
                        
               <mtable>
                  <mtr>
                     <mtd><mi>x</mi></mtd>
                     <mtd><mi>y</mi></mtd>
                  </mtr>
                                        
                  <mtr>
                     <mtd><mi>z</mi></mtd>
                     <mtd><mi>w</mi></mtd>
                  </mtr>
               </mtable>
               
            </mfenced>
         </mrow>
      </math>
      <h2>拖动</h2>
      <p>可以拖动树木到矩形框内</p>
      <br/>
      <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <!-- ondrop是调用drop函数，阻止浏览器对数据的默认操作，而ondragover也是调用函数，使元素可以放在这里 -->
      <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
      <br/>
      <img id="drag1" src="https://static.runoob.com/images/mix/img_tree.png" draggable="true" 
      ondragstart="drag(event)" width="300" height="200">
      <!-- draggable是把图片设为可拖动，ondragstart则是调用drag函数对拖动的元素进行设置 -->


                


            



            
body
{
    background: #d0e4fe;
}
h1
{
    color: red;
    text-align: center;
}
p.time1
{
    text-align: right;
    color: yellow;
}
h2
{
    color: red;
    text-align: center;
}

a.ta:link {color:#ff0000;}
a.ta:visited {color:#0000ff;}
a.ta:hover {color:#ffcc00;}

a.search:link {color:#ff0000;}
/* 未访问时样式 */
a.search:visited {color:#0000ff;}
/* 访问后的样式 */
a.search:hover {font-size:150%;background:#66ff66;}
/* 鼠标悬停在链接上的样式 */

p
{
    color: gold;
}

#div1,#div2{width:350px;height:220px;padding:10px;border:1px solid #aaaaaa;}