天天看点
返回

HTML5新增语义标签、多媒体元素标记

HTML5，构建Web内容的一种语言描述方式,是HTML、CSS、Javascript的组合,在HTML4的基础上重点解决了浏览器的兼容性、页面文档结构不够明确、新增API解决Web应用程序功能受限

html5标准网页声明:

元素标记 

thead

全局属性

新增全局属性，即所有元素都可以使用的属性。

contentEditable布尔值，元素内容是否可以修改

designMode定义整个页面是否可修改off/on

hidden

tabindex当tab键用于导航时候，获得焦点的顺序

contexmenu属性值是一个menu元素的id，右键元素时候出现

draggable设置元素是否可以拖动

新的语义化标签

有利于SEO、丢失样式时候能够让页面呈现出清晰的结构、

<header>标签：包含引导和导航等，通常包含h1~h6、搜索框、logo等。
    <footer>标签：一般配合address标签(显示地址)，包含作者信息、相关链接等。
    <nav>标签：一般包含多个a标签，构建导航组件。
    <aside>标签：主要装载广告、侧边栏。
    <article>标签：包含文章，一般内嵌header、footer、h1、p标签。
    <section>标签：文章内容的独立区块，如章节、头部、顶部可以用在以上任一一个标签中划分组件。 
    <figure>用于对元素进行组合，搭配子元素figcaption来添加标题
     <time>时间或日期
    <address>定义文档或作者的联系方式
           
div标签的语义化转化，有利于代码可读性和SEO。
           
<header>
	<h1>网页标题</h1>
	<nav>
		<ul>
			<li><a href="#">首页</a></li>
			<li><a href="#">新闻</a></li>
			<li><a href="#">图片</a></li>
		</ul>
	</nav>
</header>
<article>
	<section>
		<h1>文章主标题</h1>	
		<h2>文章副标题</h2>
	</section>
	<p>文章正文</p>
	<section>
		<article>
			<h1>评论标题</h1>
			<p>评论正文</p>
		</article>
	</section>
</article>
<footer>
	<address>联系方式</address>
</footer>

progress元素定义运行中的任务进度

通过控制value值，在JavaScript中实现视图与进度的连接

<progress id="myProgress" value="75" max="100">
</progress>

设备兼容

HTML5提供了丰富的API，让开发者有了更多的选择。

拖放API

手机都内置了方向传感器和运动传感器，对应有访问传感器的API，DeviceMotionEvent

多媒体

容器container、编/解码器codec

音视频文件实质上就是容器container，编/解码器codec就是对特定的音视频流进行编码解码的算法。只有经过编解码的媒体文件才能正常播放

用于媒介回放的 video、canvas和 audio 标签，打破了对于Flash 的依赖,无需插件，且媒体元素向web页面提供了可脚本化控制的API

WebRTC

MediaDevices.getUserMedia() 会提示用户给予使用媒体输入的许可，媒体输入会产生一个MediaStream，里面包含了请求的媒体类型的轨道。此流可以包含一个视频轨道（来自硬件或者虚拟视频源，比如相机、视频采集设备和屏幕共享服务等等）、一个音频轨道（同样来自硬件或虚拟音频源，比如麦克风、A/D转换器等等），也可能是其它轨道类型。

它返回一个 Promise 对象，成功后会resolve回调一个 MediaStream 对象。若用户拒绝了使用权限，或者需要的媒体源不可用，promise会reject回调一个 PermissionDeniedError 或者 NotFoundError 。

代码实现实时在页面播放摄像头音频捕获到的

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * { margin: 0; padding: 0;}
    #box {
      width: 500px;
      height: 500px;
      border: 2px solid deeppink;
    }
  </style>
</head>

<body>
    <video src="/" controls="controls">
        your browser does not support the video tag
    </video>
        
  <script>
 // 想要获取一个最接近 1280x720 的相机分辨率
var constraints = { audio: true, video: { width: 1280, height: 720 } };

navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
  var video = document.querySelector('video');
  video.srcObject = mediaStream;
  video.onloadedmetadata = function(e) {
    video.play();
  };
})
.catch(function(err) { console.log(err.name + ": " + err.message); }); // 总是在最后检查错误
  </script>
</body>
</html>

iframe

frame破坏网页可用性和可访问性

嵌入视频或者谷歌maps地图。因为iframe常被用于嵌入第三方内容（恶意操作隐患），所以面临安全问题。

新增sandbox、seamless、srcdoc用于保证页面安全性，防止某些不信任操作在页面上运行

缺点：

会阻塞主页面的Onload事件

即使内容为空，加载它也需要时间

sandbox

HTML5新增语义标签、多媒体元素标记
  1. 禁止访问父页面的DOM
  2. 禁止脚本代码的执行 allow-scripts
  3. 禁止ifame内的表单提交，禁止该页面与服务器端 allow-forms
  4. 禁止ifame内的导航到iframe和当前源之外的超链接 allow-top-navigation
  5. 禁止对本地保存、本地SQL、Cookie的读取
  6. 将iframe视作一个单独的源 allow-same-origin

seamless

使iframe元素中的页面看起来像包含的文档的一部分

srcdoc

<iframe srcdoc="<p>Hello world!</p>" src="if_not_srcdoc_show.htm">
  <p>您的浏览器不支持  iframe 标签。</p>
</iframe>

Blob

Blob 对象表示一个不可变、原始数据的类文件对象。其数据可以按文本或二进制的格式进行读取，也可以转换成 ReadableStream 来用于数据操作。

第一·个参数为数组，可以存放任意数量的String对象、Blob对象、ArrayBuffer对象、ArrayBufferView对象类型的对象，第二个参数用于创建Blob对象的type属性值，MIME类型。

要从其他非blob对象和数据构造一个 Blob，请使用 Blob() 构造函数。要创建一个 blob 数据的子集 blob，请使用 slice() 方法。要获取用户文件系统上的文件对应的 Blob 对象。

Blob.slice([start[, end[, contentType]]])
返回一个新的 Blob 对象，包含了源 Blob 对象中指定范围内的数据。
Blob.stream()
返回一个能读取blob内容的 ReadableStream。
Blob.text()
返回一个promise且包含blob所有内容的UTF-8格式的 USVString。
Blob.arrayBuffer()
返回一个promise且包含blob所有内容的二进制格式的 ArrayBuffer

File 接口基于Blob，继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

多用途嵌入式元素 object、embed

embed用于插入各种媒体，元素格式可以是AU、AIFF、MP3、WAV

定位设备 navigator.geolocation 

let btn = document.getElementById('btn');
    let box = document.getElementById('box');

    //点击按钮获取地理位置信息
    btn.onclick = function () {
      //getCurrentPosition与定时器setInterval类似多次请求，因为位置需要不间断的获取
      //直接navigator.geolocation表示单次获取位置
      navigator.geolocation.getCurrentPosition(function (position) {
        box.innerHTML += "经度" + position.coords.longitude;
        box.innerHTML += "纬度" + position.coords.latitude;
        box.innerHTML += "准确度" + position.coords.accuracy;
        box.innerHTML += "海拔" + position.coords.altitude;
        box.innerHTML += "海拔准确度" + position.coords.altitudeAcuracy;
        box.innerHTML += "行进方向" + position.coords.heading;
        box.innerHTML += "地面速度" + position.coords.speed;
        box.innerHTML += "请求的时间" + new Date(position.timestamp);
      }, function (err) {
        console.log(err);
        box.innerHTML="error"+err;
// code：返回获取位置的状态
//          0  :  不包括其他错误编号中的错误
// ​		     1  :  用户拒绝浏览器获取位置信息
// ​		     2  :  尝试获取用户信息，但失败了
// ​		     3  :   设置了timeout值，获取位置超时了
      }, {
          enableHighAcuracy: false, //位置是否精确获取
          timeout: 5000,            //获取位置允许的最长时间
          maximumAge: 1000          //多久更新获取一次位置
        })
    }
JavaScript基础 html5 html javascript
上一篇: 黑马程序员_正则表达式总结
下一篇: 水晶头详解

继续阅读