不常用但很好用的标签

scq000 发布于2019-08-02 16:13 / 1799人阅读

摘要：表格类表格里面不常用但好用的应该数和标签，他们可以用来定义对应列的属性。

虽然 html5 出了很多新标签，但是自己工作中用到的除了 nav，header 等跟 div 类似的标签以外，其他的并没怎么用过，所以看了下菜鸟教程里面，大体浏览的一下已有的标签，发现很多有趣的标签，现在总结一下，部分支持性比较差的就不介绍了，比如

标签，看起来很不错，但是显示只有 Chrome 支持，所以就不介绍了，有兴趣的可以去看看。因为不知道怎么在文章里展示代码效果，所以点这里看看链接描述

标识类 abbr

标签指示简称或缩写，比如 "WWW" 或 "NATO"。通过对缩写进行标记，您能够为浏览器、拼写检查和搜索引擎提供有用的信息。全称写在 title 属性里，在悬浮时即可显示内容。title 是 html 的全局属性，这意味着你用别的标签，然后添加 title 属性，也会有同样效果，不过既然出了此标签，并且浏览器和搜索引擎对此进行处理，所以遇到时，用它还是不错的。

素质三连是每位读者应有的态度

area 和 map

当初在 DW 里看到过这个功能，不过自己没用过，可以设置图片可点击区域，然后进行链接。比如点击下图的中间区域。会跳转新的图片。

bdo

标签用来指示文本的顺序，从左到右 dir="ltr"）还是右往左（dir="rtl"），这样就不用去处理字符串颠倒了。

上海自来，水，上海自来

标签在 HTML 页面中创建一条水平线。这没什么可说的，不过现在都不怎么推荐了，但是各浏览器还都是支持的，比用 div 的边框还是能省不少代码的

mark

标签定义带有记号的文本。

五千六百万啊，四舍五入就是 一个亿啊

meter 和 progress

标签定义已知范围或分数值内的标量测量。也被称为 gauge（尺度）。
例子：磁盘用量、查询结果的相关性，等等。
标签不适合用来表示度量衡（例如，磁盘空间使用情况或查询结果）。
我的理解就是用来表示那些有计量单位的，比如温度，剩余空间。而是用来那些任务的进度，比如下载上传等。
value 属性如果不设置 max 值得话，则最大值为 1

c:盘10G

迅雷下载99.9%

ruby rt rp

ruby 元素由一个或多个字符（需要一个解释/发音）和一个提供该信息的 rt 元素组成，还包括可选的 rp 元素，定义当浏览器不支持 "ruby" 元素时显示的内容。
我的理解是 ruby 是字，rt 是注音，rp 是浏览器不支持时显示的内容。

福hu建人

sub 和 sup

包含在 _{和 ^{标签和其结束标签中的内容将会以当前文本流中字符高度的一半来显示，但是与当前文本流中文字的字体和字号都是一样的。在数学等式、科学符号、化学公式和脚注等比较好用，sup 也可以用来写通知的小红点。}}

H₂O是水，log₅²⁵=2
赞²²

wbr

如果单词太长，或者您担心浏览器会在错误的位置换行，那么您可以使用元素来添加 Word Break Opportunity（单词换行时机）。可以看到有 wbr 标签包围的 http 会换行。

ssssssssssssssssHttp

表格类

表格里面不常用但好用的应该数 col 和 colgroun 标签，他们可以用来定义对应列的属性。再此我把表格相关的元素写在一起。col 的 align 属性支持比较差，所以推荐用 css 处理
thead、tfoot 以及 tbody 元素使您有能力对表格中的行进行分组。当您创建某个表格时，您也许希望拥有一个标题行，一些带有数据的行，以及位于底部的一个总计行。
这种划分使浏览器有能力支持独立于表格标题和页脚的表格正文滚动。当长的表格被打印时，表格的表头和页脚可被打印在包含表格数据的每张页面上。

caption、col、colgroup、thead、tbody、tfoot 和 table

九宫
1	2	3
4	5	6
7	8	9

表单类

表单这也有许多标签，但是项目中应该多数都不会用浏览器所展示的样式，不过有个 output 标签比较有趣，下面只做一些简单的结构展示


  
    莫得感情莫得钱的杀手
    
  
  
    健康信息
    体重(kg)：0250 

    身高(cm)：

    体重指数：

结语

还有一些标签没写里面，比如 iframe 相关的，个人感觉用的不是特别多，可能以后会加上吧。

GPU云服务器云服务器 html常用的空标签 html常用标签 html常用单标签 html基本常用标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54893.html

找XShell替代品？不满意FinalShell？我推荐这款开源工具

摘要：找替代品不满意我推荐这款开源工具现目前的的远程终端工具有很多，功能齐全好用的收费，免费的功能外观又不怎么满意。收费而且感觉用起来也一般，免费但很不方便，我们的好用功能齐全可以说是一款非常好的终端工具但外观总是觉得不尽人意。直到我发现这款。 ...

ephererid 2021-11-25 09:43 评论0 收藏0
2019 为什么我们还会继续使用 PHP ?

摘要：但我还是使用它开发了很多软件。那么问题就很明显了为什么今天还在使用除了个人理想主义的偏好以外，还有很多理由。为什么使用而不是也许和比较的最重要的语言是。为什么选择而不是你已有专业知识或者在使用库。 showImg(https://segmentfault.com/img/remote/1460000018390090?w=790&h=466); 我们来开门见山地说。 PHP 是一门奇...

guyan0319 2019-07-01 12:33 评论0 收藏0
漫谈前端之路

摘要：那么的学习就相对来说很自由了，可以跟着网址过一遍标签，网上也有很多其它网站做这个的，像菜鸟教程慕课网视频之类的都可以用等熟练了就可以去国外看看一些前端的新技术，像国际，最大的程序员问答网站。前言前端之路何其漫漫~ 说明：本篇文章原是写给学弟学妹的，但想来花的功夫确实不少，就把此篇文章当做自己的一个阶段性总结文章了，会保持长期更新。 HTML 总的来说HTML并不难，...

qujian 2019-08-19 17:47 评论0 收藏0
漫谈前端之路

摘要：那么的学习就相对来说很自由了，可以跟着网址过一遍标签，网上也有很多其它网站做这个的，像菜鸟教程慕课网视频之类的都可以用等熟练了就可以去国外看看一些前端的新技术，像国际，最大的程序员问答网站。前言前端之路何其漫漫~ 说明：本篇文章原是写给学弟学妹的，但想来花的功夫确实不少，就把此篇文章当做自己的一个阶段性总结文章了，会保持长期更新。 HTML 总的来说HTML并不难，...

番茄西红柿 2019-08-30 12:50 评论0 收藏0