[HTML/HTML5]4 使用文本

4.1  组织文本

　　在已经采用结构化方式将页面划分为多个关键内容区域（content area）并添加相应的标题之后，就可以进一步对这些内容区域中的文本进行组织。

4.1.1  段落

　　p元素的具体功能是作为段落的一个容器。因此，请在段落的开始处使用P元素的开始标记<p>，在段落的结尾使用结束标记</p>。

 <div class="nurseryRhyme">
 <p>Jack and Jill went up a hill</p>
 <p>To fetch a pail of water</p>
 <p>Jack fell down and broke hie croen</p>
 <p>and Jill came tumbling after</p>
 </div>

　　在默认情况下p标记会在段落前或段落后各强制产生一个空行，但它并不会自动地对文本进行缩进。

　　在HTML中没有专门表示缩进的标记，要缩进一个段落的第一行，可以在样式表中使用text-indent属性。

 <p style="text-indent:25px">This is the first sentence in my paragraph</p>

　　上面这个例子是内联样式表，它仅能影响这一个段落，可以把相同的声明添加到一个内部样式表中或一个外部样式表中，从而影响一个页面或整个网站中的所有段落。例如在样式表中添加如下声明：

 normalChapter p{text-indent:25px;}  /* 通过在normalChapter选择器之后放入p标记，告诉浏览器仅对页面上normalChapter部分中的那些段落才进行缩进 */

　　相关的HTML代码如下：

 <section class="normalChapter">
 <p>This paragraph's first line will be indented</p>
 </section>

4.1.2  换行符

　　在HTML页面中，可以使用br标记来添加换行符。br标记会导致浏览器在该行上停止输出文本，并换到页面上的下一行继续输出。

 <p>
 Jack and Jill went up a hill<br>
 To fetch a pail of water<br>
 Jack fell down and broke hie croen<br>
 and Jill came tumbling after<br>
 </p>

　　在页面代码中，按Enter或Return键就可以在浏览器呈现的页面中产生换行符，只有唯一一种情形，就是使用了pre标记。

　　pre是preformat（预格式化）的简写，pre标记将完全按照输入的文本格式在浏览器中将其呈现出来。

　　为什么不使用pre标记来定义页面上的一切呢？主要有以下两个原因：

• pre标记并不保证按照设想的方式输出。即使在pre标记中可以使用table键来格式化文本，但是不同的浏览器可能会将一个table键解释为不同数量的空格字符，要么比文本编辑器的空格多，要么少。这可能会导致创建的表格不能正确呈现。
• pre标记通常以等宽字体来显示文本，如Courier字体，这使文本看起来有种类似于打字机打印的效果。虽然这可能适合应用于程序设计语言代码的例子，但是整个网站看起来就不那么美观了。

　　即便如此，对于显示代码示例，甚至创建字符形式的图标，pre标记还是非常有用：

 <pre>
 This text will display exactly as i type it.Watch this

           x   |   x   |   o
         --------------------
           x   |   x   |
         --------------------
           o   |        |  x 

 </pre>

4.1.3  引用块

　　blockquote元素用于分隔从其它源引用的内容。默认情况下，该元素将同时对整个引用文本的左右两边都进行缩进，另外还会在引用文本之前和之后分别添加一个空行。缩进的准确数量将由浏览器来决定，因此对于不同的浏览器，引用文本左右两边的缩进会有所不同。　　

 <p>Hello,World!
 <blockquote>
 Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!
 </blockquote>
 </p>

4.1.4  Box属性

　　Web页面中的每一个元素都包含在一个盒（box）模型之中，或者至少从代码角度将其视为一种盒模型。因此，通过调整框的维度就可以格式化页面上的内容，或者指定该内容与浏览器的间距应该是多少。

　　现在HTML5/CSS3允许我们控制浏览器如何解释盒模型，即首先使用box-sizing属性精确地指定应该使用哪种解释盒模型的方法。

• box-sizing：content-box（default）；padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + padding + border )。此属性表现为标准模式下的盒模型。
• box-sizing：border-box；padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width )。此属性表现为怪异模式下的盒模型。

　　（1）高度和宽度（height and width）

　　在指定使用哪一种box-sizing属性后，可能还想确定该盒模型的高度和宽度，最常用的度量单位是px（像素），另一种就是%（占容器框模型的百分比）。如果想指定nav框应该占据页面的整个宽度，但只占页面高度的20%，应该使用下面代码：

 nav{
   box-sizing:border-box;
   width:100%;
   height:20%;
 }

　　（2）内边距（padding）

　　在样式表中，可以使用padding属性在内容周围设置一个空白的缓冲区域（可以分别设置一边、两边、三边或者四边），在下面的例子中对blockquote标记设置样式：

 p{
   box-sizing:border-box;
   padding-top:25px;
   padding-right:15px;
   padding-bottom:20px;
   padding-left:35px;
 }

　　如果四条边上都使用相同的内边距值，可以使用快捷方式简化代码：

 p{padding:25px;}

　　如果各条边的内边距值不一样，一种更为快捷的编码方式为：

 p{padding:25px 15px 20px 35px;}  /* 从上开始，顺时针 */

　　（3）外边距（margin）

　　margin属性影响框边界外部的缓冲空间，因此不会从内容框的总尺寸长减去外边距值。与padding属性一样，可以分别定义盒模型一边、两边、三边或者四边的外边距值：

 p{
   box-sizing:border-box;
   margin-top:25px;
   margin-right:15px;
   margin-bottom:25px;
   margin-left:15px;
 }

　　如果四条边上都使用相同的外边距值，可以使用快捷方式简化代码：

 p{margin:25px;}

　　如果各条边的外边距值不一样，一种更为快捷的编码方式为：

 p{margin:25px 15px 20px 35px;}  /* 从上开始，顺时针 */

　　（4）边框（border）

　　盒模型既可以包含水平边框（border），也可以包含垂直边框。可以使用边框来包围所有类型的页面元素——比如：图片或文本段落。例如：

 <p style="border-bottom-width:1px; border-style:solid; border-color:black">

　　定义边框宽度（可以使用长度单位和关键字thin、medium或thick）：

 p{
   border-top-width:thin;
   border-right-width:6px;
   border-bottom-width:thick;
   border-left-width:4px;
 }

　　如果四条边框宽度相等，可以使用快捷方式简化代码：

 p{border-widtn:medium;}

　　定义边框样式：

 p{border-style:solid;}

　　定义边框颜色：

 p{border-color:red;}

　　边框样式的快捷方式：

 <p style="border:1px solid red;">

4.1.5  对齐

　　样式表属性text-align允许采用下列任意方式，在页面上重新对齐文本：

• left（左对齐）
• right（右对齐）
• center（居中对齐）
• justify（两端对齐）

　　例如：

 #aboutMe{text-align:justfy;}

　　相应的HTML代码：

 <section id="aboutMe">
     <p>Paragraph 1</p>
     <p>Paragraph 2</p>
     <p>Paragraph 3</p>
 </section>

　　在样式表中还可以使用vertical-align属性在垂直方向上对齐文本。

4.2  标记文本

　　文本级语义定义在页面上如何使用受语义影响的文本，而不是定义如何显示这些文本。

　　例如，如果你正在编写本段落中第一个句子的HTML代码，就应该使用dfn元素来告诉浏览器应该将短语“text-level semantics”作为一个已定义的术语突出显示。

 <!DOCTYPE html>
 <html>
 <head>
     <title>test</title>
 </head>
 <body>
     <p>
         <dfn>Text-level semantics</dfn>define how the affected text will be used on the page,not how it will be displayed.
     </p>
 </body>
 </html>

　　这里着重介绍一下<strong>、<b>、<em>和<i>。

　　虽然<strong>和<b>的效果都是对文本进行加粗，<em>和<i>的效果都是对文本进行倾斜，但是两者还是有所区别。

　　<b>和<i>属于实体标记（物理标记），只是改变文本的样式，<b>中的b是bold粗体的缩写，<i>中的i是italic斜体的缩写。

　　<strong>和<em>属于逻辑标记，是带有语义的标记，表示对显示的内容进行强调作用，<strong>比<em>的强调语气更强。

　　W3C规范更倾向于使用带有语义的标记，所以通常<strong>代替<b>来使用，<em>代替<i>来使用。

4.3  定义文本样式

4.3.1  字体名称

　　在样式表中，使用font-family属性来指定字体的名称。实际上，可以使用font-family属性来指定你所能想到的任何字体名称，但是当用户访问你的Web网页时，除非用户的计算机已经装载了你所指定的字体，否则用户将无法看到按照你设置的字体进行显示的Web页面。

　　所以可在font-family属性中指定几个备用字体。如果浏览器无法在访问计算机的字体列表中找到第一种字体名称，它将查找第二种、第三种、第四种字体名称，直到找到匹配的字体名称。

 <p style="font-family:'gill sans','verdana','arial';"></p>

4.3.2  字体大小

　　我们还可以使用样式表中的font-size属性来改变字体的大小。font-size的属性值可以采用关键字、相对大小以及度量值来表示。

• 关键字：xx-small、x-small、small、medium、large、x-large或者xx-large
• 相对大小：smaller或larger
• 度量值：数值后面加上度量单位，比如：12px（12像素）或者8pt（8英镑）

 <p style="font-size:12px;"></p>

4.3.3  字体颜色

　　样式表中的color属性可以用来设置Web页面中的任何元素的前景色，也包括文本的前景色。相应的，也可以使用background-color属性来设置Web页面中任何元素的背景色。

 <p style="color: red; background-color: blue; ">Hello,world!</p>