|
|
|
|
移动端

1.3.3 格式标签

《H5和WebGL 3D开发实战详解》第1章HTML 5开发基础—进入WebGL 世界的第一道坎,本书是介绍WebGL技术的一本书,但是在进入WebGL世界之前我们需要迈过HTML门槛,因为这是通向WebGL的必经通道。如果连最基本的HTML开发也做不了,那么开发WebGL就是一件遥不可及的事情。本节为大家介绍格式标签。

作者:吴亚峰/于复兴/索依娜来源:人民邮电出版社|2017-10-31 17:53

【新品产上线啦】51CTO播客,随时随地,碎片化学习

1.3.3 格式标签
 
对基础标签有了基本认识后,那么剩下的标签在用法上与其并无太多差异,只是在功能上有所不同。下面我们来看一下格式标签及其作用,如表1-3所示,表中列出了格式标签都有哪些并给出了对它们的描述。
 
表1-3格式标签及作用
 

 
上面列出的这些格式标签在平时用到得比较多,所以会用一个小案例对每个标签的用法进行介绍。但是这些案例仅仅是向读者展示了这些标签最基本的用法,这里还没有讲到属性,所以只得介绍最简单的部分,大家现在只需将每个标签的基本作用记住即可。
 
接下来我们先来看一下格式标签里一些比较简单的标签的用法,由于每个标签的例子都比较简短,在主体部分每个都是几行或者一两行代码,所以下面的案例是将几个标签合在一起写的一个简单案例,读者在阅读时注意区分即可。
 
代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_2.html。
 
  1. 1 <!DOCTYPE HTML> 
  2. <!--本案例演示了格式标签的一部分标签使用的小案例,剩下一部分会在下面给出--> 
  3. <html><body> 
  4. 4 这里演示的为缩写示例:The <abbr title="People's Republic of China">PRC</abbr> 
  5. 5 was founded in 1949. 
  6. <p>这里演示加粗文本示例 <b>此处加粗</b>.</p> 
  7. 7 <!--根据HTML5 规范,粗体为最后的选择,没有其他标签适用时才会 
  8. 8 选择,应先从标题、被强调文本、标记文本等标签中选择--> 
  9. <ul> 
  10. 10 <!--此处为bdi 标签,设置一段文本使其脱离父元素的文本方向设置--> 
  11. 11 <li>User <bdi>hrefs</bdi>: 60 points</li> 
  12. 12 <li>User <bdi>jdoe</bdi>: 80 points</li> 
  13. 13 <li>User <bdi>tom</bdi>: 90 points</li> 
  14. 14 </ul> 
  15. 15 <p>接下来示例的为<bdo>标签,其中可以通过定义dir 属性来覆盖默认文本方向</p> 
  16. 16 <bdo dir="rtl"><!--dir 的值有rtl 右向左与ltr 左向右两种值--> 
  17. 17 现在展示的是从右向左的文本方向 
  18. 18 </bdo><br/> 
  19. 19 <!--下面几个标签一般还会搭配着id、class 等一些属性使用,这些属性在下面会有介绍--> 
  20. 20 <big>这里演示<big>标签示例</big><br/> 
  21. 21 <em>这里演示<em>标签示例</em><br/> 
  22. 22 <i>这里演示倾斜标签<i>示例</i><br/> 
  23. 23 <small>这里演示<small>标签</small><br/> 
  24. 24 此处将演示下标标签用法 
  25. 25 <sub>subscript</sub><br/> 
  26. 26 此处将演示上标标签用法 
  27. 27 <sup>superscript</sup><br/> 
  28. 28 </body></html> 
 
第4、5行为缩写标签的用法示例,在网页上将鼠标悬停到缩写部分会显示出其全称。
 
第6~8行为加粗文本示例,一般在用这个标签先我们应该先将6个标题标签、强调标签、标记标签与<strong>标签中选择,以上标签不适用的情况下最后才会使用<b>标签。
 
第10~14行为<bdi>标签示例,其中的<ul>与<li>标签是无序列表与定义列表项目标签,我们会在后面进行介绍。在发布用户评论或其他我们无法完全控制的内容时,该标签很有用。
 
第15~18行为设置文本方向的标签,其中的dir属性与<bdi>标签中的dir属性一样,都有ltr与rtl两种值,但<bdi>标签的默认值为auto,该标签没有此值。
 
第19~28行示例的几个标签用法与之前介绍的类似,一般使用它们的时候都会搭配着一些属性,这样才会有多样的效果,由于还没有讲到属性,所以这里只是提了一下用法。
 
看完了一些标签的使用方法,我们还需要看一下效果图,毕竟用文字表达不如用图像表达得直观,更容易使人接受与记住。图1-5所示为上述程序的效果图。
 
 

 
对于上述标签,从外观上就能够区分清楚是什么标签,也便于读者的理解记忆。下面我们来看看另外一些格式标签的效果图与应用,本部分除了介绍标签之外,我们也介绍了一些标签相应的属性,图1-6所示为表1-3中剩余的一些标签的使用效果图。
 
对于图1-5与图1-6中所示文本样式,如果只是想要样式,可以用CSS做出更好的与更多的效果,在下面的小节中我们也会介绍这方面的知识。接下来我们来看一下Sample1_3案例的开发过程,本案例中使用的也是格式类中的一部分标签。
 

代码位置:见随书中源代码/第1章目录下的HTML5/Sample1_3.html。

 
  1. <html><body> 
  2. 2 我们来看一下引用、长引用、短引用标签的示例: 
  3. <blockquote> 
  4. 4 现在示例为一个长引用示例,之间的所有文本都会从常规文本中分离出来,经常会在左、右两边<br/> 
  5. 5 进行缩进(增加外边距),而且有时会使用斜体。也就是说,长引用拥有它们自己的空间。 
  6. </blockquote> 
  7. 7 <!--<cite> 标签通常表示它所包含的文本对某个参考文献的引用,把指向其他文档的引用分离出来, 
  8. 8 尤其是分离那些传统媒体中的文档,如书籍、期刊,等等。如果引用的这些文档有联机版本, 
  9. 9 还应该把引用包括在一个 <a> 标签中,从而把一个超链接指向该联机版本。--> 
  10. 10 <cite> 
  11. 11 现在进行引用示例讲解,引用的文本将以斜体显示。它的一个隐藏功能是 
  12. 12 它可以使你或者其他人从文档中自动摘录参考书目 
  13. 13 </cite><br/> 
  14. 14 <!--长引用与短引用可以用cite 属性定义出引用的来源--> 
  15. 15 <q>现在为一个短引用示例,短引用中插入了双引号引导。</q> 
  16. 16 <!--短引用与长引用是一样的,它们是在显示上有所不同。如果需要从文本中 
  17. 17 分离出比较长的内容用长引用就好。--> 
  18. 18 <p>下面介绍几种显示计算机代码的标签</p><br/> 
  19. 19 <code>此处示例为计算机代码标签</code><br /> 
  20. 20 <!—熟悉编程的读者都知道计算机代码与文本的格式是不同的,这样方便了读者寻找计算机代码片段--> 
  21. 21 <kbd>此处为从键盘上键入文本的标签示例</kbd><br /> 
  22. 22 <!--该标签用来表示文本是从键盘上键入的。浏览器通常用等宽字体来显示该标签中包含的文本。--> 
  23. 23 <tt>这里演示的宽体字标签示例</tt><br /> 
  24. 24 <samp>这里为<samp>标签示例</samp><br /> 
  25. 25 <!--该标签并不经常使用。只有在要从正常的上下文中将某些短字符序列提取出来, 
  26. 26 对它们加以强调的极少情况下, 
  27. 27 才使用这个标签。--> 
  28. 28 <var>此处示例定义变量标签</var><br /> 
  29. 29 <!--本标签是计算机文档中应用的另一个小窍门,这个标签经常与 <code> 和 <pre> 标签一起使用, 
  30. 30 用来显示计算机编程代码范例及类似方面的特定元素。--> 
  31. 31 <dfn>现在示例的是可标记那些对特殊术语或短语的定义标签</dfn></br> 
  32. 32 <!--尽量少用本标签为妙。作为一种通用样式,尤其在技术文档中,应该将它们与普通文本分开,这样 
  33. 33 读者可以更好地理解文章当前的主题,而从那以后就不要再对这个术语进行任何标记了。--> 
  34. 34 <p>接下来我们再来介绍一下预定义格式文本</p> 
  35. 35 <pre><!--该标签很适合显示计算机代码,所以本标签经常与<code>标签一起使用。 
  36. 36 其中的width 属性定义了每行最大字符数,一般为40、80、132。--> 
  37. 37 这是预格式文本。 
  38. 38 它保留了 空格 
  39. 39 和换行。 
  40. 40 </pre> 
  41. 41 <!--需要注意的是制表符(tab)在 <pre> 标签定义的块当中可以起到应有的作用,每个制表符占据 
  42. 42 8 个字符的位置。但是我们不推荐使用它,因为在不同的浏览器中,Tab 的实现各不相同。在用 
  43. 43 <pre> 标签格式化的文档段中使用空格,可以确保文本处于正确的水平位置。--> 
  44. 44 <p>下面显示的标签定义已知范围或分数值内的标量测量:</p> 
  45. 45 <meter value="3" min="0" max="10">3/10</meter><br> 
  46. 46 <meter value="0.6">60%</meter><br/> 
  47. 47 <!--该标签一般用于查询磁盘用量、结果的相关性,不应用于指示进度(在进度条中)。标记进度条, 
  48. 48 应使用 <progress> 标签。Internet Explorer 不支持<meter>标签。--> 
  49. 49 接下来我们介绍进度条标签progress:<progress value="22" max="100"> 
  50. 50 </progress><!--该标签中的max 属性表示任务一共需要完成多少工作,value 表示已经完成了多少任 
  51. 务。--> 
  52. 51 <!--Internet Explorer 10, Firefox, Opera, Chrome 以及Safari 6 支持<progress>标签。 
  53. --> 
  54. 52 </body></html> 
 
 
 
第1~17行为引用与长短引用的示例,本质上长引用与短引用是一样的,它们只是在显示形式上有所不同。而引用标签中的内容一般以斜体显示,如果引用的文档有联机版本,还应该有一个链接标签<a>,从而把超链接指向该文本。
 
第18~30行为一些用于显示计算机代码的标签示例。有时我们在网上想找一些代码时会发现如果代码与文本是一种格式,那么看起来是相当麻烦的,并且代码的格式一般来说是与其他文本有所不同的,这几个标签的在表现形式上能够区分出来。
 
第34~43行为<pre>标签示例,该标签保留了空格与换行,所以经常与<code>标签一起使用。但是需要注意的是在定义计算机源代码,比如HTML源代码时,请使用符号实体来表示特殊字符,比如“&lt;”代表“<”,“&gt;”代表“>”,“&amp;”代表“&”。
 
第44~52行为<meter>与<progress>标签示例,这两种标签显示的都是进度条类型,但是它们还是有一些区别的。需要标记进度条时应该使用<progress>标签,<meter>中有一些属性我们将在下面介绍。
 
上面介绍<pre>标签时我们说到了符号实体,在HTML中不能使用小于号(<)和大于号(>),这是因为浏览器会误认为它们是标签。如果希望正确地显示预留字符,我们必须在HTML源代码中使用符号实体(Character Entities)。表1-4列出了部分符号实体。
 
表1-4符号实体及对应编号
 

需要注意的是,实体名称对大小写敏感,HTML中的常用字符实体是不间断空格(&nbsp;)。浏览器总是会截短HTML页面中的空格。如果在文本中写10个空格,在显示该页面之前,浏览器会删除它们中的9个。如需在页面中增加空格的数量,需要使用“&nbsp;”符号实体。

除了符号实体,我们还在上个程序中的<meter>标签中看到了几种属性,但是当时并没有介绍,在接下来的表1-5中我们将看到该标签中的属性介绍。

表1-5<meter>标签属性列表

 

需要注意的是,在form属性的值id中规定此值必须为同一文档中<form>元素的属性值。high属性必须小于max属性值,且必须大于low和min属性值。low属性必须大于min属性值,且必须小于high和max属性值。
 
 
喜欢的朋友可以添加我们的微信账号:

51CTO读书频道二维码


51CTO读书频道活动讨论群:365934973
【责任编辑:book TEL:(010)68476606】

回书目   上一节   下一节
点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

C#和.NET核心技术

本书重点讲解如何用实用的代码来解决具体的实际问题。本书的内容覆盖面很广,从新的C#范型到Web服务,从反射到安全等都有涉及。系统地介绍...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊