HTML中那些不常用标签
先思考一个问题:为什么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中那些不常用标签的更多相关文章
- HTML meta标签的用法及head中的一些常用标签
meta是用来在HTML文档中模拟HTTP协议的响应头报文.meta主要为分HTTP标头信息(HTTP-EQUIV)和页面描述信息(NAME)标头信息包括文档类型.字符集.语言等浏览器正确显示网页的信 ...
- unity中 TextMeshPro 的常用标签
这个第二和第三个写反了. 例子10中的123标签需要用到另一个字体,详情看 TextMeshPro 的官方示例10.
- HTML中body内常用标签
基本标签 <b>加粗</b> <i>斜体</i> <u>下划线</u> <s>删除<s/> <p& ...
- 01: html常用标签
目录: 1.1 web开发的三把利器介绍 1.2 网页头部head标签中几个常用标签 1.3 html常用标签归类 1.4 input系列标签 1.5 HTML其他标签 1.1 web开发的三把利器介 ...
- java web中jsp常用标签
在jsp页面开发过程中,经常需要使用JSTL(Java Server Pages Standard Tag Library)标签开开发页面,是看起来更加的规整舒服. JSTL主要提供了5大类标签库: ...
- Struts2页面开发中常用标签使用说明
1. Struts2页面开发中常用标签使用说明 1.1.往action里传值的使用方式: <input name="userName" type="text&quo ...
- html中的一些常用的样式标签
html中的一些常用的样式标签 <p>这里是文本,<mark>高亮</mark></p> <strong>加粗,加重语气</stron ...
- 04. H5标签有哪些?行内元素有哪些?块级元素有哪些?空(void)元素有哪些?行内元素和块级元素有什么区别?你工作中常用标签有什么?
4. H5标签有哪些? 2)行内元素有哪些? a - 锚点 em - 强调 img - 图片 font - 字体设定 ( 不推荐 ) i - 斜体 input - 输入框 3)块级元素有哪些? add ...
- mapper.xml中的常用标签
mybatis的mapper xml文件中的常用标签 https://blog.csdn.net/qq_41426442/article/details/79663467 SQL语句标签 1.查询语句 ...
随机推荐
- Flask 学习笔记
Flask 是一个Web应用框架,我也就是一边看书,一边写博文做记录 这本书: 首先安装Flask ,和配置环境,参考这边博客: 然后就开始学习Flask 了. 1.Application and R ...
- 2017/4/27-Gradle的配置与Spring的下载
Gradle的配置与Spring的下载 1.Gradle 1) 介绍 Gradle是一个基于Groovy的构建工具,类似Maven,但是比其更加简单轻便.它可以自动化地进行软件构建.测试.发布.部署. ...
- 懵懂oracle之存储过程
作为一个oracle界和厨师界的生手,笔者想给大家分享讨论下存储过程的知识,因为在我接触的通信行业中,存储过程的使用还是占据了一小块的地位. 存储过程是什么?不得不拿下百度词条的解释来:"存 ...
- spring-mvc @Controller 200-不生效
复杂的故事简单说,复杂的问题简单做.问题记录. 现象 新增加一个Controller,但在js中调用时报请求200,无请求反馈,重启服务多次,问题依旧. controller 分析 从问题现象分析:2 ...
- Apache Spark1.1.0部署与开发环境搭建
Spark是Apache公司推出的一种基于Hadoop Distributed File System(HDFS)的并行计算架构.与MapReduce不同,Spark并不局限于编写map和reduce ...
- 分布式文件系统:HDFS
学习Hadoop,两个东西肯定是绕不过,MapReduce和HDFS,上一篇博客介绍了MapReduce的处理流程,这一篇博客就来学习一下HDFS. HDFS是一个分布式的文件系统,就是将多台机器的存 ...
- cin 字符串输入
cin 字符串输入 在学习c的时候,关于字符串的输入,记得有 scanf("%s",s); gets(s); 还有...o.o 好想没了... scanf("%s&quo ...
- javascript设计模式详解之命令模式
每种设计模式的出现都是为了弥补语言在某方面的不足,解决特定环境下的问题.思想是相通的.只不过不同的设计语言有其特定的实现.对javascript这种动态语言来说,弱类型的特性,与生俱来的多态性,导致某 ...
- Java学习笔记——设计模式之四.代理模式
To be, or not to be: that is the question. --<哈姆雷特> 代理模式(Proxy),为其他对象提供一种代理以控制对这个对象的访问. 上代码: p ...
- Java学习笔记——排序算法之进阶排序(堆排序与分治并归排序)
春蚕到死丝方尽,蜡炬成灰泪始干 --无题 这里介绍两个比较难的算法: 1.堆排序 2.分治并归排序 先说堆. 这里请大家先自行了解完全二叉树的数据结构. 堆是完全二叉树.大顶堆是在堆中,任意双亲值都大 ...