文本標簽
要控制文本的格式，除了可以設置標簽的style屬性，指定樣式，還可以直接通過標簽來執(zhí)行樣式，這些標簽可以稱之為 屬性標簽。
- <em>和<strong>
em標簽用于表示一段內(nèi)容中的著重點。
strong標簽用于表示一個內(nèi)容的重要性。
這兩個標簽可以單獨使用，也可以一起使用
<p>
<strong>警告：任何情況下不要接近僵尸。</strong>
他們只是 <em>看起來</em> 很友好，實際上他們是為了吃你的胳膊！
</p>
通常em顯示為斜體，而strong顯示為粗體。
- <i>和<b>
i標簽會使文字變成斜體。
b標簽會使文字變成粗體。
<i>我是i標簽中的內(nèi)容</i>
<b>我是b標簽中的內(nèi)容</b>
這兩個標簽和em和strong類似，但是這兩 個標簽沒有語義。
所以根據(jù)html5標準，當我們只想設置文本 特殊顯示，而不需要強調(diào)內(nèi)容時就可以使 用i和b標簽。
- <small>
small標簽表示細則一類的旁注，通常包括 免責聲明、注意事項、法律限制、版權信 息等。
瀏覽器在顯示small標簽時會顯示一個比父 元素小的字號。
我是p標簽中的內(nèi)容<small>我是small標簽中的內(nèi)容</small>
- <cite>
使用cite標簽可以指明對某內(nèi)容的引用或參 考。例如，戲劇、文章或圖書的標題，歌 曲、電影、照片或雕塑的名稱等。
<p>
<cite>《西游記》是講師徒四人西天取經(jīng)的故事</cite>
<\p>
- <blockquote>和<q>
blockquote和q表示標記引用的文本。
blockquote用于長引用，q用于短引用
在兩個標簽中還可以使用cite屬性來表示引 用的地址。
孟子曾經(jīng)說過：
<blockquote>天將降大任于是人也...</blockquote>
他說的真對啊！
<p>孔子曾經(jīng)說過：<q>學而時習之不亦說乎</q></p>
- <sup>和<sub>
sup和sub用于定義上標和下標。
上標主要用于表示類似于103中的3。
下標則用于表示類似余H2O中的2。
<p>2<sup>2<\sub></p>
<p>H<sub>2</sub>O</p>
- <ins>和<del>
ins表示插入的內(nèi)容，顯示時通常會加上下 劃線。
郭敬明的個頭兒真<ins>高啊</ins>！
del表示刪除的內(nèi)容，顯示時通常會加上刪 除線。
<del>17.75</del><br>
- <code>和<pre>
如果你的內(nèi)容包含代碼示例或文件名，就 可以使用code元素。
pre元素表示的是預格式化文本，可以使用
pre包住code來表示一段代碼。
<pre>
<code>
if true:
print('hello')
</code>
</pre>
列表
- 有序列表：使用ol和li來創(chuàng)建一個有序列表
<ol>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ol>
- 無序列表：使用ul和li來創(chuàng)建一個無序列表。
<ul>
<li>列表項1</li>
<li>列表項2</li>
<li>列表項3</li>
</ul>
- 定義列表：使用dl、dd、dt來創(chuàng)建一個定義列表
<dl>
<dt>定義項1</dt>
<dd>定義描述1</dd>
<dt>定義項2</dt>
<dd>定義描述2</dd>
<dt>定義項3</dt>
<dd>定義描述3</dd>
</dl>
<!--
列表就相當于去超市購物時的那個購物清單，在HTML也可以創(chuàng)建列表，在網(wǎng)頁中一共有三種列表：
1、無序列表
2、有序列表
3、定義列表
-->
<!--
無序列表
使用ul標簽來創(chuàng)建一個無序列表
使用li在ul中創(chuàng)建一個一個的列表項，一個li就是一個列表項
通過type屬性可以修改無序列表的項目符號，可選值：
disc：默認值，實心的圓點
square：實心的方塊
circle：空心的圓圈
注意：默認的項目符號我們一般都不使用
如果需要設置項目符號，則可以采用為li設置背景圖片的方式來設置
ul和li都是塊元素
-->
<ul>
<li>西門大官人</li>
<li>柴大官人</li>
<li>許大官人</li>
<li>唐僧大官人</li>
</ul>
<!--
有序列表和無序列表類似，只不過它使用ol來代替ul
有序列表使用有序的序號作為項目符號
type屬性，可以指定序號的類型，可選值：
1，默認值，使用阿拉伯數(shù)字
a/A，采用小寫或大寫字母作為序號
i/I，采用小寫或大寫的羅馬數(shù)字作為序號
ol也是塊元素
-->
<ol type="1">
<li>結構</li>
<li>表現(xiàn)</li>
<li>行為</li>
</ol>
<!--
列表之間都是可以互相嵌套，可以在無序列表中放個有序列表，也可以在有序列表中放一個無序列表
-->
<p>菜譜</p>
<ul>
<li>
魚香肉絲
<ol>
<li>魚</li>
<li>香</li>
<li>肉絲</li>
</ol>
</li>
<li>
宮保雞丁
<ul>
<li>宮保</li>
<li>雞丁</li>
</ul>
</li>
<li>過橋茄子</li>
</ul>
<!--
定義列表用來對一些詞匯或內(nèi)容進行定義
使用dl來創(chuàng)建一個定義列表，它有兩個子標簽
dt：被定義的內(nèi)容
dd：對定義內(nèi)容的描述
同樣，dl、ul、ol之間都可以互相嵌套
-->
<dl>
<dt>武松</dt>
<dd>景陽岡打虎英雄，戰(zhàn)斗力99</dd>
<dd>后打死西門慶，投奔梁山</dd>
<dt>武大</dt>
<dd>著名餐飲企業(yè)家，戰(zhàn)斗力0</dd>
</dl>
文本格式化
1.顏色像素
長度單位
像素px
- 像素是我們在網(wǎng)頁中使用得最多的一個單位
一個像素就相當于屏幕中的一個小點
我們的屏幕實際上就是由這些像素點構成的
但是這些像素點是不能直接看見的
- 不同顯示器一個像素的大小也不相同
顯示效果越好、越清晰，像素就越小，反之像素越大
百分比%
- 也可以將單位設置為一個百分比的形式
這樣瀏覽器將會根據(jù)其父元素的樣式來計算該值
- 使用百分比的好處是，當父元素的屬性值發(fā)生變化時，子元素也會按照比例發(fā)生改變
- 在我們創(chuàng)建一個自適應的頁面時，經(jīng)常使用百分比作為單位
em
- em和百分比類似，它是相對于當前元素的字體大小來計算的
- 1em = 1font-size
- 使用em時，當字體大小發(fā)生改變時，em也會隨之改變
- 當設置字體相關的樣式時，經(jīng)常會使用em
- 顏色單位
（1）在CSS可以直接使用顏色的單詞來表示不同的顏色
紅色：red
藍色：blue
綠色：green
（2）也可以使用RGB值來表示不同的顏色
所謂的RGB值指的是通過Red Green Blue三元色，
通過這三種顏色的不同的濃度，來表示出不同的顏色
例子：rgb(紅色的濃度,綠色的濃度,藍色的濃度);
顏色的濃度需要一個0-255之間的值，255表示最大，0表示沒有
濃度也可以采用一個百分數(shù)來設置，需要一個0% - 100%之間的數(shù)字
使用百分數(shù)最終也會轉(zhuǎn)換為0-255之間的數(shù)
0%表示0
00%表示255
(3)也可以使用十六進制的rgb值來表示顏色，原理和上邊RGB原理一樣，只不過使用十六進制數(shù)來代替，使用三組兩位的十六進制數(shù)組來表示一個顏色，每組表示一個顏色
第一組表示紅色的濃度，范圍00-ff
第二組表示綠色的濃度，范圍00-ff
第三組表示藍色的濃度，范圍00-ff
語法：#紅色綠色藍色
十六進制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示沒有，相當于rgb中的0
ff表示最大，相當于rgb中255
紅色：#ff0000
像這種兩位兩位重復的顏色，可以簡寫
比如：#ff0000 可以寫成 #f00
abc #aabbcc
background-color: rgb(161,187,215);
background-color: rgb(100%,50%,50%);
background-color: #0000ff;
background-color: #00f;
background-color: #084098;
(3)RGBA
RGBA表示一個顏色和RGB類似，只不過比
RGB多了一個A（alpha）來表示透明度， 透明度需要一個0-1的值。0表示完全透明，
1表示完全不透明。
– RGBA(255,100,5,0.5)
- 文字大小
font-size用來指定文字的大小。
設置文字的大小，瀏覽器中一般默認的文字大小都是16px，font-size設置的并不是文字本身的大小，在頁面中，每個文字都是處在一個看不見的框中的，我們設置的font-size實際上是設置格的高度，并不是字體的大小，一般情況下文字都要比這個格要小一些，也有時會比格大，根據(jù)字體的不同，顯示效果也不同
通過font-family可以指定文字的字體，當采用某種字體時，如果瀏覽器支持則使用該字體，如果字體不支持，則使用默認字體。
該樣式可以同時指定多個字體，多個字體之間使用“,”分開
當采用多個字體時，瀏覽器會優(yōu)先使用前邊的字體，如果前邊沒有，再嘗試下一個
（1）通過font-family可以指定標簽中文字使用 的字體。
例如：
p{font-family:Arial}
– 上邊這行代碼指定了p標簽中使用名為arial作 為字體
一般來說只有用戶計算機中安裝了我們指 定的字體時，它才會顯示，否則這行代碼 是沒有意義的。
（2）通過font-family可以同時指定多個字體。
例如：
p{font-family:Arial , Helvetica , sans-serif}
如上我實際上指定了三種字體，那么到底 使用的是哪個呢？瀏覽器會優(yōu)先使用第一 個，如果沒有找到則使用第二個，以此類 推。
這里面sans-serif并不是指的具體某一個字 體。而是一類字體。
（2）字體分類
serif（襯線字體）
sans-serif（非襯線字體）
monospace （等寬字體）
cursive （草書字體）
fantasy （虛幻字體）
以上這些分類都是一些大的分類，并沒有 涉及具體的類型，如果將字體指定為這些 格式，瀏覽器會自己選擇指定類型的字體。
（3）斜體和粗體
font-style用來指定文本的斜體。
指定斜體：font-style:italic
指定非斜體：font-style:normal
font-weight用來指定文本的粗體。
指定粗體：font-weight:bold
指定非粗體：font-weight:normal
（4）小型大寫字母
font-variant屬性可以將字母類型設置為小 型大寫。在該樣式中，字母看起來像是稍 微縮小了尺寸的大寫字母。
– font-variant:small-caps
（5）字體屬性的簡寫
font可以一次性同時設置多個字體的樣式。
語法：
– font:加粗 斜體 小型大寫 大小/行高 字體
這里前邊幾個加粗、斜體和小型大寫的順 序無所謂，也可以不寫，但是大小和字體 必須寫且必須寫到后兩個。
（5）大寫化
text-transform樣式用于將元素中的字母全都變成大寫。
大寫：text-transform:uppercase
小寫：text-tansform:lowercase
首字母大寫：text-transform:capitalize
正常：text-transform:none - 行
（1）行間距
line-height用于設置行高，行高越大則行 間距越大。
行間距 = line-height – font-size
（2）文本修飾
text-decoration屬性，用來給文本添加各 種修飾。通過它可以為文本的上方、下方 或者中間添加線條。
可選值：
underline
overline
line-through
none
（3）對齊文本
text-align用于設置文本的對齊方式。
可選值：
left：左對齊
right：右對齊
justify：兩邊對齊
center：居中對齊
（4）首行縮進
text-indent用來設置首行縮進。
該樣式需要指定一個長度，并且只對第一 行生效
