当前位置: 首页 > news >正文

HTML5新增的元素详解

 HTML5中新增了许多元素

Part1::新增的与结构相关的元素(主要是原来<div>元素的按照其功能进行了细分)

主体结构元素:

  • <section>元素:表示页面的一个内容区块
  • <article>元素:表示页面一块独立内容
  • <aside>元素:表示页面上<article>元素之外的但是与<article>相关的辅助信息
  • <nav>元素:表示页面中导航链接的部分

非主体结构元素:

  • <header>元素:表示页面中一个内容区块<section>或者整个页面的标题
  • <hgroup>元素:表示对于整个页面或者页面一个内容区块<section>的<header>进行组合
  • <footer>元素:表示对整个页面或者页面一个内容区块<session>的页脚
  • <figure>元素:表示一段独立的文档流内容
  • <figcaption>元素:表示<figure>元素的标题

 

Part2:新增的与结构无关的元素

  • <video>元素:用于定义视频,无需<object type="video/ogg">
  • <audio>元素:用于定义音频, 无需<object type="application/ogg">
  • <embed>元素:用于插入各种多媒体,可以各种格式
  • <mark>元素: 用于向用户在视觉上突出显示某些文字
  • <progress>元素:表示运行中的进程
  • <time>元素: 用于表示日期或者时间, 或者两者
  • <ruby>元素: 表示ruby注释
  • <rt>元素:表示字符的解释或者发音
  • <rp>元素:在<ruby>内使用,表示不支持<ruby>元素的浏览器所显示的内容
  • <wbr>元素:表示软换行,可以根据浏览器的窗口或者父级元素的宽度自己决定
  • <canvas>元素:表示画布,然后让脚本把想画的东西画在上面
  • <command>元素:表示命令按钮
  • <details>元素:表示当用户点击某元素时候想要得到的细节信息,常和<summary>元素联合使用
  • <summary>元素:是<details>元素的第一个子元素,表示了<details>的标题
  • <datalist>元素:表明了可以选择的数据列表,以下拉列表形式显示
  • <datagrid>元素:表明了可选的数据列表,但是以树列表的形式显示
  • <keygen>元素:表示生成密钥:
  • <output>元素:表示不同类型的输出
  • <source>元素:表示为<video><audio>等媒体元素定义资源
  • <menu>元素:表示了菜单列表

 

Part3:新增的<input>元素的类型:

  • <email>: 表示必须输入email地址的文本输入框
  • <url>:表示必须输入url地址的文本输入框
  • <number>:表示必须输入数值的文本输入框
  • <range>:表示必须输入一定范围内数字的文本输入框
  • Date Pickers




本文转自 charles_wang888 51CTO博客,原文链接:http://blog.51cto.com/supercharles888/852783,如需转载请自行联系原作者

相关文章:

  • fedora学习笔记 7:su与su-切换用户
  • c语言第六次作业
  • Delphi编写事件模型客户端(2)
  • nginx日志切割代码
  • [Android]竖直滑动选择器WheelView的实现
  • 刻录机读空白盘时提示无法打开
  • 枚举项的数量限制在64个以内
  • 关于C和C++语言声明和定义的说明
  • Tomcat 8安装与配置
  • [CTO札记]如何测试用户接受度?
  • 启动流程
  • Linux定时执行指定的脚本文件
  • 基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET - 会话
  • LINUX DNS服务的配置(二)
  • WCF使用NetTcp传输文件
  • 「前端早读君006」移动开发必备:那些玩转H5的小技巧
  • 【399天】跃迁之路——程序员高效学习方法论探索系列(实验阶段156-2018.03.11)...
  • 【node学习】协程
  • 【跃迁之路】【519天】程序员高效学习方法论探索系列(实验阶段276-2018.07.09)...
  • C# 免费离线人脸识别 2.0 Demo
  • create-react-app项目添加less配置
  • JavaScript服务器推送技术之 WebSocket
  • js作用域和this的理解
  • Spring Cloud(3) - 服务治理: Spring Cloud Eureka
  • Vue2.0 实现互斥
  • 记一次用 NodeJs 实现模拟登录的思路
  • 跨域
  • 如何正确配置 Ubuntu 14.04 服务器?
  • 使用Maven插件构建SpringBoot项目,生成Docker镜像push到DockerHub上
  • 体验javascript之美-第五课 匿名函数自执行和闭包是一回事儿吗?
  • 一个项目push到多个远程Git仓库
  • 说说我为什么看好Spring Cloud Alibaba
  • ​人工智能之父图灵诞辰纪念日,一起来看最受读者欢迎的AI技术好书
  • # .NET Framework中使用命名管道进行进程间通信
  • #HarmonyOS:软件安装window和mac预览Hello World
  • #mysql 8.0 踩坑日记
  • (12)目标检测_SSD基于pytorch搭建代码
  • (ZT)出版业改革:该死的死,该生的生
  • (备忘)Java Map 遍历
  • (笔记)Kotlin——Android封装ViewBinding之二 优化
  • (附源码)ssm高校运动会管理系统 毕业设计 020419
  • (附源码)ssm基于web技术的医务志愿者管理系统 毕业设计 100910
  • (转) Android中ViewStub组件使用
  • (转)nsfocus-绿盟科技笔试题目
  • .NET Core工程编译事件$(TargetDir)变量为空引发的思考
  • .NET HttpWebRequest、WebClient、HttpClient
  • .netcore 如何获取系统中所有session_如何把百度推广中获取的线索(基木鱼,电话,百度商桥等)同步到企业微信或者企业CRM等企业营销系统中...
  • @Autowired 与@Resource的区别
  • @Validated和@Valid校验参数区别
  • [100天算法】-x 的平方根(day 61)
  • [AIGC] Nacos:一个简单 yet powerful 的配置中心和服务注册中心
  • [Android]使用Android打包Unity工程
  • [BZOJ5125]小Q的书架(决策单调性+分治DP+树状数组)
  • [C/C++]数据结构 堆的详解
  • [caffe(二)]Python加载训练caffe模型并进行测试1