HTML提升
语义标签
常见语义标签
- header 头部
- nav 导航
- article 主体内容
- aside 侧边栏
- section 片段 区块
- footer 底部
语义化标签兼容性
- 语义化标签在IE9以下不支持
- 使用html5shiv插件可以解决，使用方法如下
<!-- 条件注释 lt gt lte gte 9 指的是版本 -->
<!--[if lt IE 9 ]>
<script src="html5shiv.min.js"></script>
<![endif]-->
表单类型
常用类型
- search
- url
- number
- date
表单属性
常用表单属性
-
form
- autocomplete 设置整个表单是否开启自动完成 on|off
- novalidate 设置H5的表单校验是否工作 true 不工作 不加该属性代表校验
-
input:
- autocomplete 单独设置每个文本框的自动完成
- autofocus 设置当前文本域页面加载完了过后自动得到焦点
- placeholder 文本框占位符
- required 限制当前input为必须的
- form 属性是让表单外的表单元素也可以跟随表单一起提交
JAVASCRIPT提升
DOM扩展
获取元素
document.getElementsByClassName ('class');
//通过类名获取元素，以伪数组形式存在。
document.querySelector('selector');
//通过CSS选择器获取元素，符合匹配条件的第1个元素。
document.querySelectorAll('selector');
//通过CSS选择器获取元素，以伪数组形式存在。
类名操作
Node.classList.add('class');
//添加class
Node.classList.remove('class');
//移除class
Node.classList.toggle('class');
//切换class，有则移除，无则添加
Node.classList.contains('class');
//检测是否存在class
自定义属性
在HTML5中我们可以自定义属性，其格式如下data-*=""
<div id="demo" data-my-name="itren" data-age="10">
<script>
/*
Node.dataset是以对象形式存在的，当我们为同一个DOM节点指定了多个自定义属性时，
Node.dataset则存储了所有的自定义属性的值。
*/
var demo = document.querySelector('demo');
//获取
//注：当我们如下格式设置时，则需要以驼峰格式才能正确获取
var name = demo.dataset['myName'];
var age = demo.dataset['age'];
//设置
demo.dataset['name'] = 'web developer';
<script/>
综合案例TAB栏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>tab-切换（选项卡）</title>
<style>
.tab {
width: 400px;
height: 400px;
border: 1px solid #ccc;
}
.tab ul {
list-style: none;
margin: 0;
padding: 0;
height: 50px;
}
.tab ul li {
float: left;
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
background: green;
color: #fff;
font-size: 16px;
cursor: pointer;
}
.tab ul li.now {
background: red;
}
.tab > div {
padding: 10px;
display: none;
}
.tab > div.active {
display: block;
}
</style>
</head>
<body>
<div class="tab">
<ul>
<li data-id="hot" class="now">热点新闻</li>
<li data-id="follow">关注新闻</li>
<li data-id="china">国内新闻</li>
<li data-id="nba">NBA新闻</li>
</ul>
<div id="follow">
关注新闻关注新闻关注新闻关注新闻关注新闻关注新闻
关注新闻关注新闻关注新闻关注新闻关注新闻关注新闻
关注新闻关注新闻关注新闻关注新闻关注新闻关注新闻
</div>
<div id="hot" class="active">
热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻
热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻热点新闻
</div>
<div id="china">
国内新闻国内新闻国内新闻国内新闻国内新闻
国内新闻国内新闻国内新闻国内新闻国内新闻
</div>
<div id="nba">
NBA新闻NBA新闻NBA新闻NBA新闻NBA新闻
NBA新闻NBA新闻NBA新闻NBA新闻NBA新闻
</div>
</div>
<script>
window.onload = function (ev) {
/*1. 点击菜单 更换当前样式*/
/*2. 点击菜单 更换当前显示的内容*/
document.querySelector('ul').onclick = function (e) {
/*事件触发源*/
var currentLi = e.target;
console.log(e.target.tagName);
if(e.target.tagName == 'LI'){
/*判断是否已经是选中的 如果是执行停止*/
if(currentLi.classList.contains('now')) return;
/*去掉之前的 给当前的加上 now*/
var oldLi = document.querySelector('li.now');
oldLi.classList.remove('now');
currentLi.classList.add('now');
/*隐藏之前显示的内容*/
var oldContentId = oldLi.dataset.id;
document.querySelector('#'+oldContentId).classList.remove('active');
/*显示的当前的内容*/
var currentContentId = currentLi.dataset.id;
document.querySelector('#'+currentContentId).classList.add('active');
}
}
}
</script>
</body>
</html>
课程总结
- 能够使用过渡转换动画实现宣传页一类型的需求。
- 在使用HTML5语义标签，表单类型，表单属性的时候，遇见新的不要太惊讶，因为它可能做了更新。
- HTML5新增API，提高在应用开发过程中的效率
扩展内容
拖拽上传
拖拽事件
- 拖拽元素
- ondrag 应用于拖拽元素，整个拖拽过程都会调用
- ondragstart应用于拖拽元素，当拖拽开始时调用
- ondragleave应用于拖拽元素，当鼠标离开拖拽元素时调用
- ondragend应用于拖拽元素，当拖拽结束时调用
- 目标元素
- ondragenter应用于目标元素，当拖拽元素进入时调用
- ondragover应用于目标元素，当停留在目标元素上时调用
- ondrop应用于目标元素，当在目标元素上松开鼠标时调用
- ondragleave应用于目标元素，当鼠标离开目标元素时调用
上传代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px dashed #ccc;
line-height: 200px;
text-align: center;
color: #ccc;
}
</style>
</head>
<body>
<div class="box">拖放图片到该区域</div>
<script>
var box = document.querySelector('.box');
box.addEventListener('dragenter', function (e) {
/*禁用浏览器默认预览文件或下载文件操作*/
e.preventDefault();
});
box.addEventListener('dragover', function (e) {
/*禁用浏览器默认预览文件或下载文件操作*/
e.preventDefault();
});
box.addEventListener('drop', function (e) {
e.preventDefault();
/*第一个文件数据*/
var file = e.dataTransfer.files[0];
//console.log(file);
/*把数据设置到表单数据中*/
var formData = new FormData();
formData.append('dragImage', file);
/*通过ajax异步提交*/
var xhr = new XMLHttpRequest();
xhr.open('post','upload.php');
xhr.send(formData);
xhr.onreadystatechange = function () {
if(xhr.readyState == 4 && xhr.status == 200){
/*上传成功*/
console.log('ok');
var img = new Image();
img.src = xhr.responseText;
document.querySelector('body').appendChild(img);
}
}
});
</script>
</body>
</html>
网友评论