html不常用的标签有哪些

html不常用的标签有:pre、figure、figcaption、em、strong、del、ins、sub、sup、ruby、bdo、vedio、audio、track、optgroup、output、progress、meter等等。

html不常用的标签有哪些

本教程操作环境:windows7系统、HTML5版、Dell G3电脑。

html不常用的标签

1、pre 标签

HTML

</code> 元素表示预定义格式文本。在该元素中的文本通常按照原文件中的编排,以等宽字体的形式展现出来,文本中的空白符(比如空格和换行符)都会显示出来。</p><p>例如:</p><pre class="brush:html;toolbar:false;"><pre class="brush:php;toolbar:false;">    < Hello World >                          我      就是   想      ---------------------------                    乱    七                  ^__^                            八       遭                (oo)_______                (__)       )/        的                     定位  写                    ||----w |                    ||     ||                      出来 ~

效果图:

立即学习前端免费学习笔记(深入)”;

html不常用的标签有哪些

2、figure 与 figcaption

HTML

元素代表一段独立的内容, 经常与说明(caption)

配合使用, 并且作为一个独立的引用单元。当它属于主内容流(main flow)时,它的位置独立于主体。这个标签经常是在主文中引用的图片,插图,表格,代码段等等.

@@##@@
美丽的海景~

效果图:

立即学习“前端免费学习笔记(深入)”;

html不常用的标签有哪些

3、em 标签 与 strong 标签

HTML 着重元素 () 标记出需要用户着重阅读的内容, 元素是可以嵌套的,嵌套层次越深,则其包含的内容被认定为越需要着重阅读,一般显示为 " 倾斜字体 "

Strong 元素 ()表示文本十分重要,一般用粗体显示。

4、del 标签 与 ins 标签

HTML的 标签表示一些被从文档中删除的文字内容。比如可以在需要显示修改记录或者源代码差异的情况使用这个标签。

这段文本已被删除。 , 请浏览其它部分

效果图:
1.png

HTML 元素定义已经被插入文档中的文本。

这一段文本是新插入至文档的。

效果图:

立即学习“前端免费学习笔记(深入)”;

html不常用的标签有哪些

5、sub 标签 与 sup 标签

HTML 元素定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更低并且更小。

水的化学公式: H2O

效果图:

立即学习“前端免费学习笔记(深入)”;

html不常用的标签有哪些

HTML 元素定义了一个文本区域,出于排版的原因,与主要的文本相比,应该展示得更低并且更小。

2 + 32= 11

效果图:
html不常用的标签有哪些

6、ruby 标签

HTML 元素 被用来展示东亚文字注音或字符注释。

(qu)(xiao)(qiang)

效果图:
html不常用的标签有哪些

7、bdo 标签

指定子元素的文本方向 ,显式地覆盖默认的文本方向。

元素 ( HTML双向覆盖元素 )用于覆盖当前文本的朝向,它使得字符按给定的方向排列。

这段文本是从左到右的

这段文本是从右到左的

效果图:

立即学习“前端免费学习笔记(深入)”;

html不常用的标签有哪些

当你用css 写大量的样式的时候,有没有想过,有一个标签可以代替大量的样式属性呢。

8、vedio、audio 和 track

vedio、audio 和 track 三者都是 HTML5 的产物,相信很多小伙伴,都肯定使用过 ,因为比较常用,这里就不介绍了,今天说一下

HTML 元素 被当作媒体元素 的子元素来使用。它允许指定计时字幕(或者基于时间的数据),例如自动处理字幕。

track 给媒体元素添加的数据的类型在 kind 属性中设置,属性值可以是 subtitles, captions, descriptions, chaptersmetadata。该元素指向当用户请求额外的数据时浏览器公开的包含定时文本的源文件。

一个media 元素的任意两个 track 子元素不能有相同的 kind, srclang, 和 label属性。

效果图:

立即学习“前端免费学习笔记(深入)”;

html不常用的标签有哪些

9、optgroup 标签

标签定义选项组。

optgroup 元素用于组合选项。当您使用一个长的选项列表时,对相关的选项进行组合会使处理更加容易。

          Option 1.1               Option 2.1      Option 2.2              Option 3.1      Option 3.2     

效果图:

立即学习“前端免费学习笔记(深入)”;

html不常用的标签有哪些

简单的介绍这个功能,大多数的时候,我们所选择的框架开发,都会集成这种效果,可维护性也比较好,这里权当认识一下这个标签,不要遗忘了它~

10、output

HTML 标签是HTML 5 中的新标签,表示计算或用户操作的结果,执行计算然后在 元素中显示结果。

注释Internet Explorer 不支持 标签。

   +   =  

效果图:

立即学习“前端免费学习笔记(深入)”;

html不常用的标签有哪些

11、progress 标签

HTML中的progress () 元素用来显示一项任务的完成进度.

进度条:70 % 
进度条:

效果图:

立即学习“前端免费学习笔记(深入)”;

html不常用的标签有哪些

提示:请结合 标签与 JavaScript 一同使用,来显示任务的进度。

不过一般会用到进度条的地方,都是组件,框架自带之类的,这个算是鸡肋的了,不过了解一下还是没有坏处的,哦对了,这个标签Internet Explorer 9 以及更早的版本不支持。

12、meter 标签

progress 相比 meter 元素来度量给定范围(gauge)内的数据:

显示度量值:

3/10
60%

效果图:

立即学习“前端免费学习笔记(深入)”;

html不常用的标签有哪些

13、details 标签

HTML

元素可创建一个挂件,仅在被切换成展开状态时,它才会显示内含的信息。

元素可为该部件提供概要或者标签。

点击展开

世间万物,为我所用,非我所得。

效果图:
html不常用的标签有哪些

注意: 目前只有 Chrome 和 Safari 6 支持

标签。

相关推荐:《html视频教程》

html不常用的标签有哪些

以上就是html不常用的标签有哪些的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1550873.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 21:07:53
下一篇 2025年12月17日 23:15:23

相关推荐

  • html怎么放大图片

    方法:1、利用width和height属性放大图片,语法“”;2、用style和transform属性放大图片,语法“”。 本教程操作环境:windows10系统、HTML5版、Dell G3电脑。 html怎么放大图片 在html中想要放大图片有两种方法 一种是重新设置图片元素的高度和宽度,这时候…

    好文分享 2025年12月21日
    000
  • HTML怎么设置td内容居中

    设置方法:1、利用align属性,语法“…”;2、利用style属性添加居中对齐样式,语法“…”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 HTML设置td内容居中 1、利用align属性 align 属性规定单元格中内容的水平对齐方式。当属…

    2025年12月21日
    000
  • html表格怎么设置行高

    html表格设置行高的方法:1、给tr或td元素设置height属性,语法“”;2、利用style属性给tr或td元素添加height样式,语法“”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 我们有下面一个表格: 商品价格T恤¥100牛仔褂¥250牛仔库¥150 怎…

    2025年12月21日 好文分享
    000
  • html怎样设置select默认不选中

    设置方法:1、在select标签内的第一个option标签设置为空;2、给option空标签添加“display:none”样式,即可设置select默认不选中,语法为“”。 本教程操作环境:windows10系统、HTML5版、Dell G3电脑。 html怎样设置select默认不选中 默认情况…

    2025年12月21日
    000
  • 十分钟搞懂form标签中的GET和POST提交方式

    本篇文章给大家带来了form标签中get和post两种提交方式的相关知识以及比较,form表单的作用是收集标签中的内容, … 中间可以由访问者添加类似于文本,选择,或者一些控制模块等等.然后这些内容将会被送到服务端,希望对大家有帮助。 form标签中的GET和POST 在HTML中,fo…

    2025年12月21日 好文分享
    000
  • html div怎么设置宽度

    html div设置宽度的方法:1、给div元素添加“width:宽度值;”样式设置固定宽度;2、给div元素添加“min-width:宽度值;”样式设置最小宽度;3、给div元素添加“max-width:宽度值;”样式设置最大宽度。 本教程操作环境:windows7系统、CSS3&&amp…

    2025年12月21日 好文分享
    000
  • html怎么设置div高度

    html设置div高度的方法:1、给div元素添加“height:高度值;”样式设置固定高度;2、给div元素添加“min-height:高度值;”样式设置最小高度;3、给div元素添加“max-height:高度值;”样式设置最大高度。 本教程操作环境:windows7系统、CSS3&&a…

    2025年12月21日 好文分享
    000
  • html怎么设置div的透明度

    html设置div透明度的方法:1、利用opacity属性,只需要给div元素添加“opacity: 透明度值;”样式即可;2、利用filter属性,只需要给div元素添加“filter:opacity(透明度值);”样式即可。 本教程操作环境:windows7系统、CSS3&&HT…

    2025年12月21日 好文分享
    000
  • html怎么设置a标签位置

    设置方法:1、给a标签的父标签添加“position: relative;”样式,进行相对定位;2、给a标签添加“position: absolute;”样式进行绝对定位;3、用top、bottom、left、right属性控制a标签位置。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月21日
    000
  • html textarea怎么设置大小

    设置方法:1、给textarea设置cols和rows属性,语法“”;2、给extarea添加“width:宽度值;height:高度值;”样式。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 html textarea设置大小 标签定义一个多…

    2025年12月21日 好文分享
    000
  • html怎么设置下划线长度

    html设置下划线长度的方法:1、给元素添加“display: block;”样式将其变成块级元素;2、使用border-bottom属性设置下划线样式;3、利用width属性控制下划线长度,语法“width:长度值;”。 本教程操作环境:windows7系统、CSS3&&HTML5…

    2025年12月21日
    000
  • html怎么禁止横向滚动

    在html中,可以利用overflow-x属性来禁止横向滚动,只需要给body元素添加“overflow-x:hidden;”样式即可;该样式可以规定当内容横向超出页面时,不提供横向滚动机制,而是裁剪并隐藏溢出的内容。 本教程操作环境:windows7系统、CSS3&&HTML5版、…

    2025年12月21日
    000
  • html怎么设置下拉框option不可选

    在html中,可以通过给option标签元素设置disabled属性,禁用指定选项,让指定option不可选,语法“选项值”。 本教程操作环境:windows7系统、HTML5版、Dell G3电脑。 在html中,可以通过给option标签元素设置disabled属性来让option不可选。 di…

    2025年12月21日
    000
  • html怎么去掉button的边框

    方法:1、利用border-style属性,给button元素添加“border-style:none;”样式即可;2、利用border-color属性,给button元素添加“border-color:transparent;”样式即可。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月21日
    000
  • html怎么隐藏下拉框

    方法:1、给select元素设置hidden属性,语法“”;2、给select元素添加“display:none”样式;3、给select元素添加“visibility:hidden”样式。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 htm…

    2025年12月21日 好文分享
    000
  • html可以加多个背景图片吗

    html可以加多个背景图片。html中,可以通过background-image或者background为一个容器设置多张背景图像,即把不同背景图象只放到一个块元素里;语法“background:url(图片地址),url(地址)..;”。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月21日
    000
  • html怎么设置边框圆角

    设置方法:1、利用border-radius属性,语法“border-radius:圆角半径;”;2、利用border-image属性,用带有圆角的图片来创建边框,语法“border-image:url(圆角图片地址) 20 fill;”。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月21日 好文分享
    000
  • html怎么设置文字超出换行

    html中可通过word-wrap、word-break和overflow属性设置文字超出换行,只需给文字元素添加“word-wrap:break-word;word-break:break-all;overflow:hidden;”样式。 本教程操作环境:windows7系统、CSS3&&…

    2025年12月21日 好文分享
    000
  • html怎么设置层级

    在html中,可以通过z-index属性来设置元素的层级,该属性可以指定一个元素的堆叠顺序(层级),语法“z-index:数值;”;数值越大的,层级越高,数值越小,层级就越低。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 html设置层级 通…

    2025年12月21日
    000
  • HTML表格怎么隐藏内容

    HTML表格隐藏内容的方法:1、给表格元素tr、th或td设置hidden属性,语法“”;2、给表格元素tr、th或td添加“display: none;”样式。 本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。 我们有下面一个表格: 姓名年龄Pe…

    2025年12月21日 好文分享
    000

发表回复

登录后才能评论
关注微信