综述
这段时间,一直在温故前端的东西,发现了很多不足(更应该说不会吧)。前端的学习方法,更多的是记忆和经验。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>
<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等元素中。
<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:用来语义化显示时间
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>