作为一个 web 前端开发者,在制作页面的时候你会从一大堆不同的标签中选择合适的标签来完成相应的功能。有些 HTML5 标签广为流传,例如 <article> <header> <footer>,然而有些标签可能知道的人不多,用的也少。

1. 上下文高亮 <mark>

<mark> 标签应该用来表示 “相关的(relevance)” 或 “注意观察的 (scrutiny)”
元素和文本应该与我们做的活动相关,并且这个相关性在那个时刻对我们是有用的。

http://codepen.io/SitePoint/p...

2. <small>

你可能之前用过这个标签,和它字面意思一样,它的作用就是让字看起来小一点。

这个标签应该用来降低文本或信息的重要程度。

http://codepen.io/SitePoint/p...

3. <q><blockquote>

这两个标签都是引用,<q> 用于小段内联文本,<blockquote> 用于大段文本的引用

<div class="big-banner">
<h2>Try our latest sandwich!</h2>
<p>Come and try our latest, biggest and tastiest
sandwich. John Smith told us <q>he hasn't eaten
anything as good in his whole life!</q></p>
</div>
<div class="motivational-quote">
<blockquote
cite="http://bit.ly/1pbvjsL">
Infuse your life with action.
Don't wait for it to happen.
Make it happen. Make your own
future. Make your own hope.
Make your own love. And
whatever your beliefs, honor
your creator, not by passively
waiting for grace to come down
from upon high, but by doing
what you can to make grace
happen... yourself, right now,
right down here on Earth.
<cite>Bradley Whitford - Author</cite>
</blockquote>
</div>

4. <ins>, <del><s>

<ins> 用于定义刚刚被添加到文档的内容
<del> 用于定义从文档被移除的内容
以上两个标签都支持2个可选的属性,
cite 属性用来链接到一个解释当前变更原因的链接,datetime 用来定义何时发生这个变化。
<s> 用于表示当前的文本不再相关或正确,通常情况下它会附带一个替换的文本内容。

http://codepen.io/SitePoint/p...
http://codepen.io/SitePoint/p...

5. <optgroup>

<optgroup> 标签用来和 <select> 标签配合,有助于对 <options> 元素 进行分类。

http://codepen.io/SitePoint/p...
http://codepen.io/SitePoint/p...

6. <datalist>

使用 <datalist> 定义 <input>标签可用的选择列表。

datalist 的表现就是输入框下面会出现一个选择框和一个下拉箭头,用来选择一些预定义好的内容。当你输入部分关键词的时候,选择列表中的内容若被匹配到,则会高亮显示。

选择列表出现的内容必须符合 input 设定的 type 类型,例如 type = email,那么选择列表中只会出现符合email规则的内容。

该特性被广泛支持,除了 safari。

http://codepen.io/SitePoint/p...

8 个有用的 HTML5 标签的更多相关文章

  1. HTML5标签的使用和作用

    在菜鸟教程中找了一些关于HTML5的知识点,觉得很有用,可以整理一下,以后使用. 这是一个基本的HTML5文档: <!DOCTYPE html><html><head&g ...

  2. 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法   HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...

  3. HTML5标签与HTML4标签的区别示例介绍_html5教程技巧

    (1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> &l ...

  4. 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法

    方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...

  5. [js开源组件开发]html5标签audio的样式更改

    html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...

  6. HTML5标签改变

    1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...

  7. 是时候全面使用html5标签了

    html5,这个词语,不管是业内还是业外,都已经耳熟能详了.因为已经火了这么长的的时间了.但是,真正开始使用的又有多少人呢?只能用呵呵来形容了! html5真的来了 2014年10月28日,历经八年, ...

  8. 关于HTML5标签不兼容(IE6~8)

    HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 比较常用的HTML5的新标签元素有: <hea ...

  9. HTML5标签一览

    HTML5标签一览,点击下载 访问密码:1907

随机推荐

  1. 分布式 PostgreSQL - Citus 架构及概念

    节点 Citus 是一种 PostgreSQL 扩展,它允许数据库服务器(称为节点)在"无共享(shared nothing)"架构中相互协调.这些节点形成一个集群,允许 Post ...

  2. 在vue项目中MD5加密的使用方法

    1:安装 npm install --save js-md5 2.引入及使用 方法一:在需要的项目文件中引入 import md5 from 'js-md5'; 使用例子:md5('hello wor ...

  3. 解压jdk报错gzip: stdin: not in gzip format

    0x00 报错截图 0x01 下载方式 下载地址是直接在oracle官网[复制链接地址]获得. 0x02 解决问题 查看一下下载的文件 发现下载下来的是HTML文件. 然后就去oracle官网抓包看了 ...

  4. LeetCode-091-解码方法

    解码方法 题目描述:一条包含字母 A-Z 的消息通过以下映射进行了 编码 : 'A' -> 1 'B' -> 2 ... 'Z' -> 26 要 解码 已编码的消息,所有数字必须基于 ...

  5. 含变量的字符串拼接(string.Format()或$"")

    含变量的字符串拼接,一般不要用 + 来连接字符串,可用以下两种方式: 一.string.Format() 二.$""  (在C#6以上的版本中可用,推荐这种写法) 1 public ...

  6. elasticsearch通用工具类

    这几天写了一个关于es的工具类,主要封装了业务中常用es的常用方法. 本文中使用到的elasticsearch版本6.7,但实际上也支持es7.x以上版本,因为主要是对springboot提供的:El ...

  7. 什么是phpize及其用法

    应用场景在使用php的过程中,我们常常需要去添加一些PHP扩展库.但是重新对php进行编译是比较蛮烦的,所以这时候我们可以使用phpize对php进行添加扩展.并且phpize编译的扩展库可以随时启用 ...

  8. laravel 返回值

    先理解几个概念: StdClass 对象 => 基础的对象 Eloquent 模型对象 (Model 对象) => 和模型相关的类对象 Eloquent 集合 => 可以简单理解为对 ...

  9. 2.7 C++STL list容器详解

    文章目录 2.7.1 引入 2.7.2代码示例 2.7.3代码运行结果 总结 2.7.1 引入 STL list 容器,又称双向链表容器,即该容器的底层是以双向链表的形式实现的.这意味着,list 容 ...

  10. C#/Vsto中CustomTaskPanes和Ribbon的使用方法

    在工作中有一个需求,需要添加工作区选项卡,Excel中CustomTaskPanes面板很适合这样的场景,而非集中处理在Excel的Ribbon面板中,毕竟在大型项目中表现层已经过于复杂了.首先写一个 ...