HTML5

本文详细介绍了HTML5新增的多种标签,包括<section>、<article>、<nav>、<header>、<footer>等,解释了它们的用途和如何正确使用。同时,文章还深入探讨了<video>和<audio>标签的多媒体应用,以及<time>、<progress>和<canvas>等标签的特性和应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<section>把相关的内容分组在一起
感觉不相关的内容组织在一起用<div>
增加一个元素以应用样式用<div>

<aside>放在主内容旁边的,边栏或引用
<artical>新闻报道、博客帖子
<nav>
<header>
<footer>
可以在<artical><section><aside>中使用<header><footer>

<video>
<audio>音频

<progress>显示任务的完成进度
<canvas>javascript绘制的图像和动画

HTML5元素IE8没有很好的支持,移动浏览器都支持
方便浏览器、搜索引擎、屏幕阅读器、web开发人员


<time>

<time datetime="2012-02-02">2/2/2012</time>

如果元素内容没有采用官方internet日期时间格式,必须由datetime属性
官方格式:2012-02-02 05:00 可以只有年份或只有时间


导航

<nav>
	<ul>
		<li><a href="">1</a></li>
		<li><a href="">2</a></li>
	</ul>
</nav>
nav ul
{
	list-style-type:none;
}
nav ul li
{
	display:inline;
}
nav ul li a:link, nav ul li a:visited
{
	border-bottom:none;
}

<video>
safari IE9+ .mp4
chrome firefox opera .webm
chrome firefox opera .ogv

<video controls autoplay loop width="512" height="288" src="" poster="1.png">
</video>

设置video宽高,视频会缩放,但会保持原来的宽高比,上下或左右多余的空间会加上黑边
loop:自动循环播放视频
autoplay:视频加载后就自动播放

<video controls width="512" height="288">
	<source src="video/1.mp4" type='video/mp4'>
	<source src="video/1.webm" type='video/webm; codecs="vp8,vorbis"'>
	<source src="video/1.ogv" type='video/ogg; codecs="theora, vorbis"'>
	<p>你的浏览器不支持video元素</p>
	<object></object>
</video>

浏览器选择它支持的第一种格式,如果都不支持,会显示<p>中的内容
type中的内容帮助浏览器确定是否支持该种类型,type可以省略codecs参数(视频解码器、音频解码器),只保留MIME类型
用<object>元素插入flash视频

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值