标签：
aside元素主要有以下两种使用方法：
1、被包含在article中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等
2、在article元素之外使用，作为页面或站点全局的附属信息部分
1、一个网页内并未限制header元素的个数，可以拥有多个，也可以为每个内容区块加一个header元素（footer同理）
2、autofocus：一个页面上只能有一个控件具有该属性
3、pattern属性：要求输入内容符合一定的格式
<input pattern="[0-9][A-Z]{3}" name="part" placeholder="输入内容：一个数字与三个大写字母" />
4、form元素与input元素都具有一个checkValidity方法，调用该方法可以显式的进行有有效性验证
5、两种方法取消表单验证：1）利用form元素的novalidate属性2）利用input元素的input元素或submit元素的formnovalidate属性，因为利用input元素的formnovalidate属性可以让表单验证对单个input失效，而如果用submit元素的formnovalidate属性则整个表单都失效
6、自定义错误可利用input类型元素的setCustomValidity方法
7、mark元素的两个应用场景：1）搜索结果中高亮显示关键字2）引用原文的时候，将原文作者没有特别重要标示出来的内容标示出来
8、progress元素的使用示例
<h2>progress元素的使用示例</h2> <p>完成百分比：<progress id="p" max="100"> <span>0</span>%</progress></p> <input type="button" value="请点击" onclick="btnClick()" /> <script type="text/javascript"> function btnClick() { var progressBar = document.getElementById(‘p‘); progressBar.getElementsByTagName(‘span‘)[0].textContent = ‘0‘; for (var i = 0; i < 100; i++) { updateProgress(i); } } function updateProgress(newValue) { var progressBar = document.getElementById(‘p‘); progressBar.value = newValue; progressBar.getElementsByTagName(‘span‘)[0].textContent = newValue; } </script>
9、html5中FileList对象与file对象简单示例（下例中accept属性表示可以上传的文件格式）
<input type="file" id="file" multiple size="80" accept="image/*"/> <input type="button" onclick="showFileName();" value="文件上传" /> <script type="text/javascript"> function showFileName() { var file;//= document.getElementById(‘file‘); for (var i = 0; i < document.getElementById(‘file‘).files.length; i++) { file = document.getElementById(‘file‘).files[i]; console.log(file.name);//文件名 console.log(file.lastModifiedDate);//文件最后一次修改时间 console.log(file.size);//文件字节长度 console.log(file.type);//文件类型 对于图像类型的文件，Blob对象的type属性是以image/开头 } } </script>
FileReader接口的方法API如下图所示：
下面用一个示例来说明：
<script type="text/javascript"> var result = document.getElementById(‘result‘); var file = document.getElementById(‘file‘); if (typeof FileReader == ‘undefined‘) { result.innerHTML = ‘您的浏览器不支持FileReader‘ file.setAttribute(‘disabled‘, ‘disabled‘); } function readAsDataURL() { var file = document.getElementById(‘file‘).files[0]; if (!/image\/\w+/.test(file.type)) { alert(‘请确保文件为图像类型‘); return false; } var reader = new FileReader(); reader.readAsDataURL(file); reader.onload = function (e) { var result = document.getElementById(‘result‘); result.innerHTML = ‘<img src="‘ + this.result + ‘" />‘; } } function readAsBinaryString() { var file = document.getElementById(‘file‘).files[0]; var reader = new FileReader(); reader.readAsBinaryString(file); reader.onload = function (e) { var result = document.getElementById(‘result‘); result.innerHTML = this.result; } } function readAsText() { var file = document.getElementById(‘file‘).files[0]; var reader = new FileReader(); reader.readAsText(file); reader.onload = function (e) { var result = document.getElementById(‘result‘); result.innerHTML = this.result; } } </script> <p> <label>请选择一个文件：</label> <input type="file" id="file" /> <input type="button" value="读取图像" onclick="readAsDataURL()" /> <input type="button" value="读取二进制数据" onclick="readAsBinaryString()" /> <input type="button" value="读取文件文件" onclick="readAsText()" /> </p> <div id="result"></div>
FileReader接口的事件API如下图所示：
<script type="text/javascript"> var result = document.getElementById(‘result‘); var file = document.getElementById(‘file‘); if (typeof FileReader == ‘undefined‘) { result.innerHTML = ‘您的浏览器不支持FileReader‘ file.setAttribute(‘disabled‘, ‘disabled‘); } function readFile() { var file = document.getElementById(‘file‘).files[0]; if (!/image\/\w+/.test(file.type)) { alert(‘请确保文件为图像类型‘); return false; } var reader = new FileReader(); reader.onload = function (e) { console.log(‘onload‘); var result = document.getElementById(‘result‘); result.innerHTML = ‘<img src="‘ + this.result + ‘" />‘; } reader.onprogress = function () { console.log(‘progress‘); } reader.onabort = function () { console.log(‘abort‘); } reader.onerror = function () { console.log(‘loadstart‘); } reader.onloadstart = function () { console.log(‘loadstart‘); } reader.onloadend = function () { console.log(‘loadend‘); } reader.readAsDataURL(file); } </script> <p> <label>请选择一个图像文件：</label> <input type="file" id="file" /> <input type="button" value="显示图像" onclick="readFile()" /> </p> <div id="result"></div>
<script type="text/javascript"> function init() { var source = document.getElementById(‘dragme‘); var dest = document.getElementById(‘text‘); var dragIcon = document.createElement(‘img‘); dragIcon.src = ‘http://files.cnblogs.com/files/liyunhua/ctrip.gif‘; source.addEventListener(‘dragstart‘, function (ev) { var dt = ev.dataTransfer;//向dataTransfer对象追加数据 dt.effectAllowed = ‘copy‘;//设置effectAllowed属性 //dt.setDragImage(dragIcon, -10, 10); //设定自定义图标 dt.setData(‘text/plain‘, ‘你好‘); }, false); dest.addEventListener(‘dragover‘, function (ev) { var dt = ev.dataTransfer; dt.dropEffect = ‘copy‘;//设定dropEffect属性 ev.preventDefault(); }, false); /*因为默认情况下，拖放的目标元素是不允许接受元素的，为了把元素拖放到其中，必须把默认处理给关闭掉*/ dest.addEventListener(‘dragend‘, function (ev) { ev.preventDefault();//不执行默认行为（拒绝被拖放） }, false); /*必须在目标元素的drop事件中关闭默认处理，否则目标地元素不能接受被拖放的元素*/ dest.addEventListener(‘drop‘, function (ev) { var dt = ev.dataTransfer;//从dataTransfer对象获得数据 var text = dt.getData(‘text/plain‘); dest.textContent += text; ev.preventDefault();//不执行默认行为（拒绝被拖放） ev.stopPropagation();//停止事件传播 }, false); } //还必须设定整个页面为不执行默认处理（拒绝被播放） document.ondragover = function (e) { e.preventDefault(); } document.ondrop = function (e) { e.preventDefault(); } </script> <body onload="init()"> <div id="dragme" draggable="true" style="width: 200px; border: 1px solid gray;">请拖放 </div> <div id="text" style="width: 300px; height: 300px; border: 1px solid gray;"></div> </body>
标签：
原文地址：http://www.cnblogs.com/liyunhua/p/4590411.html
