（2）HTML5-内容标记方法

最新推荐文章于 2022-01-25 23:21:21 发布

梧桐下的四叶草

最新推荐文章于 2022-01-25 23:21:21 发布

阅读量517

点赞数

分类专栏： HTML5 文章标签： html5 html

本文链接：https://blog.csdn.net/zsc2014030403015/article/details/52348745

版权

HTML5 专栏收录该内容

47 篇文章 0 订阅

订阅专栏

C++的注释方法在我的电脑上用不了，所以只能用html的注释方法。

<!doctype html>
 <head>
     <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <!--调用jquery库-->  
    <script src="https://code.jquery.com/jquery-2.1.0.js"></script>  
 </head>
 <body>
  <!--绘图元素-->

 <!--id替代当前画布命名，在多个画布时有助于识别-->
<canvas id="Canvas" width="480" height="180" style="background-color:gray;border:5px">
 </canvas>
 <!--分组元素-->

 <!--
 此标签可以声明一组包含图片标题，信息的分组。浏览器会将(figure)内的所有元素（包括文字，图像）视为一个对象。
 -->
 <figure>
     <img id="map" width=400 height=400 src="http://nostarch.com/images/treasuremap.png">  
     <p>
     宝藏<br>
     大宝藏
     </p>
 </figure>

 <!--
 此标签是(figure)下的一个子标签，放在figcaption标签内的文字代表
 “图片的标题”。(figcaption)子标签应该被置在(figure)下的一个子标签，放在figcaption标签内的文字代表第一个
 或最后一个位置。
  -->
 <figure>
   <img id="map" width=400 height=400 src="http://nostarch.com/images/treasuremap.png">  
   <figcaption>宝藏</figcaption>
    <p>大宝藏</p>
 </figure>

 <!--文字层级元素-->
 
 <!--
 放置在此标签内的文字，可以具有独立的方向格式，适用来标记方向不明的文字。
-->
 <ul>
     <li>Username:50 points</li>
     <li>Username<bdi></bdi>:98 points</li>
 </ul>
 
<!--使用此标签可以在画面中启动文字提示框。-->
 <dialog open>
    你好！
 </dialog>
 
 <!--使用此标签可以将部分文字加上荧光标记-->
 <p>路飞<mark>是海贼王</mark>哈哈</p>
 
 <!--
 (rt)是(ruby)下的一个子标签，主要用于排版“注释”或“发音”，可以将其补充信息排版在主体上方。
 -->
 <ruby>
     马<rt>ma</rt>
 </ruby>

 <!--
 (rp)也是(ruby)下的一个子标签，可将其补充信息排版在主体右方。
 -->
 <ruby>
     马<rp>ma</rp>
 </ruby>

<!--
加注在此标签中的文字信息会被浏览器视为“时间格式”进行解析。若是使用datetime属性，代表在HTML中为此文字加上时间标记
-->
<p>早上<time>8:20</time>上课</p>
<p>早上<time datetime="2014.11.22">日期</time>上课</p>

<!--交互式元素-->

<!-- 《details> 与《summary》是一起使用的标签，这两个标签的配合可以设计出信息隐藏与展开的互动效果 《details》标记的文字代表可以隐藏于展开的部分；《summary》标记的文字作为触发隐藏于展开的标题 -->

<details>
    <summary>中国</summary>
    <p>
    中华人民共和国<br>
    新中国建于公元1949年<br>
    是亚洲面积最大的国家
    </p>
</details>

<!-- 放在《command》标签内的文字可依具备“按钮”功能，配合
《command》的属性可以指定单击按钮后要执行的操作 -->

<menu>
    <command οnclick="alert('Hi There!')">
    Click Here!
    </command>
</menu>
 </body>
</html>