HTML（5）常用的格式标签-白红宇

HTML（5）常用的格式标签

阅读量：4598 次

发布时间：2019-06-09

本文共 7798 字，大约阅读时间需要 25 分钟。

一、基本文字格式

1.标题<h></h>

　　HTML定义<h1></h1>到<h6></h6>六个<h>标签，分别用来不同大小字体的标题（Heading）。字体由大到小，<h1>最大，<h6>则最小。　　　　　　　　Heading标签需要注意的是：a.浏览器会自动地在标题的前后添加空行。因为Heading标签属于块级元素，而在默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行（<br/>）。b.标题对整个页面来说很重要,应该将HTML heading 标签只用于标题，而不要仅仅是为了产生粗体或大号的文本而使用标题。因为Heading标签对SEO是很友好的，搜索引擎使用标题为您的网页的结构和内容编制索引，而且用户则以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。应该将 <h1> 用作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。

1    
      2      3         中国一
 4      5         中国二
 6      7         中国三
 8      9         中国四
10     11         中国五
12     13         中国六

　　效果如下图，字体大小由大到小：

2.换行<br/>、不换行<nobr></nobr>和分段<p></p>

　　关于HTML中的换行标签<br/>和分段标签<p></p>的区别是，换行标签<br/>只是回车，<p></p>则是分段。因为<p>标签属于块级元素，它的前后会有比较大的空白（自动添加<br/>），而<br/>标签属于行级元素，它只是简单的换行，前后没有空白。有一个与<br/>相对的标签<nobr></nobr>，它表示不换行，通常用于防止浏览器将程序代码等不需要换行的地方自动换行。

3 这是第一段

4 用到了换行标签

5 请看效果

6 很容易理解

8 这是第二段

10 这是第三段

13 int i =0,j=10;14

3.水平线标签<hr/>

　　<hr /> 标签在 HTML 页面中创建水平线。使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法。<hr/>标签可以设置宽度width和高度height，这两个属性又分别有像素和百分比的表示方式。此外，<hr/>标签还有size（厚度）、color（颜色）和noshade（无阴影）的属性。

1  2  3  4      5  6  7     
     
 8     
      9     
     
10     
     11     
     
12     
     13     
     
14     
     15     
     
16     
     17     
     18     
     
19     
     
20     
     
21     
     
22     
     23     
     
24 25

4.文本格式化标签

1 
      2 
     
      博客园
     居中显示 3 Hello，World！粗体，推荐使用标签。 4 斜了吧斜体。 5 我是一个下划线标签带下划线。 6 强调，斜体 7 ₂下标，如：H₂O 8 ²上标，如：10² 9 10  
      11  
      12  
      13  
      14 字体标签，红色

5.预格式化标签<pre>

　　<pre> 预格式化标签，保持网页的内容原样展示。可以用于某些特殊内容的展示，也可以用于显示计算机编程的源代码（比如博客园的源代码就是通过<pre>标签来显示的）。

pre 标签显示某些特殊的希望原样展示的内容：

  3     我是个好孩子， 4         我喜欢中         啊啊啊啊 5  6        这是一个预格式化标签 7         8    ____ 9   (.   \10     \  |   11      \ |___(\--/)12    __/    (  . . )13   "'._.    '-.O.'     你好，我是一只小猫！ 14        '-.  \ "|\15           '.,,/'.,,16  17 18  (⊙_⊙)？你说什么呢？？？？19

20 21

pre 标签很适合显示计算机代码：

23 for i = 1 to 1024      print i25 next i26

6.<marquee></marquee>标签

　　<marquee></marquee>标签对告诉浏览器移动显示其中的文本和图像。

1     
     
      2         
      3         
      4         
      5         
      
       6         大家好，欢迎大家来到我的主页！......7         
      8

7.其它的格式标签例子。

1  2  3  4  5      6  7  8  
      9  10          BBC
11  
     12   www
13   
     14      
     
      15          
      16              Beyond two or three days ,the world's best forecasts are speculative ,and beyond17              six or seven they are worthless.18          
19          
      
20        
      21          
      The q lable!!!22      
     
23  24  
     25      26        北京市海淀区中关村软件园  sys@qq.com27      
28  
     29      博客园
 
     30      博客园
 
     31 32

二、HTML列表

1   2   3   4       5   6   7     HTML列表:
  8     
     
  9     
 10     
      11     I.无序列表(Unordered List):
 12     1.默认：
 13     
     
       14         
      香蕉
 15         
      苹果
 16         
      橘子
 17     
     
 18     2.用type属性:
 19     
      21     
      24     
     
       25         
      香蕉
 26         
      苹果
 27         
      橘子
 28     
     
 29     
     
       30         
      香蕉
 31         
      苹果
 32         
      橘子
 33     
     
 34     3.属性值的混合使用，起强调作用：
 35     
     
       36         
      香蕉
 37         
      苹果
 38         
      橘子
 39     
     
 40     
      41     II.有序列表(Ordered List)：
 42     1.默认：
 43     
     
       44         
      篮球
 45         
      排球
 46         
      足球
 47     
     
 48     2.使用type属性：
 49     
     
       50         
      篮球
 51         
      排球
 52         
      足球
 53     
     
 54     
     
       55         
      篮球
 56         
      排球
 57         
      足球
 58     
     
 59     3.改变有序列表项的前导编号：
 60     
     
       61         a.
      start属性单独使用：
      
 62         
      
        63             
       篮球
 64             
       排球
 65             
       足球
 66         
      
 67         b.
      vlaue属性单独使用:
      
 68         
      
        69             
       篮球
 70             
       排球
 71             
       足球
 72         
      
 73         c.
      start、value属性的共同使用：
      
 74         
      
        75             
       篮球
 76             
       排球
 77             
       足球
 78         
      
 79     
     
 80     III.嵌套列表(Nested Lists)：
 81     1.无序列表中嵌套无序列表:
 82     
     
       83         
      饮料
 84         
      水果 85             
       
         86                 
        香蕉
 87                 
        苹果
 88                 
        橘子
 89             
       
 90         
 91         
      蔬菜
 92         
      茶叶
 93     
     
 94     2.无序列表中嵌套有序列表:
 95     
     
       96         
      饮料
 97         
      水果 98             
       
         99                 
        香蕉
100                 
        苹果
101                 
        橘子
102             
       
103         
104         
      蔬菜
105         
      茶叶
106     
     
107     3.有序列表中嵌套有序列表：
108     
     
      109         
      饮料
110         
      水果111             
       
        112                 
        香蕉
113                 
        苹果
114                 
        橘子
115             
       
116         
117         
      蔬菜
118         
      茶叶
119     
     
120     4..有序列表中嵌套无序列表：
121     
     
      122         
      饮料
123         
      水果124             
       
        125                 
        香蕉
126                 
        苹果
127                 
        橘子
128             
       
129         
130         
      蔬菜
131         
      茶叶
132     
     
133     5.列表的多级嵌套：
134     
     
      135         
      饮料
136         
      水果137             
       
        138                 
        香蕉
139                 
        苹果140                     
         
          141                         
          产自巴西
142                         
          产自中国
143                     
         
144                 
145                 
        橘子
146             
       
147         
148         
      蔬菜
149         
      茶叶
150     
     
151     
     152     IV.定义列表：
153     1.定义列表：
154     
     165     
     
      166         
      167         
      
       北京
      
168         
      169         
      
       170             中国的政治中心
      
171         
      
       上海
      
172         
      
       173             中国的经济中心
      
174         
      
       深圳
      
175         
      
       176             中国改革开放的前沿城市
      
177     
     
178 179

三、改变文本的外观和含义

　　很多标签都可以用来改变文本的外观，并为文本关联其隐藏的含义。总地来说，这些标签可以分成两类：基于内容的样式（content-based style）和物理样式（physical style）。

1.基于内容的样式（content-based style）

　　基于内容的样式标签会告诉浏览器它所包含的文本具有特定的含义、上下文或者用法。然后浏览器就会把与该含义、上下文或者用法一致的格式应用在文本上。注意，基于内容的标签赋予含义，而不是格式化。因此，它们对于自动处理来说非常重要；计算机并不关心文档的外观如何。

　　因为字体样式是通过语义线索来指定的，因此浏览器可以为用户选择一种合适的显示样式。由于不同地点的样式各种各样，所以使用基于内容的样式可以帮助你确保自己的文档对广大范围的读者来说都是有意义的。这一点在专门供那些盲人和残疾人所使用的浏览器上显得尤其重要，因为他们的显示选项可能和我们传统的文本根本不同，或者在某方面具有非常大的局限性。

　　当前的 HTML 和 XHTML 标准并没有为每一个基于内容的标签都定义一种格式；它们仅仅规定必须用与文档中普通文本不同的方式来显示基于内容的样式。标准甚至没有要求这些基于内容的样式彼此之间都要用不同的方式显示。在实际应用中，你可能会发现很多这样的标签和传统的印刷有着非常明显的关系，它们有着相似的含义和显示样式，而且在多数浏览器中都以相同的样式和字体来显示。

　　使用 HTML/XHTML 基于内容的样式标签时要遵从一些规则，因为仅仅是简单地想想文本该如何显示，而不必知道这些文本的含义是什么，是十分容易的。一旦你开始使用基于内容的样式之后，文档将会更加一致，而且可以更好地帮助执行自动搜索和内容编辑。这些标签是：

<abbr>

<cite>

<code>

<dfn>

<em>

<kbd>

<samp>

<var>

2.物理样式（physical style）

　　在讨论基于内容的样式标签时，我们经常用到“意图”这个词。这是因为由标签传达的含义比浏览器显示文本的方式更为重要。然而，在某些情况下，可能是出于合法性或者版权等方面的原因的考虑，你希望文本以某种特殊的方式来显示（例如斜体或加粗）。在这种情况下，就可以对文本使用物理样式。

　　虽然其他文字处理系统的趋势是精确地控制样式和外观，但是在使用 HTML 或 XHTML 时，除非极少情况下，都应该避免使用物理标签。应当尽可能地向浏览器提供上下文信息，并使用基于内容的样式。尽管现在浏览器不过是以斜体或者粗体字来显示这些文本，但是将来的浏览器和各种文档生成工具可能会以非常有创建的方式来利用这些基于内容的样式。

　　当前的 HTML/XHTML 标准一共提供了 9 种物理样式，包括粗体（bold）、斜体（italic）、等宽（monospaced）、下划线（underlined）、删除线（strikethrough）、放大（larger）、缩小（smaller）、上标（superscripted）和下标（subscripted）文本。这些标签是：

<b>

<big>

<i>

<s>

<small>

<sub>

<sup>

<tt>

注：改变文本的外观和含义摘自：

转载于:https://www.cnblogs.com/sunyunh/archive/2012/08/02/2620821.html

你可能感兴趣的文章

关于hadoop集群的简单性能测试——mapreduce性能，hive性能，并行计算分析（原创）...