[HTML/HTML5]4 使用文本
4.1 组织文本
在已经采用结构化方式将页面划分为多个关键内容区域（content area）并添加相应的标题之后，就可以进一步对这些内容区域中的文本进行组织。
4.1.1 段落
p元素的具体功能是作为段落的一个容器。因此，请在段落的开始处使用P元素的开始标记<p>，在段落的结尾使用结束标记</p>。
1 <div class="nurseryRhyme"> 2 <p>Jack and Jill went up a hill</p> 3 <p>To fetch a pail of water</p> 4 <p>Jack fell down and broke hie croen</p> 5 <p>and Jill came tumbling after</p> 6 </div>
在默认情况下p标记会在段落前或段落后各强制产生一个空行，但它并不会自动地对文本进行缩进。
在HTML中没有专门表示缩进的标记，要缩进一个段落的第一行，可以在样式表中使用text-indent属性。
1 <p style="text-indent:25px">This is the first sentence in my paragraph</p>
上面这个例子是内联样式表，它仅能影响这一个段落，可以把相同的声明添加到一个内部样式表中或一个外部样式表中，从而影响一个页面或整个网站中的所有段落。例如在样式表中添加如下声明：
1 normalChapter p{text-indent:25px;} /* 通过在normalChapter选择器之后放入p标记，告诉浏览器仅对页面上normalChapter部分中的那些段落才进行缩进 */
相关的HTML代码如下：
1 <section class="normalChapter"> 2 <p>This paragraph's first line will be indented</p> 3 </section>
4.1.2 换行符
在HTML页面中，可以使用br标记来添加换行符。br标记会导致浏览器在该行上停止输出文本，并换到页面上的下一行继续输出。
1 <p> 2 Jack and Jill went up a hill<br> 3 To fetch a pail of water<br> 4 Jack fell down and broke hie croen<br> 5 and Jill came tumbling after<br> 6 </p>
在页面代码中，按Enter或Return键就可以在浏览器呈现的页面中产生换行符，只有唯一一种情形，就是使用了pre标记。
pre是preformat（预格式化）的简写，pre标记将完全按照输入的文本格式在浏览器中将其呈现出来。
为什么不使用pre标记来定义页面上的一切呢？主要有以下两个原因：
- pre标记并不保证按照设想的方式输出。即使在pre标记中可以使用table键来格式化文本，但是不同的浏览器可能会将一个table键解释为不同数量的空格字符，要么比文本编辑器的空格多，要么少。这可能会导致创建的表格不能正确呈现。
- pre标记通常以等宽字体来显示文本，如Courier字体，这使文本看起来有种类似于打字机打印的效果。虽然这可能适合应用于程序设计语言代码的例子，但是整个网站看起来就不那么美观了。
即便如此，对于显示代码示例，甚至创建字符形式的图标，pre标记还是非常有用：
1 <pre> 2 This text will display exactly as i type it.Watch this 3 4 x | x | o 5 -------------------- 6 x | x | 7 -------------------- 8 o | | x 9 10 </pre>
4.1.3 引用块
blockquote元素用于分隔从其它源引用的内容。默认情况下，该元素将同时对整个引用文本的左右两边都进行缩进，另外还会在引用文本之前和之后分别添加一个空行。缩进的准确数量将由浏览器来决定，因此对于不同的浏览器，引用文本左右两边的缩进会有所不同。
1 <p>Hello,World! 2 <blockquote> 3 Hello,World!Hello,World!Hello,World!Hello,World!Hello,World!Hello,World! 4 </blockquote> 5 </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%，应该使用下面代码：
1 nav{ 2 box-sizing:border-box; 3 width:100%; 4 height:20%; 5 }
（2）内边距（padding）
在样式表中，可以使用padding属性在内容周围设置一个空白的缓冲区域（可以分别设置一边、两边、三边或者四边），在下面的例子中对blockquote标记设置样式：
1 p{ 2 box-sizing:border-box; 3 padding-top:25px; 4 padding-right:15px; 5 padding-bottom:20px; 6 padding-left:35px; 7 }
如果四条边上都使用相同的内边距值，可以使用快捷方式简化代码：
1 p{padding:25px;}
如果各条边的内边距值不一样，一种更为快捷的编码方式为：
1 p{padding:25px 15px 20px 35px;} /* 从上开始，顺时针 */
（3）外边距（margin）
margin属性影响框边界外部的缓冲空间，因此不会从内容框的总尺寸长减去外边距值。与padding属性一样，可以分别定义盒模型一边、两边、三边或者四边的外边距值：
1 p{ 2 box-sizing:border-box; 3 margin-top:25px; 4 margin-right:15px; 5 margin-bottom:25px; 6 margin-left:15px; 7 }
如果四条边上都使用相同的外边距值，可以使用快捷方式简化代码：
1 p{margin:25px;}
如果各条边的外边距值不一样，一种更为快捷的编码方式为：
1 p{margin:25px 15px 20px 35px;} /* 从上开始，顺时针 */
（4）边框（border）
盒模型既可以包含水平边框（border），也可以包含垂直边框。可以使用边框来包围所有类型的页面元素——比如：图片或文本段落。例如：
1 <p style="border-bottom-width:1px; border-style:solid; border-color:black">
定义边框宽度（可以使用长度单位和关键字thin、medium或thick）：
1 p{ 2 border-top-width:thin; 3 border-right-width:6px; 4 border-bottom-width:thick; 5 border-left-width:4px; 6 }
如果四条边框宽度相等，可以使用快捷方式简化代码：
1 p{border-widtn:medium;}
定义边框样式：
1 p{border-style:solid;}
定义边框颜色：
1 p{border-color:red;}
边框样式的快捷方式：
1 <p style="border:1px solid red;">
4.1.5 对齐
样式表属性text-align允许采用下列任意方式，在页面上重新对齐文本：
- left（左对齐）
- right（右对齐）
- center（居中对齐）
- justify（两端对齐）
例如：
1 #aboutMe{text-align:justfy;}
相应的HTML代码：
1 <section id="aboutMe"> 2 <p>Paragraph 1</p> 3 <p>Paragraph 2</p> 4 <p>Paragraph 3</p> 5 </section>
在样式表中还可以使用vertical-align属性在垂直方向上对齐文本。
4.2 标记文本
文本级语义定义在页面上如何使用受语义影响的文本，而不是定义如何显示这些文本。
例如，如果你正在编写本段落中第一个句子的HTML代码，就应该使用dfn元素来告诉浏览器应该将短语“text-level semantics”作为一个已定义的术语突出显示。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>test</title> 5 </head> 6 <body> 7 <p> 8 <dfn>Text-level semantics</dfn>define how the affected text will be used on the page,not how it will be displayed. 9 </p> 10 </body> 11 </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属性中指定几个备用字体。如果浏览器无法在访问计算机的字体列表中找到第一种字体名称，它将查找第二种、第三种、第四种字体名称，直到找到匹配的字体名称。
1 <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英镑）
1 <p style="font-size:12px;"></p>
4.3.3 字体颜色
样式表中的color属性可以用来设置Web页面中的任何元素的前景色，也包括文本的前景色。相应的，也可以使用background-color属性来设置Web页面中任何元素的背景色。
1 <p style="color: red; background-color: blue; ">Hello,world!</p>
