<!DOCTYPE html>
<
html
>
<
head
>
<
meta
charset
=
"UTF-8"
>
<
title
>浅谈html5增强的页面元素</
title
>
</
head
>
<
body
>
<
figure
>
<
img
src
=
"img/QQ截图20160103144626.png"
alt
=
"图片"
/>
<
img
src
=
"img/webp.jpg"
alt
=
"图片"
width
=
"211"
height
=
"191"
/>
<
figcaption
>我的图片组合</
figcaption
>
</
figure
><
br
/>
<
details
id
=
"details"
ontoggle
=
"detailfn(this)"
style
=
" cursor: pointer;"
>
<
summary
>精武风云</
summary
>
<
p
id
=
"p"
style
=
"visibility: hidden;"
>陈真(甄子丹 饰)当年为报杀师之仇,独闯虹口道场。。。</
p
>
</
details
><
br
/>
<
mark
>html5</
mark
>的高亮显示<
br
/>
<
section
>
<
h2
>progress元素的使用实例</
h2
>
<
p
>完成的百分比<
progress
id
=
"p"
max
=
"100"
><
span
>0</
span
>%</
progress
> </
p
>
</
section
><
br
/>
<
p
>磁盘使用量:<
meter
value
=
"40"
min
=
"0"
max
=
"160"
>40/160</
meter
>GB</
p
><
br
/>
<
input
type
=
"button"
value
=
"打开对话框"
onclick
=
"document.getElementById('dg').show();"
/>
<
input
type
=
"button"
value
=
"打开对话框showModal"
onclick
=
"document.getElementById('dg').showModal();"
/>
<
dialog
id
=
"dg"
style
=
"width:15%;text-align: center;"
>
<
form
>
<
label
for
=
"txtName"
value
=
"用户名:"
></
label
>
<
input
type
=
"text"
id
=
"txtName"
/><
br
/>
<
label
for
=
"pwd"
value
=
"密码:"
></
label
>
<
input
type
=
"text"
id
=
"pwd"
/><
br
/>
<
input
type
=
"button"
value
=
"登录"
/>
<
input
type
=
"button"
value
=
"关闭"
onclick
=
"document.getElementById('dg').close();"
/>
</
form
>
</
dialog
><
br
/><
hr
/>
<
a
href
=
"img/QQ截图20160103144626.png"
download
=
"文件名"
><
img
src
=
"img/QQ截图20160103144626.png"
/> </
a
><
br
/>
<
h3
>start与reversed实例</
h3
>
<
ol
start
=
"5"
reversed
=
""
>
<
li
>内容1</
li
>
<
li
>内容2</
li
>
<
li
>内容3</
li
>
<
li
>内容4</
li
>
<
li
>内容5</
li
>
</
ol
><
br
/>
术语解释:
<
dl
>
<
dt
>rss</
dt
>
<
dt
>rss也叫聚合rss是在线共享内容的一种简易方式(也叫聚合内容)</
dt
>
</
dl
><
br
/>
<
p
>最近上映的<
cite
>美国队长3</
cite
> 这个电影不错!</
p
><
br
/>
</
body
>
</
html
>