文本標(biāo)簽

要控制文本的格式，除了可以設(shè)置標(biāo)簽的style屬性，指定樣式，還可以直接通過(guò)標(biāo)簽來(lái)執(zhí)行樣式，這些標(biāo)簽可以稱之為 屬性標(biāo)簽。

1. <em>和<strong>
   em標(biāo)簽用于表示一段內(nèi)容中的著重點(diǎn)。
   strong標(biāo)簽用于表示一個(gè)內(nèi)容的重要性。
   這兩個(gè)標(biāo)簽可以單獨(dú)使用，也可以一起使用

<p>
<strong>警告：任何情況下不要接近僵尸。</strong>
他們只是 <em>看起來(lái)</em> 很友好，實(shí)際上他們是為了吃你的胳膊！
</p>

通常em顯示為斜體，而strong顯示為粗體。

2. <i>和<b>
   i標(biāo)簽會(huì)使文字變成斜體。
   b標(biāo)簽會(huì)使文字變成粗體。

<i>我是i標(biāo)簽中的內(nèi)容</i>
<b>我是b標(biāo)簽中的內(nèi)容</b>

這兩個(gè)標(biāo)簽和em和strong類似，但是這兩 個(gè)標(biāo)簽沒(méi)有語(yǔ)義。
所以根據(jù)html5標(biāo)準(zhǔn)，當(dāng)我們只想設(shè)置文本 特殊顯示，而不需要強(qiáng)調(diào)內(nèi)容時(shí)就可以使 用i和b標(biāo)簽。

3. <small>
   small標(biāo)簽表示細(xì)則一類的旁注，通常包括 免責(zé)聲明、注意事項(xiàng)、法律限制、版權(quán)信 息等。
   瀏覽器在顯示small標(biāo)簽時(shí)會(huì)顯示一個(gè)比父 元素小的字號(hào)。

我是p標(biāo)簽中的內(nèi)容<small>我是small標(biāo)簽中的內(nèi)容</small>

4. <cite>
   使用cite標(biāo)簽可以指明對(duì)某內(nèi)容的引用或參 考。例如，戲劇、文章或圖書的標(biāo)題，歌 曲、電影、照片或雕塑的名稱等。

<p>
      <cite>《西游記》是講師徒四人西天取經(jīng)的故事</cite>
<\p>

5. <blockquote>和<q>
   blockquote和q表示標(biāo)記引用的文本。
   blockquote用于長(zhǎng)引用，q用于短引用
   在兩個(gè)標(biāo)簽中還可以使用cite屬性來(lái)表示引 用的地址。

孟子曾經(jīng)說(shuō)過(guò)：
<blockquote>天將降大任于是人也...</blockquote>
他說(shuō)的真對(duì)??！

<p>孔子曾經(jīng)說(shuō)過(guò)：<q>學(xué)而時(shí)習(xí)之不亦說(shuō)乎</q></p>

6. <sup>和<sub>
   sup和sub用于定義上標(biāo)和下標(biāo)。
   上標(biāo)主要用于表示類似于103中的3。
   下標(biāo)則用于表示類似余H2O中的2。

<p>2<sup>2<\sub></p>
<p>H<sub>2</sub>O</p>

7. <ins>和<del>
   ins表示插入的內(nèi)容，顯示時(shí)通常會(huì)加上下 劃線。

郭敬明的個(gè)頭兒真<ins>高啊</ins>！

del表示刪除的內(nèi)容，顯示時(shí)通常會(huì)加上刪 除線。

<del>17.75</del><br>

8. <code>和<pre>
   如果你的內(nèi)容包含代碼示例或文件名，就 可以使用code元素。
   pre元素表示的是預(yù)格式化文本，可以使用
   pre包住code來(lái)表示一段代碼。

<pre>
        <code>
          if true:
                  print('hello')        
        </code>
</pre>

列表

1. 有序列表：使用ol和li來(lái)創(chuàng)建一個(gè)有序列表

<ol>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ol>

2. 無(wú)序列表：使用ul和li來(lái)創(chuàng)建一個(gè)無(wú)序列表。

<ul>
<li>列表項(xiàng)1</li>
<li>列表項(xiàng)2</li>
<li>列表項(xiàng)3</li>
</ul>

3. 定義列表：使用dl、dd、dt來(lái)創(chuàng)建一個(gè)定義列表

<dl>
<dt>定義項(xiàng)1</dt>
<dd>定義描述1</dd>
<dt>定義項(xiàng)2</dt>
<dd>定義描述2</dd>
<dt>定義項(xiàng)3</dt>
<dd>定義描述3</dd>
</dl>

    <!-- 
    列表就相當(dāng)于去超市購(gòu)物時(shí)的那個(gè)購(gòu)物清單，在HTML也可以創(chuàng)建列表，在網(wǎng)頁(yè)中一共有三種列表：
        1、無(wú)序列表
        2、有序列表
        3、定義列表
     -->
    <!-- 
        無(wú)序列表
            使用ul標(biāo)簽來(lái)創(chuàng)建一個(gè)無(wú)序列表
            使用li在ul中創(chuàng)建一個(gè)一個(gè)的列表項(xiàng)，一個(gè)li就是一個(gè)列表項(xiàng)
        通過(guò)type屬性可以修改無(wú)序列表的項(xiàng)目符號(hào)，可選值：
            disc：默認(rèn)值，實(shí)心的圓點(diǎn)
            square：實(shí)心的方塊
            circle：空心的圓圈
        注意：默認(rèn)的項(xiàng)目符號(hào)我們一般都不使用
              如果需要設(shè)置項(xiàng)目符號(hào)，則可以采用為li設(shè)置背景圖片的方式來(lái)設(shè)置
        ul和li都是塊元素
     -->
    <ul>
        <li>西門大官人</li>
        <li>柴大官人</li>
        <li>許大官人</li>
        <li>唐僧大官人</li>
    </ul>

    <!-- 
        有序列表和無(wú)序列表類似，只不過(guò)它使用ol來(lái)代替ul
        有序列表使用有序的序號(hào)作為項(xiàng)目符號(hào)
        type屬性，可以指定序號(hào)的類型，可選值：
            1，默認(rèn)值，使用阿拉伯?dāng)?shù)字
            a/A，采用小寫或大寫字母作為序號(hào)
            i/I，采用小寫或大寫的羅馬數(shù)字作為序號(hào)
        ol也是塊元素
     -->
    <ol type="1">
        <li>結(jié)構(gòu)</li>
        <li>表現(xiàn)</li>
        <li>行為</li>
    </ol>

    <!-- 
        列表之間都是可以互相嵌套，可以在無(wú)序列表中放個(gè)有序列表，也可以在有序列表中放一個(gè)無(wú)序列表
     -->
    <p>菜譜</p>
    <ul>
        <li>
            魚香肉絲
            <ol>
                <li>魚</li>
                <li>香</li>
                <li>肉絲</li>
            </ol>
        </li>
        <li>
            宮保雞丁
            <ul>
                <li>宮保</li>
                <li>雞丁</li>
            </ul>
        </li>
        <li>過(guò)橋茄子</li>
    </ul>

    <!-- 
        定義列表用來(lái)對(duì)一些詞匯或內(nèi)容進(jìn)行定義
        使用dl來(lái)創(chuàng)建一個(gè)定義列表，它有兩個(gè)子標(biāo)簽
            dt：被定義的內(nèi)容
            dd：對(duì)定義內(nèi)容的描述
        同樣，dl、ul、ol之間都可以互相嵌套
     -->
    <dl>
        <dt>武松</dt>
        <dd>景陽(yáng)岡打虎英雄，戰(zhàn)斗力99</dd>
        <dd>后打死西門慶，投奔梁山</dd>
        <dt>武大</dt>
        <dd>著名餐飲企業(yè)家，戰(zhàn)斗力0</dd>
    </dl>

文本格式化

1.顏色像素
長(zhǎng)度單位
像素px
- 像素是我們?cè)诰W(wǎng)頁(yè)中使用得最多的一個(gè)單位
一個(gè)像素就相當(dāng)于屏幕中的一個(gè)小點(diǎn)
我們的屏幕實(shí)際上就是由這些像素點(diǎn)構(gòu)成的
但是這些像素點(diǎn)是不能直接看見的
- 不同顯示器一個(gè)像素的大小也不相同
顯示效果越好、越清晰，像素就越小，反之像素越大
百分比%
- 也可以將單位設(shè)置為一個(gè)百分比的形式
這樣瀏覽器將會(huì)根據(jù)其父元素的樣式來(lái)計(jì)算該值
- 使用百分比的好處是，當(dāng)父元素的屬性值發(fā)生變化時(shí)，子元素也會(huì)按照比例發(fā)生改變
- 在我們創(chuàng)建一個(gè)自適應(yīng)的頁(yè)面時(shí)，經(jīng)常使用百分比作為單位
em
- em和百分比類似，它是相對(duì)于當(dāng)前元素的字體大小來(lái)計(jì)算的
- 1em = 1font-size
- 使用em時(shí)，當(dāng)字體大小發(fā)生改變時(shí)，em也會(huì)隨之改變
- 當(dāng)設(shè)置字體相關(guān)的樣式時(shí)，經(jīng)常會(huì)使用em

2. 顏色單位
   （1）在CSS可以直接使用顏色的單詞來(lái)表示不同的顏色
   紅色：red
   藍(lán)色：blue
   綠色：green
   （2）也可以使用RGB值來(lái)表示不同的顏色
   所謂的RGB值指的是通過(guò)Red Green Blue三元色，
   通過(guò)這三種顏色的不同的濃度，來(lái)表示出不同的顏色

例子：rgb(紅色的濃度,綠色的濃度,藍(lán)色的濃度);
顏色的濃度需要一個(gè)0-255之間的值，255表示最大，0表示沒(méi)有
濃度也可以采用一個(gè)百分?jǐn)?shù)來(lái)設(shè)置，需要一個(gè)0% - 100%之間的數(shù)字
使用百分?jǐn)?shù)最終也會(huì)轉(zhuǎn)換為0-255之間的數(shù)
0%表示0
00%表示255
(3)也可以使用十六進(jìn)制的rgb值來(lái)表示顏色，原理和上邊RGB原理一樣，只不過(guò)使用十六進(jìn)制數(shù)來(lái)代替，使用三組兩位的十六進(jìn)制數(shù)組來(lái)表示一個(gè)顏色，每組表示一個(gè)顏色
第一組表示紅色的濃度，范圍00-ff

第二組表示綠色的濃度，范圍00-ff
第三組表示藍(lán)色的濃度，范圍00-ff
語(yǔ)法：#紅色綠色藍(lán)色
十六進(jìn)制：
0 1 2 3 4 5 6 7 8 9 a b c d e f
00 - ff
00表示沒(méi)有，相當(dāng)于rgb中的0
ff表示最大，相當(dāng)于rgb中255
紅色：#ff0000
像這種兩位兩位重復(fù)的顏色，可以簡(jiǎn)寫
比如：#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表示一個(gè)顏色和RGB類似，只不過(guò)比
RGB多了一個(gè)A（alpha）來(lái)表示透明度， 透明度需要一個(gè)0-1的值。0表示完全透明，
1表示完全不透明。
– RGBA(255,100,5,0.5)

3. 文字大小
   font-size用來(lái)指定文字的大小。
   設(shè)置文字的大小，瀏覽器中一般默認(rèn)的文字大小都是16px，font-size設(shè)置的并不是文字本身的大小，在頁(yè)面中，每個(gè)文字都是處在一個(gè)看不見的框中的，我們?cè)O(shè)置的font-size實(shí)際上是設(shè)置格的高度，并不是字體的大小，一般情況下文字都要比這個(gè)格要小一些，也有時(shí)會(huì)比格大，根據(jù)字體的不同，顯示效果也不同
   通過(guò)font-family可以指定文字的字體，當(dāng)采用某種字體時(shí)，如果瀏覽器支持則使用該字體，如果字體不支持，則使用默認(rèn)字體。
   該樣式可以同時(shí)指定多個(gè)字體，多個(gè)字體之間使用“,”分開
   當(dāng)采用多個(gè)字體時(shí)，瀏覽器會(huì)優(yōu)先使用前邊的字體，如果前邊沒(méi)有，再嘗試下一個(gè)
   （1）通過(guò)font-family可以指定標(biāo)簽中文字使用 的字體。
   例如：
   p{font-family:Arial}
   – 上邊這行代碼指定了p標(biāo)簽中使用名為arial作 為字體
   一般來(lái)說(shuō)只有用戶計(jì)算機(jī)中安裝了我們指 定的字體時(shí)，它才會(huì)顯示，否則這行代碼 是沒(méi)有意義的。
   （2）通過(guò)font-family可以同時(shí)指定多個(gè)字體。
   例如：
   p{font-family:Arial , Helvetica , sans-serif}
   如上我實(shí)際上指定了三種字體，那么到底 使用的是哪個(gè)呢？瀏覽器會(huì)優(yōu)先使用第一 個(gè)，如果沒(méi)有找到則使用第二個(gè)，以此類 推。
   這里面sans-serif并不是指的具體某一個(gè)字 體。而是一類字體。
   （2）字體分類
   serif（襯線字體）
   sans-serif（非襯線字體）
   monospace （等寬字體）
   cursive （草書字體）
   fantasy （虛幻字體）
   以上這些分類都是一些大的分類，并沒(méi)有 涉及具體的類型，如果將字體指定為這些 格式，瀏覽器會(huì)自己選擇指定類型的字體。
   （3）斜體和粗體
   font-style用來(lái)指定文本的斜體。
   指定斜體：font-style:italic
   指定非斜體：font-style:normal
   font-weight用來(lái)指定文本的粗體。
   指定粗體：font-weight:bold
   指定非粗體：font-weight:normal
   （4）小型大寫字母
   font-variant屬性可以將字母類型設(shè)置為小 型大寫。在該樣式中，字母看起來(lái)像是稍 微縮小了尺寸的大寫字母。
   – font-variant:small-caps
   （5）字體屬性的簡(jiǎn)寫
   font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式。
   語(yǔ)法：
   – font:加粗 斜體 小型大寫 大小/行高 字體
   這里前邊幾個(gè)加粗、斜體和小型大寫的順 序無(wú)所謂，也可以不寫，但是大小和字體 必須寫且必須寫到后兩個(gè)。
   （5）大寫化
   text-transform樣式用于將元素中的字母全都變成大寫。
   大寫：text-transform:uppercase
   小寫：text-tansform:lowercase
   首字母大寫：text-transform:capitalize
   正常：text-transform:none
4. 行
   （1）行間距
   line-height用于設(shè)置行高，行高越大則行 間距越大。
   行間距 = line-height – font-size
   （2）文本修飾
   text-decoration屬性，用來(lái)給文本添加各 種修飾。通過(guò)它可以為文本的上方、下方 或者中間添加線條。
   可選值：
   underline
   overline
   line-through
   none
   （3）對(duì)齊文本
   text-align用于設(shè)置文本的對(duì)齊方式。
   可選值：
   left：左對(duì)齊
   right：右對(duì)齊
   justify：兩邊對(duì)齊
   center：居中對(duì)齊
   （4）首行縮進(jìn)
   text-indent用來(lái)設(shè)置首行縮進(jìn)。
   該樣式需要指定一個(gè)長(zhǎng)度，并且只對(duì)第一 行生效