10个你应该了解的极少用的HTML标签

本文介绍了几个不常使用的HTML标签及其应用场景,如<cite>用于引用文献,<optgroup>用于组织选项,<acronym>提供释义,<address>标记地址,<ins>和<del>显示修订等。

1. <cite>

我们大多数人都知道 <blockquote>标签,但是你是否知道它的兄弟 <cite>呢?<cite> 允许你定义元素内的引用。典型的情况就是浏览器会将<cite>标签的内容选染成斜体,但是如果你设置了CSS样式的话,那么还是会以CSS 样式为准的。

<cite>对于书目和其他网站索引是非常有用的。请看下面这个例子:

David Allen’s breakthrough organization book Getting Things Done has taken the web by storm.

2. <optgroup>

<optgroup>对于在选择菜单下的选择组中添加小定义是非常有用的。比如你想按照时间分类定义一组电影列表,那么你可以这样做:

1
<label
 for
=
"showtimes"
>
Showtimes</
label
>
2
<select
 id
=
"showtimes"
 name
=
"showtimes"
>
 <optgroup
 label
=
"1PM"
></
optgroup
>
 <option
 value
=
"titanic"
>
Twister</
option
>
 <option
 value
=
"nd"
>
Napoleon Dynamite</
option
>
 <option
 value
=
"wab"
>
What About Bob?</
option
>
 <optgroup
 label
=
"2PM"
></
optgroup
>
 <option
 value
=
"bkrw"
>
Be Kind Rewind</
option
>
 <option
 value
=
"stf"
>
Stranger Than Fiction</
option
>
 </
select
>

效果预览:

Showtimes

TwisterNapoleon DynamiteWhat About Bob?Be Kind RewindStranger Than Fiction

这样做允许选择列表使用视觉效果将电影清单分开。

3. <acronym>

<acronym>标签可以用来定义或者进一步解释一组文字。当你将鼠标悬浮在使用了<acronym>标签的文字上的时候,将会在其下方出现一个带有文字的方框。看看下面的例子:

1
The microblogging site <acronym
 title
=
"Founded in 2006"
>
 Twitter</
acronym
>
 has recently struggled with downtimes.

效果预览:

SEO is full of trickery and magic.

4. <address>

<address>是一个非常不起眼的小标签,但是它并非没有可用之地。顾名思义,<address>允许你对HTML中的地址添加语义代码。这个代码可以将标记内的文字斜体化。当然,你也可以通过CSS改变样式。

1
<address
>
Glen Stansberry
2
1234 Web Dev Lane
3
Anywhere, USA
4
</
address
>

5. <ins>和<del>

如果你想使用标记来显示编辑修订效果,<ins>和<del>正式你所要的。正如名字所暗示的,<ins>使用下划线突出显示添加的,<del>使用删除线显示被去除的。

1
John <del
>
likes</
del
>
 <ins
>
LOVES</
ins
>
 his new iPod.

效果预览:

John likes LOVES his new iPod.

6. <label>

当写代码的时候表单元素很容易被忽略。而其中一个最容易被忽略的就是<label>标签。<label>标签不仅可以快速 注解你的标签文字,而且可以使用”for”语句定义哪个元素被赋予到了该标签。这些<label>标签不仅可以用来定义样式,而且可以让你为 关联元素设置标题点击。

1
<label
 for
=
"username"
>
Username</
label
>
2
<input
 id
=
"username"
 type
=
"text"
>

7. <fieldset>

<fieldset>是一个很少用的属性,他可以添加到你的表单上为表单元素创建一个逻辑组。一旦应用 了<fieldset>标签,所有表单元素将会被一个方框缩包围。你可以在<fieldset>标签内使 用<label>来定义该组的标题。

1
<form
><fieldset
>
2
<legend
>
Are You Smarter Than a 5th Grader?</
legend
>
3
Yes <input
 name
=
"yes"
 type
=
"radio"
 value
=
"yes"
>
4
 
5
No <input
 name
=
"no"
 type
=
"radio"
 value
=
"no"
>
6
</
fieldset
>
7
</
form
>

效果预览:

Are You Smarter Than a 5th Grader? Yes 
No 

8. <abbr>

<abbr>和<acronym>是同类标签,不过<abbr>仅仅用来定义缩写单词。 和<acronym>一样,当你在缩写字符元素上使用鼠标悬浮的时候,该缩写的完整定义将会出现在下方。<abbr>极少被使 用,但是对于多数屏幕阅读者,语法检查者和搜索引擎来说非常有用处。

1
<abbr
 title
=
"Sergeant"
>
Sgt.</
abbr
>
 Pepper's Lonely Hearts Club is my favorite album.

效果预览:

Sgt. Pepper’s Lonely Hearts Club is my favorite album.

9. rel

Rel可能是一款超级有用的属性,任何HTML元素都可以应用它。它对于读取那些没有被特别定义的额外的变量非常有帮助。当你在HTML中使用Javascript的时候非常有用。如果你有一个链接,并想进行行内编辑,你可以这样做:

1
<a
 rel
=
"clickable"
 href
=
"page.html"
>
This link is editable</
a
>

Javascript可以寻找带有”clickable”属性的链接,然后应用Ajax技术使该链接可以被进行行内编辑。而这仅仅是rel属性众多技术中的一个。

10. <wbr>

<wbr>是一个非常偏僻的标签。说实话,我怀疑你们是否有人接触过它。从本质上讲,这个标签允许你在指定的地方进行切断换行。不过这个标签非常独特,它需要依赖浏览器的分辨能力。这个标签对于想要避免出现垂直滚动条的情况非常有用。

如果你想使用这个效果,你可以试试看这个标签。不过需要注意的是,它并不被所有浏览器支持,具体的技术指标情参看这篇文章

1
<span
>
How do you say Supercalifragilistic<wbr>
expialidocious?</
span
>
(1)普通用户端(全平台) 音乐播放核心体验: 个性化首页:基于 “听歌历史 + 收藏偏好” 展示 “推荐歌单(每日 30 首)、新歌速递、相似曲风推荐”,支持按 “场景(通勤 / 学习 / 运动)” 切换推荐维度。 播放页功能:支持 “无损音质切换、倍速播放(0.5x-2.0x)、定时关闭、歌词逐句滚动”,提供 “沉浸式全屏模式”(隐藏冗余控件,突出歌词与专辑封面)。 多端同步:自动同步 “播放进度、收藏列表、歌单” 至所有登录设备(如手机暂停后,电脑端打开可继续播放)。 音乐发现与管理: 智能搜索:支持 “歌曲名 / 歌手 / 歌词片段” 搜索,提供 “模糊匹配(如输入‘晴天’联想‘周杰伦 - 晴天’)、热门搜索词推荐”,结果按 “热度 / 匹配度” 排序。 歌单管理:创建 “公开 / 私有 / 加密” 歌单,支持 “批量添加歌曲、拖拽排序、一键分享到社交平台”,系统自动生成 “歌单封面(基于歌曲风格配色)”。 音乐分类浏览:按 “曲风(流行 / 摇滚 / 古典)、语言(国语 / 英语 / 日语)、年代(80 后经典 / 2023 新歌)” 分层浏览,每个分类页展示 “TOP50 榜单”。 社交互动功能: 动态广场:查看 “关注的用户 / 音乐人发布的动态(如‘分享新歌感受’)、好友正在听的歌曲”,支持 “点赞 / 评论 / 转发”,可直接点击动态中的歌曲播放。 听歌排行:个人页展示 “本周听歌 TOP10、累计听歌时长”,平台定期生成 “全球 / 好友榜”(如 “好友中你本周听歌时长排名第 3”)。 音乐圈:加入 “特定曲风圈子(如‘古典音乐爱好者’)”,参与 “话题讨论(如‘你心中最经典的钢琴曲’)、线上歌单共创”。 (2)音乐人端(创作者中心) 作品管理: 音乐上传:支持 “无损音频(FLAC/WAV)+ 歌词文件(LRC)+ 专辑封面” 上传,填写 “歌曲信息
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值