web之html5指南

原创 于 2018-07-13 09:41:05 发布 · 206 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文详细介绍了HTML5新增的功能和元素，包括画布绘制、SVG矢量图形、媒体元素、表单增强、本地存储等特性，帮助开发者更好地利用HTML5进行现代网页开发。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

html5基础

        HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

h5的浏览器支持

        所有浏览器，包括旧的和最新的，对无法识别的元素会作为内联元素自动处理。
        针对IE浏览器html5shiv是比较好的解决方案。html5shiv主要解决HTML5提出的新的元素不被IE6-8识别，这些新元素不能作为父节点包裹子元素，并且不能应用CSS样式。html5shiv.js 引用代码必须放在 <head> 元素中，因为 IE 浏览器在解析 HTML5 新元素时需要先加载该文件。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="https://apps.bdimg.com/libs/html5shiv/3.7/html5shiv.min.js"></script>//在 IE 浏览器的版本小于 IE9 时将读取 html5.js 文件，并解析它
<![endif]-->
</head>

<body>
    <article>
    菜鸟教程 —— 学的不仅是技术，更是梦想！！！
    </article>
</body>
</html>

html5就是html的一个新版本，所以在看过了html基础的朋友可以直接看版本更新的内容就好了，如下：

h5新元素
  • ##### <canvas>
    • 用于图形的绘制，通过脚本(通常是JavaScript)来完成。<canvas>标签只是图形容器.您必须使用脚本来绘制图形.
    • 一个画布在网页中是一个矩形框，内容 由它里面的脚本来绘制。注意: 默认情况下 <canvas>元素没有边框和内容。实例如下:
      html
      <canvas id="myCanvas" width="200" height="100"
      style="border:1px solid #000000;">
      </canvas>//使用style属性来给画布添加边框

      标签通常需要指定一个id属性 (脚本中经常引用), width 和 height 属性定义画布的大小。画布的坐标是水平x、竖直y。
    • js绘制画布内容
      先检查版本是否可用：

      <canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">
      您的浏览器不支持 HTML5 canvas 标签。
      </canvas>

      绘制矩形：

      var c=document.getElementById("myCanvas");//找到 <canvas> 元素
      var ctx=c.getContext("2d");//创建内建的 HTML5 对象
      ctx.fillStyle="#FF0000";//选定填充色
      ctx.fillRect(0,0,150,75);//绘制矩形

      绘制直线：

      var c=document.getElementById("myCanvas");//找到 <canvas> 元素
      var ctx=c.getContext("2d");//创建内建的 HTML5 对象
      ctx.moveTo(0,0);//直线起点
      ctx.lineTo(200,100);//直线终点
      ctx.stroke();//画线

      绘制圆形：

      var c=document.getElementById("myCanvas");//找到 <canvas> 元素
      var ctx=c.getContext("2d");//创建内建的 HTML5 对象
      ctx.beginPath();
      ctx.arc(95,50,40,0,2*Math.PI);//圆心x，圆心y,半径，开始角度，结束角度
      ctx.stroke();//画圆

      绘制实心文本/空性：

      var c=document.getElementById("myCanvas");//找到 <canvas> 元素
      var ctx=c.getContext("2d");//创建内建的 HTML5 对象
      ctx.font="30px Arial";//指定大小、字体样式、字体
      ctx.fillText("Hello World",10,50);//画实心文本，文本内容、x坐标，y坐标，最大像素宽度。
      ctx.strokeText("Hello World",10,50);//画空心文本，文本内容、x坐标，y坐标，最大像素宽度。

      绘制渐变：

      var c=document.getElementById("myCanvas");//找到 <canvas> 元素
      var ctx=c.getContext("2d");//创建内建的 HTML5 对象
      // 创建线条渐变，起始x、起始y、终点x、终点y
      var grd=ctx.createLinearGradient(0,0,200,0);
      // 创建圆渐变，开始圆x、开始圆y、开始圆半径、结束圆 x 、结束圆 y 、结束圆半径
      var grd=ctx.createRadialGradient(75,50,5,90,60,100);
      grd.addColorStop(0,"red");
      grd.addColorStop(1,"white");
      // 填充渐变
      ctx.fillStyle=grd;
      ctx.fillRect(10,10,150,80);

      绘制图像：

      var c=document.getElementById("myCanvas");//找到 <canvas> 元素
      var ctx=c.getContext("2d");//创建内建的 HTML5 对象
      ctx.drawImage(img,10,10);//画图像
  • <SVG>
    • SVG 指可伸缩矢量图形 (Scalable Vector Graphics),SVG 使用 XML 格式定义图形。
      SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失。
      与其他图像格式相比（比如 JPEG 和 GIF），使用 SVG 的优势在于：
      SVG 图像可通过文本编辑器来创建和修改 ；
      SVG 图像可在任何的分辨率下被高质量地打印 ；
      SVG 可在图像质量不下降的情况下被放大 。
    • 把 SVG 直接嵌入 HTML 页面*:
      ``html
      <svg xmlns="http://www.w3.org/2000/svg" version="1.1">
      <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
      </svg>
    • SVG与画布cancvs比较
      canvas最适合图像密集型的游戏，其中的许多对象会被频繁重绘，弱的文本渲染能力。
      SVG不适合游戏应用，最适合带有大型渲染区域的应用程序（比如谷歌地图)
  • <math>

           编辑数学公式

  • 元素拖放
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style type="text/css">
#div1 {width:350px;height:70px;padding:10px;border:1px solid #aaaaaa;}
</style>

<script>
//默认地，无法将数据元素放置到其他元素中，所以必须阻止默认处理方式。
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>

</head>
<body>

<p>拖动 RUNOOB.COM 图片到矩形框中:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
//将元素属性draggable设置为可拖放，设置拖放事件发生调用函数drag（）
<img id="drag1" src="/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>
  • <video>
            大多数视频是通过插件（比如Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。所以
            HTML5 规定了一种通过video元素来包含视频的标准方法。
    <video controls>属性提供了播放、暂停和音量控件来控制视频。同时元素也提供了 width 和 height 属性控制视频的尺寸。
    元素两个标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
    <video> 元素支持多个 <source> 元素. <source> 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式，当前支持三种视频格式： MP4, WebM, 和 Ogg。
<video width="320" height="240" controls>
   <source src="\jstest\video\mov_bbb.mp4" type="video/mp4">//指明视频格式为mp4
   <source src="\jstest\video\mov_bbb.ogg" type="video/ogg">
  您的浏览器不支持 HTML5 video 标签。
</video>
  • <audio>
            与视频一样，大多数音频是通过插件（比如 Flash）来播放的。然而，并非所有浏览器都拥有同样的插件。HTML5规定了在网页上嵌入音频元素的标准，即使用 <audio> 元素。control 属性供添加播放、暂停和音量控件。
            在<audio>与</audio>之间你需要插入浏览器不支持的<audio>元素的提示文本 。 <audio> 元素允许使用多个 <source> 元素。<source>元素可以链接不同的音频文件，浏览器将使用第一个支持的音频文件。
            元素支持三种音频格式文件: MP3, Wav, 和 Ogg。
<audio controls>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
  • h5表单新元素
    • <keygen> 元素的作用是提供一种验证用户的可靠方法。标签规定用于表单的密钥对生成器字段。当提交表单时，会生成两个键，一个是私钥，一个公钥。私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
      html
      <form action="demo_keygen.asp" method="get">
      用户名: <input type="text" name="usr_name">
      加密: <keygen name="security">
      <input type="submit">
      </form>
    • <output> 元素用于不同类型的输出，比如计算或脚本输出：
      html
      <form oninput="x.value=parseInt(a.value)+parseInt(b.value)">
      0<input type="range" id="a" value="50">100
      +<input type="number" id="b" value="50">
      =<output name="x" for="a b"></output>
      </form>
  • h5 web存储
    • Web 存储比cookie存储更加的安全与快速.这些数据不会被保存在服务器上，但是这些数据只用于用户请求网站数据上.它也可以存储大量的数据，而不影响网站的性能.
    • 在使用 web 存储前,应检查浏览器是否支持 localStorage 和sessionStorage:
      html
      <script>
      if(typeof(Storage)!=="undefined")
      {
      // 是的! 支持 localStorage sessionStorage 对象!
      } else {
      // 抱歉! 不支持 web 存储。
      }
      </script>
    • localStorage存储 对象存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用不管是 localStorage，还是sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：
      保存数据：localStorage.setItem(key,value);
      读取数据：localStorage.getItem(key);
      删除单个数据：localStorage.removeItem(key);
      删除所有数据：localStorage.clear();
      得到某个索引的key：localStorage.key(index);
    • sessionStorage 存储
      此方法针对一个session进行数据存储。当用户关闭浏览器窗口后，数据会被删除。数据以 键/值 对存在, web网页的数据只允许该网页访问使用。
  • h5应用程序缓存
    使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。
    如需启用应用程序缓存，请在文档开始的 标签中包含 manifest 属性。除在非manifest 文件中直接指定了该页面。
    manifest 文件可分为三个部分：
    1. CACHE MANIFEST - 在此标题下列出的文件将在首次下载后进行缓存
      javascript
      CACHE MANIFEST//这一行是必须的
      /theme.css
      /logo.gif
      /main.js

      列出了三个资源：一个 CSS 文件，一个 GIF 图像，以及一个 JavaScript 文件。当 manifest 文件加载后，浏览器会从网站的根目录下载这三个文件。然后，无论用户何时与因特网断开连接，这些资源依然是可用的。
    2. NETWORK - 在此标题下列出的文件需要与服务器的连接，且不会被缓存
      NETWORK 小节规定文件 “login.php” 永远不会被缓存，且离线时是不可用的：
      javascript
      NETWORK:
      login.php

      可以使用星号来指示所有其他资源/文件都需要因特网连接：NETWORK:*
    3. FALLBACK - 在此标题下列出的文件规定当页面无法访问时的回退页面（比如 404 页面）
      javascript
      //如果无法建立因特网连接，则用 "offline.html" 替代 /html5/ 目录中的所有文件
      FALLBACK:
      /html/ /offline.html
  • h5服务器发送事件
    HTML5 服务器发送事件（server-sent event）允许网页获得来自服务器的更新并展示。
<script>
if(typeof(EventSource)!=="undefined")//检查是否支持服务器发送事件
{
    var source=new EventSource("demo_sse.php");//创建一个新的 EventSource 对象，然后规定发送更新的页面的 URL
    source.onmessage=function(event)//每接收到一次更新，就会发生 onmessage 事件
    {
        document.getElementById("result").innerHTML+=event.data + "<br>";//当 onmessage 事件发生时，把已接收的数据推入 id 为 "result" 的元素中展示
    };
}
else
{
    document.getElementById("result").innerHTML="抱歉，你的浏览器不支持 server-sent 事件...";
}
</script>
  • h5表单新属性
    • 表单新属性：
      autocomplete 属性规定 form 或 input 域应该拥有自动完成功能。当用户在自动完成域中开始输入时，浏览器应该在该域中显示曾今记录的选项。
      autocomplete 属性的open还是off不确定，所以在使用时需要明确定义。
      注意: autocomplete 适用于 标签，以及以下类型的 标签：text, search, url, telephone, email, password, datepickers, range 以及 color。
      novalidate 属性是一个 boolean(布尔) 属性。novalidate 属性规定在提交表单时不验证 form 或 input 域。
    • input域新属性：
      formaction 属性会覆盖 元素中的action属性.The formaction 属性用于 type=”submit” 和 type=”image”.
      required属性规定必须在提交之前填写输入域，不能为空，否则会有弹窗提示。required 属性适用于以下类型的 标签：text, search, url, telephone, email, password, date pickers, number, checkbox, radio 以及 file。
  • h5表单input 新类型
    • color:color类型用在input字段主要用于选取颜色,点击会弹出选色板。
    • date 类型允许你从一个日期选择器选择一个日期，弹出日历。
    • time 类型允许你选择一个时间.
    • email 类型用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值是否合法有效。
    • url 类型用于应该包含 URL 地址的输入域。在提交表单时，会自动验证 url 域的值。

    • number 类型用于应该包含数值的输入域。
      还能够设定对所接受的数字的限定：

      数量 ( 1 到 5 之间 ): <input type="number" name="quantity" min="1" max="5">

    • range类型用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。

      <input type="range" name="points" min="1" max="10"> max="5">
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值