返回列表 发新帖

html5所有标签汇总及标签意义解释

668.2k 14
swmozowtfl 发表于 2015-7-9 23:01:59|湖北 | 查看全部 阅读模式
结构标签:(块状元素) 有意义的div
1 I6 x3 Q2 T3 _0 [4 B<article> 标记定义一篇文章
( ?! C6 t8 ]: G<header> 标记定义一个页面或一个区域的头部& b0 U5 D. u$ b1 z- x
<nav> 标记定义导航链接. P+ d4 W( T% F# O
<section> 标记定义一个区域
0 J- L2 j: g3 @4 v3 c9 @0 z<aside> 标记定义页面内容部分的侧边栏
, O$ w& O1 K7 O& Q4 k9 ]8 i0 V<hgroup> 标记定义文件中一个区块的相关信息
' Q8 g/ w( l% I. g! M; v! f<figure> 标记定义一组媒体内容以及它们的标题 / U1 ]3 g/ ~8 I4 z2 n: q  `
<figcaption> 标签定义 figure 元素的标题。
& U3 O$ {6 `2 C3 W<footer> 标记定义一个页面或一个区域的底部) g9 v; X$ G3 z( f0 [
<dialog> 标记定义一个对话框(会话框)类似微信) p0 |* M8 _# a5 _! e$ A
多媒体交互标签
. E$ ?) @% ^, c<video> 标记定义一个视频
7 V; a- s0 h9 b! D" Z% ]! u<audio> 标记定义音频内容
* u! @. S" F+ H9 ^<source> 标记定义媒体资源* l$ c$ P  P- {' O* {/ _9 a
<canvas> 标记定义图片
  T8 n2 I" j% x) a; b<embed> 标记定义外部的可交互的内容或插件 比如flash% A6 W0 R- M6 |
web应用标签
. ]+ M3 G* x" X! |2 {<menu>命令列表
( @# }% k, p% f<menuitem>menu命令列表标签 ff(嵌入系统)
, o1 D9 M; S) x2 g, {3 T; T<command> menu标记定义一个命令按钮
5 B/ F" O& q. X" K& O9 z1 _0 J<meter>状态标签(实时状态显示:气压、气温)c、o# b: j6 N) t2 }- _. g' `: d! _! l  ]
<progress>状态标签 (任务过程:安装、加载) c、f、o
! ?1 t5 O1 B8 _9 {  J: D<datalist> 为input标记定义一个下拉列表,配合option f、o
' Q; s* f9 |4 b- O" F<details> 标记定义一个元素的详细内容 ,配合dt、dd c! ^# m* Y9 X  c" y( L7 h
注释标签
6 X3 D7 C; o5 _  @: C0 U7 Q' S<ruby> 标记定义 注释或音标3 P0 X. r6 B, @/ p
<rp> 告诉那些不支持 ruby元素的浏览器如何去显示* z! `, Z5 O  ]: \# K: L
<rt> 标记定义对ruby的注释内容文本
# A" t. z" y) b+ z2 @0 W6 o/ p9 P其他标签+ w3 ^( F  r* ?2 k  Y% M  ]
<keygen> 标记定义表单里一个生成的键值(加密信息传送)o、f
/ r6 ?1 W. A  w1 _, ?<mark> 标记定义有标记的文本 (黄色选中状态)
' R0 A) ]3 P! o; k3 [0 x- v<output> 标记定义一些输出类型,计算表单结果配合oninput事, A9 \# V8 H1 c6 O- i/ i2 q
删除的html标签
  H3 l8 B: d: I/ e/ \1 o! I/ t8 w: Z纯表现的元素:$ r" M, T3 M! d( v" b# b. _/ o8 I
basefont,big,center,font, s,strike,tt,u;. a0 \- X& l" ?+ R& B' U
对可用性产生负面影响的元素:
% D  \( i/ K& Vframe,frameset,noframes;* w( _/ n; T# }) t2 B" x( |' R
产生混淆的元素:7 _- {& R7 v0 s9 C: f0 }
acronym ,applet,isindex,dir( v% b- B* ?6 `4 j
重新定义的html标签$ R1 u5 W7 J& O. U
<b> 代表内联文本,通常是粗体,没有传递表示重要的意思7 G" q( h& G% P
<i> 代表内联文本,通常是斜体,没有传递表示重要的意思
! L( G2 D6 z4 K1 z<dd> 可以同details与figure一同使用,定义包含文本,dialog也可用
8 e3 J8 B6 t8 w<dt> 可以同details与figure一同使用,汇总细节,dialog也可用* A: g# h! N6 Z! ^7 V/ }1 T
<hr> 表示主题结束,而不是水平线,虽然显示相同) A4 Y5 ]* B1 p5 w
<menu> 重新定义用户界面的菜单,配合commond或者menuitem使用
4 H# }5 J, c: h. {<small> 表示小字体,例如打印注释或者法律条款
7 E7 S* U% Y. c<strong> 表示重要性而不是强调符号
5 b! e" t/ r3 m# |3 o示例代码:
/ _9 M1 T8 W& ~' R) B9 Gxml/html code复制内容到剪贴板7 E) z( |2 X0 d6 F
<xmp>
$ u: j# `3 r3 X2 P) ?: R<!doctype html>
/ a0 }8 `, _1 e: U- a* \<html> ) d7 B3 Z- e1 n6 j
<head>
: }) A; U9 @7 s2 y <style>
  L& {$ d4 s5 p/ @5 n7 m- A
7 u! Z2 G' i4 Z( g; |- \/ ]
4 L: l; m  `3 P2 b  a header{height:150px;background:#abcdef}
* ~$ g6 K& Q6 M$ b6 _ nav{height:30px;background:#ff9900;margin-top:100px} 1 V! H5 w1 s; u4 w
nav ul li{width:100px;height:30px;float:left;line-height:30px}
0 {0 E. \5 s$ h8 @  f& S ' x% R4 M1 f1 I
div{margin-top:10px;height:1000px;} % h8 G* l  a4 v
section{height:1000px;background:#abcdef;width:70%;float:left} ( w6 n0 ]; |0 l2 O/ X/ n
article{background:#f90;width:500px;margin:0 auto;text-align:center}
& ?& J$ [0 p6 r! ^8 O+ T) A
% n& Y+ p( }. a. e/ W& y6 O aside{height:1000px;background:#abcdef;width:28%;float:right}
1 x- s# s' m" E  o2 Z2 n
* e. y' F/ q! Q9 ]8 }+ [ footer{height:100px;background:#abcdef;clear:both;margin-top:10px}
& A% }; e  B$ j# z/ g6 j; P </style>
* c& V" @0 c0 S/ M/ A </head> 4 F% q, d, t/ Y- h/ g5 N" I3 D
<body>
% x- R" Q7 ~/ t; t  K <header> & o) V: v7 V' y
<p>这是一个header标签</p> 8 p: I9 G0 O4 n; b; N
<nav> % f6 X1 [  s& g5 L
<ul> 4 k7 f$ R& }! J* V9 g7 ~
<li>首页</li> / A2 A2 g, _$ J3 R5 e( d& h3 h8 s! |
<li>起夜</li>
( d* `8 e0 m( d/ U8 g. a <li>论坛</li>
  m( Q/ C! }+ s' P <li>商城</li> 3 Z# {' L2 x, d  J/ p
<li>社区</li> ; c# o8 ?& g( b0 B
</ul> 6 w) P$ A7 _8 E3 ~
</nav> , r9 T) ?+ c7 j: q' [) x- X1 w
</header>
& W) j% M8 i6 J* y. ]1 l& _, X <div>
: H3 A) j& X9 h5 F <section> ! ]0 K* I9 l, n% F4 _' _. t# d
<p>这是一个section标签</p>
' I7 l* A% u4 d' g <article>
. }; V% f) f0 C <h2>春晓</h2>
/ V6 ~+ |4 H3 k: A" ~+ ?6 s% q2 j <p>
$ I' N) a; x4 G$ T8 M2 i& W. S3 S. ? 春眠不觉晓,<br />
$ v8 ^) m5 ]! ^' X) ~ 处处蚊子咬,<br />
% `. S# i; C3 s& W5 ^4 B9 _ 打上敌敌畏,<br />
) h. ~( F* b" ^9 d) V2 V* C; | 不至死多少。<br />   s- Q( K* r" V
</p> 8 ^1 y9 \' w6 N( O# z
8 G+ O3 Q) x# h; M- S$ R
</article>
% j4 Z. J7 q! l8 S <hr /> ; C4 T& [; E1 l3 R4 Z' K
<article> 7 m5 ]) Y7 ~; |5 }
<h2>上学歌</h2> $ \0 X$ c* |& L  |. ?6 k7 g4 U
<p>
3 {3 z9 ~0 J6 H, _( u 太阳当空照,<br /> / K# x5 n- M- L+ p' _
花儿对我笑,<br /> & N  g' H8 q4 l4 O2 F; D' n
小鸟说早早早,你为什么背上小书包?<br /> ' l* |, `/ A3 z6 G, t$ E# a- |
我要炸学校老师不知道,一拉线,赶快跑,<br />
& I6 L0 p+ B. B+ k- c+ z; q4 \0 e 轰的一声,学校炸没了。<br />
+ }, o: W2 Q! s+ v1 D: G </p> ' ]: m1 W) \- Z2 m* b, n4 Y/ ^

% ~4 F* L9 t+ _  a/ I </article> # e# y4 h) J( _0 C
<hr />
( R) D6 e* K; M) ~% v( o" @' F <figure>
  |# M2 b. ~2 I% @ <figcaption>ufo</figcaption> ; M3 G6 B- ~3 Z0 T
<p>不明飞行物 unknown flying object</p> 2 i, K/ @, C" x- W4 t$ k# g
</figure>
0 r1 k  k( p/ t$ Y/ w( ^' B <figure>
% v' \+ F8 a& |& Z. [ <dt>dds</dt>
4 K# ~0 r* A- _1 |1 {) o <dd>大屌丝</dd>
, ?% a( m; G7 m9 G. v </figure> ; i! u" T  ?2 e' Y$ O5 ?: ?
<hr /> . P0 z+ S6 R, E
<dialog> ( X# \7 N# c4 s( N
<dt>唐僧:悟空,你又调皮了,观音姐姐的月光宝盒怎么能乱扔呢?</dt>
$ [" I) p) I8 ]1 p <dd>悟空:...(看着)</dd> ; {9 r: }7 U% b
<dt>唐僧:乱扔是不对的,砸到小朋友怎么办?就算砸不到小朋友,砸到花花草草也是不好的嘛</dt>
! M  o! O: Y* f6 `" m7 s* t <dd>悟空:...(纠结)</dd> " i! v, j( \5 a6 c( t2 |
<dt>唐僧:悟空你想要么?想要你就告诉我呀,你不告诉我怎么知道你想要呢?。。。。</dt>
4 a/ x/ C- x7 M& d <dd>悟空:我靠!(一棍子抡上去!)</dd> ! q+ ]- s/ `( K- R+ x5 b: T: J
</dialog> % N( b6 n; y2 [) i$ o. Y; {
<hr />
# c( q, p7 m/ U <menu>
; E. B7 f' e4 |! K7 r <li>点击</li>
8 p5 `3 u' |. j <li>右键单击</li> 7 w, V' K1 I; g! _6 v* k3 A
</menu>
; z+ W7 G# p! G# _- ]5 a <hr />
$ K1 n/ w8 I: T# \ <span contextmenu=candan>右键单击我试试</span>
9 u, z- P/ c# E <menu type=context id=candan>   Z) N* V" ]1 r  s) C6 F# o
<menuitem label=菜单一 onclick=alert('我是一个寂寞') icon=> * A/ V: J" u1 p3 e# m" x
</menu>
/ {9 a9 X' T: ?7 C7 R <hr />
6 I% _' U. F) d" G7 {3 T <meter min=0 max=10 value=5 low=3 high=7 ></meter> 5 P0 P: Y" |" _4 |' x/ Z
<progress max=100 value=0 id=pro></progress>
3 N/ v. K6 J- H. Z: \& {0 f5 x) ? <script>
9 ]8 g+ z3 j4 i$ f% t% i3 j var pro =document.getelementbyidx_x_x_x('pro');
& m' ~$ z* ], b; ]6 x  b1 R setinterval(function(){ 4 W7 Z0 w% z# W+ l
pro.value+=1;
; v' i8 _7 ~( X$ p' ?3 } },100); & w7 N( q1 H9 E
</script> , ]( ^, R( Y. p# f9 m4 l
<hr /> 7 G2 E3 J& g6 b# u5 }7 O2 {
<details>
. w/ m; r& v7 |1 t <dt>这是一个问题?</dt> : [( z" F) P4 F: W( T. |
<dd>to be or not to be</dd> 0 A) [' [1 m0 m9 k; j1 r
<dt>这是一个问题?</dt>
+ h5 B) `3 _+ J/ z <dd>to be or not to be</dd>
% s6 X8 J- ~* c" X  a <dt>这是一个问题?</dt> * a# c% M+ ^9 R8 f) d! e0 W
<dd>to be or not to be</dd> 9 l7 |/ w% `5 i5 O
</details> 4 {/ w0 D( H' N/ Z2 E( y  `
<hr /> 0 b% r6 }2 C8 W7 r1 h+ [
<ruby>夼<rp>(</rp><rt>kuang</rt><rp>)</rp></ruby>
4 }$ y$ L; v6 J) V+ z2 ]7 q5 p <hr /> / u0 ]) W" s  b2 _# v9 E
女人<mark>最喜欢做的事情</mark>就是逛街。。。吃零食。。逛街。。吃零食,偶尔还会呜呜的哭, 2 E, O* u7 X/ U1 n* S
于是总结了下女人:逛吃逛吃逛吃逛吃。。。呜呜呜~· 4 s6 R! v5 c; `
</section>
- t3 J# T1 r  ?# G1 W* d4 ` <aside> # l' c9 }4 n3 _5 S9 j
<p>这是一个aside标签</p>
6 S1 Z2 u% ^& D, k# W <hgroup>
' M% y: K+ e/ d, d7 {- @0 q <h3>女生宿舍为何频频被盗</h3>
. o+ w0 {. K! `/ i$ ^2 S+ ~$ K <h3>两百头母猪为何半夜惨死</h3>
6 a4 Y  g. ^, \7 D; V3 a5 d, N <h3>是人性的扭曲?</h3>
: U% ?3 z+ _- {0 H% `. h, l7 |) | <h3>还是道德的沦丧!</h3> 1 x9 p6 c% |, C2 V# J6 S& \7 @
</hgroup> 0 J  \/ u$ t+ e1 l7 x7 {, T
</aside>
- k. I. L* M2 `8 `$ M! Y7 i6 E </div>
- _# F# _! |8 _; u  a9 I <footer>
5 I1 D; _; X# A3 d$ w1 E <p>这是一个footer标签</p>
, M; \( F" ~! Q. z! v <hr />
8 W( V( R: F$ E! _% p$ U' d+ P <small>法律条文</small>
4 x* \5 A2 O" m9 [& P# u <small>联系我们</small>
$ |( [, {$ F: y5 T# ]8 p# p <small>客户意见</small>   J; `" z2 e4 [; Q
<small>商户合作</small> ( I, c4 a  T& Y( R4 ^1 W5 V3 ]
</footer> 5 R) Q! z. g  [" v6 j
</body>
, c. F6 Y( B! a  Y, c</html>
) u4 }4 d, i7 W& {% S, u  ?</xmp>
  c9 L/ v7 O; u! s. L0 T
2 ]( G9 F6 z) b  K/ E更多网页制作信息请查看: 网页制作

回复|共 14 个

seazvyt 发表于 2016-1-25 19:09:05|美国 | 查看全部
我又回复了
GoodyFouppy 发表于 2016-1-25 19:09:32|INNA | 查看全部
苍天之下,厚土之上,竟有如此奇人异士、文人墨客!讥讽于谈笑间,笑骂于无形中,层次之高,境界之深,非我等所能匹及,偶像啊!
bqtklouu 发表于 2016-1-25 19:10:04|Reserved | 查看全部
哦~~~明白了....
wwdu926a 发表于 2016-1-25 19:10:12|法国 | 查看全部
这个论坛值得推荐,给了我们这么好的一个平台
Acropozelan 发表于 2016-3-2 16:21:05|Reserved | 查看全部
兄弟....表给偶丢丢哦....
seazvyt 发表于 2016-3-2 16:21:50|美国 | 查看全部
看完楼主的帖子,我的心情竟是久久不能平静
mwxny 发表于 2016-3-2 16:22:01|北美地区 | 查看全部
我去看看 网络上的事 我不是很会 哎
effoggikeftor 发表于 2016-3-2 16:22:05|INNA | 查看全部
本人过去、现在以及将来都不认识楼主,且自古以来与楼主无利益关系。楼主表述之事与本人无关
Acropozelan 发表于 2016-3-2 16:22:29|北美地区 | 查看全部
挨骂也是幸福~~~
bqtklouu 发表于 2017-4-11 10:45:45|美国 | 查看全部
唉!猪!你怎么了?
mwxny 发表于 2017-4-11 10:46:17|美国 | 查看全部
这篇帖子构思新颖,题材独具匠心,段落清晰,情节诡异,跌宕起伏,主线分明,引人入胜,平淡中显示出不凡的文学功底,可谓是字字珠玑,句句经典,是我辈应当学习之典范(不好意思回错帖了
Mqokjdvq 发表于 2017-4-11 10:46:42|美国 | 查看全部
因删贴不及时所产生的任何法律(书法,基本法,劳动法,婚姻法,输入法,国际法,今日说法,与台湾关系法及文中涉及或可能涉及以及未及之法,各地治安管理条例)纠纷或责任本人概不负责。
effoggikeftor 发表于 2017-4-11 10:48:52|INNA | 查看全部
呵呵 我可不敢~~~~
bqtklouu 发表于 2017-4-11 10:49:03|印度 | 查看全部
我只是为了十万积分默默奋斗。

回复

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

得知互动是一个融创意、设计、开发、营销、生活、互联网于一体的专业交流分享平台。
Copyright © 2026 站长技术交流论坛|互联网技术交流平台|Ai技术交流平台 版权所有 All Rights Reserved. Powered by Discuz! X5.0 鄂ICP备15006301号-5|鄂公网安备 42018502006730号
关灯 在本版发帖 扫一扫添加QQ客服 返回顶部
快速回复 返回顶部 返回列表