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>