先思考一个问题:为什么H5里面又多了那么多看似没用的标签?

  我们知道,<div>能干百分之99的标签能干的事,而标签的主要作用是用来包裹内容,只要把基本内容都包含进去不就好了??胡闹!不带这么将就了!!程序员大多可都是追求完美的,标签的语义化才是我们选择使用哪个标签的首要因素。当然,H5的很多新标签在一些老版本流浪器中还不能得到很好的支持,那就需要引用腻子脚本去兼容大多数浏览器了。

1、<cite>和<blockquote>

这俩个标签都有定义文本引用的语义,<blockquote>定义的是块引用,默认有缩进,开始结尾都与其他元素有一行间隔,官方要求它内部应该包含一个块级元素。而<cite>通常表示它所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题,内容比较少,默认是斜体的。

比如: 张三的突破性专著<cite>张三自传</cite>给网络带来一股新气象.

显示为:张三的突破性专著张三自传给网络带来一股新气象.

2、<optgroup>

当你想在一个下拉框中对根据不同类型分组的选项添加一些定义时,<optiongroup>标签将会非常有用。例如,如果你想根据时间对食物进行分组,代码可以这样写:

 <select>
<optgroup label="水果">
<option value="">苹果</option>
<option value="香蕉">Saab</option>
</optgroup>
<optgroup label="蔬菜">
<option value="白菜">Mercedes</option>
<option value="西红柿">Audi</option>
</optgroup>
</select>

3、<abbr>

HTML5中已经消灭了<acronym>,所以熟悉<acronym>的童鞋记得不要再用它了,改用<abbr>吧,简单省事。来看看这个新标签的作用,通过对缩写进行标记,您能够为浏览器、拼写检查和搜索引擎提供有用的信息。使用这个标签时,我们只需定义英文首字母就可以了,详细信息交给title属性,相信大家对这个属性不会陌生,当鼠标移到这个缩写单词上面时,显示title里的内容。

4、<address>

<address> 标签定义文档或文章的作者/拥有者的联系信息。其中的文本通常呈现为斜体。大多数浏览器会在 address 元素前后添加折行。

提示:<address> 标签不应该用于描述通讯地址,除非它是联系信息的一部分。

提示:<address> 元素通常连同其他信息被包含在 <footer> 元素中。

5、 <ins> 和 <del>

如果你想通过标记来显示文档编辑样式,<ins>和<del>刚好可以用到。就像它们的名字,<ins>通过一个下划线来突出那些被添加进文档的内容,而<del>则通过删除线来显示那些从中删除的文字。

比如:

<p>价格:<ins>¥120</ins> <del>¥180</del>  </p>

显示效果:  价格:¥120 ¥180

6、<label>

<label>的for属性关联到另一个标签的id,用户点击<label>的内容就相当于点击了被关联的那个id标签。不用for关联的话也可以直接把需要关联的标签写到<label>内部。

<form>
<label>Male<input type="radio" name="sex" /></label> <!--用法1-->
<br />
<label for="female">Female</label> <!--用法2-->
<input type="radio" name="sex" id="female" />
</form>

7、<fieldset>

<fieldset>是一个相当好用的标签,它可将表单内的相关元素按逻辑分组,将表单内容的一部分打包,生成一组相关表单的字段。

<form>
<fieldset>
<legend>健康信息</legend>
身高:<input type="text" />
体重:<input type="text" />
</fieldset>
</form>

健康信息:身高: 体重:

8、<bdo>定义文本方向

估计这个标签很多人都没见过吧,毕竟谁没人把文本方向倒着排啊。其dir属性规定了文本方向,ltr/rtl。

<bdo dir="rtl">Here is some Hebrew text.</bdo>

显示效果: .txet werbeH emos si ereH

9、ruby、rt、rp

<ruby>
奣<rt> weng <rp>(不支持ruby)</rp></rt>
</ruby>

标签定义 ruby 注释(中文注音或字符),当不支持<ruby>标签时,显示<rp>内容,支持则不显示<rp>内容。

目前就整理这些鲜为人知但有必要了解的标签,后续还会添加...

HTML中那些不常用标签的更多相关文章

  1. HTML meta标签的用法及head中的一些常用标签

    meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta主要为分HTTP标头信息(HTTP-EQUIV)和页面描述信息(NAME)标头信息包括文档类型.字符集.语言等浏览器正确显示网页的信 ...

  2. unity中 TextMeshPro 的常用标签

    这个第二和第三个写反了. 例子10中的123标签需要用到另一个字体,详情看 TextMeshPro 的官方示例10.

  3. HTML中body内常用标签

    基本标签 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除<s/> <p& ...

  4. 01: html常用标签

    目录: 1.1 web开发的三把利器介绍 1.2 网页头部head标签中几个常用标签 1.3 html常用标签归类 1.4 input系列标签 1.5 HTML其他标签 1.1 web开发的三把利器介 ...

  5. java web中jsp常用标签

    在jsp页面开发过程中,经常需要使用JSTL(Java Server Pages Standard Tag Library)标签开开发页面,是看起来更加的规整舒服. JSTL主要提供了5大类标签库: ...

  6. Struts2页面开发中常用标签使用说明

    1. Struts2页面开发中常用标签使用说明 1.1.往action里传值的使用方式: <input name="userName" type="text&quo ...

  7. html中的一些常用的样式标签

    html中的一些常用的样式标签 <p>这里是文本,<mark>高亮</mark></p> <strong>加粗,加重语气</stron ...

  8. 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?

    4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...

  9. mapper.xml中的常用标签

    mybatis的mapper xml文件中的常用标签 https://blog.csdn.net/qq_41426442/article/details/79663467 SQL语句标签 1.查询语句 ...

随机推荐

  1. 玩转Eclipse--如何使用eclipse可以更好的提高我们的工作效率

    工欲善其事必先利其器,更加了解我们的开发工具有利于提高开发效率,而合理使用快捷键可以使我们事半功倍,这里收集了eclipse中的几种常见设置,eclipse的优化以及非常全面的快捷键介绍,大家有用到的 ...

  2. php curl 访问 https站点

    $uri = "https://your_website"; $ch = curl_init (); $data=I('post.'); curl_setopt ( $ch, CU ...

  3. Postmark介绍

    一. 引言 Postmark是由著名的NAS提供商NetApp开发,用来测试其产品的后端存储性能. Postmark主要用于测试文件系统在邮件系统或电子商务系统中性能,这类应用的特点是:需要频繁.大量 ...

  4. 使用window.btoa和window.atob来进行Base64编码和解码

      方法描述 WindowBase64.atob() 函数用来解码一个已经被base-64编码过的数据. WindowBase64.btoa() 函数 将ascii字符串或二进制数据转换成一个base ...

  5. 在Core环境下用WebRequest连接上远程的web Api 实现数据的简单CRUD(续)

    这篇博客是上篇博客的续写,上篇博客用的是HttpClient取远程数据,用WebRequest提交,更新,删除数据.上篇本来想全文都用httpClient,可是当时无论如何也实现不了数据的提交,于是换 ...

  6. 573. Squirrel Simulation

    Problem statement: There's a tree, a squirrel, and several nuts. Positions are represented by the ce ...

  7. 【Objective-C 基础】3.类

     1.类 OC中类分为两个文件: .h类的声明文件,用于声明变量.函数. .m类的实现文件,用于实现.h中的函数 类的声明使用关键字@interface @end 类的实现使用关键字@implemen ...

  8. 基于路由器物理接口的vlan间路由

    广播域之间来往的数据包都是路由器中继的,所以vlan间的通信业需要路由器提供中继服务,这称作vlan间路由,可以用路由器或三层交换机实现. 配置R1: r1(config)#inter fa0/0r1 ...

  9. PAT1030 Travel Plan (30)---DFS

    (一)题意 题目链接:https://www.patest.cn/contests/pat-a-practise/1030 1030. Travel Plan (30) A traveler's ma ...

  10. 谈谈对Spring IOC的理解(转载)

    学习过Spring框架的人一定都会听过Spring的IoC(控制反转) .DI(依赖注入)这两个概念,对于初学Spring的人来说,总觉得IoC .DI这两个概念是模糊不清的,是很难理解的,今天和大家 ...