html5不常用标签应用场景

divpspanuldlollidtddstrongb

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

1、fieldset 标签

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

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

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

基本使用及默认效果:

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

4.png

2、figure 标签

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

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

5.png

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

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

6.png

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

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

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

7.png

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

3、section 标签

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

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

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

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

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

4、aside 标签

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

5、address 标签

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

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

8.png

6、menu 标签

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

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

7、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> 标签定义带有记号的文本。出于引用的目的,对与另一个上下文相关的文本进行突出显示

9.png

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

9、details 标签

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

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

10.gif

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

10、meter 标签

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

11.png

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

11、ruby 标签

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

12.png

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

12、blockquote 标签

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

13.png

Image placeholder
前端答疑
未设置
  44人点赞

没有讨论,发表一下自己的看法吧

推荐文章
HTML主体结构及头部常用标签笔记

上面这种方式是HTML4中设置页面字符集的标签 5秒一刷新 5秒以后跳转到百度 网页关键词

HTML常用标签笔记

物理标签逻辑标签

HTML文本标签与格式标签笔记

用画图工具量出坐标,通过左上角的点和右下角的点相连

innerHTML与jquery里的html()区别?

innerHTML与jquery里的html()区别?●html()可以设置tbody、tr这些只读标签,而innerHTML在低版本IE下不行;jQuery的html()做了些容错处理,原生的Dom

使用html-webpack-plugin对HTML文件进行预处理

一、前言先整理一波之前和webpack相关的文章: 使用Webpack对CSS文件进行后处理 基于Webpack的CSSSprites实现方案 Stylus系列——webpack-spritesmit

html转pdf工具 --- wkhtmltopdf

课程推荐:web全栈开发就业班--拿到offer再缴学费--融职教育 html转pdf工具---wkhtmltopdf [https://wkhtmltopdf.org/wkhtmltopdf htt

HTML5新增了哪些标签?

HTML5新增了哪些标签?html5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。html

html5测试题整理--针对标签的概念性

推荐课程:web全栈开发就业班--收到offer再缴学费--融职教育 1.哪个元素被称为媒体元素的子元素? 答案:。 标签为媒体元素(比如and)规定外部文本轨道。这个元素用于规定字幕文件或其他包含文

人社部大数据应用场景思考

文/涵诚人社部尹蔚民部长在2017年5月全国“互联网+人社”座谈会指出,要充分运用大数据手段,通过“互联网+人社”,实现决策科学、管理精准化、服务人本化,人社的统计数据对于服务决策、研究政策、支撑事业

全面了解 Nginx 主要应用场景

前言本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文本身也可能介绍的不完整,毕竟只是我个人使用过和了解到过得。所以还请见谅,同时欢迎留言交流Ngi

html换行标签是什么?

html换行标签是什么?html换行标签是,常常我们在需要手动换行的地方,加入即可实现内容换行。示例:这还是测试文字这还是测试文字这还是测试文字 这还是测试文字这还是测试文字这还是测试文字这还是测试文

HTML新增类型及标签笔记

placeholder属性:提示用户输入的信息multiple可以再email中输入多个邮箱地址,使用','隔开autofocus自动获取焦点required防止域为空

HTML新增类型及标签笔记

新增属性 multiple多个提交emailplaceholder显示提示信息autofocus焦点required必填minlengthmaxlength长度限制minmax 新增type emai

HTML新增类型及标签笔记

header头部nav导航section节aside侧边footer页脚article文章figure元素组合图片与图片描述组合figcaption details文档与文档细节Summary定义标题

HTML与CSS的dic、span和格式化标签

课程推荐:前端开发工程师--学习猿地精品课程 div和spandiv? 是一个块级元素,通常与css配合使用,用于布局。 ?标签可以把文档分割为独立的、不同的部分。它可以用作严格的组织工具,并且不使

【css】多种背景及使用场景

推荐课程:学习猿地--Java开发工程师在线课--送商业项目--点击进入 background相关使用CSSbackground是最常用的CSS属性之一,但是我们经常使用这个,但往往疏忽到底表达的是什

HTML5都有什么用途?

HTML5都有什么用途?HTML5的用途1、本地存储基于HTML5开发的网页APP拥有更短的启动时间,更快的联网速度,这些全得益于HTML5APPCache,以及本地存储功能。2、实现多媒体更加简单利

html5是什么?

html5是什么?万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改。本次修改后的标准我们就称之为html5。HTML5是构建Web内容的一种语言描述方式。HTM

HTML5 Canvas 数据持久化存储之属性列表

属性列表想必大家都不会陌生,正常用HTML5来做的属性列表大概就是用下拉菜单之类的,而且很多情况下,下拉列表还不够好看,怎么办?我试着用HTforWeb来实现属性栏点击按钮弹出多功能选框,对传入的数据

html5 css3是什么?

html5和css3是什么?HTML5和CSS3是HTML和CSS的最新版本。HTML为构成网页的主要语言。通过这种语言,我们可以向计算机说明网页格式、内容、显示效果等等。CSS则是专门用来控制网页显