HTML文本標簽、列表和文本格式化的方法

這篇文章主要介紹“HTML文本標簽、列表和文本格式化的方法”，在日常操作中，相信很多人在HTML文本標簽、列表和文本格式化的方法問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”HTML文本標簽、列表和文本格式化的方法”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

　　一、文本標簽

　　em：用來表示一段內容的著重點，語氣上的強調。一般顯示為斜體

　　i：是斜體顯示，和em顯示效果一樣。h6規定不需要著重的內容而是單純加粗或斜體可以用i或b。用的不多

　　strong：用來表示一個內容的重要性。一般顯示為粗體。與em可以單獨使用，也可以一起使用。

　　b：加粗顯示，跟strong顯示效果一樣。

　　small：標簽中的內容會比他的父元素中內容小一點。在h6中來表示一些細則中內容，如版本聲明，合同條款。

　　big：沒什么語義，很少使用。

　　cite：網頁中所有加書名號的內容都可以使用cite標簽，表示參考內容。比如書名、電影名等

　　q：表示短的引用（行內運用） ，自動加個引號。是通過css的before和after自動加的。樣式幾乎不用。

　　blockquote：表示長引用（塊級引用）。塊元素，獨占一行。b乎中用的多。

　　sup：把內容設置成上標顯示。如，數學中符號。或者在上標中加入超鏈接，如論文中、百度百科中。supremum的縮寫

　　sub：把內容設置成下表顯示。如，化學中分子式。subtitle字幕、下邊的意思

　　del：給內容中間加個橫杠，常用于原來價格的改變。購物網站中常用，如淘寶打折時。

　　ins：在內容下邊加個橫線，插入的一個內容。填空題的效果，英文insert

　　pre：預格式標簽，將代碼中的格式保存，不會弄成一行顯示，不會忽略空格，源代碼怎么寫，網頁就怎么顯示。技術博客中常用。

　　code：專門用來表示代碼，但是不會保留格式。往往結束使用，技術博客中常用。

　　二、列表（無序和有序列表之間都可以相互嵌套）

　　1、無序列表（使用ul-li標簽，ul和li都是塊元素）

　　默認前邊有個小圓點，即無序的項目列表。通過type屬性可以修改前邊的小圓點。

　　disc：默認值，實心的圓點； square：實心小方塊；circle：空心的圓圈。幾乎都不用。去掉項目符號，使用css。如果需要設置符號，可以為li設置背景圖片。

　　2、有序列表（使用ol-li標簽，也是塊元素）

　　默認前邊有類似1、2、3的項目編號。通過type屬性可以改變默認值。

　　可選擇：  阿拉伯數字1，默認值；大寫字母A；小寫字母a ；羅馬字母I；作為開頭

　　3、定義列表（dl-dt/dd，dt被定義的內容，dd對內容進行解釋，也可以相互嵌套）

　　用來對一些詞匯或內容進行定義。顯示效果，dt一行，dd一行，前面有空格

　　三、文本格式化

　　1、單位

　　像素

　　長度單位：px（像素）一個像素就相當于屏幕中的一個小點（小方塊），屏幕就是由像素點組成。像素點事不能肉眼識別，因為太小了。

　　分辨率：1366*768  不同顯示器的一個像素大小也不同，顯示效果好的，像素點就小。計算機中1個像素約是手機中的4倍。但是手機瀏覽器默認乘以4倍顯示，所以不會有問題

　　百分比

　　也可以設置成百分比，這瀏覽器會根據父元素的樣式來計算該值。

　　好處是當父元素屬性值發生變化時，子元素也會發生改變。創建自適應頁面，經常使用這種。

　　em

　　和百分比類似，根據當前元素的字體大小來計算的。1em=1font-size（字體大小）。font-size變em也變。設置字體相關的樣式時，使用em.

　　顏色（取色工具：FastStone）

　　1、使用顏色的單詞來表示顏色。

　　2、使用RGB值表示顏色。是指美術的三原色：Red、Green、Blue（紅、綠、藍），通過三原色的不同的濃度來表示不同顏色。

　　如：rgb（紅色的濃度，綠色的濃度、藍色的濃度），顏色的濃度需要一個0-255之間的值。使用截圖工具來看濃度的調配，rgb（255,250,232） 豆沙綠

　　濃度也可以使用百分數來表示，使用百分數最終也可以轉成0-255之間的值。

　　3、使用16進制的rgb值來表示顏色。三組兩位的16進制來表示顏色，#紅色綠色藍色，范圍#000000（黑色）-#FFFFFF（白色），FF轉成10進制就是255

　　每兩位重復的可以簡寫：如#ff0000（紅色）簡寫成#f00。#bfa 豆沙綠

　　2、字體

　　瀏覽器中默認的字體大小是16px。font-size設置的不是文字本身的大小，頁面中每個文字處于一個看不見的格中，我們設置的font-size設置的是格子的高度，一般情況

　　下文字都要比這個格小點，也有時比格子大。根據字體（微軟雅黑、宋體等）的不同顯示的效果不同。

　　font-family：可以指定瀏覽器中顯示的字體類型。當采用某種字體，如果瀏覽器支持則使用該字體，不支持（如采用英文字體去設置漢字）則采用默認字體。該樣式可同

　　時指定多種字體，font-family：arial，微軟雅黑。瀏覽器優先使用前邊，前邊沒有則使用下一個，還沒有使用默認。

　　瀏覽器中使用的字體使用的是電腦中安裝過的字體，沒有就不用。開發中字體用的太少，盡量不要使用。，有可能用戶電腦中沒有。

　　字體的分類：serif 襯線字體 ；sans-serif 非襯線字體；monospace 等寬字體；cursive 草書字體；fantasy 虛幻字體。

　　我們可以將字體設置為大的分類。大類中會微軟雅黑、宋體等具體的類。當設置為大的分類，瀏覽器會自動選出一種字體去使用。

　　font-style： 可以設置文字的斜體。

　　none：文字正常顯示；italic ：文字斜體顯示；oblique：文字傾斜顯示。大部分瀏覽器不會做區分，區別效果不大，人眼看不出區別。一般使用第二個。

　　font-weight ：設置文本的粗細。

　　bold：文字加粗顯示；normal：正常顯示；也可以設置數字100-900這9個級別的9個值，但是用戶的計算機沒有這么多級別的字體，不能達到效果。也就是200可能比100粗

　　也可能一樣，基本沒什么用。

　　font-variant ：設置小寫字母的大寫顯示，將所有字母大寫顯示，但是小寫字母比大寫字母的顯示小一點

　　normal：正常顯示；small-caps： 文本以小型大寫字母顯示。

　　3、大小寫

　　text-transform可將元素中的字母按樣式改變。

　　uppercase 所有字母全部大寫；  lowercase 全部小寫；capitalize :首字母大寫 none，正常顯示，大小寫分明。瀏覽器通過空格識別單詞。

　　4、文本修飾

　　text-decoration 給文本加修飾，通過他給文本上方、下方、中間加線條。

　　underline下方，下劃線 ； overline上方； line-through 中間，刪除線； none 正常顯示。

　　超鏈接自帶下劃線，因為它text-decoration默認值是underline ，自己可以更改，如設置為none，去掉下劃線

　　5、間距

　　letter-spacing 設置字符之間的間距

　　Word-spacing 設置單詞之間的間距。實際設置詞與詞之間空格大小，但是中文詞語是詞語是連著的，沒啥意義，不起作用。

　　6、對齊文本

　　text-align：設置文本對齊方案

　　left：左對齊，默認值； right 右對齊；justify 兩邊對齊，通過調整文本之間空格的大小來實現；center 居中對齊

　　7、首行縮進

　　text-indent 用來設置首行縮進。在采取默認字體大小時，設置為32px表示首行空出2個字符的位置。

　　text-indent：2em 表示跟隨字體變化永遠空出2個字符的位置。

　　當給它一個正數，表示向右移動指定的像素，負數表示向左移動指定的像素（這樣可以將一些字符隱藏起來，不希望用戶看見，但搜索引擎可以看見）

　　8、行高

　　在css中沒有直接提供設置行間距方式，可以通過使用設置行高的方式來設置。

　　line-height：設置行高。行高類似上學時的單線本，單線本是一行一行的，線與線之間的距離就是行高，網頁中文字也是處在兩行之間去顯示，默認垂直居中顯示。

　　所以行間距（文字之間的行間距）=行高-字體大小。從上到下：行的橫線—線與第1行文字的間距—第1行文字—線與第1行文字的間距—行的橫線—線與第2行文字間距—第2行

　　文字—線與第2行文字的間距—行的橫線。行高指2個橫線之間的距離，行間距指兩行文字之間的距離。

　　行高可以接受一個像素或者百分數。百分數是相對于字體的大小去計算

　　行高也可以指定數字n，則行高會設置字體大小的n倍。

　　對于單行文本，可將行高設置與父元素一樣，這樣可以在父元素垂直居中。原理是文字在兩行之間默認垂直居中。

　　寫法：font：30px/30px 表示字體30px，行高30px，若不指定，有默認值

到此，關于“HTML文本標簽、列表和文本格式化的方法”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！