HTML5基础知识

头像
Summer
    阅读 4 分钟

    一、什么是 HTML5？

    • HTML5 是最新的 HTML 标准；
    • HTML5 是专门为承载丰富的 web 内容而设计的，并且无需额外插件；
    • HTML5 拥有新的语义、图形以及多媒体元素；
    • HTML5 提供的新元素和新的 API 简化了 web 应用程序的搭建；
    • HTML5 是跨平台的，被设计为在不同类型的硬件（PC、平板、手机、电视机等等）之上运行；

    二、HTML5的一些新特性

    • 用于绘画的 canvas 元素；
    • 用于媒介回放的 video 和 audio 元素；
    • 对本地离线存储的更好的支持；
    • 新的特殊内容元素，比如 article、footer、header、nav、section；
    • 新的表单控件，比如 calendar、date、time、email、url、search；

    三、video 元素

    • <video> 元素提供了播放、暂停和音量控件来控制视频；
    • <video> 元素也提供了 width 和 height 属性控制视频的尺寸；
    • <video> 与</video> 标签之间插入的内容是提供给不支持 video 元素的浏览器显示的；

    video 元素的三种视频格式：

    • Ogg：带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件；
    • MPEG4：带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件；
    • WebM：带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件；

    video 元素的属性：

    • src：要播放的视频的 URL；
    • width：设置视频播放器的宽度；
    • height：设置视频播放器的高度；
    • autoplay：自动播放；
    • controls：如果出现该属性，则向用户显示控件，比如播放按钮；
    • loop：循环播放；
    • preload：如果出现该属性，则视频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

    video 元素的方法：

    • pause()：暂停当前播放的视频；
    • play()：开始播放视频；
    • load()：重新加载视频元素；
    • canPlayType()：检测浏览器是否能播放指定的视频类型；
    • addTextTrack()：向音频/视频添加新的文本轨道；

    四、audio元素

    • HTML5 规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素；
    • <audio>元素能够播放声音文件或者音频流；

    audio元素的三种音频格式：

    • MP3：适用于Internet Explorer、Chrome、Safari 等浏览器；
    • Wav：适用于Firefox、Opera等浏览器；
    • Ogg：适用于Firefox、IE9、Chrome 浏览器；

    audio元素的属性：

    • src：要播放的音频的 URL；
    • autoplay：自动播放；
    • controls：如果出现该属性，则向用户显示控件；
    • loop：循环播放；
    • preload：如果出现该属性，则音频在页面加载时进行加载，并预备播放，如果使用 "autoplay"，则忽略该属性；

    audio元素的方法：

    • pause()：暂停当前播放的音频；
    • play()：开始播放音频；
    • load()：重新加载音频；

    五、canvas 元素

    什么是 Canvas？

    • HTML5 的 canvas 元素通过 JavaScript 在网页上绘制图像，元素本身并没有绘制能力，它只是图形容器，必须使用脚本来绘制图形；
    • canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法；
    • 创建一个画布
    <canvas id="myCanvas" width="200" height="100"></canvas>

    Canvas在HTML5 中的新属性有：

    • height：设置 canvas 的高度；
    • width：设置 canvas 的宽度；

    六、绘制三角形

    getElementById()：可返回对拥有指定 ID 的第一个对象的引用；
    getContext()：返回一个用于在画布上绘图的环境，2d表示二维绘图；
    beginPath()：开始一条路径，或重置当前的路径；
    moveTo()：把路径移动到画布中的指定点，不创建线条。
    lineTo()：添加一个新点，然后创建从该点到画布中最后指定点的线条（该方法并不会创建线条）；
    closePath()：创建从当前点到开始点的路径；
    strokeStyle属性：设置或返回用于笔触的颜色、渐变或模式；
    stroke()：会实际地绘制出路径；
    fillStyle属性：设置或返回用于填充绘画的颜色、渐变或模式；
    fill()：填充当前的图像（路径），默认颜色是黑色；

    //空心三角形
var canvas=document.getElementById("myCanvas");
var cxt=canvas.getContext("2d");
cxt.beginPath();
cxt.moveTo(50,50);
cxt.lineTo(100,50);
cxt.lineTo(75,100);
cxt.closePath();//填充或闭合 需要先闭合路径才能画
cxt.strokeStyle="red";
cxt.stroke();

//实心三角形
cxt.beginPath();
cxt.moveTo(150,50);
cxt.lineTo(250,50);
cxt.lineTo(200,150);
cxt.closePath();
cxt.fillStyle="#89E1BF"
cxt.fill();

    演示图
    图1

    七、使用Canvas绘制一个空心圆

    arc()：创建弧或曲线（用于创建圆或部分圆）；

    <body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
  var can=document.getElementById("myCanvas") 
  var ctx=can.getContext("2d");  //创建context对象
  ctx.beginPath();//标志开始一个路径
  ctx.arc(100,100,50,0,2*Math.PI);//在canvas中绘制圆形
  ctx.stroke()
 </script>

    演示图
    图2

    八、绘制一个实心圆

    <body>
    <canvas id="myCanvas" width="200" height="200" style="border:1px solid #000;">
</body>
<script type="text/javascript">
  var c=document.getElementById("myCanvas");
  var ctx=c.getContext("2d");  
  ctx.beginPath();
  ctx.arc(100,100,50,0,2*Math.PI);
  ctx.fillStyle="#deffff";
  ctx.fill();
  ctx.strokeStyle="red"
  ctx.stroke();
 </script>

    演示图
    图3

    九、绘制一个空心矩形

    strokeRect()：绘制矩形（不填色），笔触的默认颜色是黑色；

    <body>
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
  var can=document.getElementById("myCanvas");    //获得画板数据
  var ctx=can.getContext('2d');   //获得笔刷
     ctx.strokeStyle="blue";         //设置线条颜色
     ctx.strokeRect(100,100,100,100);     //线条画矩形
 </script>

    演示图
    图4

    十、绘制一个实心的矩形

    fillRect()：绘制“已填色”的矩形，默认的填充颜色是黑色；

    <body>
    <canvas id="myCanvas" width="300" height="300" style="border:1px solid #000;">
</body>
<script type="text/javascript">
var can=document.getElementById("myCanvas");//获得画板数据
var ctx=can.getContext('2d');    //获得笔刷
   ctx.strokeStyle="blue";      //设置线条颜色
   ctx.fillStyle="#ddedee";     //填充矩形
   ctx.fillRect(100,100,100,100);
   ctx.strokeRect(100,100,100,100);//线条画矩形
 </script>

    演示图
    图5

    html5htmlcss
    Summer
    83 声望9 粉丝

    关于Python学习的一些小知识

    « 上一篇
    HTML基础知识之DIV
    下一篇 »
    Python解析式与生成器

    引用和评论

    推荐阅读
    头像
    Vue CLI 使用CSS

    Summer阅读 1.5k

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端开发工具

    寒青赞 15阅读 4.7k

    头像
    开发插件集合

    寒青赞 12阅读 3.1k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 12阅读 2.5k

    头像
    纯CSS电梯导航！借助滚动驱动动画来实现内容和导航联动

    XboxYan赞 12阅读 1.6k

    0 条评论
    得票最新