<!--
css框架：bootstrap
js框架：jQuery

HTML標籤：
    h1-h6   標題加粗
    img 插入圖片
    a   連結
    b   加粗
    i   斜體
    u   下劃線
    s   劃掉字型
    p   段落
    br  換行
    hr  橫線
    &nbsp; 空格
    &gt; 大於
    &lt; 小於
    塊兒級標籤   div,h1-h6,p,hr,
                預設佔瀏覽器寬度，能設定長度或寬度
    內聯標籤    span,a,img,b,i,u,s
                根據內容長度決定標籤長度，不能設定長度或寬度
 


    無序列表
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>

        有序列表
    <ol>
        <li></li>
        <li></li>
        <li></li>
    </ol>

    行內標籤不能巢狀塊兒級標籤
    p標籤不能巢狀塊兒級標籤

CSS：引入CSS的三種方式：
        直接在標籤裡面通過style定義，
 

        在head中通過style定義,
        單獨寫在css檔案中，然後引入到html檔案中
      基本選擇器：
         元素選擇器 例如p,div
         ID選擇器   #
         類選擇器   .
         通用選擇器  *
       組合選擇器
         後代選擇器 div p
         兒子選擇器 div>p
         滋臨選擇器 div+p
         弟弟選擇器 div~p


     選擇器的優先順序：
          寫在標籤內的style優先順序最高
          選擇器都一樣的情況下，誰離標籤近，誰優先順序就高
 

          內聯樣式：權重1000
          ID選擇器：權重100
          類選擇器：權重10
          元素選擇器：權重1

       偽類選擇器
          a:link 未訪問的連結
          a:visited 已訪問的連結
          a:hover 滑鼠移上去
          a:active 被點選
          input focus input獲取游標時

          偽元素選擇器
          p:first-letter 段落第一個字

       字型屬性
           font-size 字型大小
           font-family 字型種類，一般指定多個種類
           position 通過X軸和Y軸定位

       背景
            background 設定背景
            background-attachment 滑鼠滾動背景不動
       邊框 border
       實線 solid


       display: inline; 塊兒級標籤變行標籤
       display: block; 行標籤變塊兒級標籤
       display: none; 不展示標籤

       CSS盒子模型
            由內向外依次是 content paddind border margin
            最常用的居中是：margin: 0 auto;

        浮動 float
            只要設定浮動，就會變成塊兒級標籤
        清除浮動 clear
               常用的做法就是設定clear:float，
               然後在標籤最後設定一個空值的塊兒級標籤，
               就會把父標籤撐起來

         overflow 溢位屬性
         border-radius 圓邊框 配合著overflow可以設定圓頭像

         定位 position
            預設定位 static
            相對定位 relative 相對原來位置定位
            絕對定位 absolute 相對於最近的一個被定位過的祖宗標籤
            固定 fixed 返回頁面頂部示例

          脫離文件流 float absolute fixed這三種都會脫離文件流

          透明度 opacity
            rgba()和opacity的區別
            rgba()只改變背景顏色的透明度效果
            opacity改變元素\子元素的透明度效果

          z-index 數值越大，越靠近你，只能作用於定位過的元素