HTML5 学习札记

来源：互联网发布：女网络歌手编辑：程序博客网时间：2024/06/03 17:16

一、input标签自动完成功能

有的项目会要求实现自动完成或者输入提示功能，在HTML5的支持下将变得简单

<input type="text" autocomplete="on" name="demoAutoComplete" list="autoNames" /><datalist id="autoNames">       <option  value="实验楼" ></option>       <option  value="HTML5" ></option>       <option  value="input标签" ></option></datalist>

二、`autofocus`属性

demo:<input type="text" autofocus="autofocus"/>此属性可以设置当前页面中input标签加载完毕后获得焦点。

<input type="text" autofocus="autofocus" required pattern="\d+"/>

三、FileReader对象的三个读取文件数据方法

readAsBinaryString(Blob blob) 传入一个Blob对象，然后读取数据的结果作为二进制字符串的形式放到FileReader的result属性中。
readAsText(Blob blob, optional DOMString encoding) 第一个参数传入Blob对象，然后第二个参数传入编码格式，异步将数据读取成功后放到result属性中，读取的内容是普通的文本字符串的形式。
readAsDataURL(Blob blob) 传入一个Blob对象，读取内容可以做为URL属性，也就是说可以将一个图片的结果指向给一个img的src属性。

实例二：读取上传文件内容，然后将文件内容直接读取到浏览器上（注：需要引入jQuery）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <script src="Scripts/jquery-1.5.1.js" type="text/javascript"></script>    <script type="text/javascript">        if(typeof FileReader == "undified") {            alert("您老的浏览器不行了！");        }        function showDataByURL() {            var resultFile = document.getElementById("fileDemo").files[0];            if (resultFile) {                var reader = new FileReader();                reader.readAsDataURL(resultFile);                reader.onload = function (e) {                    var urlData = this.result;                    document.getElementById("result").innerHTML += "<img src='" + urlData + "' alt='" + resultFile.name + "' />";                };             }        }         function showDataByBinaryString() {            var resultFile = document.getElementById("fileDemo").files[0];            if (resultFile) {                var reader = new FileReader();                //异步方式，不会影响主线程                reader.readAsBinaryString(resultFile);                reader.onload = function(e) {                    var urlData = this.result;                    document.getElementById("result").innerHTML += urlData;                };            }        }        function showDataByText() {            var resultFile = document.getElementById("fileDemo").files[0];            if (resultFile) {                var reader = new FileReader();                reader.readAsText(resultFile,'gb2312');                reader.onload = function (e) {                    var urlData = this.result;                    document.getElementById("result").innerHTML += urlData;                };            }        }    </script></head><body>    <input type="file" name="fileDemo" id="fileDemo" multep/>    <input type="button" value="readAsDataURL" id="readAsDataURL" onclick="showDataByURL();"/>    <input type="button" value="readAsBinaryString"  id="readAsBinaryString" onclick="showDataByBinaryString();"/>    <input type="button" value="readAsText"  id="readAsText" onclick="showDataByText();"/>    <div id="result">    </div></body></html>

四、Canvas绘图

要使用Canvas来绘制图形必须在页面中添加Canvas的标签

<canvas id="demoCanvas" width="500" height="500"><p>  请使用支持HTML5的浏览器查看本实例</p></canvas>

只有上面的标签，只能是创建好了一个画布，其中width和height属性就是设置画布的大小。Id属性也是必须的，后面要用Id来拿到当前的Canvas的Dom对象。通过此Canvase的Dom对象就可以获取他的上下文（Context）了，Canvas绘制图形都是靠着Canvas对象的上下文对象
```
<script type="text/javascript">//第一步：获取canvas元素var canvasDom = document.getElementById("demoCanvas");//第二步：获取上下文var context = canvasDom.getContext('2d');</script>
```
Context上下文默认两种绘制方式：
第一种：绘制线（stroke）
第二种：填充（fill）
用于绘制立体透明矩形、圆、线条、文本、图形等

阅读全文

0 0

HTML5 学习札记

一、input标签自动完成功能

二、autofocus属性

二、`autofocus`属性