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>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 219,539评论 6 508
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,594评论 3 396
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 165,871评论 0 356
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,963评论 1 295
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,984评论 6 393
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,763评论 1 307
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,468评论 3 420
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,357评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,850评论 1 317
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 38,002评论 3 338
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,144评论 1 351
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,823评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,483评论 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 32,026评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,150评论 1 272
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,415评论 3 373
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 45,092评论 2 355

推荐阅读更多精彩内容

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