Rumah >hujung hadapan web >html tutorial >Apakah tag yang tidak biasa dalam html?

Apakah tag yang tidak biasa dalam html?

青灯夜游
青灯夜游asal
2021-12-23 16:27:563774semak imbas

Teg yang jarang digunakan dalam HTML termasuk: pra, angka, figcaption, em, strong, del, ins, sub, sup, ruby, bdo, vedio, audio, track, optgroup, output, progress, meter, dsb. .

Apakah tag yang tidak biasa dalam html?

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi HTML5, komputer Dell G3.

html tag luar biasa

1 pra teg

HTML <pre class="brush:php;toolbar:false"></pre> elemen mewakili teks terformat yang dipratentukan. Teks dalam elemen ini biasanya dipaparkan dalam fon lebar tetap mengikut format dalam fail asal dan aksara ruang putih (seperti ruang dan pemisah baris) dalam teks akan dipaparkan.

Contohnya:

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

Rendering:

2 Elemen 🎜>

HTML

mewakili sekeping kandungan bebas, selalunya digunakan bersama kapsyen <figure></figure> dan berfungsi sebagai unit rujukan bebas. Apabila ia tergolong dalam aliran kandungan utama (aliran utama), kedudukannya adalah bebas daripada badan. Tag ini selalunya ialah gambar, ilustrasi, jadual, coretan kod, dsb. yang dipetik dalam teks utama <figcaption></figcaption>

<figure>
	<img    style="max-width:90%" src="img/2.jpg"  alt="Apakah tag yang tidak biasa dalam html?" >
	<figcaption>美丽的海景~</figcaption>
</figure>

Rendering: <strong></strong>

Apakah tag yang tidak biasa dalam html?.

3. teg em dan teg kuat <strong></strong>

Elemen penekanan HTML (

) menandakan kandungan yang perlu ditumpukan oleh pengguna untuk membaca Semakin dalam tahap set, semakin penting kandungan yang terkandung di dalamnya dianggap perlu dibaca Ia secara amnya dipaparkan sebagai <em></em>" <em></em> fon condong ". Elemen kuat (

) menunjukkan bahawa teks adalah sangat penting dan biasanya dipaparkan dalam

fon tebal<strong></strong>. <strong></strong>

4. tag del dan tag masuk

<strong></strong>Teg

HTML mewakili beberapa kandungan teks yang telah

dipadamkan <del></del> daripada dokumen. Sebagai contoh, anda boleh menggunakan teg ini apabila anda perlu memaparkan rekod pengubahsuaian atau perbezaan kod sumber. <strong></strong>

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

<strong></strong>
elemen HTML

mentakrifkan teks yang telah dimasukkan ke dalam dokumen.

<ins></ins>

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

<strong></strong>

5 🎜>Elemen HTML

mentakrifkan kawasan teks yang, atas sebab tipografi, harus dipaparkan lebih rendah dan lebih kecil daripada teks utama. <strong></strong>

Rendering: <sub></sub>

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

<strong></strong>Elemen HTML

mentakrifkan kawasan teks Atas sebab tipografi, Ia sepatutnya kelihatan lebih rendah dan lebih kecil daripada teks utama.

Rendering: <sup></sup>

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

<strong></strong>6 tag ruby ​​​​

HTML

Elemen digunakan untuk memaparkan fonetik Asia Timur atau anotasi aksara. <strong></strong>

Rendering: <ruby></ruby>

<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>7 teg bdo

menentukan teks elemen anak arah, secara eksplisit mengatasi arah teks lalai. Elemen

<strong></strong> (

elemen tindanan dwiarah HTML

) digunakan untuk mengatasi orientasi teks semasa, yang menyebabkan aksara disusun mengikut arah tertentu.

<bdo></bdo>Rendering:

<p>这段文本是从左到右的</p>
<p><bdo dir="rtl">这段文本是从右到左的</bdo></p>

<strong></strong>Apabila anda menggunakan

untuk menulis sejumlah besar gaya, pernahkah anda terfikir mengenainya? , terdapat teg yang boleh menggantikan sejumlah besar atribut gaya.

8. vedio, audio dan trek

css

vedio, audio dan trek adalah semua produk

Saya percaya ramai rakan pasti pernah menggunakannya dan biasa digunakan, jadi saya tidak akan memperkenalkan

dan

di sini. Mari kita bercakap tentang HTML5 hari ini. Elemen <video></video><audio></audio>HTML <video></video> digunakan sebagai elemen anak bagi elemen media <audio></audio> dan <track></track>. Ia membenarkan menentukan sari kata bermasa (atau data berasaskan masa), contohnya untuk memproses sari kata secara automatik.

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视频教程

Atas ialah kandungan terperinci Apakah tag yang tidak biasa dalam html?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn