前端文本標簽及文本樣式

文本標簽

em標簽用于表示一段內(nèi)容中的著重點。
strong標簽用于表示一個內(nèi)容的重要性梳凛。
通常em顯示為斜體霍衫,而strong顯示為粗體身堡。
i標簽中的內(nèi)容會以斜體顯示
b標簽中的內(nèi)容會以加粗顯示
small標簽中的內(nèi)容會比他的父元素中的文字要小一些
cite 網(wǎng)頁中所有的加書名號的內(nèi)容都可以使用cite標簽,表示參考的內(nèi)容权谁,
比如:書名 歌名 話劇名 電影名
q標簽表示一個短的引用(行內(nèi)引用)
q標簽引用的內(nèi)容剩檀,瀏覽器會默認加上引號
blockquote標簽表示一個長引用(塊級引用)
sup標簽 使用sup標簽來設(shè)置一個上標
sub標簽 sub標簽用來表示一個下標
del標簽 使用del標簽來表示一個刪除的內(nèi)容 del標簽中的內(nèi)容,會自動添加刪除線
ins標簽 ins表示一個插入的內(nèi)容
ins中的的內(nèi)容旺芽,會自動添加下劃線
pre標簽和code標簽
需要頁面中直接編寫一些代碼
pre是一個預(yù)格式標簽沪猴,會將代碼中的格式保存,不會忽略多個空格
code專門用來表示代碼
我們一般結(jié)合使用pre和code來表示一段代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        
    </style>
</head>
<body>
    <p>
        <em>哈哈哈采章,你起遲了</em>
    </p>
    <p>
        <strong>
            注意:早睡早起      
        </strong>
    </p>
    <p>
        <!-- i  ->icon圖標 -->
        <i>
            啦啦啦啦运嗜,就是這么強大
        </i>
    </p>
    <p>
        <b>多熱烈的白羊</b>
    </p>
    <p>
        ppppp就是你
        <small>pppp不是你</small>
        <big>bbbbbb是你是你就是你</big>
    </p>
    <p>
        <cite>《莉莉安》</cite>宋冬野
    </p>
    <p>
        安和橋:<q>宋冬野</q>
    </p>
    <div>
        南山南:<blockquote>宋冬野</blockquote>
    </div>
    <p>2<sup>2</sup></p>
    <p>
        薛之謙<sup><a href="#">[3]</a></sup>
    </p>
    <p>
        哈哈<sub>啦啦啦</sub>呵呵
    </p>
    <p>
        <del>100000</del><br>
        99999<br>
    </p>
    <p>
        加油你是最棒的<ins>自信 自制力 自強不息</ins>
    </p>
    <pre>
if(True):
    print(’相信自己‘)
    </pre>
    <pre>
        <code>
if(True):
    print(’你一定會很好的‘)
        </code>
    </pre>  
    
</body>
</html>

文本樣式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本屬性</title>
    <style type="text/css">
        /* text-decoration 設(shè)置文本屬性
        uppercase 全大寫
        lowercase 全小寫
        underline 下劃線
        overline 上劃線
        line-through 刪除線
        none 默認值*/

        .p1{
            text-transform: uppercase;
        }           
        .p2{
            text-transform: lowercase;

        }
        .p3{
            text-decoration:underline;
        }
        .p3{
            text-decoration: overline;
        }
        .p3{
            text-decoration: line-through;
        }
        a{
            text-decoration: none;
        }
        .p1{
            letter-spacing: 1px;
            word-spacing: 10px;
        }        
                /*letter-spacing 字符間距
                word-spacing  單詞間距*/
        .p4{
            text-align: center;
        }
            /*left 左對齊 
            right 右對齊
            justify 兩端對齊
            center 居中對齊*/
        .p5{
            font-size: 40px;
            text-indent: 2em;
        }
                /*首行縮進用 text-indent  用2em*/
    </style>
</head>
<body>
    <p class="p5">
        今天,人們的生活節(jié)奏非趁踔郏快担租,很多年輕人在就業(yè)市場面前感到了巨大的壓力。我大學(xué)畢業(yè)前就開始找工作了抵怎,很難找到我想要的工作奋救。我被拒了很多次,但當我被聘用的那一刻反惕,我感到了勝利
    </p>
    <a href="#">clj</a>
    <p class="p1">
    今天菠镇,人們的生活節(jié)奏非常快承璃,很多年輕人在就業(yè)市場面前感到了巨大的壓力利耍。我大學(xué)畢業(yè)前就開始找工作了,很難找到我想要的工作盔粹。我被拒了很多次隘梨,但當我被聘用的那一刻,我感到了勝利 
        I still remembered the day when I was interviewed. Before I came to the company, I had practised many times and my friends pretended to be the employers, asking me all kinds of questions. So I made some preparations and believed that I wouldn't lose control. At the beginning, the employers asked me some simple questions, which I had prepared, so I felt confident. But when they asked me about the company, I forgot to search enough information. But I told myself to calm down, so I expressed my wish to work here. Two days later, I was informed that I got the job. My heart was beating very fast, just liked I had conquered the world. 
    </p>
    <p class="p2">
        I got the job. My heart was beating very fast, just liked I had conquered the world. 
    </p>
    <p class="p3">
        I still remembered the day when I was interviewed. Before I came to the company, I had practised many times and my friends pretended to be the employers, asking me all kinds of questions. 
        
    </p>
    <p class="p4">
        今天舷嗡,人們的生活節(jié)奏非持崃裕快,很多年輕人在就業(yè)市場面前感到了巨大的壓力进萄。我大學(xué)畢業(yè)前就開始找工作了捻脖,很難找到我想要的工作锐峭。我被拒了很多次,但當我被聘用的那一刻可婶,我感到了勝利 
        I still remembered the day when I was interviewed. Before I came to the company, I had practised many times and my friends pretended to be the employers, asking me all kinds of questions. So I made some preparations and believed that I wouldn't lose control. At the beginning, the employers asked me some simple questions, which I had prepared, so I felt confident. But when they asked me about the company, I forgot to search enough information. But I told myself to calm down, so I expressed my wish to work here. Two days later, I was informed that I got the job. My heart was beating very fast, just liked I had conquered the world. 
    </p>
    
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字體的其他樣式</title>
    <style type="text/css">
        .p1{
            color: pink;
            font-size: 40px;
            font-family: '宋體';
            font-style: italic;
                /*italic 斜體*/
            font-weight: bold;
                /*normal 默認粗細*/
                /*bold 粗體*/
                /*100 - 900 也可以設(shè)置粗體*/
            font-variant: small-caps;
                /*font-variant 設(shè)置字母小型大寫 
                small-caps 小型大寫字母*/
        }
        .p3{
            font:italic small-caps bold 40px monospace;
        }
    </style>
</head>
<body>
    <p class="p1">時常想起你沿癞,想起那些回憶 ACDFEEEEE</p><p class="p3">時常想起你,想起那些回憶 ACDFEEEEE</p>
</body>
</html>
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末矛渴,一起剝皮案震驚了整個濱河市椎扬,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌具温,老刑警劉巖蚕涤,帶你破解...
    沈念sama閱讀 207,113評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異铣猩,居然都是意外死亡揖铜,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,644評論 2 381
  • 文/潘曉璐 我一進店門达皿,熙熙樓的掌柜王于貴愁眉苦臉地迎上來蛮位,“玉大人,你說我怎么就攤上這事鳞绕∈剩” “怎么了?”我有些...
    開封第一講書人閱讀 153,340評論 0 344
  • 文/不壞的土叔 我叫張陵们何,是天一觀的道長萄焦。 經(jīng)常有香客問我,道長冤竹,這世上最難降的妖魔是什么拂封? 我笑而不...
    開封第一講書人閱讀 55,449評論 1 279
  • 正文 為了忘掉前任,我火速辦了婚禮鹦蠕,結(jié)果婚禮上冒签,老公的妹妹穿的比我還像新娘。我一直安慰自己钟病,他們只是感情好萧恕,可當我...
    茶點故事閱讀 64,445評論 5 374
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著肠阱,像睡著了一般票唆。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上屹徘,一...
    開封第一講書人閱讀 49,166評論 1 284
  • 那天走趋,我揣著相機與錄音,去河邊找鬼噪伊。 笑死簿煌,一個胖子當著我的面吹牛氮唯,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播姨伟,決...
    沈念sama閱讀 38,442評論 3 401
  • 文/蒼蘭香墨 我猛地睜開眼惩琉,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了授滓?” 一聲冷哼從身側(cè)響起琳水,我...
    開封第一講書人閱讀 37,105評論 0 261
  • 序言:老撾萬榮一對情侶失蹤肆糕,失蹤者是張志新(化名)和其女友劉穎般堆,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體诚啃,經(jīng)...
    沈念sama閱讀 43,601評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡淮摔,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,066評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了始赎。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片和橙。...
    茶點故事閱讀 38,161評論 1 334
  • 序言:一個原本活蹦亂跳的男人離奇死亡耕拷,死狀恐怖装黑,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情嵌溢,我是刑警寧澤五辽,帶...
    沈念sama閱讀 33,792評論 4 323
  • 正文 年R本政府宣布办斑,位于F島的核電站,受9級特大地震影響杆逗,放射性物質(zhì)發(fā)生泄漏乡翅。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,351評論 3 307
  • 文/蒙蒙 一罪郊、第九天 我趴在偏房一處隱蔽的房頂上張望蠕蚜。 院中可真熱鬧,春花似錦悔橄、人聲如沸靶累。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,352評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽尺铣。三九已至,卻和暖如春争舞,著一層夾襖步出監(jiān)牢的瞬間凛忿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,584評論 1 261
  • 我被黑心中介騙來泰國打工竞川, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留店溢,地道東北人叁熔。 一個月前我還...
    沈念sama閱讀 45,618評論 2 355
  • 正文 我出身青樓,卻偏偏與公主長得像床牧,于是被迫代替她去往敵國和親荣回。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 42,916評論 2 344

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

  • 和 em標簽用于表示一段內(nèi)容中的著重點戈咳。 strong標簽用于表示一個內(nèi)容的重要性心软。這兩個標簽可以單獨使用,也可以...
    2simple閱讀 1,147評論 0 0
  • 一著蛙,文本標簽 (1)<em>和<strong>,<i>,<b>,<cite>標簽 通常em顯示為斜體删铃,而stron...
    HDhandi閱讀 1,104評論 0 0
  • HTML5< !--...--> 標簽 comment 注釋標簽用于在源文檔中插入注釋。注釋內(nèi)容不會被瀏覽器顯示踏堡。...
    野小寶閱讀 1,313評論 0 10
  • HTML標簽解釋大全 一猎唁、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,225評論 1 41
  • 陳川Lethe閱讀 4,008評論 0 0