html5 新增的页面 元素

figure 和 figcaption元素
test.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<form>
    <figure>
        <img src="海豚.png"  alt="海豚"></img>
        <img src="火烈鸟.png"  alt="火烈鸟"></img>
        <img src="鹿鹿.png"  alt="鹿鹿"></img>
        <figcaption>动物</figcaption>
    </figure>
</form>
</body>
</html>

图片

                                 

效果:

 detail和summary元素

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<script>
    function detail_onclick(detail) {
         var p=document.getElementById("p");
         if(detail.open)  {
               p.style.visibility=‘hidden‘;
         }else {
             p.style.visibility="visible";
         }

    }

</script>
<details id="detail" onclick="detail_onclick(this)">
    <summary>战狼2</summary>
    <p id="p" style="visibility:hidden ">吴京自导自演的电影,是一部红遍全国的动作片,广受国人的好评,央视多次报道</p>
</details>
</body>
</html>

效果:

 mark元素

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<p>这是用来测试<mark>mark</mark>元素的例子</p>
</body>
</html>

效果:

    

 meter

test.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>

<body>
<meter  value="45"  min="0"  max="100"  low="10" high="90" optimum="60"> </meter>
</body>
</html>
效果:

2017-09-03  12:18:15 
时间: 2024-10-20 13:47:57

html5 新增的页面 元素的相关文章

HTML5新增的语义元素、JS常用对象

HTML5新增的语义元素 <header>元素表示页面中一个内容区域或整个页面的标题,通常他可能是一个页面中的(指主体标记中的第一个元素),可以包含站点的标题.Logo和旗帜广告 <header> <img src="logo.png"> <h1>YEN的Java Web之路</h1> </header> <footer>元素表示整个页面或页面中一个区域块的脚注,通常包含一些基本信息,包括一些基本信息:

HTML5 增强的页面元素

一.HTML5 改良的 input 元素的种类 1.<input type="number" id="num1"> var n1 = document.getElementById("num1").valueAsNumber; 七.HTML5 增强的页面元素 1.figure.figcaption <figure> 标签规定独立的流内容(图像.图表.照片.代码等等).figure 元素的内容应该与主内容相关,但如果被删除,

2.HTML5新增的其他元素

HTML5新增的其他元素: video元素用于定义视频. audio元素用于定义音频. embed元素用于插入各种多媒体,格式可以是Midi.Wav.AIFF.AU.MP3等. mark元素主要用来在视觉上向用户呈现哪些需要突出显示或高亮显示的文字.mark元素的一个比较经典的应用就是在搜索结果中向用户高亮显示搜索关键词. progress元素表示运行中的进程,可以使用process元素来显示JavaScript中消耗时间的函数的进程.   <progress value="22"

HTML5新增的结构元素

HTML5的结构 一:新增的主体结构元素 在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉,页脚内容区块等文档结构相关联的结构元素. 1.1article元素 article元素代表文档,页面或应用程序中独立的完整的,可以独自被外部引用的内容,<article> 标签定义外部的内容.article元素是可以嵌套使用的,内层的内容在原则上需要与外层的内容相关联, 另外article元素也可以用来表示一个插件. <time> 标签定义日期或时间,或者两者.pubdate

《Web前端笔记2.10-2.11》 HTML5 新增的结构元素

课程背景: 在 HTML5 中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的元素. 核心内容:1.Article2.Section3.Nav4.Aside5.Time6.Pubdate 7. header 元素8. footer 元素9. hgroup 元素10. address 元素 article 元素 article 元素代表文档,页面或应用程序中独立的.完整的.可以独自被外部引用的内容. section 元素 本课时讲解 HMTL5 新增的主体结构元素

html5新增表单元素和属性

从三方面来介绍html5表单的新特性表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body><form action="upload.php" method="post" accept-charset="utf-8" id="form1"&g

疯狂的表单-html5新增表单元素和属性

疯狂的表单 2015/11/27 16:44:07 从三方面来介绍html5表单的新特性 表单结构更灵活 要提交数据的控件可以布局在form标签之外,看下面的代码,表单元素可以写到form元素之外,只需在元素中加入form="form1"属性,也可提交到form元素指定的服务器地址 <body> <form action="upload.php" method="post" accept-charset="utf-8&

[html5] 学习笔记-html5增强的页面元素

在 HTML5 中,不仅增加了很多表单中的元素,同时也增加和改良了可以应用在整个页面中的元素.重点包含 figure.figcaption.details.summary.mark.progress.meter.ol.dl.cite .small元素. 1.figure,figcaption元素 figure元素用来表示网页上一块独立的内容,可以是图片.统计图.代码实例. figcaption元素从属figure元素,表示figure元素的标题:一个figure元素只能放置一个figcaptio

HTML5新增的常用元素

1.文档结构元素 <article>:该元素用于代表页面上独立.完整的一篇“文章”. <section>:该元素用于对页面的内容进行分块. <nav>:该元素专门用于定义页面上的导航条. <aside>:该元素专门用于定义当前页面或当前文章的附属信息. <header>:该元素主要用于为<article.../>元素定义文章的“头部”信息. <hgroup>:该元素主要用于组织多个<h1.../>~<h6