HTML5元素

作者: 却道海棠依旧_4da8 | 来源:发表于2019-06-02 10:39 被阅读7次

结构元素

  • 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>

相关文章

  • HTML学习笔记(三)

    HTML5新增的元素和废除的元素 HTML5的结构 HTML5新增的元素和废除的元素

  • HTML5 新元素

    HTML5中的新元素 下面列出的HTML5的新元素,以及他们的描述。 新的语义/结构元素 HTML5提供的新元素可...

  • HTML5 表单元素

    HTML5 新的表单元素HTML5有以下新的表单元素 ?:不是所有的浏览器都支持HTML5新的表单元素,但是你...

  • HTML5 浏览器支持

    将 HTML5 元素定义为块元素HTML5 定了 8 个新的 HTML 语义(semantic) 元素。所有这些元...

  • HTML5权威指南 | 第二部分 HTML篇

    六、HTML5元素的背景知识 搞懂如何使用这些HTML5元素,和理解这些元素的含义同等重要。HTML5中的一大主要...

  • HTML 所有标签列表

    这里列出了所有的标准化的HTML5元素,该页只列出有效的 HTML5 元素 根元素 ElementDescript...

  • HTML5 新元素

    新的语义/结构元素 HTML5提供的新的元素可以构建更好的文档结构: 新的表单元素 新的输入类型 HTML5 - ...

  • HTML5 表单元素

    HTML5 的新的表单元素: HTML5 拥有若干涉及表单的元素和属性。 本章介绍以下新的表单元素: datali...

  • HTML5元素分类

    HTML5新增了27个元素,废弃了16个元素,根据现有的标准规范,把HTML5的元素按优先等级定义为结构性元素、级...

  • HTML5新增元素

    title: HTML5新增元素date : 2016-09-13tags : HTML5 0X01 HTML5新...

网友评论

    本文标题:HTML5元素

    本文链接:https://www.haomeiwen.com/subject/fyqztctx.html