html5 总结-新增重要标签及属性

综述

 这段时间，一直在温故前端的东西，发现了很多不足（更应该说不会吧）。前端的学习方法，更多的是记忆和经验。html5相对于html4而言。主要有以下几点改进。

1. 语义化标签增多,结构更清晰
2. 方便性、功能性增强，对程序员更友好
3. 很多东西，还没有得到浏览器的完全支持，注意兼容性

新增的重要标签

audio

处理音频，因为有些浏览器不支持某些音频格式。需要转化或者准备多个
详细介绍：w3c

<audio controls>你的浏览器不支持audio
    <source src="test.mp3" type="audio/mp3">
    <source src="test.ogg" type="audio/ogg">
</audio>

video

播放视频，注意兼容性。转化工具：Miro Video Converter

<video controls width="640px" height="320px" poster="test.png">你的浏览器不支持video
    <source src="test.mp4" type="video/mp4">
    <source src="test.webm" type="video/webm">
</video>

js处理视频及相关属性

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>video</title>
    <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:29</p>
    </footer>
</article>

section

翻译为“部分”，比如页眉页脚或者文章中的区块(觉得还是div方便吧，但是这个和上面的都是为了语义化好点)

• 当没有标题时，不要使用section。
• 当article,aside,nav元素更适合时，不要使用section元素。
• 不要讲其当做设置样式的容器，那是div做的

<section>
    <header>
        <h1>呆萌的来历</h1>
    </header>
    <p>呆萌来源于一个同学的名字，他就叫呆萌。。。</p>
    <footer>
        <p>发表日期:2015:3:29</p>
    </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>      
        <!-- 因为这个aside元素被放置在一个article元素内部，
        所以分析器将这个aside元素的内容理解成是和article元素的内容相关联的。 -->      
        <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>