H5 新增那些特性:

最新推荐文章于 2024-10-03 18:52:05 发布

猕猴桃-HR

最新推荐文章于 2024-10-03 18:52:05 发布

阅读量175

点赞数

分类专栏： js 文章标签： html5 javascript html

本文链接：https://blog.csdn.net/weixin_45677987/article/details/120227430

版权

js 专栏收录该内容

49 篇文章 0 订阅

订阅专栏

本文介绍了HTML5的新增特性，包括语义化标签如<article>, <section>等，提升表单功能的input type属性如number, email等，以及新增的视频<video>和音频<audio>标签。同时，还提及了HTML5的canvas元素用于在网页上进行图形绘制。这些改进增强了网页内容的结构和用户体验。

摘要由CSDN通过智能技术生成

1: 新增语义化标签
   HTML5 新增的语义化标签主要有:
   <article>  <section> <nav> <aside> <footer> <timer>...

2: Form 表单增强
   input 的type 新属性: number, data, month, week, time, email, url 等等;
   input 标签新增加的特有属性:

   <input type="number" name="demoNumber" min="1" max="100"l step="2"></input>
   <input type="number" name="demoNumber" placeholder="请注册邮箱"></input>
   <input type="url" name="url" placeholder="请注册网址"></input>
   <input type="tel" name="number" placeholder="请输入电话"></input>
   <input type="date" name="datename" placeholder="请输入电话"></input>
   <input type="color" name="颜色"></input>
   <input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames"></input>

3: 视频和音频标签:
   <!-- 视频标签 -->
   <video src="url" controls="controls"></video>  // src: 视频url  controls 展示控件, 如播放控件
   <audio src="url" loop="loop" muted="muted"></audio>   // src:  音频结束重新播放   
   muted  静音播放 

HTML5  绘图:
  HTML5 的canvas 元素使用JavaScript  在网页上绘制图像,  画布可以是一个巨型区域, 可以控制每一像素。 canvas 拥有多种绘制路径, 矩形,  圆形, 字符以及添加图像的方法。

 
<html>
    <canvas id="myCanvas" width="200" height="100"></canvas>
</html>
<script>
    var c=document.getElementById("myCanvas"); //使用 id 来寻找 canvas 元素
    var cxt=c.getContext("2d"); //getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
    cxt.fillStyle="#FF0000";  //fillStyle 方法将其染成红色。
    cxt.fillRect(0,0,150,75);  //fillRect 方法规定了形状、位置和尺寸。
</script>