初識HTML和CSS

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

    三、本地測試
         - 找到文件路徑，直接瀏覽器打開
         - pycharm打開測試
    四、編寫Html文件
        
        - doctype對應關係
        - html標籤，標籤內部能夠寫屬性 ====> 只能有一個
        - 註釋：  <!--  註釋的內容  -->
    五、標籤分類
        - 自閉合標籤
            <meta charset="UTF-8">
        - 主動閉合標籤
            title>老男孩</title>
    六、
        head標籤中
            - <meta  -> 編碼，跳轉，刷新，關鍵字，描述，IE兼容
                    <meta http-equiv="X-UA-Compatible" content="IE=IE9;IE=IE8;" />
            - title標籤
            - <link /> 搞圖標，欠
            - <style />欠
            - <script> 欠
    七、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" />
            
        三、註釋
            /*   */
    
        四、邊框
             - 寬度，樣式，顏色  (border: 4px dotted red;)
             - border-left
        
        五、  
            height，         高度 百分比
            width，          寬度 像素，百分比
            text-align:ceter, 水平方向居中
            line-height，垂直方向根據標籤高度
            color、     字體顏色
            font-size、 字體大小
            font-weight 字體加粗
        
        六、float
            讓標籤浪起來，塊級標籤也能夠堆疊
            老子管不住：
                <div style="clear: both;"></div>
            
        七、display
            display: none; -- 讓標籤消失
            display: inline;
            display: block;
            display: inline-block;
                     具備inline,默認本身有多少佔多少
                     具備block，能夠設置沒法設置高度，寬度，padding  margin
            ******
            行內標籤：沒法設置高度，寬度，padding  margin
            塊級標籤：設置高度，寬度，padding  margin
            
            
        八、padding  margin(0,auto)