HTML5新增元素

一、结构相关:

1、<section></section>

       :表示页面的一个内容区块:章节、页眉、页脚、页面中的其他部分。

          当需要被直接定义样式或者通过脚本定义行为时,推荐使用div。

          不推荐没有标题的内容使用section。

         作用是:对页面上的内容进行分块,或者对文章进行分段。

2、<article></article>

       :表示页面中的一块与上下文不相关的独立内容,可以独立被外部引用的内容:如博客中那个的一篇文章。

          它通常有自己的标题(header),也可以有脚注。

3、<aside></aside>

      :表示article元素的内容之外,与article元素的内容相关的辅助信息。

      使用方式:

      (1)、被包含article元素中作为主要内容的附属信息部分,如当前文章的有关参考资料,名词解释等

(2)、作为页面或者全站的附属信息部分。如侧边栏,

4、<header></header>

      :表示页面中的一个内容区块或者整个页面的标题。

5、<hgroup></hgroup>

      :用于对整个页面或者页面中的一个内容区块的标题进行组合。文章只有一个主标题时,不需要hgroup。

6、<footer></footer>

      :表示整个页面或者页面中一个内容的脚注。

7、<nav></nav>

      :表示页面中导航链接的部分。

      场合:传统导航条、侧边栏导航、页内导航、翻页。。。。。

8、<figure></figure>

      :表示一段独立的流内容,一般表示文档主体中流内容中的一个独立单元。

         所表示可以是图片、统计图、代码、音频插件、视频插件、统计表格。。。。

         使用figcaption元素为figure组添加标题。一个figure最多只允许放一个figcaption元素。

二、新增的其他元素

1、<video></video>

      :定义视频

2、<audio></audio>

      :定义音频

3、<embed />

      :用于插入各种多媒体,格式可以是Midi,Wav,AIFF,AU,MP3.....

4、<mark></mark>

      :主要用于在视觉上向用户呈现那些需要突出显示或者高亮显示的文字

5、<time></time>

      :表示日期或者时间,可同时表示两者。

6、<ruby></ruby>

      :表示ruby注释(中文注音或字符)

7、rt

      :表示字符(中文注音或字符)的解释或发音

8、wbr (软换行)

      :wbr与br的区别:br元素是表示这个地方一定换行,而wbr元素在如果父级宽度够长,这不需要换行,否则在此处换行。

          对于字符型的语言作用大。

9、canvas      :表示画布

10、<command> 

      :表示命令按钮,比如单选按钮、复选框或按钮

11、<detail></detail>

      :表示用户要求得到并且可以得到的细节信息。

11、<datalist></datalist>

      :表示可选数据的列表,与input元素配合使用,可以制作出输入值的下拉列表

12、<datagrid></datagrid>

      :表示可选数据的列表,它以树形的形式来显示。

13、<keygen>

      :表示生成密钥

14、<output>

      :表示不同类型的输出,比如脚本的输出

15、<source></source>

      :媒介元素定义媒介资源。

17、<menu></menu>

      :表示菜单列表

三、新增input的类型

email url number range(必须输入一定范围内数值的文本输入框)、search、tel、color

Date Pickers(拥有多个可供选取日期和时间的新型输入框)

----data(日、月、年) 、month(月、年)、

----week(周、年)、tme(选取时间【小时和分钟)

----datatime (时间、日、月、年【UTC时间】)

----datetimelocal (时间、日、月、年【本地时间】)

四、新增表单文件属性

1、list 属性,该属性为某一个datalist的id。类似选择框。该元素本来不显示,获取焦点时以提示输入的方式显示。

五、表单验证

1、required :必须输入内容。

2、pattern :正则校验

3、min、max

4、step:控制input元素中的值增加或者减少时的步幅。

六、增强页面属性

1、ol列表中增加了start属性和reversed属性。

2、cite元素表示作品的标题。不能写人名在内。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值