HTML5记录

作者: Tony__Hu | 来源:发表于2018-10-08 09:23 被阅读0次

HTML5

MINE类型

多用途Internet邮件扩展（MIME）类型是一种标准化的方式来表示文档的性质和格式。它在IETF RFC 6838中进行了定义和标准化。互联网号码分配机构（IANA）是负责跟踪所有官方MIME类型的官方机构。
浏览器通常使用MIME类型（而不是文件扩展名）来确定如何处理文档；因此服务器设置正确以将正确的MIME类型附加到响应对象的头部是非常重要的。常用的MIME类型有
text/plain
text/html
image/jpeg
image/png
audio/mpeg
audio/ogg
audio/*
video/mp4
application/octet-stream
…
multipart/form-data
multipart/byteranges

在缺失 MIME 类型或客户端认为文件设置了错误的 MIME 类型时，浏览器可能会通过查看资源来进行MIME嗅探。每一个浏览器在不同的情况下会执行不同的操作。因为这个操作会有一些安全问题，有的 MIME 类型表示可执行内容而有些是不可执行内容。浏览器可以通过请求头 Content-Type 来设置 X-Content-Type-Options 以阻止MIME嗅探。

html5新特性支持检测方法

检测全局对象，如window和navigator
创建元素，检测对象时候拥有属性
创建元素，检测是否拥有特定方法
如

function support_canvas_text(){
    if (document.createElement('canvas').getContext){
        var _canvas = document.creaeElement('canvas');
        var context = _canvas.getContext('2d')
        return typeof context.fillText == 'function'        
    }
    return false;
}

使用Modernizr库
只要导入就可以提供检测，如

Modernizr.canvas //返回true或者false

具体特性检测

video支持编码方式检测

//h264.
function support_h264_video (){
    if (_video = document.createElement('video').canPlayType) {
        return _video('video/mp4; codecs="avc1.42E01E, mp4a40.2"');
     }
     return '';
}

//或用Modernizr
if (Modernizr.video){
    return Modernizr.video.h264;
}

本地存储

funtion support_localstorage(){
    return ('localStrorage' in window) && window['localStorage'] !== null;
}

离线web应用

function support_offline(){
    return !! window.applicationCache;
}

或用Modernizr
Modernizr.applicationCache

地理位置（非HTML5标准）

!!navigator.geolocation

html5 input类型

新的input Type

type='search'
type='number'
type='range'
type='color'
type='tel'
type='url'
type='email'
type='date'
type='month'
type='week'
type='time'
type='datetime'
time='datetime-local'
但浏览器不支持新类型时将type视为text
故判断可用：
return i.type !== "text"

或用Modernizr：
Modernizr.inputtypes.data

占位符（placeholder）

检测方法：
var i = createElement('input')
if (! ('placeholder' in i)){
    //do something
}

或用Modernizr：
if(!Modernizr.input.placeholder){
    //do somethng
}

自动聚焦（autofocus）

同上，将placeholder替换为autofocus

HTML5 head中的主要标签

<!DOCTYPE html>
<html lang='zh'>
<!--  lang可用的tags参见 http://www.iana.org/assignments/language-subtag-registry/language-subtag-registry  -->
    <head>
        <meta charset="utf-8" />
        <!-- 或 charset="ISO8895-1"非中文 -->
        <!-- 在HTML4中的声明方法
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        -->
        <link rel="stylesheet" href="style.css" type="text/css" />
        <link rel="shortcut icon" href="/favicon.ico" />
    </head>
    <body>
    </body>
</html>

HTML5新增语义元素

<section>    段落，节
<nav>        导航栏
<article>    由页面中自成一体的内容组成
<aside>      通常为侧边栏
<hgroup>     段落或节的标题
<header>     导航辅助，可包含各节标题
<footer>     一般包括页脚内容
<time>       时间或日期，或附带时间以及时区偏移量
<mark>       高亮参考

通过hgroup包装标题

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
  </head>
  <body>
    <header>
      <hgroup>
        <h1>hello world</h1>
        <h2>this is a testing page</h2>
      </hgroup>
      <div>
        <h2>this is a level 2 head</h2>
      </div>
      <div>
        <h2>this is anothor level 2 head</h2>
      </div>
    </header>
  </body>
</html>

通过article形成子页面大纲

<!DOCTYPE html>
<html lang='zh'>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <h1>this is a title</h1>
    <article>
      <header>
        <h1>this is a title in an article tag</h1>
      </header>
      <p>contents</p>
    </article>
  </body>
</html>

日期和时间

//格式<time datetime='yyyy-mm-dd[Thh:mm:ss[+/-hh:mm]]' [pubdate]>可选内容</time>
//其中pubdate参数为可选，如果在article中表示文章发表日期，在其它地方表示文档发布日期

//在上文<article>中加入时间标签
<!DOCTYPE html>
<html lang='zh'>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <h1>this is a title</h1>
    <article>
      <header>
        <time datetime='2018-9-10T21:20:20+08:00' pubdate>option content</time>
        <h1>this is a title in an article tag</h1>
      </header>
      <p>contents</p>
    </article>
  </body>
</html>

导航栏（nav）

<nav>
    <ul>
        <li><a href='#'>home</li>
        <li><a href='#'>blog</li>
        <li><a href='#'>about</li>
    <ul>
<nav>

绘图canvas

var cvs = canvas.getContext('2d')
cvs.fillStyle()
cvs.fillRect()
cvs.strokeStyle()
cvs.strokeRect() <!-- 不填充只绘制边缘
cvs.clearRect()

//样例
<!DOCTYPE>
<html>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <script>
      var cvs = document.createElement('canvas');
      var b = document.getElementsByTagName('body');
      b[0].appendChild(cvs);
      c = cvs.getContext('2d');
      c.fillStyle='#123456';
      c.fillRect(2,3,200,200);
    </script>
  </body>
</html>

画坐标轴

<!DOCTYPE>
<html>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <canvas id='c' width:500 heigth:500></canvas>
    <script>
      var cvs = document.getElementById('c').getContext('2d');
      cvs.beginPath();
      for (var i=0; i<201; i+=5){
        cvs.moveTo(i+0.5,0);
        cvs.lineTo(i+0.5,100);
      }
      for (var i=0; i<101; i+=5){
        cvs.moveTo(0,i+0.5);
        cvs.lineTo(200,i+0.5);
      }
      cvs.strokeStyle="#dddddd";
      cvs.stroke();
      cvs.beginPath();

      cvs.moveTo(0,10);
      cvs.lineTo(200,10);
      cvs.lineTo(195,5);
      cvs.moveTo(200,10);
      cvs.lineTo(195,15);
      cvs.moveTo(10,0);
      cvs.lineTo(10,100);
      cvs.lineTo(5,95);
      cvs.moveTo(10,100);
      cvs.lineTo(15,95);
      cvs.strokeStyle='#111111';
      cvs.stroke();
      cvs.font = 'normal 9px sans-serif';
      cvs.fillText('y',2,65);
      cvs.fillText('x',115,7);S
    </script>
  </body>
</html>

渐变

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <canvas id='c' width='500' height='500' style='border:1px solid #d3d3d3;'></canvas>
    <script>
      var cvs = document.getElementById('c').getContext('2d');
      var my_gradient = cvs.createLinearGradient(0,0,500,500);
      my_gradient.addColorStop(0,'black');
      my_gradient.addColorStop(1,'white');
      cvs.fillStyle = my_gradient;
      cvs.fillRect(0,0,500,500);
      </script>
  </body>
</html>

canvas插入图像

<script>
  window.onload = function(){
    var cvs = document.getElementById('c').getContext('2d');
    var img = document.getElementById('commands');
    cvs.drawImage(img,0,0,300,400);
  }
</script>

video标签与常用视频容器及编码格式

视频：
视频容器格式：MPEG-4，Flash视频(FLV，F4V)，Ogg，WebM，AVI
视频编解码格式：H.264（MPEG-4 AVC），H.265，VP3/Theora，VP8，VP9
音频：
音频编解码格式：MP3（MPEG-1 Audio Layer 3），AAC，Vorbis（常嵌入Ogg容器中）

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <video src='/video/ex_video.mp4' width='600' height='400' controls></video>
  </body>
</html>

video标签允许同一个视频有多种格式

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <video width='600' height='400' controls>
      <source src='/video/ex_video.mp4' type='video/mp4' >
      <source src='/video/ex_video.webm' type='video/webm' >
      <source src='/video/ex_video.ogv' type='video/ogg' >
    </video>
  </body>
</html>

地理位置geolocation

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <script>
      navigator.geolocation.getCurrentPosition(
        function show_location(position){
          alert('lat:'+String(position.coords.latitude)+'\n'+'lon:'+String(position.coords.longitude));
        },
        function handle_err(err){
          switch(err.code){
            case 0:
              alert("Unknown Error");
              break;
            case 1:
              alert("Permission Denied");
              break;
            case 2:
              alert("Location Unavailibal");
              break;
            case 3:
              alert("Time Out");
              break;
          }
        },
        {
          enableHighAccuracy:true,//开启高精度位置，可能失败
          timeout:60000,          //定位超时(ms)
          maximunAge:60000        //再次获取新的位置的最短时间间隔
        }
      );
    </script>
  </body>
</html>

本地存储localStorage

<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
  </head>
  <body>
    <button type='button' onclick='clearItem()'>clear localStorage</button>
    <script>
      var foo = 12345;
      if (a = localStorage['bar']){
        alert('local storage exists, bar: ' + a);
      }
      else{
        localStorage["bar"] = foo;
        alert('add "bar" in local storage');
      }
      function clearItem(){
        localStorage.clear();
        alert('localStorage clear');
      }
    </script>
  </body>
</html>

自动聚焦autofocus

\\HTML5为所有表单内元素提供了autofocus属性
<form>
    <input name='q' autofocus>
    <input type='submit' value='Search'>
</form>

HTML5 input标签

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'>
    </head>
    <body>
        <form>
            <input type='email' placeholder='email'>
            <input type='url' placeholder='url'>
            <input type='number' min='0' max='20' step='2' value='0'>
            <input type='range' min='0' max='30' step='1' value='10'>
            <input type='date'>
            <input type='time'>
            <input type='color'>
            <input type='search' placeholder='Search' autofocus>
            <input type='submit' value='OK'>
        </form>
    </body>
</html>

HTML5记录

HTML5

MINE类型

html5新特性支持检测方法

具体特性检测

video支持编码方式检测

本地存储

离线web应用

地理位置（非HTML5标准）

html5 input类型

新的input Type

占位符（placeholder）

自动聚焦（autofocus）

HTML5 head中的主要标签

HTML5新增语义元素

通过hgroup包装标题

通过article形成子页面大纲

日期和时间

导航栏（nav）

绘图canvas

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读