HTML5新元素

New Semantic/Structural Elements(新的语义/结构性元素)####

HTML5为了更好的文档结构提供了新元素

Tag Description
<article> 在文档中定义文章
<aside> 定义页面内容侧边栏的内容
<bdi> 定义文本的文本方向,使其脱离其周围文本的方向设置。
<command> 命令按钮
<details> 元素细节
<dialog> 对话窗或者窗口
<embed> 外部交互内容或者插件
<figcaption> figure元素的标题
<figure> 定义媒介内容的分组,以及它们的标题。
<footer> 定义 section 或 page 的页脚。
<header> 定义 section 或 page 的页眉。
<main> 文档的主要内容
<mark> 被标记或者高亮的文本
<menuitem> 定义用户可以从弹出菜单调用的命令/菜单项目。
<meter> 预定义范围内的度量
<nav> 文档中的导航链接
<progress> 任务进度
<rp> 浏览器不支持ruby注释时显示的内容
<rt> 定义 ruby 注释的解释。
<ruby> ruby注释
<section> 在文档中定义section区块
<summary> 为detail元素定义一个明显的标题
<time> 时间/日期
<wbr> 规定在文本中的何处适合添加换行符。

New Form Elements(新的表单元素)

Tag Description
<datalist> 定义下拉列表
<keygen> 定义生成密钥
<output> 定义输出的类型。

New Input Types(新的Input 类型)

New Input Types New Input Attributes
<ul><li>color</li><li>date</li><li>datetime</li><li>datetime-local</li><li>eamil</li><li>month</li><li>number</li><li>range</li><li>search</li><li>tel</li><li>time</li><li>url</li><li>week</li></ul> <ul><li>autocomplete</li><li>autofocus</li><li>form</li><li>formaction</li><li>formenctype</li><li>formtarget</li><li>formtarget</li><li>height and width</li><li>list</li><li>min and max</li><li>multiple</li><li>pattern</li><li>placeholder</li><li>required</li><li>step</li></ul>

HTML5 ­ New Attribute Syntax(HTML5新的属性语法)

HTML5支持下面四种属性写法,采用哪一种取决于属性的需要。(以Input元素为例)

Tag Description
Empty <input type="text" value="John" disabled >
Unquoted <input type="text" value=John >
Double-quoted <input type="text" value="John">
Single-quoted <input type="text" value='John' >

HTML5 Graphics(制图)

Tag Description
<canvas> 使用JavaScript画图的画布
<svg> 使用SVG画图的图表

New Media Elements(新媒体元素)

Tag Description
<audio> 定义声音或音乐内容
<embed> 定义外部内容或插件
<source> video与audio的sources
<track> video与audio的tracks
<video> 定义视频或电影内容
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • HTML5 新元素 自1999年以后HTML 4.01 已经改变了很多,今天,在HTML 4.01中的几个已经被废...
    鹿守心畔光阅读 243评论 0 0
  • canvas是HTML5新添加的元素。这个元素负责在页面中设定一个区域,然后通过JavaScript动态的绘制图形...
    xujingguo阅读 1,006评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,923评论 18 139
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,551评论 1 19
  • 美丽青岛农业大学
    豪哥威武5525阅读 162评论 0 1