HTML 文本標(biāo)簽

  • <em> 標(biāo)簽用于表示一段內(nèi)容的著重點(diǎn)
  • <strong> 用于表示一個(gè)內(nèi)容的重要性酝掩、

通常em顯示為斜體上真,而strong顯示為粗體

  • <i> 標(biāo)簽會(huì)使文字變成斜體
  • <b>標(biāo)簽會(huì)使文字變成粗體
  • <small> 標(biāo)簽比父元素小的字號(hào)

small標(biāo)簽表示細(xì)則一類的旁注登下,通常包括 免責(zé)聲明、注意事項(xiàng)、法律限制菱皆、版權(quán)信 息等嘿棘。

  • <big> 標(biāo)簽比父元素大的字號(hào)
  • <cite>標(biāo)簽表示可以指明對(duì)某內(nèi)容的引用和參考

例如:
<p>
<cite>《七龍珠》</cite>講的是召喚神龍的故事劲腿。
</p>

  • <q>標(biāo)簽引號(hào)
  • <blockquote>長(zhǎng)引用

例如:
孟子曾經(jīng)說(shuō)過(guò):
<blockquote>天將降大任于是人也...</blockquote>
他說(shuō)的真對(duì)啊鸟妙!
<p>孔子曾經(jīng)說(shuō)過(guò):<q>學(xué)而時(shí)習(xí)之不亦說(shuō)乎</q></p>

  • <s up> 和<s ub>定義上下標(biāo)

上標(biāo)主要用于表示類似于103中的3焦人。
下標(biāo)則用于表示類似余H2O中的2挥吵。

  • <ins>表示插入內(nèi)容下劃線
  • <del> 刪除線
  • <pre>預(yù)格式化文本
  • <code> 表示一段代碼
    列表

pre包住code來(lái)表示一段代碼。
<pre>
<code>
function fun(){ alert("hello");
}
</code>
</pre>

列表

列表

1.有序列表 
<!-- 
        有序列表和無(wú)序列表類似花椭,只不過(guò)它使用ol來(lái)代替ul
        有序列表使用有序的序號(hào)作為項(xiàng)目符號(hào)
        type屬性忽匈,可以指定序號(hào)的類型,可選值:
            1矿辽,默認(rèn)值丹允,使用阿拉伯?dāng)?shù)字
            a/A,采用小寫(xiě)或大寫(xiě)字母作為序號(hào)
            i/I袋倔,采用小寫(xiě)或大寫(xiě)的羅馬數(shù)字作為序號(hào)
        ol也是塊元素
     -->
 <ol>
       <li>列表項(xiàng)1</li> 
       <li>列表項(xiàng)2</li>  
        <li>列表項(xiàng)3</li> 
  </ol>
<!-- 
        無(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都是塊元素
     -->
2.無(wú)序列表 
 <ul>
        <li>列表項(xiàng)1</li>  
        <li>列表項(xiàng)2</li> 
        <li>列表項(xiàng) 3</li>
  </ul>
3.定義列表 
<!-- 
        定義列表用來(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>定義項(xiàng)1</dt> 
        <dd>定義描述1</dd> 
         <dt>定義項(xiàng)2</dt>
         <dd>定義描述2</dd>  
         <dt>定義項(xiàng)3</dt> 
         <dd>定義描述3</dd> 
 </dl>

文本的格式化
單位

  • px 像素
  • % 百分比
  • em 1em=1font-size
  • rgb 顏色值 0-255 %0-100% 16進(jìn)制 #0000ff
 在CSS可以直接使用顏色的單詞來(lái)表示不同的顏色
 *      紅色:red
 *      藍(lán)色:blue
 *      綠色:green    
 *   也可以使用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
 *              100%表示255
 *   也可以使用十六進(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)寫(xiě)
 *          比如:#ff0000 可以寫(xiě)成 #f00
 *          #abc  #aabbcc       
 *          
 */
            /*background-color: rgb(161,187,215);*/
                
                /* background-color: rgb(100%,50%,50%); */

                /* background-color: #0000ff; */
                
                /*background-color: #00f;*/
                
                /* background-color: #084098; */
字體分類
  • serif(襯線字體)
  • sans-serif(非襯線字體)
  • monospace (等寬字體)
  • cursive (草書(shū)字體)
  • fantasy (虛幻字體)
斜體和粗體
  • font-style用來(lái)指定文本的斜體婚苹。
  • 指定斜體:font-style:italic
  • 指定非斜體:font-style:normal
  • font-weight用來(lái)指定文本的粗體岸更。
  • 指定粗體:font-weight:bold
  • 指定非粗體:font- weight:normal
字體屬性簡(jiǎn)寫(xiě)

font可以一次性同時(shí)設(shè)置多個(gè)字體的樣式。
語(yǔ)法: – font:加粗 斜體 小型大寫(xiě) 大小/行高 字體
這里前邊幾個(gè)加粗膊升、斜體和小型大寫(xiě)的順 序無(wú)所謂怎炊,也可以不寫(xiě),但是大小和字體 必須寫(xiě)且必須寫(xiě)到后兩個(gè)。

行間距

line-height用于設(shè)置行高评肆,行高越大則行 間距越大债查。
行間距 = line-height – font-size

通過(guò)設(shè)置line-height可以間接的設(shè)置行高
可以接收的值:
1.直接接收一個(gè)大小
2.可以指定一個(gè)百分?jǐn)?shù),則會(huì)相對(duì)于字體去計(jì)算行高
3.可以直接傳一個(gè)數(shù)值瓜挽,則行高會(huì)設(shè)置字體大小相應(yīng)的倍數(shù)

大寫(xiě)化

text-transform樣式用于將元素中的字母全都變成大寫(xiě)盹廷。
大寫(xiě):text-transform:uppercase
小寫(xiě):text- tansform:lowercase
首字母大寫(xiě):text-transform:capitalize
正常:text-transform:none

字體的其他樣式

font-style可以用來(lái)設(shè)置文字的斜體
- 可選值:
normal 默認(rèn)值,文字正常顯示
italic 文字會(huì)以斜體顯示
oblique 文字會(huì)以傾斜的效果顯示
- 大部分瀏覽器都不會(huì)對(duì)傾斜和斜體做區(qū)分久橙,也就是說(shuō)我們?cè)O(shè)置italic和oblique效果是一樣的
- 一般我們只會(huì)使用italic

font-weight可以用來(lái)設(shè)置文本的加粗效果
- 可選值:
normal 默認(rèn)值速和,文字正常顯示
bold 文字加粗顯示
該樣式也可以指定100-900之間的9個(gè)值
但是由于用戶的計(jì)算機(jī)往往沒(méi)有這么多級(jí)別的字體,所以200有可能比100粗剥汤,但也有可能是一樣的

font-variant可以用來(lái)設(shè)置小型大寫(xiě)字母
- 可選值:
normal 默認(rèn)值颠放,文字正常顯示
small-caps 文本以小型大寫(xiě)字母顯示
小型大寫(xiě)字母:
將所有的字母都以大寫(xiě)形式顯示,但是小寫(xiě)字母的小型大寫(xiě)吭敢,要比大寫(xiě)字母小一些

文本樣式

text-transform可以用來(lái)設(shè)置文本的大小寫(xiě)
可選值:
none 默認(rèn)值碰凶,該怎么顯示就怎么顯示,不做任何處理
capitalize 單詞的首字母大寫(xiě)鹿驼,通過(guò)空格來(lái)識(shí)別單詞
uppercase 所有的字母都大寫(xiě)
lowercase 所有的字母都小寫(xiě)

text-decoration可以用來(lái)設(shè)置文本的修飾
可選值:
none:默認(rèn)值欲低,不添加任何修飾,正常顯示
underline 為文本添加下劃線
overline 為文本添加上劃線
line-through 為文本添加刪除線

letter-spacing用來(lái)設(shè)置字符之間的間距畜晰。
word-spacing用來(lái)設(shè)置單詞之間的間距砾莱。
這兩個(gè)屬性都可以直接指定一個(gè)長(zhǎng)度或百 分?jǐn)?shù)作為值。正數(shù)代表的是增加距離凄鼻,而 負(fù)數(shù)代表減少距離腊瑟。

text-align用于設(shè)置文本的對(duì)齊方式
可選值:
left 默認(rèn)值,文本靠左對(duì)齊
right 文本靠右對(duì)齊
center 文本居中對(duì)齊
justify 兩端對(duì)齊
- 通過(guò)調(diào)整文本之間的空格的大小块蚌,來(lái)達(dá)到一個(gè)兩端對(duì)齊的目的

首行縮進(jìn)

text-indent用來(lái)設(shè)置首行縮進(jìn)
這個(gè)值一般都會(huì)使用em作為單位
當(dāng)給它指定一個(gè)正值時(shí)闰非,會(huì)自動(dòng)向右側(cè)縮進(jìn)指定的像素
如果為它指定一個(gè)負(fù)值,則會(huì)向左移動(dòng)指定的像素
通過(guò)這種方式可以將一些不想顯示的文字隱藏起來(lái)

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末峭范,一起剝皮案震驚了整個(gè)濱河市财松,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌纱控,老刑警劉巖辆毡,帶你破解...
    沈念sama閱讀 206,968評(píng)論 6 482
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異甜害,居然都是意外死亡舶掖,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,601評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門(mén)唾那,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)访锻,“玉大人,你說(shuō)我怎么就攤上這事闹获∑谌” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 153,220評(píng)論 0 344
  • 文/不壞的土叔 我叫張陵避诽,是天一觀的道長(zhǎng)龟虎。 經(jīng)常有香客問(wèn)我,道長(zhǎng)沙庐,這世上最難降的妖魔是什么鲤妥? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 55,416評(píng)論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮拱雏,結(jié)果婚禮上棉安,老公的妹妹穿的比我還像新娘。我一直安慰自己铸抑,他們只是感情好贡耽,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,425評(píng)論 5 374
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著鹊汛,像睡著了一般蒲赂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上刁憋,一...
    開(kāi)封第一講書(shū)人閱讀 49,144評(píng)論 1 285
  • 那天滥嘴,我揣著相機(jī)與錄音,去河邊找鬼至耻。 笑死若皱,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的尘颓。 我是一名探鬼主播是尖,決...
    沈念sama閱讀 38,432評(píng)論 3 401
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼泥耀!你這毒婦竟也來(lái)了饺汹?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 37,088評(píng)論 0 261
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤痰催,失蹤者是張志新(化名)和其女友劉穎兜辞,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體夸溶,經(jīng)...
    沈念sama閱讀 43,586評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡逸吵,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,028評(píng)論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了缝裁。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片扫皱。...
    茶點(diǎn)故事閱讀 38,137評(píng)論 1 334
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出韩脑,到底是詐尸還是另有隱情氢妈,我是刑警寧澤,帶...
    沈念sama閱讀 33,783評(píng)論 4 324
  • 正文 年R本政府宣布段多,位于F島的核電站首量,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏进苍。R本人自食惡果不足惜加缘,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,343評(píng)論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望觉啊。 院中可真熱鬧拣宏,春花似錦、人聲如沸杠人。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,333評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)搜吧。三九已至市俊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間滤奈,已是汗流浹背摆昧。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 31,559評(píng)論 1 262
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留蜒程,地道東北人绅你。 一個(gè)月前我還...
    沈念sama閱讀 45,595評(píng)論 2 355
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像昭躺,于是被迫代替她去往敵國(guó)和親忌锯。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,901評(píng)論 2 345

推薦閱讀更多精彩內(nèi)容

  • 文本標(biāo)簽 1. 和 em標(biāo)簽用于表示一段內(nèi)容中的著重點(diǎn)领炫。strong標(biāo)簽用于表示一個(gè)內(nèi)容的重要性偶垮。這兩個(gè)標(biāo)簽可以單...
    心軟脾氣硬01閱讀 2,872評(píng)論 0 0
  • 一,文本標(biāo)簽 (1)<em>和<strong>,<i>,<b>,<cite>標(biāo)簽 通常em顯示為斜體帝洪,而stron...
    HDhandi閱讀 1,104評(píng)論 0 0
  • 文本標(biāo)簽&樣式 有語(yǔ)意 em標(biāo)簽用于表示一段內(nèi)容中的著重點(diǎn)似舵。(斜體)strong標(biāo)簽用于表示一個(gè)內(nèi)容的重要性。(粗...
    梵高先生uu閱讀 459評(píng)論 0 0
  • 一葱峡、文本標(biāo)簽 <em>和<strong> em標(biāo)簽用于表示一段內(nèi)容中的著重點(diǎn)砚哗。strong標(biāo)簽用于表示一個(gè)內(nèi)容的重...
    咻咻咻滴趙大妞閱讀 1,297評(píng)論 0 1
  • HTML標(biāo)簽解釋大全 一、HTML標(biāo)記 標(biāo)簽:!DOCTYPE 說(shuō)明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,225評(píng)論 1 41