day14--前端HTML、CSS

    HTML是一個裸體的人，CSS穿上華麗的衣服，JS動起來。

    HTML

       一、 -一套規則，瀏覽器識別的規則

       二、 開發者：

              學習HTML規則

              開發後臺程序

                     - 寫HTML文件（充當模板的做用）

                     - 數據庫獲取數據，而後替換到HTML文件的指定位置（Web框架）

        三、本地測試

                - 找到文件路徑，直接瀏覽器打開

                - pycharm打開測試（可能偶爾會出問題，跟本身理想有出入，使用本地打開）

        四、編寫Html文件

                 -doctype對應關係

                 -html標籤，標籤內部屬性lang="en",每一個文件只能有一個html標籤

                 -註釋： <!--  內容 -->

        五、標籤分類

                 -自閉合標籤  本身關閉<meta> ，自閉合的標籤不多<br> <link>

                   <meta charset="UTF-8">

                 -主動閉合標籤<title>標題</title>

        六、head標籤

                 -<meta>  編碼，跳轉，刷新，關鍵字，描述，IE兼容

                 - <title></title>標籤 標題

                 - <link />

                           指定標題圖標（<link rel="shortcut icon" href="//common.cnblogs.com/favicon.ico" type="image/x-icon" />）

                 - <style />

                 - <script/>

        七、body標籤

                 - 圖標 &nbsp(空格) ; &gt(大於號) ; &lt(小於號)

                 - <p></p>標籤，段落    <br>換行標籤

                 - <h1></h1> ----------------<h6></h6>標籤，標題

　　　　  - <div>標籤，塊級標籤（白板）

                 =================   小總結 ================

                     全部的標籤分爲：

                          塊級標籤：<h>系列標籤（加大加粗），<p>標籤（段落和段落之間有間距）<div>標籤(白板)塊級的白板，使用最多的標籤

                          行內標籤：<span></span>標籤（白板）自身什麼特性都不帶

                      標籤之間能夠嵌套

                      標籤存在的意義，定位操做，JS獲取的時候比較方便

                  - input系列

                          input type = "text"               -name屬性，方便後臺取數據，value屬性，默認值

                          input type = "password"      -name屬性，讓後臺取數據

                          input type = "submit"

                          input type = "button"

                          input type = "radio"              - value屬性，name屬性（name屬性相同，互斥），設置默認值，checked="checked",默認被選擇

                          input type = "checkbox"       - 複選框，name屬性(批量操做，獲取批量數據)，設置不一樣的value進行區分

                          input type = "file"                  - 設置name屬性，指定提交的位置，可是type="file"依賴form表單的一個屬性，否則上傳不成功的，enctype="multipart/form-data"設置了才能上傳文件。enctype="multipart/form-data"設置文件上傳位置。

                          input type = "reset"               - 重置，重置form裏面的輸入，清空，從新輸入

                          <textarea>默認值</textarea>     -name屬性方便提交到後臺，默認值放中間，多行文本輸入的狀況

                          select標籤                                  -name屬性，內部option,value提交到後臺，size,multiple多選

                          可以向後臺提交數據的標籤：<input />   <textarea></textarea>  <select></select>三個標籤，其餘的都是點綴用的，設置樣式

                   -a標籤（行內標籤）

                             - 跳轉

                             - 錨              href="#某個標籤的ID"    標籤的ID不容許重複，章節跳轉用的

                   - img標籤 

                              - src屬性               圖片地址

                              - title屬性              圖片的名稱

                               - alt屬性              圖片損壞顯示的信息

                    - <ul><li></li></ul>      列表，默認是點的形式顯示在網頁上面。

                     - <ol><li></li></ol>     列表，默認是以1.的形式顯示

                     - <d1><dt><dd></dd></dt></dl>   層級顯示的方式，分層顯示模式

                    - 列表

                            - ul   <li></li>

                            - ol   <li></li>

                            - dl   <dt><dd>

                   - 表格<table></table>

                                   table

                                         thead   

                                                  tr   th（表頭）

                                        tbody   

                                               tr td（列）

                                    colspan    #列合併，合併單元格

                                    rowspan   #行合併，合併單元格  

                      - lable                                

                               用於點擊文字，使得關聯的標籤獲取光標

                               <label for="username">用戶名：</label>

                              <input id="username" type="text" name="user" />

                      - fieldset標籤

                              用於複選框組，在裏面添加開口的形式

　　　　　　　  legend

                       - div標籤   <span>標籤  <h>系列標籤

        -20個標籤

    CSS

         在標籤上設置style屬性：

         background(背景色)

         2.在<head>裏面，style標籤中寫樣式       

             - id選擇區與#號結合使用

　　　　#i1{
   　　　　 background-color:chartreuse;
    　　　　height:48px;
　　　　}  重用行比較差，每次都要寫
 - class選擇器
                 .名稱便可(點)
          .名稱{
               }
       <標籤 class="">
   - 標籤選擇器
             div{
                  background-color:red;
                  height:40px;
                 }
            全部的div設置上述樣式，標籤選擇器
   - 層級選擇器
         .c1 .c2 div{
                         backgrond-color:red;
                         height:40px;
                         }
           表明的是應用在class屬性等於c1下面的標籤class屬性等於c2的div標籤
    - 組合選擇器
            #i1,#i2,#i3{
                             background-color:green;
                             height:36px;
                             }
            對id等於i1,i2,i3的標籤使用上述樣式
    - 屬性選擇器
             input[type="text"]{width:100px;height:200px]
　　　 表示對input標籤中type屬性爲text的執行樣式
   PS:
         優先級，標籤上的style優先，編寫順序，就近原則

 CSS樣式寫在單獨文件中，提高樣式的重用行，要在<head>標籤中使用<link />標籤
               <link rel="stylesheet" href="CSS文件路徑" />    從文件中引入CSS的樣式
  
   三、註釋：/*   */
   
    四、邊框
　          style屬性裏面的border
              -寬度、樣式、顏色
              border:4px dotted red;
　　　  border-left（左邊框）     border-right（右邊框）    border-top（上邊框）     border-buttom（下邊框）
    五、height
　　height（高度）  font-size(字體大小）     text-align:center(居中，左右居中）line-height:48px（水平居中）font-weight（加粗）

    六、float
           讓標籤浪起來，塊級標籤也能夠進行堆疊,float="left",float="right"
           <div style="clear:both;"></div>因爲<div>標籤飄起來之後，父標籤被沖掉了，最後加上一個指令便可，清楚子標籤中的<div>
    七、display
            塊級標籤和行內標籤能夠進行轉換，
            <div style="background-color:red;display:inline;">message</div>       將塊級標籤轉換爲行內標籤
　　　<span style="background-color:pink;display:block">轉換爲塊級標籤</span>   將行內標籤轉換爲塊級標籤
            display:inline
            display:block
　　    dispaly:inline-block    具備inline,默認本身有多少佔多少，具備block能夠設置告訴，寬度。
　　    display:none   讓標籤消失
            行內標籤沒法設置寬度和高度，塊級標籤能夠設置寬度和高度。
    八、padding margin(0,auto)
             margin（外邊距）   
             padding（內邊距）
    九、text-align

    十、height,width,len-height,color,font-size,font-weight

 

        -顏色

        -位置