redis學習-密碼管理
前端開發概述
從軟體分類開始說,學習程式語言,主要是為了開發軟體的,軟體按照使用目的不同可以分為系統軟體和應用軟體,還可以按照軟體程式和資料儲存位置的不同,可以分為單機軟體、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屬性 定義表單元素的名稱,此名稱是提交資料時的鍵名
- type屬性
-
4、<textarea>標籤 定義多行文字輸入框
5、<select>標籤 定義下拉表單元素
6、<option>標籤 與<select>標籤配合,定義下拉表單元素中的選項
注意:
單行文字框文字提示
-
-
- placeholder 設定input輸入框的預設提示文字
-
登錄檔單例項: <form action="http://www..." method="get"> <p> <label>姓名:</label><input type="text" name="username" /> </p> <p> <label>密碼:</label><input type="password" name="password" /> </p> <p> <label>性別:</label> <input type="radio" name="gender" value="0" /> 男 <input type="radio" name="gender" value="1" /> 女 </p> <p> <label>愛好:</label> <input type="checkbox" name="like" value="sing" /> 唱歌 <input type="checkbox" name="like" value="run" /> 跑步 <input type="checkbox" name="like" value="swiming" /> 游泳 </p> <p> <label>照片:</label> <input type="file" name="person_pic"> </p> <p> <label>個人描述:</label> <textarea name="about"></textarea> </p> <p> <label>籍貫:</label> <select name="site"> <option value="0">北京</option> <option value="1">上海</option> <option value="2">廣州</option> <option value="3">深圳</option> </select> </p> <p> <input type="submit" name="" value="提交"> <input type="reset" name="" value="重置"> </p> </form>View Code
居中(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:點連結替換一塊固定的位置