HTML5 - 《HTML5 简介 & HTML5 新特性》 - 《网易微专业学习笔记》

广义的HTML5是指包括HTML，CSS3，Javascript 在内的一套的技术组合。

主要作用：
减少网页浏览器对于需要插件的丰富性网络应用服务。
提供更多能有效加强网络应用得标准集。

《HTML5 新增标签》
header, nav, section, aside, article, footer，这些标签只是起到语义化的作用，本身视觉效果和DIV并没有大的区别。

HTML5新增表单输入框的类型：
type=”email”
type=”url”
type=”date”
type=”number”
type=”range”
type=”search”
type=”color”

input标签并不需要结束标签，应该写在form表单里面，且应当有name属性。

placeholder属性：
增加未输入值前的提示信息。

autocomplete属性：
autocomplete 属性规定输入字段是否应该启用自动完成功能。
自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。
注释：autocomplete 属性适用于

，以及下面的类型：text, search, url, telephone, email, password, datepickers, range 以及 color。
默认值为on，用户可以设置为off。

例子：
URL 的autocomplete=”off”。

<!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>
</head>
<body>
    <form name="form1" action="/">
        <input name="email" type="email" placeholder="请输入邮箱">
        <input name="url" type="url" placeholder="请输入网址" autocomplete="off">
        <input name="date" type="date">
        <input name="number" type="number" placeholder="请输入数字" autofocus="true">
        <input name="search" type="search" placeholder="请输入...">
        <input name="range" type="range">
        <input name="color" type="color">
        <input name="reset" type="reset" value="reset">
        <input name="submit" type="submit" value="submit">
    </form>
</body>
</html>

《HTML 制图和 Canvas》：
Canvas初识示例：
注意： 2d需要小写，c.getContext 是浏览器兼容性判断。canvas中的文字将会在浏览器不支持的情况下显示。

<!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>Canvas</title>
</head>
<body>
    <div style="border: 1px solid green; width: 300px; height: 300px">
        <canvas id="canvas1" width="300px" height="300px">
            您的浏览器不支canvas，请升级您的浏览器！
        </canvas>
    </div>
    <script>
        window.onload = function () {
            var c = document.getElementById('canvas1');
            if (c.getContext) {
                var ctx = c.getContext("2d");
                ctx.font = "20px Arial";
                ctx.fillText("Hello World!", 100, 100);
            }
        };
    </script>
</body>
</html>

《HTML5 多媒体 & Video，Audio》：
video元素支持多个source元素，source元素在浏览器使用的是第一个识别（支持）的视频文件。

<!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>
        html,body{
            margin: 0;
        }
    </style>
</head>
<body>
    <video width="50%" height="50%" controls="controls" autoplay="autoplay">
        <source src="banner.mp4" type="video/mp4">
        您的浏览器不支video，请升级您的浏览器！
    </video>
</body>
</html>

《HTML5的 Web存储功能》：
会话存储（window.sessionStorage）：生命周期为关闭浏览器窗口，同一个窗口下数据可共享，刷新页面依然可以访问的到。
本地存储（window.localStorage）：永久生效，除非手动删除，可多窗口共享。
注：可以在F12，在Application Tab中查看。

<!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>Storage</title>
</head>
<body>
    <button onclick="setSessionStorage()">setSessionStorage</button>
    <button onclick="setLocalStorage()">setLocalStorage</button>
    <script>
        function setSessionStorage() {
            window.sessionStorage.setItem("session11","Hello: Session");
        }
        function setLocalStorage() {
            window.localStorage.setItem("local11","Hello: World");
        }
    </script>
</body>
</html>

《HTML5 拖拽》

代码示例：

注： ondragover 会默认屏蔽调 ondrop，所以要调用事件的preventDefault()。

<!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>Drag</title>
    <style>
        .big-box {
            width: 200px;
            height: 200px;
            border: 1px solid black;
            float: left;
        }
        .small-box {
            width: 80px;
            height: 80px;
            border: 1px solid green;
            float: left;
        }
    </style>
</head>
<body>
    <div id="big" ondragenter="dragenter(event)" ondragover="dragover(event)" ondragleave="dragleave(event)" ondrop="drop(event)" class="big-box">
    </div>
    <div id="small" ondragstart="dragstart(event)" ondrag="drag(event)" ondragend="dragend(event)" class="small-box" draggable="true">
    </div>
    <script>
      function dragstart(e){
        console.log('start');
        e.dataTransfer.setData('source', e.target.id);
      }
      function drag(e){
        console.log('draging');
      }
      function dragend(e){
         console.log('end');
      }
      function dragenter(e){
        console.log('Big: enter');
      }
      function dragover(e){
        console.log('Big: over');
        e.preventDefault();
      }
      function dragleave(e){
        console.log('Big: leave');
      }
      function drop(e){
        console.log('Big: drop');
        var source = document.getElementById(e.dataTransfer.getData("source"));
        e.target.appendChild(source);
      }
    </script>
</body>
</html>

【题目1】 !DOCTYPE是什么？有什么作用？不写它可能会出现什么问题？
DOCTYPE是document type的简写，它并不是 HTML 标签，也没有结束标签，它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。DOCTYPE的声明必须是 HTML 文档的第一行，位于html标签之前。大多数Web文档的顶部都有doctype声明。很少人会去注意 doctype ，但在遵循标准的任何Web文档中，它都是一项必需的元素。doctype会影响代码验证，并决定了浏览器最终如何显示你的 Web文档。

作用： **DOCTYPE声明中指出阅读程序应该用什么规则来解释文档中的标记。在Web文档的情况下，阅读程序通常是浏览器或者校验器这样的一个程序，规则是W3C所发布的一个文档类型定义 DTD 中包含的规则。制作一个符合标准的网页，DOCTYPE声明是是不可缺少的，它在Web设计中用来说明你用的XHTML或者HTML是什么版本，如果不做DOCTYPE声明或声明不正确的情况下，将有可能导致你的标识与CSS失效，从而令你网页的布局变乱，造成网页在浏览器中不能正常的显示。我们还可以通过W3C提供的验证工具来检查页面的内容是否符合在DOCTYPE中声明的标准。

【题目2】如何处理html5在IE低版本(IE8及以下)的兼容问题，请例举两种。
（1）可以在元素中添加不兼容提示信息；

<convas width="300" height="300">
     您的浏览器不支持convas标签，请升级浏览器！
<convas>

（2）可以在JS中判断API是否存在；

<body>
    <canvas id="myCanvas" width="300" height="300">
        您的浏览器不支持convas标签，请升级浏览器！
    <canvas>
</body>
<script>
    window.onload() = function () {
       var api = document.getElementById("myCanvas")
       if (!api.getContext) {
           window.alert('您的浏览器不支持canvas，请升级浏览器！')
       } 
    }
</script>

【题目3】表单元素，如input，关于设置name，以下说法正确的是： (B)**

A.可以不设置，意义不大
B.需要设置，表单提交的时候通过name提取元素内容
C.需要设置，如果某表单里有元素没有设置name，该表单无法提交

**【题目4】请使用canvas画一个五角星。
要求：画布宽高为400px；填充色为#E4EF00；边框宽度为3px；颜色为red，效果如图：
《HTML5 简介 & HTML5 新特性》 - 图2
第一版本：并不是真正的五角星，因为旋转角度不精确。
注：strokeStyle外边框样式，fillStyle为填充样式。

<!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>Canvas</title>
</head>
<body>
    <div style="border: 1px solid green; width: 400px; height: 400px">
        <canvas id="canvas1" width="400px" height="400px">
            您的浏览器不支canvas，请升级您的浏览器！
        </canvas>
    </div>
    <script>
        window.onload = function () {
            var c = document.getElementById('canvas1');
            if (c.getContext) {
                var ctx = c.getContext("2d");
                ctx.fillStyle = "#E4EF00";
                ctx.lineWidth = 3;
                ctx.strokeStyle = "red";
                ctx.beginPath();
                ctx.moveTo(200, 0);
                ctx.lineTo(150, 150);
                ctx.lineTo(0, 150);
                ctx.lineTo(130, 230);
                ctx.lineTo(100, 400);
                ctx.lineTo(200, 280);
                ctx.lineTo(300, 400);
                ctx.lineTo(270, 230);
                ctx.lineTo(400, 150);
                ctx.lineTo(250, 150);
                ctx.lineTo(200, 0);
                ctx.fill();
                ctx.stroke();
            }
        };
    </script>
</body>
</html>

第二版本：

<!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>Canvas</title>
</head>
<body>
    <div style="border: 1px solid green; width: 400px; height: 400px">
        <canvas id="canvas1" width="400px" height="400px">
            您的浏览器不支canvas，请升级您的浏览器！
        </canvas>
    </div>
    <script>
        function drawStar(cxt , r , R , x , y , rot , borderWidth , borderStyle , fillStyle){
            cxt.beginPath();
            for( var i = 0 ; i < 5 ; i ++){
                cxt.lineTo(Math.cos((18+72*i - rot)/180*Math.PI) * R + x ,- Math.sin((18+72*i - rot )/180*Math.PI) * R + y);
                cxt.lineTo(Math.cos((54+72*i - rot)/180*Math.PI) * r + x ,- Math.sin((54+72*i - rot )/180*Math.PI) * r + y);
            }
            cxt.closePath();
            cxt.lineWidth = borderWidth;
            cxt.strokeStyle = borderStyle;
            cxt.fillStyle = fillStyle;
            cxt.fill();
            cxt.stroke();
        }
        var c = document.getElementById('canvas1');
        if (c.getContext) {
            var cxt = c.getContext("2d");
            drawStar(cxt,80,200,200,200,0,3,'red','#E4EF00');
        }
    </script>
</body>
</html>

【题目5】下面关于cookie和H5web存储的说法中，正确的是（多选）

A. cookie数据存储在服务器，H5web数据存储在本地
B. H5web存储可存储的数据量大于cookie允许存储的数据量
C. localStorage 对象存储的数据没有时间限制
D.关闭浏览器会话之后，cookie数据将会·消失

答： B, C

【题目6】以下代码中(关于H5拖拽)，ev.preventDefault()的作用是？
答：阻止默认事件行为。

《HTML5 简介 & HTML5 新特性》 - 图3