html5的新增的标签和废除的标签简要概述

好色不花心乄

好色不花心乄

2016-02-19 11:20

只要你有一台电脑或者手机,都能关注图老师为大家精心推荐的html5的新增的标签和废除的标签简要概述,手机电脑控们准备好了吗?一起看过来吧!

新增的结构标签

section元素
表示页面中的一个内容区块,比如章节、页眉、页脚或页面的其他部分。可以和h1、 h2等元素结合起来使用,表示文档结构。例:HTML5中section/section;HTML4中div /div。
article元素
表示页面中一块与上下文不相关的独立内容。比如一篇文章。
aside元素
表示article元素内容之外的、与article元素内容相关的辅助信息。
header元素
表示页面中一个内容区块或真个页面的标题。
hgroup元素
表示对真个页面或页面中的一个内容区块的标题进行组合。
footer元素
表示整个页面或页面中一个内容区块的脚注。一般来说,他会包含创作者的姓名、创作日期以及创作者的联系信息。
nav元素
表示页面中导航链接的部分。
figure元素
表示一段独立的流内容,一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素组添加标题。例如:

代码如下:

figure
figcaptionPRC/figcaption
pThe People's Republic of China was born in 1949/p
/figure
HTML4中常写作
dl
h1prc/h1
pThe People's Republic of China was born in 1949/p
/dl

新增的其他元素
video元素
定义视频。像电影片段或其他视频流。例:video src="movie.ogg" controls="controls"video元素/video
HTML4中写法:
object type="video/ogg" data="move.ogv"
  param name ="src" value="movie.ogv"
/object
audio元素
定义音频。如音乐或其他音频流。例:audio src ="someaudio.wav"audio元素/audio
html4中写法:

代码如下:

object tyle="application/ogg" data="someaudio.wav"
param name ="src" value= "someaudio.wav"
/object

embed元素
用来嵌入内容(包括各种媒体)。格式可以是Midi、Wav、AIFF、AU、MP3,flash等。例:embed src="flash.swf" /
HTML4中代码示例object data="flash.swf" type="application/x-shockwave-flash"object
mark元素
主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字。典型应用搜索结果中高亮显示搜素关键字。
HTML5mark/mark;HTML4 span/span。
progress元素
表示运行中的进程,可以使用progress元素显示JavaScript中耗时时间函数的进程。等待中、请稍后等。progress/progress。
time元素
表示日期或时间,也可以两者同时。
ruby元素
定义 ruby 注释(中文注音或字符)。
与 ruby 以及 rt 标签一同使用。ruby 元素由一个或多个字符(需要一个解释/发音)和一个提供该信息的 rt 元素组成,还包括可选的 rp 元素,定义当浏览器不支持 "ruby" 元素时显示的内容。 

代码如下:

ruby
漢 rtrp(/rpㄏㄢˋrp)/rp/rt
/ruby

rt元素
定义字符(中文注音或字符)的解释或发音。
rp元素
在 ruby 注释中使用,以定义不支持 ruby 元素的浏览器所显示的内容。
wbr元素
表示软换行。与br元素的区别:br元素表示此处必须换行;wbr表示浏览器窗口或父级元素足弓宽时(没必要换行时),不换行,而宽度不够时主动在此处换行。
canvas元素
定义图形,比如图表和其他图像。canvas 元素只是图形容器(画布),必须使用脚本来绘制图形。

代码如下:

canvas id="myCanvas"/canvasscript type="text/javascript"
var canvas=document.getElementById('myCanvas');
var ctx=canvas.getContext('2d');
ctx.fillStyle='#FF0000';
ctx.fillRect(0,0,80,100);
/script

command元素貌似没什么效果。是不是支持有问题
表示命令按钮,比如单选按钮、复选框或按钮。

只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。。

代码如下:

menu
command onclick="alert('Hello World')"
Click Me!/command
/menu

details标签 目前只有 Chrome 支持 details 标签
用于描述文档或文档某个部分的细节 。
可与 summary 标签配合使用,summary可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。summary应该是details的第一个子元素。

datalist标签
定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。使用 input 元素的 list 属性来绑定 datalist。

代码如下:

input id="myCar" list="cars" /
datalist id="cars"
option value="BMW"
option value="Ford"
option value="Volvo"
/datalist

datagrid标签 如何用?
定义可选数据的列表。datagrid 作为树列表来显示。
如果把 multiple 属性设置为 true,则可以在列表中选取一个以上的项目。

keygen标签 如何用?
标签规定用于表单的密钥对生成器字段。

当提交表单时,私钥存储在本地,公钥发送到服务器。

代码如下:

form action="demo_keygen.asp" method="get"
Username: input type="text" name="usr_name" /
Encryption: keygen name="security" /
input type="submit" /
/form

output标签
定义不同类型的输出,比如脚本的输出。

代码如下:

form action="form_action.asp" method="get" name="sumform"
output name="sum"/output
/form

source标签
标签为媒介元素(比如 video 和 audio)定义媒介资源。
menu标签
定义菜单列表。当希望列出表单控件时使用该标签。注意与nav的区别,menu专门用于表单控件。

代码如下:

menu
liinput type="checkbox" /Red/li
liinput type="checkbox" /blue/li
/menu

新增input标签email
必须输入email url
必须输入url地址 number
必须输入数值 range
必须输入一定范围内数值 Date Pickers(日期选择器)
拥有多个可供选取日期和时间的新输入类型:
date - 选取日、月、年
month - 选取月、年
week - 选取周和年
time - 选取时间(小时和分钟)
datetime - 选取时间、日、月、年(UTC 时间)
datetime-local - 选取时间、日、月、年(本地时间) search
用于搜索域,域显示为常规的文本域。 color

废除的元素

1、能用css代替的元素
basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的,HTML5中提倡把画面展示性功能放在css中统一编辑。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

2、不再使用frame框架。

frameset、frame、noframes。HTML5中不支持frame框架,只支持iframe框架,或者用服务器方创建的由多个页面组成的符合页面的形式,删除以上这三个标签。

3、只有部分浏览器支持的元素

applet、bgsound、blink、marquee等标签。

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

4、其他被废除的元素

废除rb,树勇ruby替代。

废除acronym使用abbr替代。

废除dir使用ul替代。

废除isindex使用form与input相结合的方式替代

废除listing使用pre替代

废除xmp使用code替代

废除nextid使用guids

废除plaintex使用text/plian(无格式正文)MIME类型替代。

===========================================================

看着这么多新增标签和元素,我在想HTML5真的来了吗?铺天盖地的相关资讯、教程,大家张口闭口的HTML5、CSS3以及各大浏览器厂商宣布对html5的支持,让我感觉html5时代真的来了。那我能在我的项目中放心的用它么?还不能。虽然IE9已经宣称支持html5了,但是IE8完全不支持。现在仍有一大批的人坐在06、07年的奔四老爷机面前,用着xp的系统,装着IE8在爬网;还有一些恋旧老哥、老姐们,买的新机咔嚓掉正版win7,换上D版XP。虽然现在有了Html5shiv,可以让IE8有限支持一些HTML新标签,也仅仅是几个新标签而已。我可以选择使用什么新技术,但是不能要求你产品的用户必须装什么浏览器。其实做东西也不一定非得新技术,适合的就好,就想现在有些用asp.net2写的东东功能一样强大;就像邓爷爷的猫论,管用就行。

展开更多 50%)
分享

猜你喜欢

html5的新增的标签和废除的标签简要概述

Web开发
html5的新增的标签和废除的标签简要概述

html5 标签

Web开发
html5 标签

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

HTML5的标签的代码的简单介绍 HTML5标签的简介

Web开发
HTML5的标签的代码的简单介绍 HTML5标签的简介

HTML5标签小集

Web开发
HTML5标签小集

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

HTML5标签与HTML4标签的区别示例介绍

Web开发
HTML5标签与HTML4标签的区别示例介绍

html5 音乐播放器 audio 标签使用概述

Web开发
html5 音乐播放器 audio 标签使用概述

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

android 加载本地联系人实现方法

android 加载本地联系人实现方法

window怎样破解无权限访问受限

window怎样破解无权限访问受限
下拉加载更多内容 ↓