HTML5

HTML5

---

web前端基础（四）

本文仅是学习过程中的简略笔记，如有错误，烦请指正。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、前言

,为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如： 图形的绘制，多媒体内容，更好的页面结构，更好的形式 处理，和几个api拖放元素，定位，包括网页 应用程序缓存，存储，网络工作者，等

二、具体内容

canvas

通过 canvas 元素来显示一个红色的矩形：

< canvas id=“myCanvas”>< /canvas>

< script type=“text/javascript”>

var canvas=document.getElementById(‘myCanvas’)；

var ctx=canvas.getContext(‘2d’)；

ctx.fillStyle=’#FF0000’；

ctx.fillRect(0，0，80，100)；

< /script>
多媒体

表单

语义和结构

已移除元素
以下的 HTML 4.01 元素在HTML5中已经被删除：
< acronym>
< applet>
< basefont>
< big>
< center>
< dir>
< font>
< frame>
< frameset>
< noframes>
< strike>
动画案例
< !DOCTYPE html>
< html lang=“en”>

< head>

 < meta charset="UTF-8">
< meta http-equiv="X-UA-Compatible" content="IE=edge">
< meta name="viewport" content="width=device-width, initial-scale=1.0">
< title>Document< /title>
< style>

    @keyframes pulse {
        0% {}
        70% {
            width: 40px;
            height: 40px;
            opacity: 1;
        }
        100% {
            width: 70px;
            height: 70px;
            opacity: 0;
        }
    }
    .map {
        width: 747px;
        height: 617px;
        background: url(ditu.png) no-repeat;
        margin: 0 auto;
    }
    
    .city {
        position: absolute;
        top: 163px;
        right: 644px;
        color: #fff;
    }
    
    .dotted {
        width: 8px;
        height: 8px;
        background-color: #09f;
        border-radius: 50%;
    }
    
    .city div[class^="pulse"] {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 8px;
        height: 8px;
        box-shadow: 0 0 12px #009dfd;
        border-radius: 50%;
        animation: pulse 1.2s linear infinite;
    }
    
    .city div.pulse2 {
        animation-delay: 0.4s;
    }
    
    .city div .pulse3 {
        animation-delay: 0.8s;
    }
< /style>

< /head>

< body>

< div class="map">
    < div class="city">
        < div class="dotted"></div>
        < div class="pulse1"></div>
        < div class="pulse2"></div>
        < div class="pulse3"></div>
    < /div>
< /div>

< /body>

< /html>