[19/06/06-星期四] HTML基礎_文本標籤、列表(有序、無序、定義)、文本格式化(單位、字體、大小寫、文本修飾、間距、對齊文本)

時間 2019-11-16

標籤星期四 html 基礎文本標籤列表有序無序定義格式化單位字體大小寫修飾間距對齊欄目 HTML 简体版

原文原文鏈接

1、文本標籤css

　　em：用來表示一段內容的着重點，語氣上的強調。通常顯示爲斜體html

　　i：是斜體顯示，和em顯示效果同樣。h5規定不須要着重的內容而是單純加粗或斜體能夠用i或b。用的很少java

　　strong：用來表示一個內容的重要性。通常顯示爲粗體。與em能夠單獨使用，也能夠一塊兒使用。api

　　b：加粗顯示，跟strong顯示效果同樣。瀏覽器

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

　　big：沒什麼語義，不多使用。字體

　　cite：網頁中全部加書名號的內容均可以使用cite標籤，表示參考內容。好比書名、電影名等網站

　　q：表示短的引用(行內運用) ，自動加個引號。是經過css的before和after自動加的。樣式幾乎不用。搜索引擎

　　blockquote：表示長引用(塊級引用)。塊元素，獨佔一行。b乎中用的多。spa

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

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

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

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>文本標籤</title>
        <style type="text/css">
            
        </style>
    </head>
    <body>
        <!--em:主要表示語氣上強調。在瀏覽器中默認顯示斜體
            strong:表示強調的內容。比em更強烈，默認粗體顯示。
        -->
        <div>
            你作事真像個<em>傻逼</em>。 <br />
            <strong>警告：當心燈火！</strong> <br />
            
            <p> <cite> 《史記》 </cite>是漢代司馬遷所著。 </p> <!--cite表示參考內容-->
            <p> 子曰：<q>己所不欲勿施於人</q> </p> <!--q引用的內容瀏覽器自動加個引號-->
            <blockquote> 子曰：有朋自遠方來，2333</blockquote>
            
            3的平方：3<sup>2</sup>=9 <br />
            周杰倫<sup><a href="http://www.baidu.com"> [1]</a> </sup>出席電影開幕式。
            水的分子式：H<sub>2</sub>O <br />
            原價：<del>9.9</del> 現價：6.9 <br />
            貓的英文是<ins>Cat</ins> <br />
            java舉例：<pre>
                <!--shift+table 往回縮 。public前邊的也算是預格式的一部分-->
            public class Test{
                public static void main(String[] args){
                    System.out.println("hello,world");
                }
            }
           </pre>            
        </div>
    </body>
</html>

2、列表(無序和有序列表之間均可以相互嵌套)

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

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

　　　　disc：默認值，實心的圓點； square：實心小方塊；circle：空心的圓圈。幾乎都不用。去掉項目符號，使用css。若是須要設置符號，能夠爲li設置背景圖片。　　　　　

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

　　　　默認前邊有相似一、二、3的項目編號。經過type屬性能夠改變默認值。

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

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

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>列表</title>
        <style type="text/css">
            ul{
                list-style: none;/*去掉項目符號*/
            }
        </style>
    </head>
    <body>
        <!--無序列表-->
        <ul>
            <li>李白</li>
            <li>杜甫</li>
            <li>王維</li>
        </ul>
        <!--有序列表-->
        <ol type="A">
            <li>打開冰箱</li>
            <li>把大象裝進去</li>
            <li>關上冰箱</li>
        </ol>
        
        <!--相互嵌套-->
        <ul>
            <li>魚香肉絲</li>
            <li>酸菜魚
                <ol type="1">
                    <li>買魚</li>
                    <li>作菜</li>
                    <li>刷碗</li>
                </ol>
            
            </li>
            <li>京醬肉絲</li>
        </ul>
        <!--定義列表-->
        <dl>
            <dt>胡蘿蔔</dt>
            <dd>一種蔬菜，兔子最愛</dd>
            <dd>一種腹黑的動物</dd>
            <dt>西安</dt>
            <dd>一座古都，位於陝西省。</dd>
        </dl>
    </body>
</html>

3、文本格式化

一、單位

像素

長度單位：px（像素）一個像素就至關於屏幕中的一個小點(小方塊)，屏幕就是由像素點組成。像素點事不能肉眼識別，由於過小了。　

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

百分比

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

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

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

顏色（取色工具：FastStone）

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

　　二、使用RGB值表示顏色。是指美術的三原色：Red、Green、Blue(紅、綠、藍)，經過三原色的不一樣的濃度來表示不一樣顏色。

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

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

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

每兩位重複的能夠簡寫：如#ff0000（紅色）簡寫成#f00。#bfa 豆沙綠

二、字體

　　瀏覽器中默認的字體大小是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：文本以小型大寫字母顯示。

三、大小寫

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

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

四、文本修飾

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

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

　　超連接自帶下劃線，由於它text-decoration默認值是underline ，本身能夠更改，如設置爲none，去掉下劃線

五、間距

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

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

六、對齊文本

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

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

七、首行縮進

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

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

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

八、行高

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

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

因此行間距(文字之間的行間距)=行高-字體大小。從上到下：行的橫線—線與第1行文字的間距—第1行文字—線與第1行文字的間距—行的橫線—線與第2行文字間距—第2行

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

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

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

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。