浅识HTML5

最新推荐文章于 2021-02-19 14:29:14 发布

烟花流水空

最新推荐文章于 2021-02-19 14:29:14 发布

阅读量1.3k

点赞数

分类专栏：技术小清新文章标签： HTML5

本文链接：https://blog.csdn.net/jesse_wuguangzu/article/details/14057935

版权

技术小清新专栏收录该内容

9 篇文章 0 订阅

订阅专栏

今天在图书馆看了本HTML5的入门书，在此小结一下，与大家共享。

HTML5为什么越来越被大家接受,有三大理由：

兼容性：兼容老版本的浏览器

实用性：HTML5封装了切实有用的功能

用户优先性：HTML5规范基于用户优先规则编写

HTML5 中有一些有趣的新特性：

用于绘画的 canvas 元素；

用于媒介回放的 video 和 audio 元素；

对本地离线存储的更好的支持；

新的特殊内容元素，比如 article、footer、header、nav、section；

新的表单控件，比如 calendar、date、time、email、url、search。

HTML5的结构：

新增主体结构元素：//使文档结构更加清晰明确

article和section：article可以看成特殊的section，section强调分块、分段，article强调完整、独立。

对于section注意：

不要将section用作设置样式的页面容器，那是div元素的工作。

当article、aside、nav更符合页面要求时，尽量不用section。

不要为没有标题的区块使用section。

nav：用来构建导航。一个页面可以有多个nav，作为整体或部分的导航。

aside：表示当前页面或文章的附属部分，可用于摘录引用或边栏的排版效果。

time：标签定义公历的时间（24 小时制）或日期，时间和时区偏移是可选的。

新增非主体结构元素：//表示逻辑结构或附加信息

header：具有引导和导航作用的结构元素，通常放置标题。一个页面可定义多个header。

hgroup：将标题及其子标题进行分组。

footer：脚注信息块。

address：用于当前<article>或文档作者的详细联系方式。

HTML5的表单：

placeholder：向用户显示描述性说明或显示信息。<input type="text" placeholder="请输入信息">

autofocus：控件自动获取光标焦点。<input type="text" autofocus>

step：对输入型控件，step能够设定输入值递增或递减的梯度。

required：设置为必填信息项，否则无法提交。

增加与改良的input元素类型：

email：是input元素专门用来输入E-mail地址的文本框，局域multiple属性，可用逗号隔开输入多个邮箱，就像平常发邮件一样。

url：专门用来输入url地址的文本框。

date：日期效果，类似的有datetime,time,datetime-local,month,week。

还有类似类型：number、range、search、tel、color等。

表单验证：

pattern：根据表单空间上设置的格式规则验证输入是否有效。

checkValidity显示验证法：覆盖浏览器默认的验证和反馈过程，不建议用来控制验证反馈的显示。

setCustomValidity：自定义错误信息。

离线应用程序：

在HTML5中，提供了一个供本地缓存使用的API，可以实现离线Web应用的开发。我自己感觉这个技术可以对移动端开发提供很大支持，因为智能终端有时候很需要能够离线操作。在Web应用中使用缓存的原因之一就是为了支持离线应用。

要创建HTML5的离线应用就需要了解manifest（缓存清单），因为应用程序的的本地缓存都是通过每个页面的manifest文件来管理的。manifest是个简单的文本文件，其中以清单的形式列举了需要和不需要被缓存的资源文件的名称及其访问路径。manifest文件第一行必须是“CACHE MANIFEST”，为了告知浏览器此文件作用。manifest的MIME(Mutipurpose Internet Mail Extensions,多用途互联网邮件扩展)类型是：text/cache-manifest。

applicationCache对象：代表本地缓存，用来通知本地缓存已被更新。其方法swapCache用来手动更新，在updateReady被触发时调用。需注意的是，虽然swapCache方法能立刻更新本地缓存，但是页面上的图像和脚本文件需要重新打开本页面时才会被跟新。

Web Worker:

来实现web平台上的多线程处理功能。可以通过Web Worker创建一个不影响前台处理的后台线程，并且此后台线程可具有多个子线程。而且可以将耗时长的处理交给后台，从而不影响前台操作。

创建Worker很容易，只要在Worker类构造器中，将需要后台运行的脚本文件作为参数，创建Worker对象就可以了。

var w=new Worker("/example/html5/demo_workers.js");

由于 web worker 位于外部文件中，它们无法访问下列 JavaScript 对象：window 对象、document 对象和parent 对象。

worker的方法：

onmessage--获取接收消息的事件句柄，并可以在后台线程中接收消息。

postMassage(message)--向创建线程的原窗口发送消息。

terminate()--终止 web worker，并释放浏览器/计算机资源。

多媒体播放：

HTML5不需要再安装插件等繁杂的操作，新增audio和video元素。

如需在 HTML5 中显示视频，您所有需要的是：

<video src="movie.ogg" controls="controls">
</video>

control 属性供添加播放、暂停和音量控件。

包含宽度和高度属性也是不错的主意。

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：

实例

<video src="movie.ogg" width="320" height="240" controls="controls">
Your browser does not support the video tag.
</video>

audio和video具有的属性大致相同。

Canvas画布：

HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。

画布是一个矩形区域，您可以控制其每一像素。

canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

创建 Canvas 元素：

向 HTML5 页面添加 canvas 元素。

规定元素的 id、宽度和高度：

通过 JavaScript 来绘制

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);
</script>

JavaScript 使用 id 来寻找 canvas 元素：

var c=document.getElementById("myCanvas");

然后，创建 context 对象：

var cxt=c.getContext("2d");

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

下面的两行代码绘制一个红色的矩形：

cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);

fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。

strokeStyle：用来设置图形轮廓的颜色。

globalAlpha：透明度，0.0完全透明，1.0完全不透明。就像D3.js中的opacity属性。

moveTo(x,y)：不绘制，只移动到(x,y)位置

lineTo(x,y)：不仅移动，而且之间划线

绘制变形图形：

translate：平移

scale：缩放

rotate：旋转

createPattern：图像平铺

HTML5的数据存储：

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储，永久存储

sessionStorage - 针对一个 session 的数据存储，页面存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

localStorage 方法：

localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。
如何创建和访问 localStorage：

<script type="text/javascript">
localStorage.lastname="Smith";
document.write(localStorage.lastname);
</script>

下面的例子对用户访问页面的次数进行计数：

<script type="text/javascript">
if (localStorage.pagecount)
  {
  localStorage.pagecount=Number(localStorage.pagecount) +1;
  }
else
  {
  localStorage.pagecount=1;
  }
document.write("Visits "+ localStorage.pagecount + " time(s).");
</script>

sessionStorage 方法：

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

如何创建并访问一个 sessionStorage：

<script type="text/javascript">
sessionStorage.lastname="Smith";
document.write(sessionStorage.lastname);
</script>

下面的例子对用户在当前 session 中访问页面的次数进行计数：

<script type="text/javascript">
if (sessionStorage.pagecount)
  {
  sessionStorage.pagecount=Number(sessionStorage.pagecount) +1;
  }
else
  {
  sessionStorage.pagecount=1;
  }
document.write("Visits "+sessionStorage.pagecount+" time(s) this session.");
</script>

Geolocation（地理定位）:

在HTML5中为window.navigator对象新增了geolocation属性，使用getCurrentPosition方法获取用户当前位置

navigator.geolocation.getCurrentPosition(function(position){//获取成功时处理})

举例：在Google地图上显示你的位置

<!DOCTYPE html>
<html>
<body>
<p id="demo">点击这个按钮，获得您的位置：</p>
<button οnclick="getLocation()">我在这</button>
<div id="mapholder"></div>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>		<!--导入Google Map API-->
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)							<!--获取位置信息-->
    {
    navigator.geolocation.getCurrentPosition(showPosition,showError);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }

function showPosition(position)
  {
  lat=position.coords.latitude;	//纬度
  lon=position.coords.longitude;//经度
  latlon=new google.maps.LatLng(lat, lon);//获取经纬度
  mapholder=document.getElementById('mapholder')
  mapholder.style.height='250px';
  mapholder.style.width='500px';

  var myOptions={
  center:latlon,zoom:14,//将用户所在位置设为中心点
  mapTypeId:google.maps.MapTypeId.ROADMAP,
  mapTypeControl:false,
  navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}
  };
  var map=new google.maps.Map(document.getElementById("mapholder"),myOptions);
  var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"});
  }

function showError(error)
  {
  switch(error.code) //error对象的code属性值
    {
    case error.PERMISSION_DENIED://用户拒绝被获取信息
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE://网络不可用或无法链接获取位置信息的卫星
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT://网络可用但时间超时
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR://位置错误
      x.innerHTML="An unknown error occurred."
      break;
    }
  }
</script>
</body>
</html>

烟花流水空

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
浅识HTML5

今天在图书馆看了本HTML5的入门书，在此小结一下，与大家共享。HTML5为什么越来越被大家接受？HTML5 中有一些有趣的新特性：用于绘画的 canvas 元素；用于媒介回放的 video 和 audio 元素；对本地离线存储的更好的支持；新的特殊内容元素，比如 article、footer、header、nav、section；新的表单控件，比如 calendar、d
复制链接

扫一扫

专栏目录