前端開發概述

　　從軟體分類開始說,學習程式語言,主要是為了開發軟體的,軟體按照使用目的不同可以分為系統軟體和應用軟體,還可以按照軟體程式和資料儲存位置的不同,可以分為單機軟體、C/S架構軟體、B/S架構軟體：

• 單機軟體：軟體程式和資料都儲存在客戶端 介面：Tk、PyQt、wxPython庫
• C/S(Client/Server)架構軟體：軟體程式和資料一部分存在客戶,一部分存在伺服器端 介面：Tk、PyQt、wxPython庫
• B/S(Broswer/Server)架構軟體：軟體程式和資料全部存在伺服器端,介面：網頁(web)

前端開發也叫作web前端開發,是為B/S架構的軟體提供介面解決方案的

html概述

　　　　HTML是 HyperText Mark-up Language 的首字母簡寫,意思是超文字標記語言,超文字指的是超連結,標記指的是標籤,是一種用來製作網頁的語言,

　　　　這種語言由一個個的標籤組成,用這種語言製作的檔案儲存的是一個文字檔案,檔案的副檔名為html或者htm

常見的標籤:

雙標籤
　　html header body div p h1 h2 h3 h4 h5 h6 selcect -> optgroup -> option textarea span b i u s strong em ins del ul li ol li

dl dt ddtable tr th td title style script label form

單標籤
　　a img br(br/) hr input meta link

　　  空格
　　© 版權
　　® 註冊
　　< 小於
　　&dt; 大於

html中的路徑問題
    路徑
        絕對路徑    網際網路的雲伺服器
        相對路徑     同級 上級 下級
    列表
        無序
            ul li 網站導航
            line-style:none
        有序
            ol li 
        專案列表
            dl>dt+dd
    表格
        table>tr>td
        border的值不分先後
        border-cellapse   合併表格邊框線
        cellspacing:20 拉開單元格之間的距離
        cellpadding:50 拉開內容和td之間的距離
        td屬性
            合併
                行合併 colspan="6"    
                列合併 rowspan="6"  合併6個單元格
        製表
 
　　　　　　　label 用來描述文字的
            table
                tr
                    製作表頭
                    th
                        width  
                        height     
                tr
                    製作內容
                    td
                        width
                        height
                
    form表單

　　　　　　表單用於蒐集不同型別的使用者輸入，表單由不同型別的標籤組成，相關標籤及屬性用法如下：

　　　　　　1、<form>標籤 定義整體的表單區域

• • • action屬性 定義表單資料提交地址
    • method屬性 定義表單提交的方式，一般有“get”方式和“post”方式

　　　　　　2、<label>標籤 為表單元素定義文字標註

　　　　　　3、<input>標籤 定義通用的表單元素

• • • type屬性
      • type="text" 定義單行文字輸入框
      • type="password" 定義密碼輸入框
      • type="radio" 定義單選框
      • type="checkbox" 定義複選框
      • type="file" 定義上傳檔案
      • type="submit" 定義提交按鈕
      • type="reset" 定義重置按鈕
      • type="button" 定義一個普通按鈕
      • value屬性 定義表單元素的值
      • name屬性 定義表單元素的名稱，此名稱是提交資料時的鍵名

　　　　　　4、<textarea>標籤 定義多行文字輸入框

　　　　　　5、<select>標籤 定義下拉表單元素

　　　　　　6、<option>標籤 與<select>標籤配合，定義下拉表單元素中的選項

　　　　　　注意：

　　　　　　　　單行文字框文字提示

• • • placeholder 設定input輸入框的預設提示文字

 居中(center)
        文字居中
            水平居中    text-align:center;
            垂直居中    line-height:height(父類的height);
        版心居中
            margin:0 auto;
    顯示(display)/隱藏(hidden)
        佔位(seize a seat)
            display:none;
            display:block;
        不佔位
            visbility(能見度):hidden(隱藏);
            
        行級的元素變塊級元素
            block/inline-block/inline
            
    溢位(overflow)
        溢位隱藏
　　　　　　  visable(預設值選項)
　　　　　　  hidden  ->溢位的部分隱藏起來
        溢位有滾動條
　　　　　　  scroll   右下都有滾動條(在前端基本不用)
　　　　　　  auto   自適應滾動條,但下面任何情況都不會出現橫向移動的滾動條
            
    浮動(float)
　　　　 如果是浮動,想浮動的所有標籤都要加 float對齊屬性　　
　　　　　　float:left;  靠左浮動
　　　　　　float:right; 靠右浮動
        
    定位(position)
　　　　 子絕父相
　　　　 相對定位    relative    參照物是自身
　　　　 絕對定位    absolute    參照物是父類
　　　　 固定定位    fixed       參照物是瀏覽器的四角
         
    定位的靈活應用
        position:absolute
        left:50%
        transfrom:translate(-50%,-50%)
        有可能導致覆蓋的情況出現
            該標籤的顯示級別
                z-index:10  值越大,越在上面 設定它的等級為10
        opacity:0.4  透明度的總範圍為0~1
        rgba(60,100,120,0.2)
                
    權重
        行內式(1000)>ID(100)>類(10)>普通的(1)
        最高許可權
            行內式 !Impoatxxxxx
    
    iframe(框架)
        屬性
            src="設定路徑" 
            frameborder="0"  設定邊框
        頁面巢狀
            eg:點連結替換一塊固定的位置