H5新特性-慕课01-新增与删除的标签

1,新增的标签

1.1新增的结构标签(最重要的,以前是通过div实现的)
(1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分;
例如:html5中

html4中

section可以用来划分网页不能用它来布局,布局还是使用div.
(2)article:特殊独立区块,与上下文不相关的独立内容,表示这篇页眉中的核心内容;(比如一篇文章)
article可以嵌套


……


(3)aside:article标签内容之外与标签内容相关的辅助信息;(文章的辅助内容)
(4)header:整个页面/某个区块的头部信息/标题;(头部信息,一个页面只能有一个header)
(5)hgroup:表示对整个页面或页面中的一个内容区块的标签(section)进行组合;(头部信息的补充内容)
(6)footer:表示整个页面或页面中一个内容区块的脚注(底部),一般来说,会包含创作者的姓名、创作日期以及创作者的联系信息;
(7)nav:表示页面中导航链接的部分
(8)figure:表示一段独立的流内容,一般表示文档流内容中的一个独立单元,使用figcaption标签为figure添加标题(独立的单元,例如某个有图片与内容的新闻块。)
例如:

PRC

the people’s republic of china was born in 1949


1.2新增的一些媒体标签,video,audio,embed
(1) vedio标签——定义视频,像电影片段或其他视频流。例如:
html5:
vedio标签
html4:



(2) audio标签——定义音频,像音乐或其他音频流。例如:
html5:
audio标签
html4:



(3) embed标签——用来嵌入内容(包括各种媒体),格式可以是Mldl、Wav、AIFF、AU、MP3、flash等。例如:
html5:

html4:

1.3新增表单Input类型
(1) email——必须输入email
(2) url——必须输入url地址
(3) number——必须输入数值
(4) range——必须输入一定范围内数值
(5) Date Pickers(日期选择器)
拥有多个可供选取日期和时间的新输入类型:
date-选择日、月、年
month-选择月、年
week-选择周、年
time-选取时间(小时和分钟)
datetime-选取时间、日、月、年(UTC时间)
datetime-local-选取时间、日、月、年(本地时间)
(6) search——用于搜索域,域显示为常规的文本域
(7) color
浏览器支持

Input type IE Firefox Opera Chrome Safari
email No 4.0 9.0 10.0 No
url No 4.0 9.0 10.0 No
number No No 9.0 7.0 No
range No No 9.0 4.0 4.0
Date pickers No No 9.0 10.0 No
search No 4.0 11.0 10.0 No
color No No 11.0 No No

1.4其他新增的标签
浏览器支持
Input type IE Firefox Opera Chrome Safari
datalist No No 9.5 No No
keygen No No 10.5 3.0 No
output No No 9.5 No No

(1) mark标签——提亮文字
(2) progress标签——进度条

85
“%”

(3) time标签
——属于语义标签,或者说是微数据标签,用来标注页面中的某一块内容,这个标注是给机器(搜索引擎)用的
——发布时间

(4) ruby标签——对某个字进行注释

        <ruby>
            漠
            <rt> </rt> //注释内容
            <rp>(</rp> //当浏览器不支持时要显示的内容
            “ 厂马”
            <rp>)</rp>
        </ruby>

(5) wbr标签——软换行
(6) canvas标签——与javascript配合进行图形绘制

        <canvas id="mycanvas">
            <script >
                …
            </script>
        </canvas>

(7)command标签(各浏览支持不大)

        <menu>
            <command onclick="alert(hello world)" label="click">
            "click me!"
        </menu>

(8)details标签(目前只有 Chrome 支持 标签。)
新增的标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。

(9)DataList:HTML5中的input输入框自动提示宝器
DataList的作用是在你往input输入框里输入信息时,根据你敲进去的字母,自动显示一个提示下列列表,很像百度或谷歌的搜索框的自动提示。它是HTML5里新增的一个非常有用的元素。
DataList的表现很像是一个Select下拉列表,但它只是提示作用,并不限制用户在input输入框里输入什么。 HTML5 Datalist的语法其实跟select下拉列表的语法几乎完全一样,非常的简单!
datagrid标签 如何用?
定义可选数据的列表。datagrid 作为树列表来显示。
如果把 multiple 属性设置为 true,则可以在列表中选取一个以上的项目。
(10)keygen标签(ie不支持)
首先标签会生成一个公钥和私钥,私钥会存放在用户本地,而公钥则会发送到服务器。那么标签生成的公钥/私钥是用来做什么用的呢?很多朋友在看到公钥/私钥的时候,应该就会想到了非对称加密。没错,标签在这里起到的作用也是一样。
标签所期望的是在收到SPKAC(SignedPublicKeyAndChallenge)排列后,服务器会生成一个客户端证书(Client Certificate),然后返回到浏览器让用户去下载保存到本地。之后,用户在需要验证的时候,使用本地存储的私钥和证书后通过TLS/SSL安全传输协议到服务端做验证。
例子:

用户名: 加密:

(11)output标签
标签定义不同类型的输出,比如脚本的输出。
标签是 HTML 5 中的新标签。
属性 值 描述
for id of another element 定义输出域相关的一个或多个元素。
form formname 定义输入字段所属的一个或多个表单。
name unique name 定义对象的唯一名称。(表单提交时使用)


0 100 + =

注释:Internet Explorer 不支持 标签。



效果:
http://www.w3school.com.cn/tiy/t.asp?f=html5_output

(12)menu标签
定义和用法

标签定义命令的列表或菜单。
标签用于上下文菜单、工具栏以及用于列出表单控件和命令。
提示:请使用 CSS 来设置菜单列表的样式!
属性 值 描述
label text 规定菜单的可见标签。
type
popup
toolbar
规定要显示哪种菜单类型。
例子:






  • New…
    Open…
    Save



  • Cut
    Copy
    Paste

注释:所有主流浏览器均不支持 menu 元素。



2,删除的标签
【废除标签】:
1、能用css代替的元素
basefont、big、center、font、s、strike、tt、u。这些元素纯粹是为画面展示服务的,HTML5中提倡把画面展示性功能放在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类型替代

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值