WEB前端之HTML5[5]~HTML5增强的页面元素

• HTML5增强的页面元素
  • figure元素以及figcaption元素
  • details元素和summary元素
  • mark元素
  • progress元素和meter元素
  • meter元素
  • ol元素
  • dl元素
  • cite元素
  • small元素

HTML5增强的页面元素

figure元素以及figcaption元素:

figure元素是一种组合元素，带有可选标题， figure元素用来表示网页上一块独立的内容，将其在网页上移除之后，不会对网页上的其他内容产生任何影响，figure元素可表示的内容，可以是图片，统计图，或者代码示例
figcaption元素表示figure元素的标题，他从属于figure元素，必须书写在figure元素的内部，可以书写在figure元素的内部，或其他元素的前边或者后边。一个figure元素，最多只能放一个figcaption元素，但是允许放置多个其他元素

<!--示例代码-->
<figure>
<img src="imgs1.png" alt="备案截图">
<figcaption>备案截图</figcaption>
</figure>

运行结果图：

details元素和summary元素

details元素，是用来标示该元素内部的子元素可以被展开，收缩显示的元素，该元素具有一个boolean类型的open属性，该属性值为true的时候，该元素内部的子元素应该是被展开显示的，当该属性值为false的时候，其内部的子元素应该是被收缩起来，不显示的。默认值是false，页面打开时，其内部子元素应该处于收缩状态。另外，details元素内部不仅放置文字，可以放置表单、插件、或者统计图数据等等.
summary元素从属于details元素，用鼠标单击summary元素中的文字内容时，details元素中的所有从属元素被展开，或者收缩。如果details元素内没有summary元素，浏览器会提供默认文字以供单击。

<!--示例代码-->
<details>
<summary>Java</summary>
<summary>Android</summary>
<summary>HTML5</summary>
</details>


<!--js控制显示和隐藏-->
<details id="details" onclick="check(this)" >
<summary>Java</summary>
<p id="p">Java语言是一个开源、跨平台的强大语言。</p>
</details>


<!--js部分-->
<script>
function check(details) {
var p = document.getElementById("p");
//details.open()返回一个boolean类型的值
if(details.open()){
 p.style.visibility = "hidden";
 }else{
 p.style.visibility = "visible";
 }
 }
</script>

运行结果图分别如下：

mark元素

mark元素表示页面中需要突出显示或者高亮显示的对于当前元素具有参考作用的一段文字。

<!--示例代码-->
<p>这是一段文字，用来<mark>测试</mark>mark元素</p>

运行结果图:

progress元素和meter元素

progress元素代表一个任务的完成进度，这个进度是不确定的，表示进度正在执行，或者不清楚当前工作量有没有完成。也可以使用从0-某个数字，比如从0-100来表示当前的任务完成进度情况。这个元素，表示当前任务完成的一个属性，value元素表示当前任务量。然后它有一个最大值和最小值，用来规定一个范围。

<!--一个进度条的小例子-->
<section>
<h2>测试progress</h2>
<p>完成的百分比:<progress id="progress" max="100" value="0"><span>0</span>%</progress></p>
<input type="button" onclick="btn()" value="Click Me">
</section>


<!--js部分-->
<script>
function btn() {
//一个变量
var i = 0;
//搞一个方法
function thread_one() {
//如果小于等于100
if(i<= 100){
//自增
 i++;
 updateProgress(i);
 }
 }
//100毫秒执行一次这个方法
 setInterval(thread_one,100);
 }

function updateProgress(newValue) {
//获取progress元素
var progressBar = document.getElementById("progress");
//把传过来的值赋给progress元素的值
 progressBar.value = newValue;
//随时更新span的值
 progressBar.getElementsByTagName("span")[0].textContent = newValue;
 }
</script>

运行结果图：

meter元素

meter元素表示规定范围内的数值量。例如磁盘空间的使用情况等等..属性有6个 value设置值, max最大值 ,min最小值,low下限,high上限,optimum最佳值

<!--示例代码-->
<meter value="40" max="100" min="0" low="10" high="90" optimum="80"></meter>

运行结果图:

ol元素

在HTML5中，对ol元素进行改良，增加了start属性和reversed属性。
start属性指定了ol的编号从几开始，reversed属性是把ol元素的编号倒序排列。

<!--示例代码-->
<ol start="5" reversed>
<li>列表1</li>
<li>列表2</li>
<li>列表3</li>
<li>列表4</li>
<li>列表5</li>
</ol>

运行结果图：

dl元素

在HTML5中，将该元素进行重新定义，重新定以后的dl列表，表示多个名字的一个列表项，每一项都包含一条或多条带有名字的dt元素，用来表示术语，dt元素后边紧跟着一个或多个dd元素，在一个元素内，不允许有相同名字的dt元素，不允许有重复的术语。

<!--示例代码-->
<dl>
<dt>iPhone7 Plus</dt>
<dd>iPhone7 Plus是苹果公司最近发行的最新的苹果手机，真是不便宜</dd>
<!--可以包含多个dt-->
<dt>Java</dt>
<dd>Java语言是一种纯粹面向对象的语言</dd>
</dl>

运行结果图：

cite元素

cite元素表示作品，比如一本书，一篇文章，或者一首歌曲的一个标题等等，该作品可以在页面中被详细引用，也可以只在页面中提一下。

<!--示例代码-->
<p>我最喜欢的电影是<cite>你的名字</cite>,是新海诚的作品.</p>

运行结果图：

small元素

在HTML5中，对small元素进行重新的定义，使其有原来的通用展示型元素变为具体的专门用来表示小字印刷体的元素，通常例如在使用到免费声明/注意事项/法律规范/版权信息等等相关的法律文字的内容中，同时，不允许运用在页面主体内容中。只允许被当做额外的信息以依赖的方式内嵌在页面中使用。注意：small元素并不意味着元素的字号会改变，如果想改变字号，还是需要使用到css样式来改变

<!--示例代码-->
<p>版权所有 http://www.2345cms.com @xiaosai . version 1.0 &copy; 2016</p>