ホームページ  >  記事  >  ウェブフロントエンド  >  HTMLの一般的ではないタグは何ですか?

HTMLの一般的ではないタグは何ですか?

青灯夜游
青灯夜游オリジナル
2021-12-23 16:27:563706ブラウズ

html一般的に使用されないタグには、pre、figure、figcaption、em、strong、del、ins、sub、sup、ruby、bdo、vedio、audio、track、optgroup、output、progress、meter などがあります。

HTMLの一般的ではないタグは何ですか?

このチュートリアルの動作環境: Windows 7 システム、HTML5 バージョン、Dell G3 コンピューター。

htmlあまり使用されないタグ

1. pre タグ

HTML <pre class="brush:php;toolbar:false"></pre> 要素が表すもの事前に定義された書式設定されたテキスト。この要素内のテキストは通常​​、元のファイルの形式に従って固定幅フォントで表示され、テキスト内の空白文字 (スペースや改行など) は表示されます。

例:

<pre class="brush:php;toolbar:false">
    < Hello World >                          我      就是   想
      ---------------------------                    乱    七   
            \   ^__^                            八       遭
              \  (oo)\_______
                (__)\       )\/\        的                     定位  写
                    ||----w |
                    ||     ||                      出来 ~

レンダリング:

##2、図および図キャプション

HTML

この要素は独立したコンテンツを表し、多くの場合、説明 (キャプション)
と組み合わせて使用​​され、独立した要素として使用されます。基準単位。メインコンテンツフロー(メインフロー)に属する場合、その位置はボディとは独立です。このタグは、本文内の写真、イラスト、表、コード スニペットなどを参照するためによく使用されます。

3. em タグとstrong タグ

<strong></strong>HTML 強調要素 (

) は、ユーザーが集中して読む必要があるコンテンツをマークします。 HTMLの一般的ではないタグは何ですか? 要素はネストできます。ネスト レベルが深くなるほど、それに含まれるコンテンツを読み取る必要があることがより重要になります。通常、

" Italic font "# として表示されます。 ##。

Strong 要素 (<strong></strong>) は、テキストが非常に重要であることを示し、通常は 太字で表示されます。 4. del タグと ins タグ

HTML の <del></del> タグは、何かが から削除されたことを示します。 document のテキストコンテンツ。たとえば、変更記録やソース コードの差分を表示する必要がある場合にこのタグを使用できます。

<figure>
	<img    style="max-width:90%" src="img/2.jpg"  alt="HTMLの一般的ではないタグは何ですか?" >
	<figcaption>美丽的海景~</figcaption>
</figure>

レンダリング:

HTML この要素は、ドキュメントに挿入されたテキストを定義します。

<p><del>这段文本已被删除。 </del>, 请浏览其它部分</p>

レンダリング:

##5. サブタグとサップタグ

HTML 要素は、印刷上の理由から、メイン テキストよりも低く、小さく表示される必要があるテキスト領域を定義します。

<ins>这一段文本是新插入至文档的。</ins>

レンダリング:

<strong></strong>

HTML <sup></sup> 要素は、For の外のテキスト領域を定義します。活字上の理由から、本文よりも低く、小さく表示される必要があります。

<p>水的化学公式: H<sub>2</sub>O</p>

レンダリング:

6、ルビタグ

HTML

< ; Ruby> 要素は、東アジアの発音記号または文字の注釈を表示するために使用されます。

<p>2 + 3<sup>2</sup>= 11</p>

レンダリング:

<strong></strong>

7、bdo タグ

子のテキストの方向を指定します。要素を使用して、デフォルトのテキスト方向を明示的にオーバーライドします。

<strong></strong>
要素 (HTML 双方向オーバーレイ要素

) は、現在のテキストの方向をオーバーライドするために使用されます。これにより、文字が配置されます。与えられた方向性。

<ruby>
  曲 <rp>(</rp><rt>qu</rt><rp>)</rp>
  小 <rp>(</rp><rt>xiao</rt><rp>)</rp>
  强 <rp>(</rp><rt>qiang</rt><rp>)</rp>
</ruby>
<strong></strong>レンダリング:

css を使用して多数のスタイルを記述する場合、考えてみれば、多数のスタイル属性を置き換えることができるタグがありました。

8、vedio、audio、track

vedio、audio、track はすべて HTML5

の製品です。多くの友人がそうだと思います。

はより一般的に使用されるため、

、今日は

について話しましょう。 HTML 要素は、メディア要素

track 给媒体元素添加的数据的类型在 kind 属性中设置,属性值可以是 subtitles, captions, descriptions, chaptersmetadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。

<video controls width="250" src="xxx.mp4">
    <track default kind="captions"
       srclang="en"
       src="xxxxx.vtt"/>
Sorry, your browser doesn&#39;t support embedded videos.
</video>

效果图:

9、optgroup 标签

<optgroup></optgroup> 标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

<select>
    <optgroup label="Group 1">
      <option>Option 1.1</option>
    </optgroup> 
    <optgroup label="Group 2">
      <option>Option 2.1</option>
      <option>Option 2.2</option>
    </optgroup>
    <optgroup label="Group 3" disabled>
      <option>Option 3.1</option>
      <option>Option 3.2</option>
    </optgroup>
 </select>

效果图:

简单的介绍这个功能,大多数的时候,我们所选择的框架开发,都会集成这种效果,可维护性也比较好,这里权当认识一下这个标签,不要遗忘了它~

10、output

HTML <output></output> 标签是HTML 5 中的新标签,表示计算或用户操作的结果,执行计算然后在 <output></output> 元素中显示结果。

注释Internet Explorer 不支持 标签。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
  <input type="number" name="b" value="40" /> +
  <input type="number" name="a" value="10" /> =
  <output name="result"></output>
</form>

效果图:

11、progress 标签

HTML中的progress (<progress></progress>) 元素用来显示一项任务的完成进度.

进度条:<progress value="70" max="100">70 %</progress> <br />
进度条:<progress></progress>

效果图:

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

不过一般会用到进度条的地方,都是组件,框架自带之类的,这个算是鸡肋的了,不过了解一下还是没有坏处的,哦对了,这个标签Internet Explorer 9 以及更早的版本不支持。

12、meter 标签

progress 相比 meter 元素来度量给定范围(gauge)内的数据:

<p>显示度量值:</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>

效果图:

13、details 标签

HTML <details></details>元素可创建一个挂件,仅在被切换成展开状态时,它才会显示内含的信息。<summary></summary> 元素可为该部件提供概要或者标签。

<details>
  <summary>点击展开</summary>
  <p>世间万物,为我所用,非我所得。</p>
</details>

效果图:

注意: 目前只有 Chrome 和 Safari 6 支持 <details></details> 标签。

相关推荐:《html视频教程

以上がHTMLの一般的ではないタグは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。