Html5回顾

一年了,回家处理父亲的事情,同时也放空了下自己,顺便思考下人生。
刚刚回到北京,旧业重拾。捡起我所失去的、渐渐遗忘的或是尚未掌握的!

Semantics

Sections

  1. section
  2. article
  3. nav
  4. aside
  5. header
  6. footer

    Note:

    1. nav 不能自嵌套
    2. aside 不能自嵌套

audio and video

video

重点:

  • Use controles
  • Use <source> to define multiple media type for compatibility

audio

用法基本同于video
不针对具体业务的话,audiovideo不必死记

Form

input

  • color
  • email
  • url
  • tel
  • number
  • search
  • range
  • month
  • week
  • date
  • datetime-locale
  • time

    Note:
    datetime will be removed

output

不会提交,用于展示,不过现在的mvvm框架完全可以无视这个元素

semantic (语义)

  • mark
  • figure
  • figcaption
  • progress
  • meter
  • main

MathML (Mathematical Markup Language)

Web Workers

一个栗子
main.js

if (window.Worker) {
  const worker = new Worker('worker.js')

  worker.onmessage = (e) => {
    // do something
  }
  // some method worker.postMessage(some obj)
} else {
  console.log('your browser does not suppor web workers')
}

worker.js

onmessage = function(e) {
  // e.data do something
}

Note:
1.web worker限制https or localhost
2.worker脚本与主脚本同源
3.Dom限制,只可以访问navigatorlocation对象
4.不能使用alert() 和 confirm()等对话框,但能用Ajax
5.worker源文件必须来自网络,无法使用本地文件(file://)

3D图形,canvas + WebGL

canvas

1.默认width 300px, height 150px
2.canvas需要闭合标签</canvas>
基本用法:

<html>
  <head>
    <title>Canvas tutorial</title>
    <script type="text/javascript">
      function draw(){
        var canvas = document.getElementById('tutorial');
        if (canvas.getContext){
          var ctx = canvas.getContext('2d');
        }
      }
    </script>
    <style type="text/css">
      canvas { border: 1px solid black; }
    </style>
  </head>
  <body onload="draw();">
    <canvas id="tutorial" width="150" height="150"></canvas>
  </body>
</html>

拖放