HTML5是超文本标记语言的第五次重大修改，2014年10月29日标准规范制定完成.
*HTML5语法
DOCTYPE及字符编码
<!doctype html>
<meta charset="UTF-8" />
标签结尾
在XHTML中没个标签都必需结束，在HTML5中对于一些标签不再是必要的
li dt dd p rt rp optgroup option colgroup head tbody tfoot tr td th
自结束的标签最后的 / 也不再必要
img input br hr 等
具有布尔值(boolean)的属性
对于具有boolean值的属性，例如disable和readonly等只写属性不写属性值时值为true
<input type="checkbox" checked >
<input type="checkbox" checked="checked" >
<input type="checkbox" checked="" >
省略属性值的引号
属性值可以用单引号或者双引号，在属性值不包括<、>、=、'、"时可以忽略引号:如
<input type=text >
标签名大小写都可以,但是尽量大写
*新增及删除标签
| 结构标签(重要) | 用来搭建页面结构 不再像以前一样全是div布局 |
|---|---|
| <section> | 该元素用来表示网页中不同的分区版块--w3c规定section用来划分区域但不能用来布局 div布局 |
| <article> | 定义文章区域，强调完整、独立，可以更有利于搜索引擎识别网页的内容以及判断相关性 |
| <aside> | 定义页面内容之外的内容，在左侧或右侧边栏 |
| <header> | 定义了页面或内容区域的头部信息，例如：放置页面的站点名称以及LOGO和导航栏等，内容区域的标题、作者、发布日期等 |
| <hgroup> | 用于对页面或区段（section）的标题进行组合，例如：有主标题和副标题，可以使用<hgroup>标签包含起来 |
| <footer> | 定义了页面或内容区域的底部信息，例如：放置页面的版权信息、备案信息、关于我们、友情链接等，内容区域的作者、发布日期、版权声明、分享等 |
| <nav> | 定义导航栏，例如：侧边导航栏、页内导航、分页导航、传统导航栏等 |
| <figure> | 表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。 |
| 表单标签 | 具有验证和其他好玩的功能 |
|---|---|
| 必须输入email | |
| url | 必须输入url地址 |
| number | 必须输入数值 |
| range | 必须输入一定范围内数值 |
| Date Pickers（日期选择器） | 拥有多个可供选取日期和时间的新输入类型： |
| date | 选取日、月、年 |
| month | 选取月、年 |
| week | 选取周和年 |
| time | 选取时间（小时和分钟） |
| datetime | 选取时间、日、月、年（UTC 时间） |
| datetime-local | 选取时间、日、月、年（本地时间） |
| search | 用于搜索域，域显示为常规的文本域。 |
| color | 提供了一个颜色选取器来选取颜色。 |
媒体标签
video元素 定义视频。例：
<video src="movie.ogg" controls="controls">video元素</video>
<!--HTML4中写法： -->
<object type="video/ogg" data="move.ogv">
<param name ="src" value="movie.ogv">
</object>
audio元素 定义音频。例：
<audio src ="someaudio.wav">audio元素</audio>
<!--html4中写法： -->
<object tyle="application/ogg" data="someaudio.wav">
<param name ="src" value= "someaudio.wav">
</object>
embed元素
用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例：
<embed src="flash.swf" />
<!--HTML4中代码示例-->
<object data="flash.swf" type="application/x-shockwave-flash"><object>
其他功能标签
canvas元素
定义图形，比如图表和其他图像。<canvas> 元素只是图形容器（画布），必须使用脚本来绘制图形。
<canvas id="myCanvas"></canvas>
<script type="text/javascript">
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
</script>
source标签
标签为媒介元素（比如 <video> 和 <audio>）定义媒介资源。
menu标签
定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别，menu专门用于表单控件。
<menu>
<li><input type="checkbox" />Red</li>
<li><input type="checkbox" />blue</li>
</menu>
output标签
定义不同类型的输出，比如脚本的输出。
<form action="form_action.asp" method="get" name="sumform">
<output name="sum"></output>
</form>
mark元素
主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。典型应用搜索结果中高亮显示搜素关键字。
HTML5<mark>高亮</mark>HTML4 <span>普通</span>
progress元素
表示运行中的进程，可以使用progress元素显示JavaScript中耗时时间函数的进程。等待中……、请稍后等。<progress></progress>。
time元素
表示日期或时间，也可以两者同时。
ruby元素
定义 ruby 注释（中文注音或字符）。
与 <ruby> 以及 <rt> 标签一同使用。ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
<ruby>
漢 <rt><rp>(</rp>ㄏㄢˋ<rp>)</rp></rt>
</ruby>
rt元素
定义字符（中文注音或字符）的解释或发音。
rp元素
在 ruby 注释中使用，以定义不支持 ruby 元素的浏览器所显示的内容。
wbr元素
表示软换行。与br元素的区别：br元素表示此处必须换行；wbr表示浏览器窗口或父级元素足弓宽时（没必要换行时），不换行，而宽度不够时主动在此处换行。
删除标签
1.可以使用css代替的标签
basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的，HTML5中提倡把画面展示性功能放在css中统一编辑。
2.不再使用frame
frameset、frame、noframes。HTML5中不支持frame框架，只支持iframe框架，或者用服务器方创建的由多个页面组成的符合页面的形式，删除以上这三个标签。
3.只有个别浏览器支持的标签
applet、bgsound、blink、marquee等标签。
4.其他不常用的标签
废除rb，使用ruby替代。
废除acronym使用abbr替代。
废除dir使用ul替代。
*新增的属性
表单相关的属性
| 表单属性 | 属性说明 |
|---|---|
| placeholder | 显示提示文字 |
| autocomplete | 自动完成功能on or off |
| autofocus | 自动获取焦点 |
| list特性和datalist | 绑定input和datalist |
| required | 提交之前必须填写 |
| pattern | 规定输入内容的验证表正则达式 |
| form | 规定input元素属于哪个form表单 |
| disabled | 禁用一个input属性 |
| readonly | 规定输入字段为只读 |
| multiple | 允许file选择多个文件 |
HTML5拖放API
单词翻译：drag:拖曳 drop落下
| drag事件 | 事件说明 |
|---|---|
| dragstart | 网页元素开始拖动时触发。 |
| drag | 被拖动的元素在拖动过程中持续触发。 |
| dragenter | 被拖动的元素进入目标元素时触发，应在目标元素监听该事件。 |
| dragleave | 被拖动的元素离开目标元素时触发，应在目标元素监听该事件。 |
| dragover | 被拖动元素停留在目标元素之中时持续触发，应在目标元素监听该事件。 |
| drop | 被拖动元素或从文件系统选中的文件，拖放落下时触发。 |
| drogend | 网页元素拖动结束时触发 |
demo1
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
border: 1px solid #666;
float: left;
}
</style>
</head>
<body>
<div class="div1">
<!--1,为了使元素可拖动，把 draggable 属性设置为 true-->
<img src="../img/wuqing.jpg" alt="" draggable="true" id="dragImg">
</div>
<div class="div2" ></div>
<script>
var img = document.querySelector("img");
var div1 = document.querySelector(".div1");
var div2 = document.querySelector(".div2");
//2,拖动什么ondragstart 和 setData()
img.ondragstart = function(e){
e.dataTransfer.setData("id",e.target.id);
}
//3,拖到何处
div2.ondragover=function(e){
//必须阻止对元素的默认处理方式。这要通过调用 ondragover 事件的 event.preventDefault() 方法：
e.preventDefault();
}
//4,进行放置
div2.ondrop=function(e){
var _id = e.dataTransfer.getData("id");
var img = document.querySelector("#"+_id);
div2.appendChild(img);
}
/*把图片移回来 同理
div1.ondragover=function(e){
e.preventDefault();
}
div1.ondrop=function(e){
var _id = e.dataTransfer.getData("id");
var img = document.querySelector("#"+_id);
div1.appendChild(img);
}*/
</script>
</body>
</html>
HTML5文件API
- FileList对象
- Blob对象
- File对象
- FileReader接口：
（1）readAsBinaryString(Blob blob);
（2） readAsText(Blob blob, optional DOMString encoding);
（3）readAsDataURL(Blob blob);
demo2
从外部拖曳图片到网站
<div id="box">
</div>
<script>
var box = document.querySelector("#box");
box.ondragover = function(e){
e.preventDefault();
}
//box 作为目标元素 当外部文件拖入到目标元素内并松开鼠标时 box.ondrop将会被执行
box.ondrop = function(e){
e.preventDefault();
var file = e.dataTransfer.files[0];
//创建一个FileReader对象
var fileReader = new FileReader();
fileReader.onload = function(e){
// 在 fileReader.onload里 异步获取外部拖入的文件数据
var img = new Image();
img.src = fileReader.result;
box.appendChild(img);
}
// 以base64的url格式读取数据 以供img使用
fileReader.readAsDataURL(file);
}
</script>
网友评论