HTML5 学习笔记(二)

1.

如需在 HTML5 中显示视频,需要使用以下代码:

2.

在此例子中,视频播放结束后会重新开始播放:

3. 标签

标签定义运行中的任务进度(进程)。

的属性:

max:规定需要完成的值。

value:规定进程的当前值。

实例

正在进行中的下载:

下载进度:

运行显示结果如下图:

4.HTML5 Web 存储

使用 HTML5 Web 存储, 可以在本地存储用户的浏览数据。

在 HTML5 之前,本地存储使用的是 cookie。

Web 存储的优势

  • 更加安全
  • 更加快速
  • 可以存储大量的数据
  • 每个服务器请求都不会发送存储的数据

数据以 键/值 对存在, web网页的数据只允许该网页访问使用。

5.Web 存储对象的类型

Web 存储对象有两种类型:

  • localStorage 
  • sessionStorage 

localStorage 与 sessionStorage 的区别

localStorage 对象存储的数据没有时间限制。

sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后,数据会被删除

6.Web 存储使用的 API

不管是 localStorage,还是 sessionStorage,可使用的API都相同,常用的有如下几个(以localStorage为例):

  • 保存数据:localStorage.setItem(key,value);
  • 读取数据:localStorage.getItem(key);
  • 删除单个数据:localStorage.removeItem(key);
  • 清除所有数据:localStorage.clear();
  • 得到某个索引的key:localStorage.key(index);

 提示: 键/值对通常以字符串存储,你可以按自己的需要转换该格式。

6. Geolocation API

HTML5 Geolocation API 用于获得用户的地理位置。

鉴于该特性可能侵犯用户的隐私,除非用户同意,否则用户位置信息是不可用的。

注意:Geolocation(地理定位)对于拥有 GPS 的设备,比如 iPhone,地理定位更加精确。

Geolocation API 的主要方法是 getCurrentPosition,它用来获得用户的位置。

下面是一个简单的地理定位实例,可返回用户位置的经度和纬度:

var x=document.getElementById("demo");
function getLocation(){
  if (navigator.geolocation){
    navigator.geolocation.getCurrentPosition(showPosition);
  }
  else{
    x.innerHTML="该浏览器不支持获取地理位置。";
  }
}

function showPosition(position){
  x.innerHTML="纬度: " + position.coords.latitude + 
  "
经度: " + position.coords.longitude; }

实例解析:

  • 检测是否支持地理定位。
  • 如果支持,则运行 getCurrentPosition() 方法。如果不支持,则向用户显示一段消息。
  • 如果 getCurrentPosition() 运行成功,则向参数 showPosition 中规定的函数返回一个 coordinates 对象。
  • showPosition() 函数获得并显示经度和纬度。

上面的例子是一个非常基础的地理定位脚本,不含错误处理。


7.HTML5 拖放(Drag 和 Drop)

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

拖放是一种常见的特性,即抓取对象以后拖到另一个位置。

在 HTML5 中,拖放是标准的一部分,任何元素都能够拖放。

下面是一个简单的拖放实例,我们来分别研究拖放事件的不同部分。


<html>
<head>
<meta charset="utf-8"> 
<title>W3Cschool教程(w3cschool.cn)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>拖动 w3cschool.cn 图片到矩形框中:p>

  <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">div>
  <br>
  <img id="drag1" src="/statics/images/logo.png" draggable="true" ondragstart="drag(event)" width="336" height="69">

body>
html>

1.设置元素为可拖放

首先,为了使元素可拖动,需要把 draggable 属性设置为 true :

<img draggable="true">


2.拖动什么 - ondragstart 和 setData()

然后,规定当元素被拖动时,会发生什么。

在上面的例子中,ondragstart 属性调用了一个函数,drag(event),它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值:

function drag(ev){
  ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中,数据类型是 "Text",值是可拖动元素的 id ("drag1")。


3.放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地,无法将数据/元素放置到其他元素中。如果需要设置允许放置,我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法:

event.preventDefault()


4.进行放置 - ondrop

当放置被拖数据时,会发生 drop 事件。

在上面的例子中,ondrop 属性调用了一个函数,drop(event):

function drop(ev){
  ev.preventDefault();
  var data=ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}

8.SVG 介绍

什么是 SVG?

  • SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
  • SVG 用于定义用于网络的基于矢量的图形
  • SVG 使用 XML 格式定义图形
  • SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失
  • SVG 是万维网联盟的标准

SVG 圆形

要使用 SVG 绘制图形,你首先需要创建一个 标签。

<svg width="1000" height="1000">svg>

要创建一个圆形,需要添加一个 标签。

下面是 SVG 代码:

<svg width="1000" height="1000">
   <circle cx="100" cy="50" r="40" fill="red" />
svg>
  • cx和cy属性定义圆点的x和y坐标。如果省略cx和cy,圆的中心会被设置为 (0, 0)。
  • r属性定义圆的半径。

运行显示结果如下图:

HTML5 学习笔记(二)_第1张图片

我们来看看 SVG 一些预定义的其他形状元素:

1.SVG 矩形 - 

标签可用来创建矩形,以及矩形的变种。

<svg width="1000" height="1000">
   <rect width="400" height="200" 
     x="20" y="20" fill="red" />
svg>

运行显示结果如下图:

HTML5 学习笔记(二)_第2张图片



2.SVG 直线 - 

标签是用来创建一个直线。

<svg width="500" height="510">
    <line x1="20" y1="20" x2="300" y2="200" 
        style="stroke:#000000; stroke-linecap:round; 
        stroke-width:20"  />
svg>

运行显示结果如下图:

HTML5 学习笔记(二)_第3张图片


3.SVG 曲线 - 

标签是用于创建任何只有直线的形状。

<svg width="2000" height="500">
    <polyline style="stroke-linejoin:miter; stroke:black; 
        stroke-width:12; fill: none;"
        points="100 100, 150 150, 200 100" />
svg>

运行显示结果如下图:

HTML5 学习笔记(二)_第4张图片

4.SVG 椭圆 -

标签是用来创建一个椭圆。

椭圆与圆很相似。不同之处在于椭圆有不同的x和y半径,而圆的x和y半径是相同的。

<svg width="500" height="250">
   <ellipse cx="200" cy="100" rx="150" ry="70" style="fill:red" />
svg>

运行显示结果如下图:

HTML5 学习笔记(二)_第5张图片


5,SVG 多边形 - 

标签用来创建含有不少于三个边的图形。

<svg width="1000" height="1000">
<polygon points="100 100, 200 200, 300 0" 
      style="fill: red; stroke:black;" />
svg>

运行显示结果如下图:

HTML5 学习笔记(二)_第6张图片






你可能感兴趣的:(HTML)