整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          前端HTML篇-05HTML修飾標簽

          前端HTML篇-05HTML修飾標簽

          1. 修飾標簽的作用是什么?
          2. 修飾標簽包含了哪些元素?
          3. 修飾標簽常用的元素作用(重點)?

          修飾標簽的作用?

          突出一篇文章的重點區域,快速修飾文本內容的樣式,避免全篇文章都是白紙黑字,引起視覺疲勞。

          修飾過后的文章

          修飾標簽的元素

          • 斜體

          作用:文字傾斜

          標簽:i、em

          區別:em是會被搜索引擎收錄

          <i>我是傾斜標簽i</i>
          <em>我是傾斜標簽em</em>
          

          傾斜效果

          • 粗體

          作用:文字加粗

          標簽:b、strong

          區別:strong是會被搜索引擎收錄

          <b>我是加粗標簽b</b>
          <strong>我是加粗標簽strong</strong>
          

          加粗效果

          • 上下標

          作用:對文本進行補充說明

          標簽:sup上標sub下標

          上下標運用

          上下標效果

          • 劃線標

          作用:對文本增強注意

          標簽:ins下劃線del刪除線

          劃線標運用

          劃線標效果

          • 顯示標

          作用:對文本進行高亮顯示

          標簽:mark

          顯示標運用

          顯示標效果

          • 縮小標

          作用:對文本進行縮小顯示

          標簽:small

          縮小標運用


          思維導圖

          修飾標簽

          更多前端教程,敬請關注微信公眾號:前端旺

          篇文章繼續為大家介紹html常用修飾標簽介紹。我們今天主要說下樣式標簽<span>、內容修飾標簽<b><i>等的語法以及使用技巧。

          1)樣式標簽<span>

          使用語法:<span>文章內容</span>

          <span>標簽是沒有語義的,它的作用就是為了設置單獨的樣式用的。如果現在我們想要修改一篇文章中的幾個字字體效果,為它設置和其它文字不同的樣式,所以這樣情況下就可以用到<span>標簽了。比如我們設置字體顏色為藍色,并設置字號大小為30px,代碼如下圖所示:

          代碼在瀏覽器中顯示的效果就如下圖所示:我們可以清楚的看到被span標簽包裹的文字內容已經變成了藍色,字體大小也變成了30px;

          2)內容修飾標簽

          內容修飾標簽有很多,這里我們簡單的來列舉一下標簽的名稱以及標簽的作用。

          文字斜體標簽: <i></i>、<em></em>

          文字加粗標簽: <b></b>、<strong></strong>

          文字下標標簽: <sub></sub>

          文字上標標簽: <sup></sup>

          文字下劃線標簽: <ins></ins>

          文字刪除線標簽: <del></del>

          具體的代碼如下所示:

          代碼在瀏覽器中顯示的效果就如下圖所示:每個被標簽包裹的內容都賦予了其獨立的效果。

          好了以上就是我們所說的修飾標簽,每個標簽都有單獨的意義,在以后練習的時候可以自己多實踐一下,只有自己親自動手去寫了才能明白其中的含義以及效果。

          附贈一句經典語錄:每一天,都要盡心盡力的工作,每一件小事情,都力爭高效的完成,不是為了看到老板的笑臉,而是為了自身不斷的進步。喜歡我的文章的小伙伴記得關注一下哦,每天將為你更新最新知識。

          ext-decoration屬性介紹#

          • text-decoration屬性是用來設置文本修飾線呢,text-decoration屬性一共有4個值。

          text-decoration屬性值說明表#

          值作用none去掉文本修飾線underline設置下劃線overline設置上劃線line-through設置刪除線

          HTML標簽自帶修飾線#

          • 在開始實踐text-decoration屬性之前,筆者先給大家普及下HTML中的標簽自帶修飾線如:u標簽、s標簽,若有不全大家可以在下面評論中告訴筆者,畢竟筆者也是前端的一個小白,希望和大家相互交流,互幫互助,共同進步。

          u標簽#

          • 下面讓我們進入u標簽的實踐,u標簽自帶的是文本下劃線。
          • 代碼塊
          Copy<!DOCTYPE html>
          <html lang="en">
          
          <head>
           <meta charset="UTF-8">
           <meta name="viewport" content="width=device-width, initial-scale=1.0">
           <meta http-equiv="X-UA-Compatible" content="ie=edge">
           <title>設置文本修飾線</title>
           
          </head>
          <body>
           <u>成功不是擊敗別人,而是改變自己</u>
          </body>
          </html>
          • 結果圖

          主站蜘蛛池模板: 中文字幕无码一区二区免费 | 99国产精品欧美一区二区三区| 亚洲综合无码AV一区二区| 中文字幕日韩一区二区不卡| 中文字幕一区二区人妻性色| 国产在线观看一区精品| 一区二区三区亚洲视频| 精品国产一区二区三区| 亚洲高清毛片一区二区| 在线日产精品一区| 亚洲av无码一区二区三区人妖| 亚欧成人中文字幕一区| 久久婷婷色一区二区三区| 亚洲AV无码一区二区乱子伦| 久久精品国产一区二区电影| 国产激情一区二区三区 | 一区 二区 三区 中文字幕| 无码人妻久久一区二区三区蜜桃| 国产精品熟女视频一区二区| 精品国产区一区二区三区在线观看| 亚洲一本一道一区二区三区| 亚洲一区二区三区在线观看网站| 中文字幕av日韩精品一区二区 | 一区二区三区观看| 国产精品99无码一区二区| chinese国产一区二区| 夜夜添无码一区二区三区| 国产成人精品一区二区三区免费| 国产激情无码一区二区app| 日韩电影一区二区三区| 亚洲国产韩国一区二区| 亚洲欧美国产国产一区二区三区 | 亚洲AV网一区二区三区| 激情爆乳一区二区三区| 成人精品视频一区二区三区| 色一乱一伦一图一区二区精品| 亚洲美女视频一区二区三区| 日韩一区二区三区射精| 偷拍精品视频一区二区三区| 人妻少妇精品一区二区三区| 无码aⅴ精品一区二区三区浪潮|