html5에서 일반적이지 않은 태그를 사용하는 방법은 무엇입니까?

프런트엔드 개발자로서 다른 사람의 페이지를 탐색할 때 항상 습관적으로 그 페이지의 소스 코드를 확인합니다. 제가 직접 작성한 페이지를 포함해 대부분의 웹사이트 페이지에는 가장 많이 사용되는 레이아웃 요소가 없다는 것을 알게 되었습니다. 유일한 예외는 div, p, span, ul, dl입니다. ol, li, dt, dd, strong, b 어떤 이펙트이던 간에 이런 요소들로 구성되어 있습니다. <code>div、p、span、ul、dl、ol、li、dt、dd、strong、b，不管是什么样的效果都是由这些元素组成。

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

1、fieldset 标签

<fieldset></fieldset>标签为表单分组标签，它可以将内容相关联的一组表单进行分组。

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

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

基本使用及默认效果：

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

美化后的表单

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

2、figure 标签

<figure></figure> 用于对元素进行组合，一般用于图片、视频、图表、代码等。

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

<figure>
  <img  src="/static/imghwm/default1.png"  data-src="search_icon.png"  class="lazy"  / alt="html5에서 일반적이지 않은 태그를 사용하는 방법은 무엇입니까?" >
  <figcaption> 搜索引擎</figcaption>
</figure>

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

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

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

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

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

3、section 标签

<section></section>标签用于对网站或应用程序中页面上的内容进行分块

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

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

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

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

4、aside 标签

<aside></aside>标签一般表示网站当前页面或者文章的附属信息部分，可以包含与当前页面主要内容相关的广告、导航条、引用、侧边栏评语部分

이미 9102이고, html5는 이미 상당히 성숙하고 표준적입니다. 레이아웃을 위해 html5에서 제공하는 의미 태그를 작성해 보는 것은 어떨까요? 개인적으로 우리가 레이아웃을 처음 배울 때는 위의 태그를 가장 많이 사용했기 때문이라고 생각합니다. 새로운 HTML5 태그가 나왔을 때 우리는 오랫동안 div 레이아웃을 사용했는데, 아마도 제대로 이해하지 못했을 것입니다. 이 태그의 적용 시나리오에서는 시간이 지나도 여전히 div 레이아웃을 사용하고 있습니다. 🎜

1. fieldset 태그

🎜<fieldset></fieldset> 태그는 양식 그룹화 태그로, 관련 콘텐츠로 양식 그룹을 그룹화할 수 있습니다. 🎜🎜1.1. 신청 시나리오 1 - 양식 그룹화🎜🎜양식에 작성할 정보가 많은 경우 , <fieldset></fieldset> 태그를 사용하면 관련 양식 항목을 함께 그룹화하여 양식을 더 쉽게 이해할 수 있을수록 방문자가 올바르게 작성할 가능성이 높아집니다. 🎜🎜기본 사용법 및 기본 효과:🎜🎜🎜

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

🎜아름다운 양식🎜🎜 🎜 🎜1.2. 적용 시나리오 2 - 기타 그룹🎜🎜🎜🎜🎜

2. 그림 태그🎜<figure></figure>는 요소를 결합하는 데 사용되며 일반적으로 사진, 비디오, 차트, 코드 등에 사용됩니다. 🎜🎜2.1, 적용 시나리오 1 - 그림 태그와 그림이 혼합되어 있습니다 스팬>🎜🎜🎜

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

🎜2.2. 적용 시나리오 2 - 그림 태그는 <code>dt 및 dd 태그와 함께 사용됩니다🎜🎜🎜

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

🎜2.3. 적용 시나리오 3 - Figure 태그는 Figurecaption 태그🎜🎜Figure 태그를 Figurecaption 태그와 함께 단독으로 사용하면 유사한 특정 콘텐츠에 대한 설명을 얻을 수 있습니다. 다음에. 🎜🎜🎜

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

3. 섹션 태그

🎜<section></section> 태그는 웹사이트나 애플리케이션 페이지의 콘텐츠를 섹션으로 나누는 데 사용됩니다🎜🎜섹션 요소는 일반적으로 콘텐츠와 제목으로 구성됩니다.
그러나 컨테이너에 직접 스타일을 지정해야 하는 경우 또는 스크립트를 통해 동작을 정의할 때는 div를 사용하는 것이 좋습니다. 🎜🎜section 요소는 분할 또는 청크를 강조하고, 콘텐츠는 여러 단락이나 블록으로 나누어집니다.
article 요소는 독립성을 강조하며, 콘텐츠는 독립적이고 완전합니다. 🎜🎜 제목 콘텐츠 영역 블록이 없습니다. 섹션을 사용하지 마십시오. 즉, 섹션에 h1-h6 태그가 있어야 합니다.🎜🎜포럼 게시물, 댓글 목록, 대화형 항목을 표시하는 데 사용할 수 있습니다. 페이지 모듈 위젯, 잡지나 신문의 기사, 국제 시사 섹션, 스포츠 섹션, 연예 섹션, 문학 섹션 등 섹션 제목이 있고 동일한 카테고리에 속하는 콘텐츠가 있는 섹션은 섹션을 사용할 수 있습니다. 🎜

4. aside 태그

🎜<aside></aside> 태그는 일반적으로 웹사이트의 현재 페이지 또는 보조 정보 부분을 나타냅니다. 현재 페이지의 주요 콘텐츠와 관련된 광고, 탐색 바, 인용문, 사이드바 댓글 및 주요 콘텐츠와 구별되는 기타 부분을 포함할 수 있는 기사🎜

5、address 标签

<address></address> 元素可以让作者为它最近的 <article> </article>或者  祖先元素提供联系信息。在后一种情况下，它应用于整个文档

• 当表示一个和联系信息无关的任意的地址时，应使用 

   元素

• 这个元素不能包含除了联系信息之外的任何信息，比如出版日期
• 通常<address> </address>元素可以放在当前<section></section>的 <footer></footer> 元素中，如果存在的话

6、menu 标签

<menu></menu>标签可以用来定义页面的菜单

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

7、time 标签

<time></time>标签用来表现时间或日期

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

8、mark 标签

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

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

9、details 标签

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

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

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

10、meter 标签

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

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

11、ruby 标签

<ruby></ruby>标签是使用来定义ruby注释（中文注音或字符），如果在东亚使用，显示的是东亚字符的发音。
<ruby></ruby>标签通常和<rt></rt>标签和<rp></rp>标签一起使用，<rt></rt>标签用来提供注释信息（如：拼音），<rp></rp>标签用来定义浏览器不支持ruby标签时所显示的内容。

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

12、blockquote 标签

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

위 내용은 html5에서 일반적이지 않은 태그를 사용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!