肉渣教程

H5 新元素

上一节 下一节

H5新元素

这一节老朽来列个流水账,汝大致看一下就好啦 ^_^

新的语义/结构元素

HTML5 提供一些新的语义元素,以达到更好的文档布局:

标签 描述
<article> 定义文档内的文章
<aside> 定义页面侧栏
<bdi> 定义一列信息中会不断改变的部分
<details> 定义用户可以查看或者隐藏的细节
<dialog> 定义一个对话框或者对话窗口
<figcaption> 定义<figure>元素的标题
<figure> 定义一块比较独立的内容单元
<footer> 定义网页文档的页脚部分
<header> 定义网页文档的页头部分
<main> 定义文档的主要内容
<mark> 定义被标记或高亮显示的文字
<meter> 定义一个标尺(类似进度条)
<nav> 定义文档的导航菜单部分
<progress> 定义一个任务进度条
<rp> 定义在不支持五笔注释(偏旁部首拆解)时的显示内容
<rt> 定义字的偏旁部首(主要用于中文、韩文、日语)
<ruby> 定义字的五笔注释(偏旁部首拆解)(主要用于中文、韩文、日语)
<section> 定义文档的某一个部分
<summary> 定义一个总结性标题(针对)<details>
<time> 定义一个日期或者时间
<wbr> 定义一个主动断行

新的表单元素

标签 描述
<datalist> 定义input的预设选项
<output> 定义计算的结果

新的Input类型

H5中新的input类型(type)如下:

  • color
  • date
  • datetime
  • datetime-local
  • email
  • month
  • number
  • range
  • search
  • tel
  • time
  • url
  • week


H5中input的新属性如下:

  • autocomplete
  • autofocus
  • form
  • formaction
  • formenctype
  • formmethod
  • formnovalidate
  • formtarget
  • height and width
  • list
  • min and max
  • multiple
  • pattern (regexp)
  • placeholder
  • required
  • step

HTML5 中四种设置属性的方式

HTML5中有四种不同的属性设置方式,以input元素为例:

类型 示例
属性取值为空 <input type="text" value="Jerk" disabled>
双引号 <input type="text" value="Jerk">
单引号 <input type="text" value='Jerk'>
没引号 <input type="text" value=Jerk>

第四种没引号的方式是可行的,但是并不推荐这种写法,请尽量使用前三种方式。

HTML5 图形

标签 描述
<canvas> JavaScript可在canvas元素上绘图
<svg> 绘制svg图形

HTML5 媒体元素

标签 描述
<audio> 定义一个音频内容
<embed> 定义一个包含外部应用的容器
<source> 定义多媒体的来源(<video>和<audio>)
<track> 定义多媒体的轨道(<video>和<audio>)
<video> 定义一个视频内容

H5 新元素

上一节 下一节