HTML_标签

 
<html>
    <head>
        <title>title>
        <meta charset="UTF-8">
    head>
    <body>
        <p>p>
        <br/>
        
        <b>b>
        <big>big>
        <i>i>
        <small>small>
        <strong>strong>
        <sub>sub>
        <sup>sup>
        <ins>ins>
        <del>del>
        
        <h1>h1>
        <h2>h2>
        <h3>h3>
        <h4>h4>
        <h5>h5>
        <h6>h6>

        <hr/>
        
        <p align="">p>
        
        <img src="" alt="" border=""/>
            
        <a href="" target="_blank">a>
            
        <ol>
            <li>li>
        ol>
        <ul>
            <li>li>
        ul>
        <span>span>

        <table border="">
             
            <thead> 
                <tr> 
                    <th>th> 
                tr>
            thead>
            <tbody> 
                <tr>
                    <td colspan="" bgcolor="">td>
                     
                tr>
            tbody>
        table>

        <div id="">
           
        div>

        <form action="" method="" autocomplete>
        
            <label>label>
            <input type="text" name="" value="" list="colors" autofocus required/>
            
            <datalist id="colors">
               <option value="Red">
               <option value="Green">
               <option value="Yellow">
            datalist>
            <textarea>textarea>

            
            <font>font>
        form>

        <frameset rows="" cols="">frameset>
            
        <iframe src="" width="" height="">iframe>

        
        <header>header>
        <nav>nav>
        <article>
            <section>section>
        article>
        <aside>aside> 
        <footer>footer>
        
        <audio src="http://www.sololearn.com/uploads/audio.mp3" controls>
            
        audio>
        <audio controls autoplay loop>
            <source src="http://www.ytmp3.cn/?down/48756.mp3" type="audio/mp3">source>
            <source src="http://www.sololearn.com/uploads/audio.mp3" type="audio/mp3">source>
            你的浏览器不支持音频元素
        audio>
        <video width="800" height="" controls>
            <source src="http://www.sololearn.com/uploads/video.mp4" type="video/mp4">source>
            当前浏览器不支持 video直接播放
        video>
        <progress max="100" value="35">progress>
              
        <script>

            //存储
            localStorage.setItem("key1", "value1");//设置本地存储key1的value
            localStorage.getItem("key1");//获取本地存储key1的value
            localStorage.removeItem("key1");//删除本地存储key1的值
            localStorage.clear();//清空本地存储

            //位置
            navigator.geolocation.getCurrentPosition();
            showLocation (mandatory);//定义检索位置信息的回调方法
            ErrorHandler(optional);//定义在处理异步调用时发生错误时调用的回调方法。
            Options (optional);//定义一组用于检索位置信息的选项。

            //拖拽
            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));
            }



        script>
        <div id="box" ondrop="drop(event)" ondragover="allowDrop(event)" style="border: 1px;width: 200px;height: 200px;">div>
        <img id="image" src="http://n.sinaimg.cn/translate/86/w550h336/20180710/AW82-hezpzwu4285865.jpg" draggable="true"ondragstart="drag(event)" width="150" height="50" alt="" />
        

        <svg width="1000" height="1000">
            <circle cx="50" cy="100" r="100" fill="yellow">circle>
            
            <rect width="30" height="60" x="90" y="150" fill="green">
                <animate attributeName="x" from="0" to="300" dur="3s" fill="freeze" repeatCount="2"/>
                 
            rect>
            
            <line x1="10" y1="10" x2="200" y2="100" style="stroke:#000000; stroke-linecap:round; stroke-width:20"  />
            
            <polyline style="stroke-linejoin:miter; stroke:black; stroke-width:12; fill: none;" points="100 100, 150 150, 200 100,300 500" />
            
            <ellipse cx="200" cy="100" rx="150" ry="70" style="fill:green" />
            
            <polygon points="100 100, 200 200, 300 0" style="fill: green; stroke:black;" />
            
            <path d="M 0 0 L200 200 L200 0 Z" style="stroke:#000;  fill:none;" />
            
        svg>


        <canvas id="canvas1" width="1000" height="1000">canvas>
        



        <script type="text/javascript">
            //画布
            var can = document.getElementById("canvas1"); 
            var ctx = can.getContext("2d");
            //ctx.fillStyle="black";
            //ctx.fillStyle="rgba(0,243,152,1)"
            //绘制矩形
            //ctx.fillRect(100,120,100,100);
            //绘制一条线
            //ctx.beginPath();
            //ctx.moveTo(0,0);
            //ctx.lineTo(300,150);
            //ctx.stroke();
            //绘制一个园
            //ctx.beginPath();
            //ctx.arc(50,100,80,1,9);
            //ctx.stroke();
            //创建文本
            //ctx.font="bold 22px Tahoma";
            //ctx.textAlign="start";
            //ctx.fillText("start", 10, 30);
            //转化成文本
            //ctx.translate(100, 150);
            //ctx.fillText("after translate", 10, 30);
            //旋转
            //ctx.rotate( (Math.PI / 180) * 25); 
            //缩放
            //ctx.scale(1.5, 4);
        script>
    body>
html>

你可能感兴趣的:(H5,HTML)