HTML5: HTML5 新元素
| ylbtech-HTML5: HTML5 新元素 |
| 1.返回顶部 |
HTML5 新元素
自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废弃,这些元素在HTML5中已经被删除或重新定义。
为了更好地处理今天的互联网应用,HTML5添加了很多新元素及功能,比如: 图形的绘制,多媒体内容,更好的页面结构,更好的形式 处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者,等。
<canvas> 新元素
| 标签 | 描述 |
|---|---|
| <canvas> | 标签定义图形,比如图表和其他图像。该标签基于 JavaScript 的绘图 API |
新多媒体元素
| 标签 | 描述 |
|---|---|
| <audio> | 定义音频内容 |
| <video> | 定义视频(video 或者 movie) |
| <source> | 定义多媒体资源 <video> 和 <audio> |
| <embed> | 定义嵌入的内容,比如插件。 |
| <track> | 为诸如 <video> 和 <audio> 元素之类的媒介规定外部文本轨道。 |
新表单元素
| 标签 | 描述 |
|---|---|
| <datalist> | 定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。 |
| <keygen> | 规定用于表单的密钥对生成器字段。 |
| <output> | 定义不同类型的输出,比如脚本的输出。 |
新的语义和结构元素
HTML5提供了新的元素来创建更好的页面结构:
| 标签 | 描述 |
|---|---|
| <article> | 定义页面独立的内容区域。 |
| <aside> | 定义页面的侧边栏内容。 |
| <bdi> | 允许您设置一段文本,使其脱离其父元素的文本方向设置。 |
| <command> | 定义命令按钮,比如单选按钮、复选框或按钮 |
| <details> | 用于描述文档或文档某个部分的细节 |
| <dialog> | 定义对话框,比如提示框 |
| <summary> | 标签包含 details 元素的标题 |
| <figure> | 规定独立的流内容(图像、图表、照片、代码等等)。 |
| <figcaption> | 定义 <figure> 元素的标题 |
| <footer> | 定义 section 或 document 的页脚。 |
| <header> | 定义了文档的头部区域 |
| <mark> | 定义带有记号的文本。 |
| <meter> | 定义度量衡。仅用于已知最大和最小值的度量。 |
| <nav> | 定义导航链接的部分。 |
| <progress> | 定义任何类型的任务的进度。 |
| <ruby> | 定义 ruby 注释(中文注音或字符)。 |
| <rt> | 定义字符(中文注音或字符)的解释或发音。 |
| <rp> | 在 ruby 注释中使用,定义不支持 ruby 元素的浏览器所显示的内容。 |
| <section> | 定义文档中的节(section、区段)。 |
| <time> | 定义日期或时间。 |
| <wbr> | 规定在文本中的何处适合添加换行符。 |
已移除的元素
以下的 HTML 4.01 元素在HTML5中已经被删除:
- <acronym>
- <applet>
- <basefont>
- <big>
- <center>
- <dir>
- <font>
- <frame>
- <frameset>
- <noframes>
- <strike>
- <tt>
| 2.返回顶部 |
| 3.返回顶部 |
| 4.返回顶部 |
| 5.返回顶部 |
| 6.返回顶部 |
![]() |
作者:ylbtech 出处:http://ylbtech.cnblogs.com/ 本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。 |
HTML5: HTML5 新元素的更多相关文章
- HTML5——添加新元素 新元素 Canvas SVG MathML 黑客帝国特效
为HTML添加新元素 添加新元素 + 该元素定义样式 <!DOCTYPE html> <html> <head> <meta charset=&quo ...
- HTML5: HTML5 语义元素
ylbtech-HTML5: HTML5 语义元素 1.返回顶部 1. HTML5 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发 ...
- 浅谈html5某些新元素的用途
大家都知道html是一种前端网页语言,从出现到现在已经经历了很多的版本了,但是随着html的不断发展,现在的html5已经不再是单一的前端页面语言了,html,javascript,css不再单纯的只 ...
- HTML5 – 2.新元素
figcaption 定义和用法 <figcaption> 标签定义 figure 元素的标题(caption). "figcaption" 元素应该被置于 " ...
- HTML5: HTML5 介绍
ylbtech-HTML5: HTML5 介绍 1. 什么是 HTML5?返回顶部 HTML5 是下一代 HTML 标准. HTML,HTML 4.01的上一个版本诞生于1999年.自从那儿以后, ...
- html-5 --html5教程article、footer、header、nav、section使用
header header元素是一种具有引导和导航作用的辅助元素.通常,header元素可以包含一个区块的标题(如h1至h6,或者hgroup元素标签),但也可以包含其他内容,例如数据表格.搜索表单或 ...
- [Html5] HTML5 开发手机应用
上次周例会我给大家做了题目为:<漫游移动平台前端开发>的汇报,现在推荐一些额外的学习资料. 依照目前iPhone/Android 迅速提升市占率的情势来看,未来如果想要在 ...
- [html5]HTML5中<section>和<article>的区别
一.section元素 从字面理解就是区块.部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单.文章正文.文章的评论等. 1.section元素用于对网站或应用程序 ...
- WEB前端之HTML5~HTML5与HTML4的区别
推出的理由及目标 WEB浏览器存在的问题包括以下三点 世界知名浏览器厂商对HTML5的支持 语法的改变 DOCTYPE的声明 XHTML的DOCTYPE声明方式 HTML4的DOCTYPE声明方式 H ...
随机推荐
- php开发面试题---日常面试题1
php开发面试题---日常面试题1 一.总结 一句话总结: 实战确定学习方向,然后去网上找视频资源,非常多,然后看书 1.什么样的数据存在memcache里面? 要去数据库里面查询的那些数据,数据库查 ...
- sql:CallableStatement执行存储过程
/** * 使用CablleStatement调用存储过程 * @author APPle * */ public class Demo1 { /** * 调用带有输入参数的存储过程 * CALL p ...
- Linux查看文件大小5个常用命令
1. 前言 Linux 系统有非常好用的命令,功能也非常丰富,如果你对命令行工具熟悉,可以非常高效率完成维护工具.本文主要介绍Linux系统中,用于查看文件大小的命令. Linux 查看文件大小5个常 ...
- js的浏览器判断方法
使用navigator.userAgent来判断浏览器类型. 1.浏览器版本号函数: var br=navigator.userAgent.toLowerCase(); var browserVe ...
- log4j基础配置使用
添加log4j的jar包:可以从maven处下载:https://mvnrepository.com/artifact/log4j/log4j/1.2.17 <!-- https://mvnre ...
- Oracle学习笔记<4>
多表查询 1.什么是多表查询? 一次select语句需要查询的内容来自于不止一张表. 同时从多张表中查询数据. 单表查询: select id,last_name,salary from s_emp ...
- ZR-19CSP-S赛前冲刺
ZR-19CSP-S赛前冲刺 1 ZR-19CSP-S赛前冲刺 2 ZR-19CSP-S赛前冲刺 3 ZR-19CSP-S赛前冲刺 4 ZR-19CSP-S赛前冲刺 5 ZR-19CSP-S赛前冲刺 ...
- 44.和为S的两个数字
题目描述: 输入一个递增排序的数组和一个数字S,在数组中查找两个数,使得他们的和正好是S,如果有多对数字的和等于S,输出两个数的乘积最小的. 思路分析: 数组是递增排序的,我们先将数组遍历一遍 ...
- new做了些什么?
new做了些什么? function People(name, age){ this.name = name; this.age = age; }; var xiaoming = new People ...
- 看不懂源码?先来恶补一波Object原型吧
目录 Object Object属性 1.Object.prototype 2.Object.name Object方法 1.Object.assign() 2.Object.create() 3.O ...
