先思考一个问题:为什么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. css3 felx布局

    一.Flex布局是什么? Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为Flex布局. [css] .box ...

  2. PHP填补数字前后的0

    PHP数字填补0 经常会遇到这样的问题: 自然数字是0,1,2,3...而我们需要的却是满足多少多少位数的数字,如:001,002. 在ID,编号,学号中我们会经常用到补全前面或者后面的空位(一般为前 ...

  3. PHP学习笔记-4(时间戳)

    在学习PHP时间戳的时候,发现了一个有趣的现象,就是发现用strtotime()这个函数返回的时间戳跟人家的不一样,以为是自己哪里写错了,后来发现不是这样的. 是因为设置的时区不同,从而导致了时间显示 ...

  4. 【MySql】——MHA+GTID+failover+binlog-server+Atlas

    一.环境准备 1.mysql-db01 #系统版本 [root@mysql-db01 ~]# cat /etc/redhat-release CentOS release 6.7 (Final) #内 ...

  5. Telegram学习解析系列(二):这我怎么给后台传输数据?

    写在前面: 在iOS开发的过程中,有很多时候我们都在和数据打交道,最基本的就是数据的下载和上传了,估计很多很多的小伙伴都在用AFNetworking与后台数据打交道,可有没有想过,哪天AFNetwor ...

  6. Natas Wargame Level 13 Writeup(文件上传漏洞,篡改file signature,Exif)

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqMAAADDCAYAAAC29BgbAAAABHNCSVQICAgIfAhkiAAAIABJREFUeF

  7. Python爬虫学习之获取网页源码

    偶然的机会,在知乎上看到一个有关爬虫的话题<利用爬虫技术能做到哪些很酷很有趣很有用的事情?>,因为强烈的好奇心和觉得会写爬虫是一件高大上的事情,所以就对爬虫产生了兴趣. 关于网络爬虫的定义 ...

  8. SQL优化一

    1.行列转换: decode(条件,值1,返回值1,值2,返回值2,...值n,返回值n,缺省值); select decode(sign(变量1-变量2),-1,变量1,变量2) from dual ...

  9. struts2.3.23升级到struts2.3.32

    新的漏洞 3月8号去审计厅培训系统的使用,那边计算机中心的负责人递过来一张如下图所示的文档,意思是发现了struts2的漏洞,需要进行修复. 在培训前,我登录到服务器中,看到了项目中,所有的服务器中应 ...

  10. Day2-字符编码转换

    1.在python2默认编码是ASCII, python3里默认是unicode 2.unicode 分为 utf-32(占4个字节),utf-16(占两个字节),utf-8(占1-4个字节), so ...