务必了解的10个不常见HTML标识

2021-01-20 16:29 jianzhan
译自:TutsPlus 

       网页页面开发设计人员经常期待可以掌握并把握多种多样語言,結果是,学习培训1门語言的全部內容是繁杂的,可是却很非常容易发现你并沒有彻底运用那些较为独特却很有效的标识。 

       悲剧的是大家到如今都还没涉足的那些较为不知道名的HTML标识全部发展潜力。但它始终不容易太晚再次进到行业,并刚开始撰写编码来挖掘这些未开发设计的标识的动能。 

       这里是10个未被充足运用或被误会的HTML标识。也许它们不太广为流传,可是在特殊状况下她们却十分有效。

1. <cite> 
       貌似每一个人都较为熟习<blockquote> 标识,可是你可了解<blockquote>的小弟弟<cite>?<cite> 容许你界定元素内的文本做为1种参照。1般,访问器会用斜体来显示信息<cite> 标识内的文本,可是这能够用1点CSS来更改。

事例:
<p>David Allen的提升性机构性的书籍<em><cite>进行你的工作中</cite></em>给忘了带来了1场飓风。</p>

2、<optgroup> 

       <optgroup>标识是界定select标识中的选项排序的1种很好的方式。例如,你必须准时间来排序电影目录,那末便可以这样做:
<label for="showtimes">上映時间</label>
<select id="showtimes" name="showtimes"> <optgroup label="中午1点"></optgroup> <option value="titanic">泰坦尼克号</option> <option value="nd">平民窟的百万富豪</option> <option value="wab">怪物史瑞克</option> <optgroup label="中午两点"></optgroup> <option value="bkrw">狮子王</option> <option value="stf">全民超人</option> </select>

3. <acronym> 
       <acronym> 是1种界定或更多解释1组文本的方式。当你用电脑鼠标放到应用<acronym>标识的文本时,1个显示信息title标识的內容的框框可能出現在下边。例如:
新浪微博客网站<acronym title="Founded in 2006"> Twitter</acronym> 近期经常服务器宕机。

4. <address> 
       <address> 标识是1个十分不起眼的小标识,可是这其实不代表着它沒有用。说白了<address> 容许你在HTML中词义化标识。这个精巧的标识将默认设置斜体显示信息标识内的內容,自然,应用款式能够很非常容易的更改默认设置的款式。
<address>Glen Stansberry
1234 Web Dev Lane
Anywhere, USA
</address>

5. <ins> 和<del> 
       假如你想应用标识来显示信息编写版本号,<ins> 和<del> 恰好合适。说白了,<ins> 用下划线高亮度显示信息加上进来的內容,而<del> 用删掉线显示信息被移除的信息内容。
John <del>likes</del> <ins>LOVES</ins> his new iPod.

6. <label> 
       貌似表模块素最非常容易忘记什么时候标识文字。针对表模块素,最常忘掉的便是<label> 标识。不仅是1个方便快捷的标识文字的方法,<label> 标识还能传送1个”for” 特性来特定哪一个元素可能被关系。<label> 不但易于用款式来操纵,还容许你让题目可点一下。
<label for="username">客户名</label>
<input id="username" type="text" />

7. <fieldset> 
       Fieldset是1个精巧的标识,你能够用来为你的表模块素加上逻辑性排序。<fieldset>标识就会在其內部的元素周边画1个框。此外1点便是能够在fieldset里边加上<label> 标识来界定排序的题目。
<form><fieldset>
<legend>你比5年龄学员聪慧吗?</legend>
自然<input name="yes" type="radio" value="yes" />

不知道道<input name="no" type="radio" value="no" />
</fieldset>
</form>

8. <abbr> 

       <abbr> 标识颇相近于<acronym> 标识,不一样的是<abbr> 标识只用于界定缩写单词。就像<acronym>1样,你能够为这个标识界定1个title特性。当客户将电脑鼠标放到缩写文本上面时,所有內容就会在下面显示信息。<abbr> 标识非常少用,可是针对显示屏阅读文章者、拼写查验者和检索模块是是非非常有效的。
<abbr title="脑残">NC</abbr> 是1个不太文明行为的术语。

9. rel 
       Rel 能够是1个极度有效的 特性,任何HTML元素都可以以运用1个rel特性。它有助于传送沒有此外特定的附加主要参数。这针对在HTML中应用JavaScript的情况下是是非非常有效的。假如你有1个要想内行内编写的连接,你能够加上:
<a rel="clickable" href="page.html">这个连接可编写。</a>

       Javascript 会找寻带有rel特性”clickable”的a连接,并运用1些Ajax并容许它内行内被编写。这只是你可使用rel特性的诸多技术性中的1种用法,由于它的发展潜力是无止境的。感兴趣爱好的盆友能够深层次科学研究1下W3C有关Rel的详细介绍。

10. <wbr> 
       <wbr>标识是1个无法坚信的不知名的标识。坦率的讲,我也很怀疑你们会触碰到这个标识, 由于它基本上几乎沒有用到。(确实,在我写这篇文章内容以前我基本上沒有见到过这个标识)。客观事实上,这个标识算是1个软断行,容许你在某1行内特定1个断行点,说明在该点处能够断行,可是并不是1定会断行,仅仅是在有必须断行的情况下才会断行。假如你想防止出現水平翻转条,那末应用这个标识是很棒的。

示例:
<div style="width:200px;border:1px solid #00f;">
NoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbrNoWbr<br />
HavaWbr<wbr>HavaWbr<wbr>HavaWbrHavaWbrHavaWbrHavaWbrHavaWbr<wbr>HavaWbr
</div>

       假如你要想完成同样的实际效果而不应用<wbr> 标识,你能够试1下&#8203;或&shy;。听说这3个标识都未被全部访问器彻底适用。