HTML5元素

结构元素

  • header
  • footer
  • section 部分,如章节、页眉、页脚等,配合h1~h6使用
  • acticle
  • aside
  • nav
  • main
  • figure 表示文档主流内容中的一个独立单元,可以使用figcaption元素为figure元素组添加标题

功能元素

  • video 视频
  <video controls="controls"></video>
  • audio 音频
  <audio controls="controls"></audio>
  • embed 用来插入各种多媒体 格式可以使Midi、Wav、AIFF、AU、Mp3等
<embed src = "horse.wav">
  • mark 主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字
  • dialog 定义对话窗口 open 打开 close 关闭
<dialog open></dialog>
  • bdi 定义文本的文本方向,使其脱离其周围文本的方向设置
  • figcaption 定义figure的标题
    <figure>
        <figcaption>黄浦江上的卢浦大桥</figcaption>
        <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>
  • time 表示日期或时间,也可以同时表示两者
<p>
  我们在每天早上 <time>9:00</time> 开始营业。
</p>
<p>
  我在 <time datetime="2010-02-14">情人节</time> 有个约会。
</p>
  • canvas 画布
  • output 表示不同类型的输出,比如脚本的输出
<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>
  • source 为媒介元素(比如<video> 和 <audio>)定义媒介资源 拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件
<audio controls>
  <source src="/i/horse.ogg" type="audio/ogg">
  <source src="/i/horse.mp3" type="audio/mpeg">
  您的浏览器不支持音频文件。
</audio>
  • menu 菜单列表。当希望列出表单控件时使用该标签
    <menu>
        <li><input type="checkbox" />RED</li>
        <li><input type="checkbox" />BLUE</li>
    </menu>
  • ruby 表示ruby注释(中文注音或字符)
    • rt 表示字符的解释或发音
    • rp 表示 在ruby注释中使用,以定义不支持ruby元素的浏览器所显示的内容
  <ruby>
   漢 <rt> ㄏㄢˋ </rt>
  </ruby>
  • wbr 表示软换行,与br的区别在于,br是在某一处必须换行,而wbr意思是浏览器或者父级窗口的宽度足够是就没必要换行。
  • command 表示命令按钮,如单选按钮,复选框或按钮 浏览器支持情况较差
  • details 表示用户要求得到并且可以得到的细节信息吗,它可以与summary元素配合使用。summary提供标题或图例。标题是可见的,单击标题时会显示细节信息
<details>
  <summary>Copyright 2011.</summary>
  <p>All pages and graphics on this web site are the property of W3School.</p>
</details>
  • detalist 表示元素可选的数据列表,与input元素配合使用,可以制作出输入值的下拉列表
    <input list="cars" id="myCar">
    <datalist id="cars">
        <option value="bmm"></option>
        <option value="bmm1"></option>
        <option value="bmm2"></option>
    </datalist>
  • datagrid 表示可选数据的列表,它以树形列表的形式来显示。
  • keygen 表示生成秘钥
<form action="/example/html5/demo_form.asp" method="get">
  用户名:<input type="text" name="usr_name" />
  加密:<keygen name="security" />
  <input type="submit" />
</form>
  • progress 表示运行中的进程,可以使用它来显示js中耗费时间的函数的进程,也可以用来表示进度
    <progress value="22" max="100"></progress>
  • meter 度量给定范围gauge内的数据
    <meter value="3" min="0" max="10"></meter>
  • track 定义用在媒体播放器中的文本轨道,播放带有字幕的视屏
<video width="320" height="240" controls="controls">
  <source src="forrest_gump.mp4" type="video/mp4" />
  <source src="forrest_gump.ogg" type="video/ogg" />
  <track kind="subtitles" src="subs_chi.srt" srclang="zh" label="Chinese">
  <track kind="subtitles" src="subs_eng.srt" srclang="en" label="English">
</video>

表单元素

  • tel 电话
  • search 搜索
  • url 地址
  • email 邮箱
  • datetime 表示日期时间的文本框
  • date 表示日期
  • month
  • week
  • time
  • datetime-local 本地时间
  • number
  • range范围文本框
  • color 颜色文本
  • fieldset 标签将表单内容的一部分打包,生成一组相关表单的字段 <legend> 标签为 fieldset 元素定义标题。
<form>
  <fieldset>
    <legend>健康信息</legend>
    身高:<input type="text" />
    体重:<input type="text" />
  </fieldset>
</form>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • h5元素大致的分为下面几大类: 1.内嵌------在文档中添加其他类型的内容,如audio,video,canv...
    点柈阅读 3,938评论 0 3
  • �1、html元素(包含lang属性,该属性不是必需的,但推荐加上)、�head元素、�说明字符编码的meta元素...
    xfnibuzd520阅读 3,655评论 0 2
  • HTML5< !--...--> 标签 comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。...
    野小宝阅读 5,129评论 0 10
  • HTML5 标签comment 注释标签用于在源文档中插入注释。注释内容不会被浏览器显示。为代码编写注释的好处是...
    才気莮孒阅读 9,569评论 1 25
  • HTML 5 HTML5概述 因特网上的信息是以网页的形式展示给用户的,因此网页是网络信息传递的载体。网页文件是用...
    阿啊阿吖丁阅读 10,149评论 0 0

友情链接更多精彩内容