您的位置：首页 > Web前端 > HTML5

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

2015-03-30 10:04 721 查看

综述

这段时间，一直在温故前端的东西，发现了很多不足（更应该说不会吧）。前端的学习方法，更多的是记忆和经验。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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航