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

来源：互联网发布：中国统计局数据库编辑：程序博客网时间：2024/06/04 19:18

综述

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

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

新增的重要标签

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>

0 0