cari
Rumahhujung hadapan webTutorial H5html5不常用标签可以怎么使用?

html5不常用标签可以怎么使用?

作为一个前端开发,在浏览别人家的页面时总是会习惯性的查看他们页面的源码,发现大多数网站的页面,包括我自己写的页面中用到的最多的布局元素无外乎就是divpspanuldlollidtddstrongb,不管是什么样的效果都是由这些元素组成。

现在都已经是9102年了,html5已经相当成熟标准了,为什么在布局的时候不用写html5提供的具有语义化的标签进行布局呢?我个人觉得是因为我们刚开始学习布局的时候用的最多就是上面的这些标签,而当html5新标签出来的时候我们已经使用div布局很久了,并且可能由于工作忙的原因没有很认真的去了解这些标签的应用场景,久而久之我们还是在使用div布局。

1、fieldset 标签

2b5469ab79cf842344327415c3b3bb95标签为表单分组标签,它可以将内容相关联的一组表单进行分组。

1.1、应用场景1 - 表单分组

如果一个表单上有很多信息需要填写,可以使用2b5469ab79cf842344327415c3b3bb95标签将相关的表单项组合在一起,使表单更容易理解,表单越容易理解,访问者就越有可能正确的填写表单。

基本使用及默认效果:

1.png

<fieldset>
  <legend>用户基本信息</legend>
  <div>
    <label for="">用户名</label>
    <input type="text">
  </div>
  <div>
    <label for="">电子邮箱</label>
    <input type="password">
  </div>
  <div>
    <label for="">密 码</label>
    <input type="password">
  </div>
  <div>
    <label for="">确认密码</label>
    <input type="password">
  </div>
</fieldset>

美化后的表单

2.gif

1.2、应用场景2 - 其他分组

3.png

13.png

2、figure 标签

24203f2f45e6606542ba09fd2181843a 用于对元素进行组合,一般用于图片、视频、图表、代码等。

2.1 、应用场景1 - figure标签与图片混合使用

4.png

<figure>
  <img src="search_icon.png"/>
  <figcaption> 搜索引擎</figcaption>
</figure>

2.2、应用场景2 - figure标签与dtdd标签结合使用

5.png

<figure>
  <dt>这是标题</dt>
  <dd>这是描述</dd>
</figure>

2.3、应用场景3 - figure标签单独结合figurecaption标签使用

figure标签单独结合figurecaption标签使用时可以实现类似下面的这种对某一块内容的说明。

6.png

<figure>
  <figurecaption>网站问题 一站解决</figurecaption>
  <p>海量节点 + 海外 CDN 加速,助力企业高速、安全触达用户</p>
</figure>

3、section 标签

2f8332c8dcfd5c7dec030a070bf652c3标签用于对网站或应用程序中页面上的内容进行分块

一个section元素通常由内容及标题组成
但当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div。

section元素强调分段或分块,一块内容分为几段或几块;
article元素强调独立性,一块内容独立完整;

没有标题内容区域块,不要用section,即section中应有h1-h6标签

可以用来呈现论坛的一个帖子,评论列表,可互动的页面模块挂件,杂志或报纸中的一篇文章,国际时事版块、体育版块、娱乐版块、文学版块等等,像这种有版块标题的、内容属于一类的版块等就可以使用section。

4、aside 标签

15221ee8cba27fc1d7a26c47a001eb9b标签一般表示网站当前页面或者文章的附属信息部分,可以包含与当前页面主要内容相关的广告、导航条、引用、侧边栏评语部分,以及其他区别与主要内容的部分

5、address 标签

208700f394e4cf40a7aa505373e0130b 元素可以让作者为它最近的 23c3de37f2f9ebcb477c4a90aac6fffd 或者 6c04bd5ca3fcae76e30b72ad730ca86d 祖先元素提供联系信息。在后一种情况下,它应用于整个文档

  • 当表示一个和联系信息无关的任意的地址时,应使用 e388a4556c0f65e1904146cc1a846bee 元素
  • 这个元素不能包含除了联系信息之外的任何信息,比如出版日期
  • 通常208700f394e4cf40a7aa505373e0130b 元素可以放在当前2f8332c8dcfd5c7dec030a070bf652c3的 c37f8231a37e88427e62669260f0074d 元素中,如果存在的话

7.png

6、menu 标签

5c0e96d12fc7501cef2ae2efde646ee0标签可以用来定义页面的菜单

<menu>
  <a href="/">首页<a>
    <a href="/">新闻</a>
    <a href="/">视频<a>
</menu>

7、time 标签

46dd80ba616c57a652514755c74c4211标签用来表现时间或日期

<p>我们在每天早上 <time>9:00</time> 开始营业。</p>
<!--参数-->
<p>我在 <time datetime="2019-12-16">情人节</time> 有个约会。 </p>
<p>
  <!-- 是否为发布时间 -->
  <time pubdate="true">发布时间</time>
</p>

8、mark 标签

f920514e6447cf1d171079d1371f007f 标签定义带有记号的文本。出于引用的目的,对与另一个上下文相关的文本进行突出显示

8.png

<div>
  <h1>美女</h1>
  <p>四大<mark>美女</mark></p>
  <p>杨玉环是<mark>美女</mark></p>
  <p>凤姐也是<mark>美女</mark></p>
</div>

9、details 标签

a5e9d42b316b6d06c62de0deffc36939标签允许用户创建一个可展开折叠的元件,让一段文字或标题包含一些隐藏的信息。

一般情况下,a5e9d42b316b6d06c62de0deffc36939用来对显示在页面的内容做进一步骤解释。其展现出来的效果和jQuery手风琴插件差不多

9.gif

<details>
  <!-- 一个details标签中只能有一个summary标签,多余的summary标
  签会被当做正常内容来处理。summary标签用来作为details标签的标
  题,它必须和details标签使用,离开details标签单独使用没有任何意义 -->
  <summary>什么是html?</summary>
  <p>HTML称为超文本标记语言,是一种标识性的语言。</p>
</details>

10、meter 标签

49c6123c49c6be380cb91db06cd3bfa9标签用来定义已知范围或分数值内的标量测量,meter标签的效果很像进度条,但是它不作为进度条来使用。如果要表示进度条,通常使用progress标签。

10.png

<h2>66%</h2>
<meter value="66" high="100" low="0" max="100" min="0"></meter>

11、ruby 标签

ec41f2147470148e85ad0337a362103e标签是使用来定义ruby注释(中文注音或字符),如果在东亚使用,显示的是东亚字符的发音。
ec41f2147470148e85ad0337a362103e标签通常和7240f116d85a7ee375466871bc33670a标签和515718f19dfe6612658be14be18aa0ec标签一起使用,7240f116d85a7ee375466871bc33670a标签用来提供注释信息(如:拼音),515718f19dfe6612658be14be18aa0ec标签用来定义浏览器不支持ruby标签时所显示的内容。

11.png

<ruby style="font-size: 28px;">
  李
  <rp>(</rp>
  <rt style="font-size: 22px;">li</rt>
  <rp>)</rp>
</ruby>

12、blockquote 标签

b8a712a75cab9a5aded02f74998372b4用于对长文本的引用,用来定义一段引语,默认效果标签内的内容会自动有缩进;
如这篇文章的开头就用了b8a712a75cab9a5aded02f74998372b4标签

12.png

Atas ialah kandungan terperinci html5不常用标签可以怎么使用?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan
Artikel ini dikembalikan pada:segmentfault. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
H5: Ciri dan keupayaan baru untuk Pembangunan WebH5: Ciri dan keupayaan baru untuk Pembangunan WebApr 29, 2025 am 12:07 AM

H5 membawa beberapa fungsi dan keupayaan baru, meningkatkan kecekapan interaktiviti dan pembangunan laman web. 1. Tag semantik seperti meningkatkan SEO. 2. Sokongan multimedia memudahkan main balik audio dan video melalui dan tag. 3. Lukisan kanvas menyediakan alat lukisan grafik dinamik. 4. Penyimpanan Tempatan Memudahkan Penyimpanan Data melalui LocalStorage dan sessionStorage. 5. API Geolokasi memudahkan pembangunan perkhidmatan berasaskan lokasi.

H5: Penambahbaikan utama dalam HTML5H5: Penambahbaikan utama dalam HTML5Apr 28, 2025 am 12:26 AM

HTML5 membawa lima penambahbaikan utama: 1. Tag semantik meningkatkan kejelasan kod dan kesan SEO; 2. Sokongan multimedia memudahkan penyembuhan video dan audio; 3. Peningkatan Borang Memudahkan Pengesahan; 4. Offline dan storan tempatan meningkatkan pengalaman pengguna; 5. Fungsi kanvas dan grafik meningkatkan visualisasi laman web.

HTML5: Standard dan kesannya terhadap pembangunan webHTML5: Standard dan kesannya terhadap pembangunan webApr 27, 2025 am 12:12 AM

Ciri -ciri teras HTML5 termasuk tag semantik, sokongan multimedia, penyimpanan luar talian dan penyimpanan tempatan, dan peningkatan bentuk. 1. Tag semantik seperti, dan lain -lain untuk meningkatkan kebolehbacaan kod dan kesan SEO. 2. Memudahkan penanaman multimedia dengan label. 3. Storan luar talian dan penyimpanan tempatan seperti ApplicationCache dan LocalStorage Sokongan Operasi Bebas Rangkaian dan Penyimpanan Data. 4. Peningkatan Borang Memperkenalkan Jenis Input dan Sifat Pengesahan Baru Untuk Memudahkan Pemprosesan dan Pengesahan.

Contoh Kod H5: Aplikasi Praktikal dan TutorialContoh Kod H5: Aplikasi Praktikal dan TutorialApr 25, 2025 am 12:10 AM

H5 menyediakan pelbagai ciri dan fungsi baru, sangat meningkatkan keupayaan pembangunan front-end. 1. Sokongan Multimedia: Media Media Melalui dan Elemen, Tiada Plug-Ins diperlukan. 2. Kanvas: Gunakan elemen untuk menjadikan grafik dan animasi 2D secara dinamik. 3. Penyimpanan Tempatan: Melaksanakan penyimpanan data berterusan melalui LocalStorage dan sessionStorage untuk meningkatkan pengalaman pengguna.

Sambungan antara H5 dan HTML5: Persamaan dan PerbezaanSambungan antara H5 dan HTML5: Persamaan dan PerbezaanApr 24, 2025 am 12:01 AM

H5 dan HTML5 adalah konsep yang berbeza: HTML5 adalah versi HTML, yang mengandungi unsur -unsur baru dan API; H5 adalah rangka kerja pembangunan aplikasi mudah alih berdasarkan HTML5. HTML5 Parses dan membuat kod melalui pelayar, manakala aplikasi H5 perlu menjalankan bekas dan berinteraksi dengan kod asli melalui JavaScript.

Blok bangunan kod H5: elemen utama dan tujuan merekaBlok bangunan kod H5: elemen utama dan tujuan merekaApr 23, 2025 am 12:09 AM

Unsur -unsur utama HTML5 termasuk ,,,,,, dan lain -lain, yang digunakan untuk membina laman web moden. 1. Tentukan kandungan kepala, 2.

HTML5 dan H5: Memahami Penggunaan BiasaHTML5 dan H5: Memahami Penggunaan BiasaApr 22, 2025 am 12:01 AM

Tidak ada perbezaan antara HTML5 dan H5, iaitu singkatan HTML5. 1.HTML5 adalah versi kelima HTML, yang meningkatkan fungsi multimedia dan interaktif laman web. 2.H5 sering digunakan untuk merujuk kepada laman web atau aplikasi mudah alih berasaskan HTML5, dan sesuai untuk pelbagai peranti mudah alih.

HTML5: Blok Bangunan Web Moden (H5)HTML5: Blok Bangunan Web Moden (H5)Apr 21, 2025 am 12:05 AM

HTML5 adalah versi terkini bahasa markup hiperteks, yang diseragamkan oleh W3C. HTML5 memperkenalkan tag semantik baru, sokongan multimedia dan peningkatan bentuk, meningkatkan struktur web, pengalaman pengguna dan kesan SEO. HTML5 memperkenalkan tag semantik baru, seperti,, dan lain -lain, untuk menjadikan struktur laman web lebih jelas dan kesan SEO lebih baik. HTML5 menyokong elemen multimedia dan tiada pemalam pihak ketiga diperlukan, meningkatkan pengalaman pengguna dan kelajuan memuatkan. HTML5 meningkatkan fungsi bentuk dan memperkenalkan jenis input baru seperti, dan lain -lain, yang meningkatkan pengalaman pengguna dan membentuk kecekapan pengesahan.

See all articles

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

MinGW - GNU Minimalis untuk Windows

MinGW - GNU Minimalis untuk Windows

Projek ini dalam proses untuk dipindahkan ke osdn.net/projects/mingw, anda boleh terus mengikuti kami di sana. MinGW: Port Windows asli bagi GNU Compiler Collection (GCC), perpustakaan import yang boleh diedarkan secara bebas dan fail pengepala untuk membina aplikasi Windows asli termasuk sambungan kepada masa jalan MSVC untuk menyokong fungsi C99. Semua perisian MinGW boleh dijalankan pada platform Windows 64-bit.

SublimeText3 versi Inggeris

SublimeText3 versi Inggeris

Disyorkan: Versi Win, menyokong gesaan kod!

SublimeText3 Linux versi baharu

SublimeText3 Linux versi baharu

SublimeText3 Linux versi terkini

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Muat turun versi mac editor Atom

Muat turun versi mac editor Atom

Editor sumber terbuka yang paling popular