zoukankan      html  css  js  c++  java
  • HTML5一些元素的整理

    address元素:

    定义和用法

    <address> 标签定义文档文章的作者/拥有者的联系信息

    如果 <address> 元素位于 <body> 元素内,则它表示文档联系信息

    如果 <address> 元素位于 <article> 元素内,则它表示文章的联系信息

    <address> 元素中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <header>
     9     <h1>HTML5</h1>
    10 </header>
    11 <footer>
    12     <address>
    13         <a href="/" title="晨落梦公子">晨落梦公子</a>
    14     </address>
    15     时间:<time datetime="2016-01-21">2016年1月21日</time>
    16 </footer>
    17 </body>
    18 </html>
    address

    生成的为:

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    details元素:

    定义和用法

    <details> 标签用于描述文档或文档某个部分的细节

    内含有:summary

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <details>
     9 <!--<details:用于展开和收缩的。貌似不能用ie而打开-->
    10     <summary>
    11     <!--<summary:展开的标题-->
    12         学习需要的动力
    13     </summary>
    14     <p>
    15         <!--以下是折叠的内容-->
    16         想一想未来吧
    17     </p>
    18 </details>
    19 </body>
    20 </html>
    details

    生成的为:

    里面的倒三角是展开项

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    figure元素:

    定义和用法

    <figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。

    figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

    内容有:figcaption,为图片设置标题

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <figure>
     9 <!--<figure>:插入图片-->
    10     <img src="1.jpg" title="死神">
    11     <figcaption>死神</figcaption>
    12     <!--<figcaption:为图片设置标题-->
    13 </figure>
    14 </body>
    15 </html>
    figure

    生成的为:

    这里不再赘述,just生成个图片。

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    mark元素:

    定义和用法

    <mark> 标签定义带有记号的文本。请在需要突出显示文本时使用 <m> 标签。

    即是特殊字高亮。

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <header>
     9     <h1>以下是<mark>HTML5</mark>的搜索结果</h1>
    10 <section>
    11     <nav>
    12         <ul>
    13             <li>
    14                 <h2><a href="/"><mark>HTML5 </mark>百度全科</a></h2>
    15             </li>
    16         </ul>
    17     </nav>
    18     <figure>
    19         <img src="4.jpg" title="HTML5">
    20         <aside>
    21             <p>
    22                 万维网的核心语言、标准通用标记语言下的一个应用超文本
    23                 标记语言(<mark>HTML</mark>)的第五次重大修改(这是一
    24                 项推荐标准、外语原文:W3C Recommendation、见本处参考资
    25                 料原文内容:)。
    26             </p>
    27         </aside>
    28     </figure>
    29 </section>
    30     <footer>
    31         <a href="">发展历程</a>
    32         <a href="">新元素</a>
    33         <a href="">技术要点</a>
    34     </footer>
    35 </header>
    36 </body>
    37 </html>
    mark

    生成的为:

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    meter元素:

    定义和用法

    <meter> 标签定义已知范围或分数值内的标量测量。也被称为 gauge(尺度)。

    例子:磁盘用量、查询结果的相关性,等等。

    生成进度条

    注释:<meter> 标签不应用于指示进度(在进度条中)。如果标记进度条,请使用 <progress> 标签。

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <p>硬盘使用情况:<meter value="30" max="100" min="0">30/100</meter>GB </p>
     9 <!--<meter:生成进度表;value:当前进度;max总进度;min:最低进度-->
    10 <p>硬盘使用情况:<meter value="30" max="100" min="0" low="40" high="80" optimum="23"></meter>GB </p>
    11 <p>硬盘使用情况:<meter value="30" max="100" min="0" low="40" high="80" optimum="42"></meter>GB </p>
    12 <p>硬盘使用情况:<meter value="30" max="100" min="0" low="40" high="80" optimum="83"></meter>GB </p>
    13 <!--optium:低于low显示绿色。高于low但是低于high显示黄色。高于high显示红色-->
    14 </body>
    15 </html>
    meter

    生成的为:

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    ol元素:

    定义和用法

    <ol> 标签定义有序列表

    注:IE不支持。

     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <ol start="1" type="1" reversed="reversed">
     9 <!--<ol:输出序列,
    10 start:设置开始的序号,
    11 type:设置类型,如字母型、阿拉伯数字型等,
    12 reversed:倒序排列-->
    13     <li><a href="address.html">有序列表A</a> </li>
    14     <li><a href="detailsDemo.html">有序列表B</a> </li>
    15     <li><a href="figureDemo.html">有序列表C</a> </li>
    16 </ol>
    17 </body>
    18 </html>
    ol

    生成的为:


    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    progess元素:

    定义和用法

    <progress> 标签标示任务的进度(进程)。

    提示和注释

    提示:请结合 <progress> 标签与 JavaScript 一同使用,来显示任务的进度。

    注释:<progress> 标签不适合用来表示度量衡(例如,磁盘空间使用情况或查询结果)。如需表示度量衡,请使用 <meter> 标签代替。

    注:Internet Explorer 9 以及更早的版本不支持 <progress> 标签。

     
     1 <!DOCTYPE html>
     2 <html>
     3 <head lang="en">
     4     <meta charset="UTF-8">
     5     <title></title>
     6 </head>
     7 <body>
     8 <p>
     9     进度:
    10 </p>
    11 <progress max="100" value="30"></progress>
    12 <!--<progress:生成进度条-->
    13 </body>
    14 </html>
    progess

    生成的为:

    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

    myGitgub https://github.com/mfx55 希望我的博客能帮到你
  • 相关阅读:
    SQL Server如何使用表变量
    Msys/MinGW与Cygwin/GCC(转)
    内存段划分:代码段、数据段、堆、栈
    Codeblocks+MinGW+wxWidgets搭建方法(转)
    Java GUI图形界面开发工具
    MinGW离线安装方法汇总(转)
    Linux系统的启动过程(转)
    详解VOLATILE在C++中的作用(转)
    C++虚函数与纯虚函数用法与区别(转)
    C++中值传递、指针传递和引用传递的比较 (转)
  • 原文地址:https://www.cnblogs.com/chenluomenggongzi/p/5154875.html
Copyright © 2011-2022 走看看