8 个有用的 HTML5 标签
作为一个 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。
8 个有用的 HTML5 标签的更多相关文章
- HTML5标签的使用和作用
在菜鸟教程中找了一些关于HTML5的知识点,觉得很有用,可以整理一下,以后使用. 这是一个基本的HTML5文档: <!DOCTYPE html><html><head&g ...
- 完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法 HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页 ...
- HTML5标签与HTML4标签的区别示例介绍_html5教程技巧
(1)概念的变化: HTML5专注内容与结构,而不专注的表现 <header> <hgroup>导航相关数据</hgroup> </header> &l ...
- 解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
方式一:Coding JavaScript <!--[if lt IE9]> <script> (function() { var e = "abbr, articl ...
- [js开源组件开发]html5标签audio的样式更改
html5标签audio的样式更改 由于html5的流行,现在移动端大多数的需求都可以使用audio来播放音频,但您可能只是需要很简单的播放/停止效果,但不同的浏览器上的audio样式却不尽人意,所以 ...
- HTML5标签改变
1.新的文档类型声明(DTD): HTML 5的DTD声明为: <!doctype html> <!DOCTYPE html >等也是正确的,因为HTML语法是不区分大小写的. ...
- 是时候全面使用html5标签了
html5,这个词语,不管是业内还是业外,都已经耳熟能详了.因为已经火了这么长的的时间了.但是,真正开始使用的又有多少人呢?只能用呵呵来形容了! html5真的来了 2014年10月28日,历经八年, ...
- 关于HTML5标签不兼容(IE6~8)
HTML5的语义化标签以及属性,可以让开发者非常方便地实现清晰的web页面布局,加上CSS3的效果渲染,快速建立丰富灵活的web页面显得非常简单. 比较常用的HTML5的新标签元素有: <hea ...
- HTML5标签一览
HTML5标签一览,点击下载 访问密码:1907
随机推荐
- 面试中的MySQL主从复制|手撕MySQL|对线面试官
关注微信公众号[程序员白泽],进入白泽的知识分享星球 前言 作为<手撕MySQL>系列的第三篇文章,今天讲解使用bin log实现主从复制的功能.主从复制也是MySQL集群实现高可用.数据 ...
- ubuntu 下的ftp安装及root身份远程配置
第一步:在 Ubuntu 中安装 VSFTPD 服务器 //安装 VSFTPD 二进制包 $ sudo apt-get update $ sudo apt-get install vsftpd //使 ...
- LeetCode-098-验证二叉搜索树
验证二叉搜索树 题目描述:给定一个二叉树,判断其是否是一个有效的二叉搜索树. 假设一个二叉搜索树具有如下特征: 节点的左子树只包含小于当前节点的数. 节点的右子树只包含大于当前节点的数. 所有左子树和 ...
- JZ-002-替换空格
替换空格 题目描述 请实现一个函数,将一个字符串中的每个空格替换成"%20".例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy. ...
- 微信小程序书简易支付
这里结合了上一篇的手机号登录接下来的实现功能 https://www.cnblogs.com/xiaoyantongxue/p/15472915.html 登录后进入课程选择页面 1:数据库填入数据 ...
- React学习小结(一)
一.React的发展 facebook在构建instagram网站的时候遇见两个问题: 1.数据绑定的时候,大量操作真实dom,性能成本太高 2.网站的数据流向太混乱,不好控制 于是facebook起 ...
- JDK 线程池
JDK 线程池 线程池参数 在JDK的4种线程池之前, 先介绍一下线程池的几个参数 corePoolSize 线程池的核心线程数量, maximumPoolSize 线程池的最大线程数量 keepAl ...
- LGP2461题解
引用化学老师的一句话:什么矩阵,没有矩阵! 这种板子题怎么能用矩阵呢. \(O(k^2\log n)\) 能搞定何必需要 \(O(k^3\log n)\) 呢. 首先设 \(F_n(x)=x^n \b ...
- SAS 数值存储方式和精度问题
本文链接:https://www.cnblogs.com/snoopy1866/p/16021137.html 1 数值存储方式 SAS使用8个字节存储数值,使用浮点计数法表示数值. 浮点计数法由4个 ...
- 想让DBA瞬间崩溃,那就让他去做SQL性能优化
摘要:很多大数据计算都是用 SQL 实现的,跑得慢时就要去优化 SQL,但常常碰到让人干瞪眼的情况. 本文分享自华为云社区<做 SQL 性能优化真是让人干瞪眼>,作者: 石臻臻的杂货铺 . ...