一, 废弃的标签
以下的 html 4.01 元素在 HTML5 中已经被删除, 虽然浏览器为了兼容性考虑都还支持这些标签, 但建议使用新的替代标签, 矛盾的是老浏览器对新标签的支持度又不够, 视项目的受众对象而定了.
1, 能用 CSS 代替的元素
这些元素包含 basefont,big,center,font,s,strike,tt,u. 这些元素纯粹是为页面展示用的, 表现的内容应该由 CSS 完成.
2,frame 框架
这些元素包含 frameset,frame,noframes.HTML5 中不支持 frame 框架, 只支持 iframe 框架, 或者用服务器方创建的由多个页面组成的符合页面的形式, 删除以上这三个标签.
3, 只有部分浏览器支持的元素
这些元素包含 applet,bgsound,blink,marquee 等标签.
4, 其他被废除的元素
废除 rb, 使用 Ruby 替代废除 acronym 使用 abbr 替代废除 dir 使用 ul 替代废除 isindex 使用 form 与 input 相结合的方式替代废除 listing 使用 pre 替代废除 xmp 使用 code 替代废除 nextid 使用 guids 废除 plaintex 使用 "text/plian"(无格式正文)MIME 类型替代
二, 新增的标签
1, 新增的结构标签
在 HTML4.01 中 div 被广泛用于各种布局环境在, 没有明确的定义, HTML5 为了 SEO 将 div 语义化了, 新增加结构标签如下:
a),section 元素 表示页面中的一个内容区块, 比如章节, 页眉, 页脚或页面的其他部分. 可以和 h1, h2...... 等元素结合起来使用, 表示文档结构. 例: HTML5 中 < section>......</section>;HTML4 中 < div> ......</div>.
b),article 元素 表示页面中一块与上下文不相关的独立内容. 比如一篇文章.
c),aside 元素 表示 article 元素内容之外的, 与 article 元素内容相关的辅助信息.
d),header 元素 表示页面中一个内容区块或真个页面的标题.
e),hgroup 元素 表示对真个页面或页面中的一个内容区块的标题进行组合.
f),footer 元素 表示整个页面或页面中一个内容区块的脚注. 一般来说, 他会包含创作者的姓名, 创作日期以及创作者的联系信息.
g),nav 元素 表示页面中导航链接的部分.
h),figure 元素 表示一段独立的流内容, 一般表示文档主体流内容中的一个独立单元. 使用 figcaption 元素为 figure 元素组添加标题. 例如:
- <figure>
- <figcaption>
- PRC
- </figcaption>
- <p>
- The People's Republic of China was born in 1949
- </p>
- </figure>
HTML4 中常写作
- <dl>
- <h1>
- prc
- </h1>
- <p>
- The People's Republic of China was born in 1949
- </p>
- </dl>
2, 新增加其它元素
2.1,meter
表示特定范围内的数值, 可用于工资, 数量, 百分比等 max 表示最大值, min 表示最小值, value 代表当前值.
<meter max="100" min="0" value="60" style="width: 300px;"></meter>
可以用 JS 控制让它从 0 变化到 100.
2.2,time
time. 表示时间值, 属性 datetime 强调时间大会时间:<time>2015-10-6</time>
因为该标签是一个语义标签, 在浏览器上查看时没有特别的效果, 基本与没有设置标签的效果相同.
2.3,progress
用来表示进度条
- <h3>
- progress
- </h3>
- <progress value="75" max="100">
- </progress>
max: 最大值, 完成时的值
value: 当前值
2.4,datalist
该标签定义可选数据的列表. 与 input 元素配合使用, 就可以制作出输入值的下拉列表. 当与 input 组合时既可以完成选择有可以输入.
- <input type="text" list="countries" />
- <datalist id="countries">
- <option value="中国"></option>
- <option value="美国"></option>
- <option value="日本"></option>
- </datalist>
2.5,mark 元素
主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字. 典型应用搜索结果中高亮显示搜素关键字. HTML5<mark></mark>;HTML4 <span></span>.
2.6,Ruby 元素
定义 Ruby 注释 (中文注音或字符). 与 <Ruby> 以及 <rt> 标签一同使用. Ruby 元素由一个或多个字符(需要一个解释 / 发音) 和一个提供该信息的 rt 元素组成, 还包括可选的 rp 元素, 定义当浏览器不支持 "ruby" 元素时显示的内容.
2.7,rt 元素
定义字符 (中文注音或字符) 的解释或发音.
2.8,rp 元素
在 Ruby 注释中使用, 以定义不支持 Ruby 元素的浏览器所显示的内容.
2.9,wbr 元素
表示软换行. 与 br 元素的区别: br 元素表示此处必须换行; wbr 表示浏览器窗口或父级元素足弓宽时(没必要换行时), 不换行, 而宽度不够时主动在此处换行.
2.10,canvas 元素
定义图形, 比如图表和其他图像.<canvas> 元素只是图形容器(画布), 必须使用脚本来绘制图形.
- <canvas id="myCanvas"></canvas>
- <script type="text/javascript">
- var canvas = document.getElementById('myCanvas');
- var ctx = canvas.getContext('2d');
- ctx.fillStyle = '#FF0000';
- ctx.fillRect(0, 0, 80, 100);
- </script>
2.11,command 元素
表示命令按钮, 比如单选按钮, 复选框或按钮. 只有当 command 元素位于 menu 元素内时, 该元素才是可见的. 否则不会显示这个元素, 但是可以用它规定键盘快捷键.
- <menu>
- <command onclick="alert('Hello World')">
- Click Me!
- </command>
- </menu>
2.12,details 标签
用于描述文档或文档某个部分的细节 . 可与 summary 标签配合使用, summary 可以为 details 定义标题. 标题是可见的, 用户点击标题时, 会显示出 details.summary 应该是 details 的第一个子元素.
2.14,datalist 标签
定义选项列表. 请与 input 元素配合使用该元素, 来定义 input 可能的值. datalist 及其选项不会被显示出来, 它仅仅是合法的输入值列表. 使用 input 元素的 list 属性来绑定 datalist.
2.15,output 标签
定义不同类型的输出, 比如脚本的输出.
- <form action="form_action.asp" method="get" name="sumform">
- <output name="sum">
- </output>
- </form>
2.16,menu 标签
定义菜单列表. 当希望列出表单控件时使用该标签. 注意与 nav 的区别, menu 专门用于表单控件.
3, 多媒体标签
如果需要在页面中播放音频与视频我们经常会用使用的方法有:
- a),embed
- <embed src='http://player.youku.com/player.php/sid/XODIxNTY0NTQw/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed>
- <embed src="img/iceage4.mp4"></embed>
b), 使用 flash 播放器
如一些三方插件, flowplayer602
html5 多媒体组件指的是 video(视频)组件和 audio(音频)组件. HTML5 多媒体组件可以在不借助诸如 Flash Player 等第三方插件的情况下, 直接在你的网页上嵌入多媒体组件. 浏览器提供原生支持视频的新能力使得网页开发人员更易于在不依赖于外置插件有效性的情况下, 在他们的网站上添加视频组件. 由于苹果公司现阶段在 iPhone 和 iPad 上使用的 Flash 技术的局限性, HTML5 多媒体组件的能力就显得尤为重要了.
3.1,video 视频标签
用于在播放视频, 电影, 标签基本格式如下:
- <video width="800" height="600" controls="controls" poster="content/1.jpg">
- <source src="content/iceage4.mp4" type="video/mp4"></source>
- <source src="content/iceage4.webm" type="video/webm"></source>
- <object width=""height="" type="application/x-shockwave-flash" data="myvideo.swf">
- <param name="movie" value="myvideo.swf" />
- <param name="flashvars" value="autostart=true&file=myvideo.swf" />
- </object>
当前浏览器不支持 video 直接播放, 点击这里下载视频: <a href="a.mp4">下载视频</a>
</video>
source 是视频源, 可以有多种, 当一种失败时将选择下一种, 主要有如下 3 种:
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件 MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件 WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
注意:
<video src="img/a.mp4" controls="controls" poster="img/1.jpg">
您的浏览器太老了, 请升级, 视频下载 < a href="#">地址</a>
</video>
多数的 HTML5 标签的 innerHTML 内容是浏览器不支持该标签时显示的内容.
事件绑定与监听的区别:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- 事件绑定与监听的区别
- </title>
- </head>
- <body>
- <button id="btnA">
- 按钮 A
- </button>
- <button id="btnB">
- 按钮 B
- </button>
- <script type="text/javascript">
- var btnA = document.getElementById("btnA");
- var btnB = document.getElementById("btnB");
- btnA.onclick = function() {
- alert("你点了一下");
- }
- btnA.onclick = function() {
- alert("你又点了一下");
- }
- btnB.addEventListener("click",
- function(event) {
- alert("你点了一下");
- },
- false);
- btnB.addEventListener("click",
- function(event) {
- alert("你又点了一下");
- },
- false);
- </script>
- </body>
- </HTML>
使用 on 事件名的形式绑定事件后绑定会覆盖前面绑定的事件, 也就是最后一个绑定的事件会生效;
使用 addEventListener 绑定事件则不会覆盖, 可同时在一个元素上绑定多个相同的事件.
video API 的属性与事件示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Video 标签
- </title>
- </head>
- <body>
- <video id="videoIce" width="800" height="600" controls="controls" poster="content/1.jpg">
- <source src="content/iceage4.mp4" type="video/mp4">
- </source>
- <source src="content/iceage4.webm" type="video/webm">
- </source>
- <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
- <param name="movie" value="myvideo.swf" />
- <param name="flashvars" value="autostart=true&file=myvideo.swf" />
- </object>
- 当前浏览器不支持 video 直接播放, 点击这里下载视频:
- <a href="content/a.mp4">
- 下载视频
- </a>
- </video>
- <h2>
- <button onclick="play()">
- 播放
- </button>
- <button onclick="pause()">
- 暂停
- </button>
- <span id="msg">
- </span>
- </h2>
- <script type="text/javascript">
- var videoIce = document.getElementById("videoIce");
- function play() {
- videoIce.play();
- }
- function pause() {
- videoIce.pause();
- }
- videoIce.ontimeupdate = function() {
- document.getElementById("msg").innerHTML = videoIce.currentTime;
- }
- </script>
- </body>
- </HTML>
3.2,audio 音频标签
audio 可以实现播放声音, 音乐功能.
- <audio src=http://baidu/demo/test.mp3 controls>
- 您的浏览器不支持 audio 元素
- </autio>
- <audio src="content/a.mp3" controls="controls" autoplay="autoplay">
- </audio>
audio 标签的属性, 很多属性都是与 video 相同的:
autoplay:true|false, 如果是 true, 则音频在就绪后马上播放. controls:true|false 如果是 true, 则向用户显示控件, 比如播放按钮. end:numeric value 定义播放器在音频流中的何处停止播放. 默认地, 声音会播放到结尾. loopend:numeric value 定义在音频流中循环播放停止的位置, 默认是 end 属性的值. loopstart: numeric value 定义在音频流中循环播放的开始位置. 默认是 start 属性的值. playcount: numeric value 定义音频片断播放多少次. 默认是 1. src: url 所播放音频的 url. start : numeric value 定义播放器在音频流中开始播放的位置. 默认地, 声音在开头进行播放.
source 子标签
使用 source 元素作为多媒体元素的子标签例:
- <audio>
- <source src='test.mp3' type='audio/mpeg' />
- <source src='test.ogg' type='audio/ogg' />
- <source src='test.spx' type='audio/ogg' />
- </audio>
使用 source 元素, 浏览器在列表顺序查找, 直到找到一个它能播放的文件格式, 找到后, 就播放该文件并忽略随后的其它元素.
audio 的 API 与 video 基本一样, 下面是一个自定义调整音量的示例:
- <!DOCTYPE HTML>
- <HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- audio 标签
- </title>
- </head>
- <body>
- <h2>
- audio 标签
- </h2>
- <audio src="content/fcml.mp3" controls="controls" autoplay="autoplay"
- id="mp3">
- <marquee>
- <h2>
- 换个浏览器吧, 太老了
- </h2>
- </marquee>
- </audio>
- <input type="range" min="0" max="100" onchange="setVolume(this)" />
- <script type="text/javascript">
- function setVolume(obj) {
- document.getElementById("mp3").volume = obj.value * 0.01;
- }
- </script>
- </body>
- </HTML>
音量只在 0-1 之间.
3.3,embed 元素
用来嵌入内容(包括各种媒体). 格式可以是 Midi,Wav,AIFF,AU,MP3,flash 等.
例:<embed src="flash.swf" /> HTML4 中代码示例 < object data="flash.swf" type="application/x-shockwave-flash"><object>
自己是一个 6 年的前端工程师, 希望本文对你有帮助!
这里推荐一下我的前端学习交流扣 qun:731771211 , 里面都是学习前端的, 如果你想制作酷炫的网页, 想学习编程. 自己整理了一份 2019 最全面前端学习资料, 从最基础的 HTML+CSS+JS[炫酷特效, 游戏, 插件封装, 设计模式] 到移动端 HTML5 的项目实战的学习资料都有整理, 送给每一位前端小伙伴, 每天分享技术
点击: 加入
来源: http://www.jianshu.com/p/846d5304e460