HTML
    1、一套規則，瀏覽器認識的規則。
    2、開發者：
        學習Html規則
        開發後臺程序：
            - 寫Html文件（充當模板的作用） ******
            - 數據庫獲取數據，然後替換到html文件的指定位置（Web框架）

    3、本地測試
         - 找到文件路徑，直接瀏覽器打開
         - pycharm打開測試
    4、編寫Html文件
        
        - doctype對應關系
        - html標簽，標簽內部可以寫屬性 ====> 只能有一個
        - 註釋：  
 
<!--  註釋的內容  -->
    5、標簽分類
        - 自閉合標簽
            <meta charset="UTF-8">
        - 主動閉合標簽
            title>老男孩</title>
    6、
        head標簽中
            - <meta  -> 編碼，跳轉，刷新，關鍵字，描述，IE兼容
                    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;"
 
 />
            - title標簽
            - <link /> 搞圖標，欠
            - <style />欠
            - <script> 欠
    7、body標簽
         - 圖標，  &nbsp;  &gt;   &lt;
         - p標簽，段落
         - br，換行
         ======== 小總結  =====
            所有標簽分為：
                塊級標簽： div（白板），H系列（加大加粗），p標簽（段落和段落之間有間距）
                行內標簽： span（白板）
            標簽之間可以嵌套
            標簽存在的意義，css操作，js操作
            ps:chorme審查元素的使用
                - 定位
                - 查看樣式
        - h系列
        - div
        - span
        - input系列 + form標簽
            input type=‘text‘     - name屬性，value="趙凡" 
            input type=‘password‘ - name屬性，value="趙凡" 
            input type=‘submit‘   - value=‘提交‘ 提交按鈕，表單
            input type=‘button‘   - value=‘登錄‘ 按鈕
            
            input type=‘radio‘    - 單選框 value，checked="checked"，name屬性（name相同則互斥）
            input type=‘checkbox‘ - 復選框 value, checked="checked"，name屬性（批量獲取數據）
            input type=‘file‘     - 依賴form表單的一個屬性 enctype="multipart/form-data"
            input type=‘rest‘     - 重置
    
            <textarea >默認值</textarea>  - name屬性
            select標簽            - name,內部option value, 提交到後臺，size，multiple
        
        - a標簽
            - 跳轉
            - 錨     href=‘#某個標簽的ID‘    標簽的ID不允許重復
            
        - img 
             src
             alt
             title
             
        - 列表
            ul
                li
            ol
                li
            dl
                dt
                dd
        - 表格
            table
                thead
                    tr
                        th
                tbody
                    tr
                        td
            colspan = ‘‘
            rowspan = ‘‘
        - label
            用於點擊文件，使得關聯的標簽獲取光標
            <label for="username">用戶名：</label>
            <input id="username" type="text" name="user" />
        - fieldset
            legend
        
    - 20個標簽
CSS
    
    在標簽上設置style屬性：
        background-color: #2459a2;
        height: 48px;
        ...
    
    編寫css樣式：
        1. 標簽的style屬性
        2. 寫在head裏面 style標簽中寫樣式
            - id選擇區
                  #i1
 
{
                    background-color: #2459a2;
                    height: 48px;
                  }
                  
            - class選擇器 ******
                
                  .名稱{
                    ...
                  }
                  
                  <標簽 class=‘名稱‘> </標簽>
            
            - 標簽選擇器
                    div{
                        ...
                    }
                    
                    
                    所有div設置上此樣式
            
            - 層級選擇器（空格） ******
                   .c1 .c2 div{
                        
                   }
            - 組合選擇器（逗號） ******
                    #c1,.c2,div{
                        
                   }
            
            - 屬性選擇器 ******
                   對選擇到的標簽再通過屬性再進行一次篩選
                   .c1[n=‘alex‘]{ width:100px; height:200px; }
                   
            PS:
                - 優先級，標簽上style優先，編寫順序，就近原則
            
        2.5 css樣式也可以寫在單獨文件中
            <link rel="stylesheet" href="commons.css" />
            
        3、註釋
            /*   */
    
        4、邊框
             - 寬度，樣式，顏色  (border: 4px dotted red;)
             - border-left
        
        5、  
            height，         高度 百分比
            width，          寬度 像素，百分比
            text-align:ceter, 水平方向居中
            line-height，垂直方向根據標簽高度
            color、     字體顏色
            font-size、 字體大小
            font-weight 字體加粗
        
        6、float
            讓標簽浪起來，塊級標簽也可以堆疊
            老子管不住：
                <div style="clear: both;"></div>
            
        7、display
            display: none; -- 讓標簽消失
            display: inline;
            display: block;
            display: inline-block;
                     具有inline,默認自己有多少占多少
                     具有block，可以設置無法設置高度，寬度，padding  margin
            ******
            行內標簽：無法設置高度，寬度，padding  margin
            塊級標簽：設置高度，寬度，padding  margin
            
            
        8、padding  margin(0,auto)

初識HTML和CSS