html5 总结-新增重要标签及属性
综述
这段时间，一直在温故前端的东西，发现了很多不足（更应该说不会吧）。前端的学习方法，更多的是记忆和经验。html5相对于html4而言。主要有以下几点改进。
- 语义化标签增多,结构更清晰
- 方便性、功能性增强，对程序员更友好
- 很多东西，还没有得到浏览器的完全支持，注意兼容性
新增的重要标签
audio
处理音频，因为有些浏览器不支持某些音频格式。需要转化或者准备多个
详细介绍：w3c
video
播放视频，注意兼容性。转化工具：Miro Video Converter
js处理视频及相关属性
<html>
<head>
<meta charset="utf-8">
<title>videotitle>
<script type="text/javascript">
var video;
function init(){
video = document.getElementById('video1');
//监听结束事件，第三个参数为在捕获过程中执行
video.addEventListener("ended", function(){
alert("播放结束");
},true);
//监听错误事件，第三个参数为在冒泡过程中执行
video.addEventListener("error",function(){
switch (video.error.code){
default:alert("发生未知错误");break;
}
},false);
}
function play(){
video.play();
}
function pause(){
video.pause();
}
script>
head>
<body onload="init()">
<video controls width="640px" height="320px" poster="test.png" id="video1">你的浏览器不支持video
<source src="test.mp4" type="video/mp4">
<source src="test.webm" type="video/webm">
video>
<p>
<button onclick="play()">播放button>
<button onclick="pause()">暂停button>
p>
body>
html>article
代表的是一块独立的内容(模块)，例如一篇文章，帖子。类似于html4中的div元素，是div的细分。
<article>
<header>
<h1>呆萌的来历h1>
header>
<p>呆萌来源于一个同学的名字，他就叫呆萌。。。p>
<footer>
<p>发表日期:2015:3:29p>
footer>
article>section
翻译为“部分”，比如页眉页脚或者文章中的区块(觉得还是div方便吧，但是这个和上面的都是为了语义化好点)
- 当没有标题时，不要使用section。
- 当article,aside,nav元素更适合时，不要使用section元素。
- 不要讲其当做设置样式的容器，那是div做的
<section>
<header>
<h1>呆萌的来历h1>
header>
<p>呆萌来源于一个同学的名字，他就叫呆萌。。。p>
<footer>
<p>发表日期:2015:3:29p>
footer>
section>nav
导航栏的语义化标签，类似于div
<nav>
<ul>
<li>联系信息li>
<li>个人经验li>
<li>求职意向li>
ul>
nav>aside：旁白。用来表示文章或者页面的附属信息
<header>
<h1>F#入门h1>
header>
<article>
<h1>第四节 词法闭包h1>
<p>lambda表达式可以创建词法闭包...(文章正文）p>
<aside>
<h1>名词解释h1>
<dl>
<dt>F#dt>
<dd>F#为.Net2010中引入的新型函数型编程语言dd>
dl>
<dl>
<dt>词法闭包dt>
<dd>词法闭包是指，将创建lambda表达式时的环境保存起来...(详细解释）dd>
dl>
aside>
article>header：区块的头部部分，一个网页内可以拥有多个header
<header>
<h1>网页标题h1>
header>
<article>
<header>
<h1>文章标题h1>
header>
<p>文章正文p>
article>footer：区块的底部部分，通常包括脚注信息.类似于header，可以放在section，article，div，body等元素中。
hgroup：将标题进行分组，适用于含有多个h系列标签
<article>
<header>
<hgroup>
<h1>文章主标题h1>
<h2>文章子标题h2>
hgroup>
<p><time datetime="2010-03-20">2010年10月29日time>p>
header>
<p>文章正文p>
article>
address：显示联系信息，不仅仅是地址或者邮箱
time：用来语义化显示时间
figure/figcation:实现带标题的插图
mark:高亮显示，类似于strong
新增的全局属性
contentEditable：是否可被重新编辑
hidden：是否被隐藏
spellcheck：对输入内容进行拼写和语法检查（input(type=text)）,textarea
跨浏览器支持
增加标签识别
<style>
article,asiede,audio,canvas,datalist,details,fication,figure,footer,header,hgroup,menu,nav,section,video{
display:block;
}
style>
<script type="text/javascript">
document.ctreatElement('article');
document.ctreatElement('aside');
document.ctreatElement('audio');
document.ctreatElement('abbr');
....
script>