nav元素的使用场合
aside元素的使用场合
aside元素主要有以下两种使用方法：
1、被包含在article中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的参考资料、名词解释等
2、在article元素之外使用，作为页面或站点全局的附属信息部分
html5细节概述
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>
HTML5中input元素的种类
FileReader接口
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>
拖放API
<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>
时间： 2024-10-25 00:24:22