HTML5 学习笔记

这个笔记只是我复习HTML5的时候遇到不懂的而且价值的知识做一个记录，仅对个人有用

这个是form下的边框包裹

        <form>
            <fieldset>
                <legend>你是我的小苹果</legend>
                <input type="email" />
            </fieldset>
        </form>

<datalist>

<datalist> 标签规定了 <input> 元素可能的选项列表。

<datalist> 标签被用来在为 <input> 元素提供"自动完成"的特性。用户能看到一个下拉列表，里边的选项是预先定义好的，将作为用户的输入数据。

<input list="browsers">
 
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

调用vidio播放视频

<video width="320" height="240" controls="">
          <source src="vidio/movie.mp4" type="video/mp4">
          你的浏览器不支持 video 标签。
</video>

<audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
</audio>

下载进度条

<progress value="22" max="100"></progress>

section

<section>
  <h1>WWF</h1>
  <p>The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.</p>
</section>

<section>
  <h1>WWF's Panda symbol</h1>
  <p>The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.</p>
</section>




WWF

The World Wide Fund for Nature (WWF) is an international organization working on issues regarding the conservation, research and restoration of the environment, formerly named the World Wildlife Fund. WWF was founded in 1961.

WWF's Panda symbol

The Panda has become the symbol of WWF. The well-known panda logo of WWF originated from a panda named Chi Chi that was transferred from the Beijing Zoo to the London Zoo in the same year of the establishment of WWF.

画布canvas

　　　　canvas标签，可以使用js对其进行设置，可以线条，矩形，圆形，文字以及图像。注意与SVG区分。

<script type="text/javascript">
            $(function  () {
                //找到对象，并创建context 对象
                var obj= document.getElementById("canid").getContext("2d");
                //填充风格
                obj.fillStyle="#CC0000";
                // x:x轴距离 y：y轴距离 w：宽度 h：高度
//                obj.fillRect(10,20,100,100);
                // 划线定义起点
                obj.moveTo(0,0);
                // 划线定义终点
                obj.lineTo(300,200);
                //可以画折线条
//                obj.lineTo(150,60);
                //划线必须调用stroke方法
                obj.stroke();
//                obj.moveTo(300,0);
//                obj.stroke();
                //画圆
                //在一个画布中开始子路径的一个新的集合。默认起点为（0，0）
//                obj.beginPath();
//                obj.arc(150,100,60,0,Math.PI*2,true);
//                obj.closePath();
//                obj.fill();
                //文本
                obj.font="30px Arial";
                obj.fillText("China number one",10,100)

            })
        </script>
<body>
        <canvas id="canid" width="300" height="200"></canvas>
</body>

在客户端存储数据

　　　　localStorage.name=value;

　　　　sessionStorage .name=value;

　　　　不管是 localStorage，还是 sessionStorage，可使用的API都相同，常用的有如下几个（以localStorage为例）：

　　　　　　保存数据：localStorage.setItem(key,value);

　　　　　　读取数据：localStorage.getItem(key);

　　　　　　删除单个数据：localStorage.removeItem(key);

　　　　　　删除所有数据：localStorage.clear();

　　　　　　得到某个索引的key：localStorage.key(index);

　　　　注意：这两个都不能存储js对象，只能存储字符串，所以js对象可以转换为JSON字符串形式，调用： var objStr= JSON.stringify(obj);）

　　　　　　　　取出来的时候也可以调用： var site = JSON.parse(str);