目次
htmlあまり使用されないタグ
1. pre タグ
##2、図および図キャプション
Italic font "# として表示されます。 ##。 " >" Italic font "# として表示されます。 ##。
レンダリング:
9、optgroup 标签
10、output
11、progress 标签
12、meter 标签
13、details 标签
ホームページ ウェブフロントエンド htmlチュートリアル HTMLの一般的ではないタグは何ですか?

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

Dec 23, 2021 pm 04:27 PM
html

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 コンピューター。

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

<strong>1. pre タグ

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

例:

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

<strong>レンダリング:

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

HTML

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

3. em タグとstrong タグ

<strong>HTML 強調要素 (

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

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

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

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

<figure>
	<img  src="/static/imghw/default1.png"  data-src="img/2.jpg"  class="lazy"    style="max-width:90%"   alt="HTMLの一般的ではないタグは何ですか?" >
	<figcaption>美丽的海景~</figcaption>
</figure>
ログイン後にコピー

<strong>レンダリング:

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

<p><del>这段文本已被删除。 </del>, 请浏览其它部分</p>
ログイン後にコピー

<strong>レンダリング:

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

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

<ins>这一段文本是新插入至文档的。</ins>
ログイン後にコピー

レンダリング:

<strong>

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

<p>水的化学公式: H<sub>2</sub>O</p>
ログイン後にコピー

<strong>レンダリング:

6、ルビタグ

HTML

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

<p>2 + 3<sup>2</sup>= 11</p>
ログイン後にコピー

レンダリング:

<strong>

7、bdo タグ

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

<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>レンダリング:

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

<strong>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>
ログイン後にコピー

<strong>效果图:

<strong>9、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>
ログイン後にコピー

<strong>效果图:

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

<strong>10、output

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

<strong>注释: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>
ログイン後にコピー

<strong>效果图:

<strong>11、progress 标签

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

进度条:<progress value="70" max="100">70 %</progress> <br />
进度条:<progress></progress>
ログイン後にコピー

<strong>效果图:

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

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

<strong>12、meter 标签

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

<p>显示度量值:</p>
<meter value="3" min="0" max="10">3/10</meter><br>
<meter value="0.6">60%</meter>
ログイン後にコピー

<strong>效果图:

<strong>13、details 标签

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

<details>
  <summary>点击展开</summary>
  <p>世间万物,为我所用,非我所得。</p>
</details>
ログイン後にコピー

<strong>效果图:

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

相关推荐:《html视频教程

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

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

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

HTMLの表の境界線 HTMLの表の境界線 Sep 04, 2024 pm 04:49 PM

HTML の表の境界線に関するガイド。ここでは、HTML でのテーブルの境界線の例を示しながら、テーブル境界線を定義する複数の方法について説明します。

HTML 左マージン HTML 左マージン Sep 04, 2024 pm 04:48 PM

HTML マージン左のガイド。ここでは、HTML margin-left の概要とその例、およびそのコード実装について説明します。

HTML のネストされたテーブル HTML のネストされたテーブル Sep 04, 2024 pm 04:49 PM

これは、HTML でのネストされたテーブルのガイドです。ここでは、テーブル内にテーブルを作成する方法をそれぞれの例とともに説明します。

HTML テーブルのレイアウト HTML テーブルのレイアウト Sep 04, 2024 pm 04:54 PM

HTML テーブル レイアウトのガイド。ここでは、HTML テーブル レイアウトの値と例および出力について詳しく説明します。

HTML 順序付きリスト HTML 順序付きリスト Sep 04, 2024 pm 04:43 PM

HTML 順序付きリストのガイド。ここでは、HTML 順序付きリストと型の導入とその例についても説明します。

HTML入力プレースホルダー HTML入力プレースホルダー Sep 04, 2024 pm 04:54 PM

HTML 入力プレースホルダーのガイド。ここでは、コードと出力とともに HTML 入力プレースホルダーの例について説明します。

HTML 内のテキストの移動 HTML 内のテキストの移動 Sep 04, 2024 pm 04:45 PM

HTML でのテキストの移動に関するガイド。ここでは、概要、マーキー タグが構文でどのように機能するか、および実装例について説明します。

HTML の onclick ボタン HTML の onclick ボタン Sep 04, 2024 pm 04:49 PM

HTML オンクリック ボタンのガイド。ここでは、それらの紹介、動作、例、およびさまざまなイベントでの onclick イベントについてそれぞれ説明します。

See all articles