- HTML+CSS網(wǎng)頁開發(fā)技術(shù)精解
- 吳玉中等編著
- 7558字
- 2018-12-30 14:34:29
第3章 網(wǎng)頁文本與段落信息組織
學(xué)前必讀：
文本是網(wǎng)頁的基本組成部分，也是視覺傳達(dá)最直接的方式，運用經(jīng)過精心處理的文字材料，完全可以制作出效果很好的版面，而不需要任何圖形，本章主要講述文字格式、段落格式和水平線的使用方法等。通過對本章的學(xué)習(xí)，讀者可以掌握如何建立與制作出編排有序、整齊美觀的網(wǎng)頁格式文本，來提高文字的藝術(shù)表現(xiàn)力。
本章重點：
● 文本基本標(biāo)記
● 標(biāo)題元素標(biāo)記
● 段落元素標(biāo)記
● 文本的間隔和布局
● 水平分隔線元素標(biāo)記
● 文本的樣式設(shè)置
3.1 文本基本標(biāo)記
在所瀏覽的各種各樣的網(wǎng)頁中，極少看見沒有文字的網(wǎng)頁。文字在網(wǎng)頁中可以起到信息傳遞、導(dǎo)航以及交互等作用。<font>標(biāo)記用來控制字體、字號和顏色等屬性，它是HTML中最基本的標(biāo)記之一，下面學(xué)習(xí)<font>標(biāo)記的使用。
3.1.1 字體屬性face
字體使用是網(wǎng)頁設(shè)計中不可或缺的一部分。經(jīng)常地，我們希望在網(wǎng)頁中使用某一特定字體，但是該字體并非主流操作系統(tǒng)的內(nèi)置字體，這樣用戶在瀏覽頁面的時候就有可能看不到真實的設(shè)計。
face標(biāo)記用于設(shè)置文本所采用的字體名稱，使用者的瀏覽器中只有安裝了設(shè)置的字體后，才可以正確顯示，否則這些特殊的字體會被瀏覽器中的普通字體所代替。
基本語法：
<font face="字體的名稱">…</font>
語法介紹：
在該語法中，face屬性用來定義字體，任何安裝在操作系統(tǒng)中的文字都可以顯示在瀏覽器中，可以給face屬性一次定義多個字體，字體直接使用“，”分割開，瀏覽器在讀取字體時，如果第1種字體不存在，則使用第2種字體代替，以此類推。如果設(shè)置的幾種字體在瀏覽器中都不存在，則會以默認(rèn)字體顯示。
案例代碼：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字體屬性</title>
</head>
<body>
<p><font face="宋體">一個人的快樂，不是因為他擁有的多，而是因為他計較的少。</font></p>
<p><font face="微軟繁魏碑">心量狹小，則多煩惱，心量廣大，智慧豐饒。</font></p>
<p><font face="經(jīng)典中圓簡">擇善人而交，擇善書而讀，擇善言而聽，擇善行而從。</font></p>
</body>
</html>
代碼分析：
在代碼中，加粗的代碼標(biāo)記分別用于設(shè)置不同的字體，在瀏覽器中瀏覽，效果如圖3.1 所示，可以看到應(yīng)用了不同的文字效果。
圖3.1 設(shè)置不同的字體效果
3.1.2 字號屬性size
文字的大小是引起用戶注意的一個因素，使用<font>標(biāo)記中的size屬性可以設(shè)置文字大小。
基本語法：
<font size="文字大小">…</font>
語法介紹：
文字的大小有絕對和相對兩種方式，size標(biāo)記的屬性如表3.1所示。
表3.1 size標(biāo)記的屬性
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>字號屬性</title>
</head>
<body>
<p><font size=" 2">我為成功而生，不為失敗而活。</font> </p>
<p><font size="4">我要歡呼慶祝，不要吸泣哀訴。</font></p>
<p><font size="10">我為勝利而來，不向失敗低頭。</font></p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標(biāo)記分別用于設(shè)置文字不同的大小，在瀏覽器中瀏覽，效果如圖3.2所示。
圖3.2 設(shè)置文字的大小
3.1.3 顏色屬性color
一般來說，網(wǎng)頁的背景色應(yīng)該柔和一些、素一些、淡一些，再配上深色的文字，使人看起來自然、舒暢。color標(biāo)記用于設(shè)置文字的顏色。
基本語法：
<font color="字體的顏色">…</font>
語法介紹：
與網(wǎng)頁背景色的設(shè)置類似，可以是一個已命名的顏色，也可以是一個十六進(jìn)制的顏色值。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顏色屬性</title>
</head>
<body>
<p><font face="宋體" size="5" color="#E400FF">不是每一次努力都會有收獲，但是，每一次收獲都必須努力，這是一個不公平的不可逆轉(zhuǎn)的命題。</font> </p>
<p> <font face="宋體" size="3" color="#FF2A00">記憶像是倒在掌心的水，不論你攤開還是緊握，終究還是會從指縫中一滴一滴流淌干凈。</font> </p>
<p><font face="宋體" size="2" color="#3333CC">快樂和幸福那么相似,可是快樂就是幸福嗎?</font> </p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標(biāo)記用于設(shè)置不同的文字顏色，在瀏覽器中瀏覽，效果如圖3.3所示。
圖3.3 設(shè)置不同的文字顏色
3.2 標(biāo)題元素<H1～H6>
在遵循網(wǎng)頁標(biāo)準(zhǔn)制作網(wǎng)頁的時候，為了使得設(shè)計更具有語義化，我們經(jīng)常會在頁面中用到h1～h6的標(biāo)題屬性。標(biāo)題（h1～h6）標(biāo)簽是指HTML網(wǎng)頁中對文本標(biāo)題所進(jìn)行的著重強調(diào)的一種標(biāo)簽，以標(biāo)簽<h1>、<h2>、<h3>到<h6>顯示重要性的遞減。
基本語法：
<h1>…</h1>
<h2>…</h2>
<h3>…</h3>
<h4>…</h4>
<h5>…</h5>
<h6>…</h6>
語法介紹：
<h1>～<h6>標(biāo)簽可定義標(biāo)題，<h1>定義最大的標(biāo)題，<h6> 定義最小的標(biāo)題。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>標(biāo)題元素</title>
</head>
<body>
<h1>1級標(biāo)題</h1>
<h2>2級標(biāo)題</h2>
<h3>3級標(biāo)題</h3>
<h4>4級標(biāo)題</h4>
<h5>5級標(biāo)題</h5>
<h6>6級標(biāo)題</h6>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標(biāo)記用于設(shè)置6種級別不同的標(biāo)題，在瀏覽器中瀏覽，效果如圖3.4所示。
圖3.4 設(shè)置標(biāo)題標(biāo)記
提示：不同的瀏覽器，標(biāo)題的尺寸大小是不相同的，但<h1>標(biāo)題大約是標(biāo)準(zhǔn)文字高度的2～3倍，<h6>標(biāo)題則比標(biāo)準(zhǔn)字體略小。
3.3 段落元素<p>
在網(wǎng)頁中，如果要把文字有條理地顯示出來，離不開段落標(biāo)記的使用。HTML文檔的基本單位是段落，就如同我們平時寫文章一樣，整個網(wǎng)頁也可以分為若干個段落，而段落的標(biāo)記就是<p>。
基本語法：
<p>段落文字<p>
語法介紹：
<p>是HTML文檔中最常見的標(biāo)記，<p>用來起始一個段落。段落標(biāo)記可以沒有結(jié)束標(biāo)記</p>，而每一個新的段落標(biāo)記開始的同時也意味著上一個段落的結(jié)束。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>段落元素</title>
</head>
<body>
人生最大的敵人是自己<p align="right">
人生最大的失敗是自大<p align="center">
人生最大的愚蠢是欺騙
<p>
人生最大的錯誤是自卑<p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標(biāo)記為段落標(biāo)記，align="right"是設(shè)置段落為右對齊，align="center"是設(shè)置段落為居中對齊，在瀏覽器中預(yù)覽，可以看到將文本成功地分段，效果如圖3.5所示。
圖3.5 段落效果
3.4 文本的間隔和布局
和大多數(shù)文本處理器一樣，瀏覽器會把它找到的文字以適合顯示窗口水平寬度的方式顯示，當(dāng)瀏覽器窗口寬松時，文本會自動調(diào)整以適應(yīng)新的行寬，而窗口變窄時，文本會被擠壓到下面去，但是與大多數(shù)文本處理器不同的是，HTML使用明確的換行標(biāo)記<br>、縮進(jìn)標(biāo)記blockquote等控制文本的間隔和布局。
3.4.1 換行元素<br>
在HTML文本顯示中，默認(rèn)是將一行文字連續(xù)地顯示出來，如果想讓一個句子后面的內(nèi)容在下一行顯示就會用到換行符<br>。換行標(biāo)記<br>的作用是在不另起一段的情況下將當(dāng)前文本強制換行。
基本語法：
<br>
語法介紹：
一個<br>標(biāo)記代表一個換行，連續(xù)的多個標(biāo)記可以實現(xiàn)多次換行。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>換行元素</title>
</head>
<body>
半年一眨眼又過去了，時間過得好快，讓你措手不及。<br>有時覺得自己雖然不富有，但我比任何人都幸福。<br>
但誰又會知道在幸福的背后又有多少辛酸呢?<br>在人生中，有對手才能有不斷飛躍。<br>人生中有了對手，才會看到自己的不足；有了對手，才能有目的、有方向地完善自己……
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標(biāo)記為設(shè)置換行標(biāo)記，在瀏覽器中預(yù)覽，可以看到換行的效果，如圖3.6所示。
圖3.6 換行效果
提示：<br>是唯一可以為文字分行的方法，其他標(biāo)記如<p>，可以為文字分段。
3.4.2 縮進(jìn)元素<blockquote>
<blockquote>與</blockquote>之間的所有文本都會從常規(guī)文本中分離出來，經(jīng)常會在左、右兩邊進(jìn)行縮進(jìn)（增加外邊距），而且有時會使用斜體。
基本語法：
<blockquote cite="引用信息路徑">塊級元素的長引用文字</blockquote>
語法介紹：
blockquote標(biāo)記長引用的時候必須同時給出首尾標(biāo)記以指明引用界線，cite用于指定引用的原文檔或信息的URL路徑。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>縮進(jìn)元素</title>
</head>
<body>
<blockquote cite="index.htm">為提高企業(yè)核心競爭力，公司不斷強化質(zhì)量管理，嚴(yán)格按照ISO9002國際質(zhì)量體系標(biāo)準(zhǔn)生產(chǎn)、銷售，以“誠信、優(yōu)質(zhì)、創(chuàng)新、提升”為企業(yè)經(jīng)營理念，積極參與國際合作，引進(jìn)國際上先進(jìn)生產(chǎn)設(shè)備、技術(shù)和管理經(jīng)驗，在國際化發(fā)展戰(zhàn)略的道路上不斷邁進(jìn)！公司的經(jīng)營宗旨是“科技領(lǐng)先、用戶至上、質(zhì)量第一、誠信守法”，公司的經(jīng)營理念是為客戶提供更好更新的產(chǎn)品和服務(wù)。</blockquote>
</body>
</html>
代碼分析：
在代碼中，加粗的標(biāo)記用于設(shè)置縮進(jìn)元素，在瀏覽器中瀏覽，效果如圖3.7所示。
圖3.7 設(shè)置縮進(jìn)元素效果
提示：瀏覽器把一個塊級元素的長引用全部用縮進(jìn)的方式進(jìn)行顯示，以表示和其他普通段落的不同。
3.4.3 保留格式元素<pre>
pre元素可定義預(yù)格式化的文本。被包圍在pre元素中的文本通常會保留空格和換行符，而文本也會呈現(xiàn)為等寬字體。
基本語法：
<pre>文字</pre>
語法介紹：
把制作好的文字排版內(nèi)容前后加上始標(biāo)記<pre>和尾標(biāo)記</pre>，可以實現(xiàn)預(yù)格式化的效果。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>保留格式元素</title>
</head>
<body>
<pre>為提高企業(yè)核心競爭力，公司不斷強化質(zhì)量管理，
嚴(yán)格按照ISO9002國際質(zhì)量體系標(biāo)準(zhǔn)生產(chǎn)、銷售，
以“誠信、優(yōu)質(zhì)、創(chuàng)新、提升”為企業(yè)經(jīng)營理念，積極參與國際合作，
引進(jìn)國際上先進(jìn)生產(chǎn)設(shè)備、技術(shù)和管理經(jīng)驗，在國際化發(fā)展戰(zhàn)略的道路上不斷邁進(jìn)！
公司的經(jīng)營宗旨是“科技領(lǐng)先、用戶至上、質(zhì)量第一、誠信守法”，
公司的經(jīng)營理念是為客戶提供更好更新的產(chǎn)品和服務(wù)。</pre>
</body>
</html>
代碼分析：
在代碼中，加粗的代碼標(biāo)記用于保留格式元素，在瀏覽器中瀏覽，效果如圖3.8所示。
圖3.8 保留格式元素效果
3.4.4 取消換行元素<nobr>
在網(wǎng)頁中，如果某一行的文本過長，瀏覽器會自動對這段文字進(jìn)行換行處理。可以使用nobr標(biāo)記來禁止自動換行。
基本語法：
<nobr>不換行文字</nobr>
語法介紹：
nobr標(biāo)記是成對出現(xiàn)的，以<nobr>開始，</nobr>結(jié)束，nobr用于強迫在一行顯示內(nèi)容。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>取消換行元素</title>
</head>
<body>
<nobr>深秋到了，走進(jìn)空曠的校園，一陣?yán)滹L(fēng)吹來，讓人感到一陣涼意。 秋天的校園仍舊光彩宜人，樹依舊是那么綠；花兒好像不知道深秋已經(jīng)來了，依舊競相開放，依舊用它那芳香吸引著只只蜜蜂；蝴蝶依舊在校園里翩翩起舞，依舊用它那美麗的身影吸引著同學(xué)們的目光。
</nobr>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標(biāo)記為取消換行標(biāo)記，在瀏覽器中預(yù)覽，可以看到文字在一行顯示，如圖3.9所示。
圖3.9 不換行效果
3.4.5 引用元素<q>
當(dāng)希望在句子內(nèi)添加引用而不是將引用作為獨立的縮進(jìn)塊時，可以使用<q>元素。HTML規(guī)范和XHTML規(guī)范中都規(guī)定，<q>元素中的文本在顯示時需要包含在雙引號中。<q>元素也能附帶cite屬性，該屬性的值應(yīng)該設(shè)置為指向引用來源的URL。
基本語法：
<q cite="引用信息路徑">行內(nèi)元素的短引用文字</q>
語法介紹：
在該語法中，cite用于指定引用的原文檔或信息的URL路徑。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>引用元素</title>
</head>
<body>
<q cite="index.html">深秋到了，走進(jìn)空曠的校園，一陣?yán)滹L(fēng)吹來，讓人感到一陣涼意。</q>秋天的校園仍舊光彩宜人，樹依舊是那么綠；花兒好像不知道深秋已經(jīng)來了，依舊競相開放，依舊用它那芳香吸引著只只蜜蜂；蝴蝶依舊在校園里翩翩起舞，依舊用它那美麗的身影吸引著同學(xué)們的目光。
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記用于設(shè)置短引用，在瀏覽器中瀏覽，效果如圖3.10所示。
提示：q標(biāo)記在行內(nèi)所引用的內(nèi)容，顯示文字和其他普通文本完全一樣。設(shè)計者可以借助樣式表CSS把引用內(nèi)容和其他文字進(jìn)行區(qū)分，包括粗體、斜體或下畫線等。
圖3.10 設(shè)置短引用
3.5 水平分隔線元素<hr>
在網(wǎng)頁中常?？吹揭恍┧骄€將段落與段落之間隔開，使得文檔結(jié)構(gòu)清晰，層次分明，這些水平線可以通過插入圖片實現(xiàn)，也可以更簡單地通過標(biāo)記來完成。
3.5.1 粗細(xì)屬性size
用<hr>標(biāo)記可以在網(wǎng)頁上畫出一條橫跨網(wǎng)頁的水平分隔線，以分隔不同的文字段落。size屬性控制水平線的粗細(xì)，以像素（pixel）為單位表示。
基本語法：
<hr size="粗細(xì)值">
語法介紹：
在網(wǎng)頁中輸入一個<hr>標(biāo)記，就添加了一條默認(rèn)樣式的水平線。水平線的粗細(xì)值只能是像素值。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平線高度屬性</title>
</head>
<body>
<p>做新時代人，開創(chuàng)新時代文化<br />
<hr size="3">
企業(yè)文化不是企業(yè)王冠上的裝飾品，更不是企業(yè)成功之后的附庸風(fēng)雅。企業(yè)文化是企業(yè)發(fā)展的靈魂，沒有先進(jìn)文化的企業(yè)是無生命力的，沒有特色文化的企業(yè)是平庸的。我們必須建設(shè)面向現(xiàn)代化、面向世界、面向未來的，先進(jìn)的，有特色的新時代企業(yè)文化。</p>
<p>企業(yè)文化的核心是價值觀，其實先要看員工行為和工作氛圍。企業(yè)文化的最大功能是達(dá)成共識，促進(jìn)員工歸宿感、認(rèn)同感、自豪感的形成，促進(jìn)企業(yè)目標(biāo)的實現(xiàn)。希望通過企業(yè)文化，使集團(tuán)以新的形象、新的風(fēng)采，在新的世紀(jì)里穩(wěn)步發(fā)展壯大。</p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記為設(shè)置水平線的粗細(xì)，在瀏覽器中預(yù)覽，可以看到將水平線粗細(xì)設(shè)置為3像素的效果，如圖3.11所示。
圖3.11 設(shè)置水平線的粗細(xì)
3.5.2 陰影屬性noshade
noshade屬性規(guī)定水平線的顏色呈現(xiàn)為純色，而不是有陰影的顏色。
基本語法：
<hr noshade>
語法介紹：
noshade是布爾值的屬性，它沒有屬性值，如果在<hr>元素中寫上了這個屬性，則瀏覽器不會顯示立體形狀的水平線，反之則無須設(shè)置該屬性，瀏覽器默認(rèn)顯示一條立體形狀帶有陰影的水平線。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平線樣式屬性</title>
</head>
<body>
<p>做新時代人，開創(chuàng)新時代文化 <br /></p>
<hr size="3" noshade >
<p>企業(yè)文化不是企業(yè)王冠上的裝飾品，更不是企業(yè)成功之后的附庸風(fēng)雅。企業(yè)文化是企業(yè)發(fā)展的靈魂，沒有先進(jìn)文化的企業(yè)是無生命力的，沒有特色文化的企業(yè)是平庸的。我們必須建設(shè)面向現(xiàn)代化、面向世界、面向未來的，先進(jìn)的，有特色的新時代企業(yè)文化。</p>
<p>企業(yè)文化的核心是價值觀，其實先要看員工行為和工作氛圍。企業(yè)文化的最大功能是達(dá)成共識，促進(jìn)員工歸宿感、認(rèn)同感、自豪感的形成，促進(jìn)企業(yè)目標(biāo)的實現(xiàn)。希望通過企業(yè)文化，使集團(tuán)以新的形象、新的風(fēng)采，在新的世紀(jì)里穩(wěn)步發(fā)展壯大。</p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記為設(shè)置無陰影的水平線，在瀏覽器中預(yù)覽，可以看到水平線沒有陰影，如圖3.12所示。
圖3.12 水平線沒有陰影的效果
3.5.3 寬度屬性width
width屬性規(guī)定水平線的寬度，以像素計或百分比計。
基本語法：
<hr width="寬度">
語法介紹：
在該語法中，水平線的寬度值可以是確定的像素值，也可以是窗口的百分比。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平線的寬度</title>
</head>
<body>
<p>做新時代人，開創(chuàng)新時代文化<br /></p>
<hr size="3" width="500" noshade>
<p>企業(yè)文化不是企業(yè)王冠上的裝飾品，更不是企業(yè)成功之后的附庸風(fēng)雅。企業(yè)文化是企業(yè)發(fā)展的靈魂，沒有先進(jìn)文化的企業(yè)是無生命力的，沒有特色文化的企業(yè)是平庸的。我們必須建設(shè)面向現(xiàn)代化、面向世界、面向未來的，先進(jìn)的，有特色的新時代企業(yè)文化。</p>
<p>企業(yè)文化的核心是價值觀，其實先要看員工行為和工作氛圍。企業(yè)文化的最大功能是達(dá)成共識，促進(jìn)員工歸宿感、認(rèn)同感、自豪感的形成，促進(jìn)企業(yè)目標(biāo)的實現(xiàn)。希望通過企業(yè)文化，使集團(tuán)以新的形象、新的風(fēng)采，在新的世紀(jì)里穩(wěn)步發(fā)展壯大。</p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記為設(shè)置水平線的寬度為500px，在瀏覽器中預(yù)覽，效果如圖3.13所示。
圖3.13 設(shè)置水平線寬度
3.5.4 對齊屬性align
水平線在默認(rèn)情況下是居中對齊的，如果想讓水平線左對齊或右對齊，就需要設(shè)置對齊方式。
基本語法：
<hr align="對齊方式">
語法介紹：
在該語法中對齊方式可以有3種，包括center、left和right，其中center的效果與默認(rèn)的效果相同。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平線的對齊屬性</title>
</head>
<body>
<p>做新時代人，開創(chuàng)新時代文化<br /></p>
<hr align="center" size="3" width="500" noshade>
企業(yè)文化不是企業(yè)王冠上的裝飾品，更不是企業(yè)成功之后的附庸風(fēng)雅。企業(yè)文化是企業(yè)發(fā)展的靈魂，沒有先進(jìn)文化的企業(yè)是無生命力的，沒有特色文化的企業(yè)是平庸的。我們必須建設(shè)面向現(xiàn)代化、面向世界、面向未來的，先進(jìn)的，有特色的新時代企業(yè)文化。</p>
<p><hr width="200" size="3" align="left" noshade> 企業(yè)文化的核心是價值觀，其實先要看員工行為和工作氛圍。企業(yè)文化的最大功能是達(dá)成共識，促進(jìn)員工歸宿感、認(rèn)同感、自豪感的形成，促進(jìn)企業(yè)目標(biāo)的實現(xiàn)。<hr width="200" size="3" align="right" noshade>希望通過企業(yè)文化，使集團(tuán)以新的形象、新的風(fēng)采，在新的世紀(jì)里穩(wěn)步發(fā)展壯大。</p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記為設(shè)置水平線的對齊方式，在瀏覽器中預(yù)覽，可以看到水平線不同對齊方式的效果，如圖3.14所示。
圖3.14 水平線的對齊方式
3.5.5 顏色屬性color
在網(wǎng)頁創(chuàng)作時，文字顏色是多姿多彩的，而水平線的顏色也是多姿多彩的。設(shè)置不同顏色的水平線可以為網(wǎng)頁增色不少。
基本語法：
<hr color="顏色">
語法介紹：
顏色代碼是十六進(jìn)制的數(shù)值或者顏色的英文名稱。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>水平線顏色屬性</title>
</head>
<body>
<p>做新時代人，開創(chuàng)新時代文化 <br /></p>
<hr align="center" size="3" width="500" color="#f009CC" noshade>
<p>企業(yè)文化不是企業(yè)王冠上的裝飾品，更不是企業(yè)成功之后的附庸風(fēng)雅。企業(yè)文化是企業(yè)發(fā)展的靈魂，沒有先進(jìn)文化的企業(yè)是無生命力的，沒有特色文化的企業(yè)是平庸的。我們必須建設(shè)面向現(xiàn)代化、面向世界、面向未來的，先進(jìn)的，有特色的新時代企業(yè)文化。</p>
<p><hr width="200" size="3" align="left" noshade color="#00ffff"> 企業(yè)文化的核心是價值觀，其實先要看員工行為和工作氛圍。企業(yè)文化的最大功能是達(dá)成共識，促進(jìn)員工歸宿感、認(rèn)同感、自豪感的形成，促進(jìn)企業(yè)目標(biāo)的實現(xiàn)。 <hr width="200" size="3" align="right" color="#ff0000" noshade>希望通過企業(yè)文化，使集團(tuán)以新的形象、新的風(fēng)采，在新的世紀(jì)里穩(wěn)步發(fā)展壯大。</p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記為設(shè)置水平線的顏色，在瀏覽器中預(yù)覽，可以看到不同顏色的水平線效果，如圖3.15所示。
圖3.15 水平線的顏色
3.6 文本的樣式設(shè)置
在HTML中，還有一些文本格式化標(biāo)記用來設(shè)置文字以特殊的方式顯示，如粗體標(biāo)記、斜體標(biāo)記和文字的上下標(biāo)等。
3.6.1 放大元素<big>
big標(biāo)記用來增大文本中字號的大小，它所包含的文字都會在原來的字號上增加一級。如果有多個<big>作用于同一個文本，則字號會被逐級增大。<big>作為一個行內(nèi)元素，它可以成對出現(xiàn)在一段文字中的任何位置。
基本語法：
<big>大字號內(nèi)容</big>
語法介紹：
在該語法中，在<big>與</big>標(biāo)記之間的內(nèi)容，可在定義的字號大小的基礎(chǔ)上增加一級。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本樣式放大元素</title>
</head>
<body>
<p>時尚資訊，<big>感悟人生真諦</big>。打造專屬自己的<big>美麗模板</big>。</p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標(biāo)記為設(shè)置大字號，在瀏覽器中預(yù)覽效果，如圖3.16所示。
圖3.16 設(shè)置大字號效果
3.6.2 縮小元素<small>
small標(biāo)記所包含的文字，在瀏覽器里顯示會比普通文字小一級。如果有多個<small>元素作用于同一段文本上，則該段文本的字號會逐級縮小。<small>作為一個行內(nèi)元素，它可以成對出現(xiàn)在一段文本中的任何地方。
基本語法：
<small>小字號內(nèi)容</small>
語法介紹：
此標(biāo)記的用法與大字號標(biāo)記的用法基本相同，可在<small>與</small>標(biāo)記之間輸入小字號的內(nèi)容。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>文本樣式縮小元素</title>
</head>
<body>
時尚資訊，<small> 感悟人生真諦。</small> 打造專屬自己的美麗模板。
</body>
</html>
代碼分析：
在代碼中，加粗部分的代碼標(biāo)記為設(shè)置小字號，在瀏覽器中預(yù)覽，可以看到小字號的字體效果，如圖3.17所示。
圖3.17 設(shè)置小字號效果
3.6.3 斜體顯示元素<i>、<em>和<cite>
<i>、<em>和<cite>是HTML中格式化斜體文本的最基本元素。在<i>和</i>之間的文字、在<em>和</em>之間的文字或在<cite>和</cite>之間的文字，在瀏覽器中都會以斜體字體顯示。
基本語法：
<i>斜體文字</i>
<em>斜體文字</em>
<cite>斜體文字</cite>
語法介紹：
斜體的效果可以通過<i>標(biāo)記、<em>標(biāo)記和<cite>標(biāo)記來實現(xiàn)。一般在一篇以正體顯示的文字中用斜體文字起到醒目、強調(diào)或者區(qū)別的作用。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>斜體顯示元素</title>
</head>
<body>
<i> 時尚資訊，感悟人生真諦。打造專屬自己的美麗模板。</i>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記為設(shè)置文字的斜體效果，在瀏覽器中預(yù)覽效果，如圖3.18所示。
圖3.18 文字的斜體效果
3.6.4 加粗的強調(diào)元素<strong>和<b>
<strong>是加重語氣標(biāo)簽，<b>是粗體標(biāo)簽。它們均是加粗字體的作用。在大多數(shù)情況下，它們表現(xiàn)出來的效果也大致相同。該元素的首尾部分都是必須的，如果沒有結(jié)尾標(biāo)記，瀏覽器會認(rèn)為從<b>開始的所有文字都是粗體。
基本語法：
<b>加粗的文字</b>
<strong>加粗的文字</strong>
語法介紹：
在該語法中，粗體的效果可以通過<b>標(biāo)記來實現(xiàn)，還可以通過<strong>標(biāo)記來實現(xiàn)。<b>和<strong>是行內(nèi)元素，它可以插入到一段文本的任何部分。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>加粗的強調(diào)元素</title>
</head>
<body>
<strong> 對文字進(jìn)行加粗</strong>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記為設(shè)置文字的加粗效果，在瀏覽器中預(yù)覽效果，如圖3.19所示。
圖3.19 文字的加粗效果
3.6.5 下標(biāo)元素<sub>
下標(biāo)元素<sub>的英文原名為subscript，在各種數(shù)學(xué)公式、化學(xué)方程式中，下標(biāo)元素有著廣泛的應(yīng)用。<sub>元素是行內(nèi)元素，它可以成對地出現(xiàn)在一段文字的任何地方，并且可以將多個<sub>元素作用于同一段文字，也就是說，如果在<sub>元素里繼續(xù)使用<sub>，那么被作用的文字將成為“下標(biāo)的下標(biāo)”。
基本語法：
<sub>下標(biāo)內(nèi)容</sub>
語法介紹：
在該語法中，只需要將下標(biāo)內(nèi)容放置在標(biāo)記之間即可。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>下標(biāo)元素</title>
</head>
<body>
<p><strong>化學(xué)方程式</strong>
</p>
Fe<sub>3</sub>O<sub>4 </sub>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記為設(shè)置下標(biāo)標(biāo)記，在瀏覽器中預(yù)覽效果，可以看到下標(biāo)標(biāo)記，如圖3.20所示。
3.6.6 上標(biāo)元素<sup>
上標(biāo)元素<sup>的英文原名為superscript，在各種數(shù)學(xué)公式、日常計算應(yīng)用、書籍文章注解甚至某些外語腳本里都有廣泛的運用。<sup>元素也是行內(nèi)元素，它可以成對出現(xiàn)在一段文字的任何地方，并且允許嵌套使用。因此如果在<sup>里再使用<sup>則會變成“上標(biāo)的上標(biāo)”。
圖3.20 下標(biāo)標(biāo)記效果
基本語法：
<sup>上標(biāo)內(nèi)容</sup>
語法介紹：
在該語法中，上標(biāo)標(biāo)記的效果可以通過<sup>標(biāo)記來實現(xiàn)。
案例代碼：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>上標(biāo)元素</title>
</head>
<body>
<strong>代數(shù)方程式</strong>
<p>6x<sup>2</sup>+5x<sup>3</sup>+4=30</p>
</body>
</html>
代碼分析：
在代碼中，加粗部分的標(biāo)記為設(shè)置上標(biāo)標(biāo)記，在瀏覽器中預(yù)覽效果，可以看到上標(biāo)標(biāo)記，如圖3.21所示。
圖3.21 上標(biāo)標(biāo)記效果
3.7 課后習(xí)題
1.填空題
（1）______標(biāo)記用來控制字體、字號和顏色等屬性，它是HTML中最基本的標(biāo)記之一。
（2）______是HTML文檔中最常見的標(biāo)記，______用來起始一個段落。段落標(biāo)記可以沒有結(jié)束標(biāo)記______，而每一個新的段落標(biāo)記開始的同時也意味著上一個段落的結(jié)束。
（3）在網(wǎng)頁中如果某一行的文本過長，瀏覽器會自動對這段文字進(jìn)行換行處理。可以使用______標(biāo)記來禁止自動換行。
（4）______標(biāo)記代表水平分割模式，并會在瀏覽器中顯示一條線。標(biāo)記用來增大文本中字號的大小，它所包含的文字都會在原來的字號上增加一級。
2.操作題
設(shè)置頁面文本及段落的具體實例，如圖3.22所示。
圖3.22 設(shè)置頁面文本及段落的效果
- 數(shù)據(jù)庫系統(tǒng)原理及MySQL應(yīng)用教程（第2版）
- Visual FoxPro程序設(shè)計教程（第3版）
- Learn Swift by Building Applications
- Java：Data Science Made Easy
- Python數(shù)據(jù)分析（第2版）
- PhoneGap Mobile Application Development Cookbook
- Mastering Linux Security and Hardening
- Programming with CodeIgniterMVC
- Bootstrap for Rails
- C編程技巧：117個問題解決方案示例
- Android Sensor Programming By Example
- Android移動應(yīng)用項目化教程
- 大數(shù)據(jù)時代的企業(yè)升級之道（全3冊）
- Kotlin語言實例精解
- Java 9：Building Robust Modular Applications