24 HTMLタグを知らないかもしれません.

我々はすべてのHTMLについて知っている、それは我々のコンテンツを構造化するのに役立ちます、我々はすぐにWebアプリケーションを開発するのに役立つ多くのタグがあり、我々はそれが存在しないことを知っているので、我々は決して使用できないタグもあります.ここでは、あなたのウェブ開発経歴のいくつかの点であなたに役に立つかもしれない24のHTMLタグをリストします.このcodepenでは、アクションのタグを見つけることができます.任意の興味深いタグを知っていれば私に知らせてください.希望このリストは何らかの方法で、ハッピーコーディングをお手伝いします

1番地要素
アドレス要素はコンテナー要素で、コンタクト情報やグループコンタクト情報を一緒に表現するために使用されます.

<address>
  <a href="mailto:[email protected]">kiranraj</a>
  <p>Location : Kerala, India</p>
</address>

2 .データ要素
データ要素は与えられた内容を機械可読翻訳にリンクする.データ要素は1つの属性、値を持ちます.そして、それは機械読み込み可能な翻訳を指定します.デフォルトでは、値はユーザには見えません.

<ul>
    <li><data value="1972">C Language</data></li>
    <li><data value="1979">C++ Language</data></li>
    <li><data value="1995">JavaScript</data></li>
</ul>

3 . datalist要素
DataList要素には、一連のオプション要素が含まれます.DataListを使用すると、HTMLの入力要素の自動補完機能を作成できます.

<label for="SELECT">Pick a country</label>
<input list="country" id="SELECT" />

<datalist id="country">
    <option value="INDIA">
    <option value="USA">
    <option value="UK">
    <option value="GERMANY">
    <option value="RUSSIA">
</datalist>

(4)BDI素子(双方向分離)
BDI要素は、DirectRalityに関して、BDI要素内のコンテンツを異なって扱うようにブラウザに指示します.

<p>Hello World <bdi>مرحبا بالعالم</bdi></p>

BDO要素(双方向オーバーライド)
bdo要素は、bdoタグに囲まれたテキストの現在のテキスト方向を上書きします.つまり、BDOタグ内に囲まれたテキストは、BDOタグのdir属性で指定された方向になります.

<p>Hello World <bdo dir="rtl">Hello World</bdo></p>

コード要素
コード要素は通常のテキストからのプログラムコードの断片化に使用され、コードタグに囲まれたテキストを表示するために使用されるデフォルトのフォントは、monospaceフォントです.

<p>To install create-react-app use <code>npx create-react-app</code>.</p>

dl要素( description list )
dl要素は記述リストを定義するために使用されます.リストは、各々の用語のためのDTタグと対応する詳細によってDDタグによって表される用語の用語またはグループから成ります.

DT素子(記述項)
DT要素は記述リスト内の記述項を定義するために使用されます.

dd要素(説明の詳細)
DT要素は記述リスト内の記述の詳細を定義するために使用されます.

<!-- 7. Description Element -->
<dl>
  <dt>bdi tag</dt>
  <dd>The bdi tag help to display part of the text in the opposite direction</dd>
  <dt>bdo tag</dt>
  <dd>The bdo tag overrides the default text direction.</dd>
</dl>

KBD要素(キーボード入力要素)
KBD要素は、キーボードまたは他のテキスト入力装置からユーザー入力を表示するインラインタグである.デフォルトでは、KBDはmonospaceフォントを使います.

<!-- 8. Keyboard input Element -->
<p>Use <kbd>Ctrl</kbd> + <kbd>S</kbd> to save your work.</p>

9章要素
マークタグはテキスト内容を強調するために使用されます.

<!-- 9. Mark Element -->
<p>Use <mark>Ctrl+ S</mark> to save your work.</p>

10メートル要素
メータータグは、水平計を定義するために使用されます.これは、値、min、max、low、highと最適のようないくつかの属性を持っています.値は現在の数値を表し、最小値と最大値の間になります.minとmax valueはメータータグの上限と下限を表します.ローとハイは低値の上限と高い値の下限を表す.ローはmin値より高くなければなりません、そして、高さは最大値より低くなければなりません.

<!-- 10. Meter Element -->
<label for="Mark">Mark:</label>
<meter id="Mark" min="0" max="100" value="80"></meter>

要素
ブラウザがJavaScriptを無効にした場合のみ、Noscriptタグの内容が表示されます.

<!-- 11. Noscript Element -->
<noscript>
  <p>JavaScript is disabled in the browser</p>
</noscript>

12 .オブジェクト要素
オブジェクトタグは外部リソースのコンテナを定義します.

<!-- 12. Object Element -->
<object type="image/jpg"
    data="https://images.unsplash.com/photo-1448375240586-882707db888b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80"
    width="250"
    height="200">
</object>

13 .出力
出力は、計算/ユーザーアクションの結果を表示するために使用できるコンテナ要素です.

<!-- 13. Output -->
<form oninput="sum.value = parseInt(num1.value) + parseInt(num2.value)">
  <input type="number" name="num1" value="4"> +
  <input type="number" name="num2" value="7"> =
  <output name="sum">11</output>
</form>

進行要素
進捗要素はプログレスバーを示します.

<!-- 14. Progress -->
<progress id="file" max="100" value="70"> 70% </progress>

15章サブ要素( subscript )
サブ要素に囲まれたテキストは、テキストをサブスクリプトとして表示させる

<!-- 15. sub element -->
<p>H<sub>2</sub>O</p>

16 . sup要素(スーパースクリプト)
SUS要素スタイルを表す文字列.

<!-- 16. sup element -->
<p> (x + y)<sup>2</sup> = x<sup>2</sup> + 2xy + y<sup>2</sup></p>

詳細要素
詳細要素は、情報を非表示にするディスクリプタウィジェットを作成します.詳細要素内のサマリー要素の内容をクリックすると、情報が表示されます.

<!-- 17. Details Element -->
<details>
    <summary>Address</summary>
      <a href="mailto:[email protected]">[email protected]</a>
      <p>Location : Kerala, India</p>
</details>

18章時間要素
時刻要素は24時間時計の時刻を表し、インライン要素です.

<!-- 18. Time Element -->
<p>
  The IPL starts at <time datetime="2021-05-04T20:00">20:00</time>.
</p>

19 . var要素
var tagは数学的またはプログラミング式で変数の名前を表現するために使用されます.

<!-- 19. var Element -->
<div>
    <p>Var Element</p>
  <p>let <var>x</var> = 10</p>
</div>

20 . WBR素子(ワードブレーク機会)
長いテキストを入力すると、ブラウザーが指定した制限の下で段落の幅を維持するために行の区切りを自動的に追加すると、WBR要素を使用して、行を破るためのアイデア位置をブラウザで示すことができます.

<!-- 20. wbr Element -->
<div class="wbr">
  <p>Wbr Element</p>
  <p>helloworld,welcome</p>
  <p>hello<wbr>world,<wbr>welcome</p>
</div> 

21 . ABBR素子(略称)
ABBR要素は省略形を表し、省略可能な拡張子を配置できる任意のタイトル属性を持ちます.これは要素の置換です、頭字語要素はいくつかのブラウザーによってサポートされます.

<!-- 21. abbr Element -->
<div class="wbr">
  <p>
    <abbr title="kiran raj r">krr</abbr>
  </p>
</div>

22章プレエレメント
プレエレメントはプリフォーマットされたテキストを表し、ブラウザはHTMLコードに書かれているのと同じ順序でテキストを表示し、空白は無視されません.

<!-- 22. pre Element -->
<div>
  <p>Pre Element</p>
  <pre>
      <code>
function greet(name) {
    console.log('Good Morning ' + name + '!');
}

sayHello('kiran raj');
      </code>
  </pre>
</div>

23 . Q素子
q要素は、短いインライン引用符を表すために使用され、引用符の参照を表すのにCiteが使用されます.長い引用のために、BlockQuote要素を使用してください.

<!-- 23. q Element -->
<div>
  <p>q and cite Elements</p>
  <q>Imagination is more important than knowledge. 
    <cite>Albert Einstein</cite></q>
</div>

24章SAMP要素
SAMP要素は、コンピュータプログラムからインラインサンプル出力を表現するために使用されます.フォントはデフォルトでブラウザで使用されます.

<!-- 24. samp Element -->
<p>samp Elements</p>
<p> x + y gives <samp>undefined</samp> </p>

任意のエラーをコメントしてください、このトピックに関するすべての追加の知識を歓迎します.あなたがこのポストが好きであるならば、私の他のポストを見てください、ありがとう.

The Ultimate Web Developer Resources List 🔥Awesome 200+ Resources

Kiran Raj R ・ May 6 ・ 21 min read

#css #javascript #webdev #beginners

12 Simple Button Hover Animation Using CSS

Kiran Raj R ・ May 5 ・ 1 min read

#webdev #productivity #css #beginners

19 Simple Hover Animation Using CSS

Kiran Raj R ・ May 4 ・ 1 min read

#css #beginners #webdev #productivity

10 Awesome GitHub Repos For Web Developers

Kiran Raj R ・ Apr 26 ・ 4 min read

#javascript #beginners #productivity #webdev