zoukankan      html  css  js  c++  java
  • HTML--5

    一、<article> 标签:标签规定独立的自包含内容,

    一篇文章应有其自身的意义,应该有可能独立于站点的其余部分对其进行分发。

     

    <article> 元素的潜在来源:

    • 论坛帖子
    • 报纸文章
    • 博客条目
    • 用户评论
    • <article>
        <h1>Internet Explorer 9</h1>
        <p>Windows Internet Explorer 9(简称 IE9)于 2011 年 3 月 14 日发布.....</p>
      </article>

    二、<aside> 标签:

    标签定义其所处内容之外的内容、aside 的内容应该与附近的内容相关、<aside> 的内容可用作文章的侧栏。

    <p>Me and my family visited The Epcot center this summer.</p>
    <aside>
    <h4>Epcot Center</h4>
    The Epcot Center is a theme park in Disney World, Florida.
    </aside>

    三、<audio> 标签:

    1、Internet Explorer 9+, Firefox, Opera, Chrome 以及 Safari 支持 <audio> 标签。

    注释:Internet Explorer 8 以及更早的版本不支持 <audio> 标签。

    2、<audio> 标签定义声音,比如音乐或其他音频流。

    3、可以在开始标签和结束标签之间放置文本内容,这样老的浏览器就可以显示出不支持该标签的信息。

    4、<audio src="someaudio.wav">

    您的浏览器不支持 audio 标签。
    </audio>

    四、<bdi> 标签:把用户名从周围的文本方向设置中隔离出来:

    1、定义和用法

    bdi 指的是 bidi 隔离。

    <bdi> 标签允许您设置一段文本,使其脱离其父元素的文本方向设置。

    在发布用户评论或其他您无法完全控制的内容时,该标签很有用。

    2、属性dir:

    • ltr
    • rtl
    • auto
    • 以上三个可选内容、规定 <bdi> 元素内的文本的文本方向。默认值:auto。

    五、<canvas> 标签:

    1、定义和用法

    <canvas> 标签定义图形,比如图表和其他图像。

    <canvas> 标签只是图形容器,您必须使用脚本来绘制图形。

    2、width:高度 ;height:宽度;PX

    3、如何通过 canvas 元素来显示一个红色的矩形:

    <canvas id="myCanvas"></canvas>
    
    <script type="text/javascript">
    
    var canvas=document.getElementById('myCanvas');
    var ctx=canvas.getContext('2d');
    ctx.fillStyle='#FF0000';
    ctx.fillRect(0,0,80,100);
    
    </script>

    六、<command> 标签:

    1、定义和用法:

    command 元素表示用户能够调用的命令。

    <command> 标签可以定义命令按钮,比如单选按钮、复选框或按钮。

    只有当 command 元素位于 menu 元素内时,该元素才是可见的。否则不会显示这个元素,但是可以用它规定键盘快捷键。

    2、

    checked checked 定义是否被选中。仅用于 radio 或 checkbox 类型。
    disabled disabled 定义 command 是否可用。
    icon url 定义作为 command 来显示的图像的 url。
    label text 为 command 定义可见的 label。
    radiogroup groupname 定义 command 所属的组名。仅在类型为 radio 时使用。
    type
    • checkbox
    • command
    • radio
    定义该 command 的类型。默认是 "command"。
    3、

    实例

    
    

    标记一个按钮:

    
    
    <menu>
    <command onclick="alert('Hello World')">
    Click Me!</command>
    </menu>
    
    

    七、<datalist> 标签:

    
    

    1、定义和用法

    
    

    <datalist> 标签定义选项列表。请与 input 元素配合使用该元素,来定义 input 可能的值。

    datalist 及其选项不会被显示出来,它仅仅是合法的输入值列表。

    请使用 input 元素的 list 属性来绑定 datalist。

    2、实例:下面是一个 input 元素,datalist 中描述了其可能的值:

    <input id="myCar" list="cars" />
    <datalist id="cars">
      <option value="BMW">
      <option value="Ford">
      <option value="Volvo">
    </datalist>

    八、<details> 标签:

    1、定义和用法

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

    2、与 <summary> 标签 配合使用可以为 details 定义标题。标题是可见的,用户点击标题时,会显示出 details。

    3、open:定义 details 是否可见。

    4、关于文档的细节:

    <details>
    <summary>Copyright 2011.</summary>
    <p>All pages and graphics on this web site are the property of W3School.</p>
    </details>

    九、<dialog> 标签:

    1、定义和用法:<dialog> 标签定义对话框或窗口

    2、open:规定 dialog 元素是活动的,用户可与之交互

    3、使用 <dialog> 元素:

    <table border="1">
    <tr>
      <th>一月 <dialog open>这是打开的对话窗口</dialog></th>
      <th>二月</th>
      <th>三月</th>
    </tr>
    <tr>
      <td>31</td>
      <td>28</td>
      <td>31</td>
    </tr>
    </table>

    十、<embed> 标签:

    1、定义和用法

    <embed> 标签定义嵌入的内容,比如插件。

    2、

    height pixels 设置嵌入内容的高度。
    src url 嵌入内容的 URL。
    type type 定义嵌入内容的类型。
    width pixels 设置嵌入内容的宽度。
    3、

    实例

    <embed src="helloworld.swf" />

    十一、<figcaption> 标签:

    1、定义和用法

    <figcaption> 标签定义 figure 元素的标题(caption)。

    "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

    2、用作文档中插图的图像,带有一个标题::

    <figure>
      <figcaption>黄浦江上的的卢浦大桥</figcaption>
      <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure>

    十二、<figure> 标签:

    1、定义和用法

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

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

    2、请使用 <figcaption> 元素为 figure 添加标题(caption)。

    3、用作文档中插图的图像:

    <figure>
      <p>黄浦江上的的卢浦大桥</p>
      <img src="shanghai_lupu_bridge.jpg" width="350" height="234" />
    </figure

  • 相关阅读:
    electron—Chromium有酒,Node有肉
    .NET 应用程序运行提示"!!0[] System.Array.Empty()找不到方法"的解决办法
    安装.Net Framework 4.6.2时出现“无法建立到信任根颁发机构的证书链”解决方法
    Electron入门
    npm使用淘宝镜像安装包
    MySQL Unable to convert MySQL date/time value to System.DateTime的解决办法
    axios无法在ie9,10,11环境下运行的问题解决
    解决ini-parser解析ini文件中文乱码问题
    git的tag,branch操作
    java类加载器
  • 原文地址:https://www.cnblogs.com/gaojunshan/p/5882203.html
Copyright © 2011-2022 走看看