HTML5新标签
- 格式：pdf
- 大小：72.93 KB
- 文档页数：3
HTML5的减负–旧的标记，永别了…
你是否很记得那个古老的年代，HTML3被当成一种只能在Netscape里运行的神奇的东西？
是的，那就是互联网时代的黎明初现。我们当然不会忘记那段历史，但向一些优秀的却陈
旧的东西说再见也是合乎情理的
标记定义anacronym.
这些标记基本上都没有什么用处了（也许你会觉得有几个标记和HTML5里
的新标记有些相似）。其中一些我们在早期的旧版的浏览器里使用过，但如今
已经失去其作用，而另一些标记的功能已经被CSS功能所取代了（例如设置字
体和文本样式的标记）。
关于
使用新标记替换掉
标记是HTML4里是一个重要的（现在仍是）的标记，在HTML里被广泛使用，但
是它所表达的语义太弱，在声明网页组织结构里不同的区块的任务面前它毫无
用武之地。新的HTML5标记–例如
合集下载
2023年_HTML5的Video标签的属性、方法和事件汇总
2023年HTML5的Video标签的属性、方法和事件汇总video标签的属性Media = document.getElementById("media");获取video对象src ：视频的属性poster：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度html 代码video id="media" src="sundxs/test.mp4" controls width="400px" heigt="400px"/video//audio和video都可以通过JS获取对象,JS通过id获取video和audio 的'对象Media方法和属性HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement Media.error; //null:正常Media.error.code; //1.用户终止 2.网络错误 3.解码错误 4.URL无效 //网络状态- Media.currentSrc; //返回当前资源的URL- Media.src = value; //返回或设置当前资源的URL- Media.canPlayType(type); //是否能播放某种格式的资源- workState; //0.此元素未初始化 1.正常但没有使用网络 2.正在下载数据 3.没有找到资源- Media.load(); //重新加载src指定的资源- Media.buffered; //返回已缓冲区域，TimeRanges- Media.preload; //none:不预载 metadata:预载资源信息 auto://准备状态- Media.readyState;//1:HAVE_NOTHING 2:HAVE_METADATA3.HAVE_CURRENT_DATA4.HAVE_FUTURE_DATA5.HAVE_ENOUGH_DATA- Media.seeking; //是否正在seeking//回放状态Media.currentTime = value; //当前播放的位置，赋值可改变位置Media.startTime; //一般为0，如果为流媒体或者不从0开始的资源，则不为0Media.duration; //当前资源长度流返回无限Media.paused; //是否暂停Media.defaultPlaybackRate = value;//默认的回放速度，可以设置Media.playbackRate = value;//当前播放速度，设置后马上改变Media.played; //返回已经播放的区域，TimeRanges，关于此对象见下文 Media.seekable; //返回可以seek的区域 TimeRangesMedia.ended; //是否结束Media.autoPlay; //是否自动播放Media.loop; //是否循环播放Media.play(); //播放Media.pause(); //暂停//视频控制Media.controls;//是否有默认控制条Media.volume = value; //音量Media.muted = value; //静音TimeRanges(区域)对象TimeRanges.length; //区域段数TimeRanges.start(index) //第index段区域的开始位置TimeRanges.end(index) //第index段区域的结束位置//相关事件var eventTester = function(e){Media.addEventListener(e,function(){console.log((new Date()).getTime(),e)},false);}eventTester("loadstart"); //客户端开始请求数据eventTester("progress"); //客户端正在请求数据eventTester("suspend"); //延迟下载eventTester("abort"); //客户端主动终止下载(不是因为错误引起) eventTester("loadstart"); //客户端开始请求数据eventTester("progress"); //客户端正在请求数据eventTester("suspend"); //延迟下载eventTester("abort"); //客户端主动终止下载(不是因为错误引起)， eventTester("error"); //请求数据时遇到错误eventTester("stalled"); //网速失速eventTester("play"); //play()和autoplay开始播放时触发eventTester("pause"); //pause()触发eventTester("loadedmetadata"); //成功获取资源长度eventTester("loadeddata"); //eventTester("waiting"); //等待数据，并非错误eventTester("playing"); //开始回放eventTester("canplay"); //可以播放，但中途可能因为加载而暂停 eventTester("canplaythrough"); //可以播放，歌曲全部加载完毕 eventTester("seeking"); //寻找中eventTester("seeked"); //寻找完毕eventTester("timeupdate"); //播放时间改变eventTester("ended"); //播放结束eventTester("ratechange"); //播放速率改变eventTester("durationchange"); //资源长度改变eventTester("volumechange"); //音量改变。
H5基础知识（一）
H5基础知识（⼀）⼀、概述HTML5 是html4.0 升级版结构 Html5 、样式 css3 、⾏为: API 都有所增强HTML5并不仅仅只是做为HTML标记语⾔的⼀个最新版本，更重要的是它制定了Web应⽤开发的⼀系列标准，成为第⼀个将Web做为应⽤开发平台的HTML语⾔。
HTML5定义了⼀系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联⽹应⽤，还提供了⼀些Javascript API，如地理定位、重⼒感应、硬件访问等，可以在浏览器内实现类原⽣应⽤，甚⾄结合Canvas我们可开发⽹页版游戏。
⼴义概念：HTML5代表浏览器端技术的⼀个发展阶段。
在这个阶段，浏览器呈现技术得到了⼀个飞跃发展和⼴泛⽀持，它包括：HTML5，CSS3，Javascript，API在内的⼀套技术组合。
传统的做法我们或许通过增加类名如class="header"、class="footer"，使HTML页⾯具有语义性，但是不具有通⽤性。
HTML5则是通过新增语义标签的形式来解决这个问题，例如<header></header>、<footer></footer>等，这样就可以使其具有通⽤性。
H5 经典⽹页布局:<!-- 头部 --><header><ul class="nav"></ul></header><!-- 主体部分 --><div class="main"><!-- ⽂章 --><article></article><!-- 侧边栏 --><aside></aside></div><!-- 底部 --><footer></footer>常⽤新语义标签<nav> 表⽰导航<header> 表⽰页眉<footer> 表⽰页脚<section> 表⽰区块<article> 表⽰⽂章如⽂章、评论、帖⼦、博客<aside> 表⽰侧边栏如⽂章的侧栏<figure> 表⽰媒介内容分组与 ul > li 做个⽐较<mark> 表⽰标记 (带⽤“UI”，不怎么⽤)<progress> 表⽰进度 (带⽤“UI”，不怎么⽤)<time> 表⽰⽇期本质上新语义标签与<div>、<span>没有区别，只是其具有表意性，使⽤时除了在HTML结构上需要注意外，其它和普通标签的使⽤⽆任何差别，可以理解成<divclass="nav"> 相当于 <nav>。
HTML5标签大全
HTML5标签⼤全可以进⾏省略的标签不允许写结束标记的标签：area(定义图像映射中的区域)、base(为页⾯上的所有链接规定默认地址或默认⽬标)、br、col(为表格中⼀个或多个列定义属性值)、embed(定义嵌⼊的内容，⽐如插件--5)、hr、img、input、keygen、link、meta、param、source、track、wbr可以省略结束标记的标签：li、dt、dd、p、rt、optgroup、option、colgroup、thread、tbody、tr、td、th可以完全省略的标签：html、head、body、colgroup、tbody新增的标签section:页⾯中的⼀个内容区块，⼊章节、页⾯、页脚或页⾯的其他部分、可以和h1、h2...等标签结合起来使⽤，表⽰⽂档结构。
article:表⽰页⾯中⼀块与上下⽂不相⼲的独⽴内容，⽐如⼀篇⽂章。
aside:定义 article 以外的内容。
aside 的内容应该与 article 的内容相关。
header:页⾯中的内容区块或整个页⾯的标题。
footer:页⾯中的内容区块或整个页⾯的脚注。
hgroup:页⾯中的内容区块或整个页⾯的标题进⾏组合。
nav:导航链接的部分。
figure:规定独⽴的流内容（图像、图表、照⽚、代码等等，内容应该与主内容相关，但如果被删除，则不应对⽂档流产⽣影响）。
video:视频。
exp:<video src="url" controls="controls">视频</video>audio:⾳频。
embed:⽤来嵌⼊内容（包括各种媒体）。
mark:变颜⾊，关注。
progress:进度条。
exp:<progress max="100" value="85"></progress>time:定义⽇期或时间，或者两者。
HTML5视频媒体标签video的使用方法及完整参数说明详解
HTML5视频媒体标签video的使⽤⽅法及完整参数说明详解这篇⽂章主要介绍了HTML5视频媒体标签video的使⽤⽅法及完整参数说明详解,需要的朋友可以参考下简介video 是 HTML5 的⼀个视频媒体标签，其作⽤是在⽹页中嵌⼊指定的视频，video 标签的代码结构及参数如下。
<videocontrolsautoplaylooppreload="auto"poster="img/popup-img.png"webkit-playsinline="true"playsinline="true"x5-video-player-type="h5"x5-video-player-fullscreen="true"x-webkit-airplay="allow"x5-video-orientation="portraint"style="object-fit:fill"><source src="video.mp4" type="video/mp4"><source src="video.ogg" type="video/ogg; codecs=dirac, speex"><p>你的浏览器不⽀持 <code>video</code> 标签.</p></video>参数说明controls - 显⽰标准的 HTML5 视频/⾳频播放器控制条、控制按钮。
autoplay - 让⽂件⾃动播放。
loop - 让⽂件循环播放。
preload - 属性是⽤来缓存⼤体积⽂件的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
文档推荐
-
HTML5标签的改变.ppt.ppt页数:16
-
HTML5基本标签页数:7
-
HTML5所有标签页数:3
-
HTML5 标签 和属性 列表页数:32
-
任务3 运用HTML5的新标签页数:60
-
html5表单新控件详解页数:8
-
html5常用标签及注释页数:7
-
html5新标签页数:49
-
HTML5新的布局元素页数:4
-
HTML5标签大全(最终整理版)页数:3
-
HTML5新增的语义标签页数:4