用Python 操作Web 前端 基础 1
一，目錄
1. HTML ： html就是一套瀏覽器認識的規(guī)則，主要用20個左右的標簽
對于開發(fā)者來說：學習html規(guī)則?
1. 本地測試：（1）找到html文件，直接瀏覽器方式打開，不用socket；（2），pycharm可以直接打開html
2. 編寫html文件:
? ? ? ? ? ? ? ? ? ?---doctype對應(yīng)關(guān)系
? ? ? ? ? ? ? ? ? ?---HTML 標簽<html>XXXXX</html>，內(nèi)部可以添加屬性
? ? ? ? ? ? ? ? ? ?---Lang="XXX",標簽內(nèi)部屬性
? ? ? ? ? ? ? ? 3. 標簽分類：
? ? ? ? ? ? ? ? ? ? ---自閉和標簽? <meta charset="UTF-8"> 比較少
? ? ? ? ? ? ? ? ? ? ?---主動閉合標簽 title>網(wǎng)頁名</title>
4. Head標簽：
? ? ? ? ? ? ? ? ? ? ? ---<meta ->編碼，跳轉(zhuǎn)，刷新，關(guān)鍵字，描述，IE兼容
---title標簽
--- <link /> 標簽圖標
? ? ? ? ? ? ? ? ? ? ? ? ---<style />
? ? ? ? ? ? ? ? ? ? ? ? ---<script>
? ? ? ? ? ? ? ? ? 7. <body>標簽：
? ? ? ? ? ? ? ? ? ? ? ? ---圖標， > <
? ? ? ? ? ? ? ? ? ? ? ? ?---P標簽（段落），段落之間有間距
---Br標簽，用來換行
---<H>標簽， 設(shè)置字體大小
? ? ? ? ? ? ? ? ? ? ? ? ?---<span> 行內(nèi)標簽（區(qū)別于塊級標簽） 只能選擇字體范圍，不能選擇整行
? ? ? ? ? ? ? ? ? ? ? ? ?---<div> 塊級標簽，用的最多。
? ? ? ? ? ? ? ? ? ? ? ? ?---標簽之間可以嵌套；標簽存在的意義，可以用CSS,JS操作。?
? ? ? ? ? ? ? ? ? ? ? ? ? ---input 系列 + form標簽
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?input type = "text" -name屬性； ‘value = XXX默認值
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?input type = ‘password’ -name屬性
? ?input type = ‘submit’ - value=‘提交’ 提交按鈕
? ?? input type = ‘button’? ?-value=‘登錄’按鈕
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?input type = 'radio'? ? ? -單選框value，name屬性（name屬性互斥）
input type = 'checkbox' -復選框 Value， name屬性，可以獲得列表
? ? ? ? ? ? ? ? ?? input type = 'file'? ?上傳文件，依賴form表單的屬性‘’
? ? input type = ‘reset’ 重置
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<textarea>默認值</textarea> 輸入比較多的內(nèi)容
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?<select><option> 下拉框選擇 select = selected 默認選項；multiple = multiple可以多選；
? ? ? ? ? ? ? ? ? ? ? ? ?8. a 標簽
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---跳轉(zhuǎn)
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---錨，就是點擊目錄可以跳轉(zhuǎn)； herf = ‘#某個標簽的ID’， 標簽的ID 不允許重復
? ? ? ? ? ? ? ? ? ? ? ? ? 9.? img標簽：
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---src
? ---alt
? ?---title
? ? ? ? ? ? ?? 10. list列表標簽：?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?---UL? ?==> LI 一個列表，前面都是點。?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?---OL ==> LI? 一個列表，前面用數(shù)字排序
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?---DL ==DT,DD? DT是上層目錄，dd是下層目錄
? ? ? ? ? ? ? ? ? ? ? ? ? 11. table表格標簽：?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---tbody 表身
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ---thead 表頭
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? --- colspan = X，行合并X行； rowspan= X， 列合并X行
? ? ? ? ? ? ? ? ? ? ? ? ? ?12. label 標簽 用于電子文字，是的關(guān)聯(lián)的標簽獲取光標
? ? ? ? ? ? ? ? ? ? ? ? ? ? 13. fieldset標簽： legend 在外圍添加一個方框；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?14. <div>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?15. <h>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?16. <span>
? ? ? ? ? ?開發(fā)后臺程序：
? ? ? ? ? ? ? ? ? ? ? ? ?1，寫HTML文件（充當模板的作用）
? ? ? ? ? ? ? ? ? ? ? ? ? 2， 去數(shù)據(jù)庫獲取數(shù)據(jù)然后替換到html的指定位置（web框架）
?
2. CSS ：顏色，位置之類的相關(guān)操作。。。
? ? ? ? ? ?----標簽的style屬性
? ? ? ? ? ?---寫在head里面，style標簽中寫樣式
? ? ? ? ? ? ? ? ----id選擇器，ID可以給標簽設(shè)置屬性
? ? ? ? ? ? ? ? ---class選擇器，選擇其他的標簽并class復制
? ? ? ? ? ? ? ? ---標簽選擇器： div{...}, 所有的div都會設(shè)置成此樣式；
? ? ? ? ? ? ? ? ---層級選擇器（空格）==》.c1,.c2 div{}
? ? ? ? ? ? ? ? ---組合選擇器（逗號） ==》 c1,.c2,div{}
? ? ? ? ? ? ? ? ?---屬性選擇器： 對選著到的標簽通過屬性再進行一次篩選；
? ? ? ? ? ? ? ? ---css樣式可以單獨寫在css文件中，然后<link rel='stylesheet' herf= 'css樣式文件'>
? ? ? ? ?3。 注釋 /* */
? ? ? ? ?4. 邊框 ==》boarder: 1px solid color; 寬度，樣式，顏色
? ? ? ? ?5. 背景
? ? ? ? ?6.float 讓標簽漂浮，塊級標簽可以堆疊
? ? ? ? ?7. display： display: inline 標簽都變成行內(nèi)標簽;
? ? ? ? ? ? ? ? ? ? ? ? ? display: block 塊級標簽；
? ? ? ? ? ? ? ? ? ? ? ? ? display：inline-block，默認行內(nèi)標簽屬性，但是可以設(shè)置；
? ? ? ? ? ? ? ? ? ? ? ? ? displasy：none， 可以顯示可以關(guān)閉，類似視頻網(wǎng)站開燈關(guān)燈
? ? ? ? ? ? ? ? ? ? ? ? ?行內(nèi)標簽無法設(shè)置寬度和高度，padding，margin；塊級標簽可以設(shè)置；
? ? ? ? ?8. padding， margin（0，auto），內(nèi)邊距，外邊距
? ? ? ? ? ? ? ? ? ? ? ? ?margin（0，auto）：代表div模塊頂邊處理，距離上下的邊距為0，左右是auto居中
? ? ? ? ?9. text-align
? ? ? ? ?10. height， width， line-height，color，font-size， font-weight（字體加粗），text-align 水平居中
11.? position: 瀏覽器右下角的返回頂部按鈕：position：fixed 用來固定在頁面的某個位置。
? ? ? ? ? ? ? position： absolute+relative ==》固定在某個div的里面的某個位置?
12. overflow：hidden 超過范圍隱藏； overflow：auto 超過范圍會出線滾動條
? ? ? ? ?13. Hover屬性： 當鼠標移到某個標簽上，這個標簽會發(fā)生反應(yīng)， 例如： pg_header.menu: hover; background-color: blue;
14. background-image: url(‘image、gif’)；默認DIV比較大的話，圖片重復訪問
? background-repeat：repeat-y/x 水平或垂直方向重復；no-repeat 就是不重復。
? ? ? ? ? ? ? background-position： 可以控制圖片的位置； postion-X Y 水平，垂直位置
?
? Javascript:?
? ? ? ? ?1. 存在的形式：?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?---在head中<script>?
?? //javascript 代碼
<script>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?---或者保存在文件中 <script src='js文件路徑'><script>
? ? ? ? ? ? ? ? ? ? ? ? ? JS代碼塊需要放置在<body>標簽的最下面
2.變量
? ? ? ? ? ? ? ?name=“112233” 默認是全局變量； var name="2223324" 局部變量
? ? ? ? ?寫JS的時候，可以在html里面也，也可以在瀏覽器的console里面寫。?
字符串： a.charAt(索引位置)；a.substring(起始位置，結(jié)束位置)； a.length:獲取當前長度
setInterval（'func()',1000）:每一秒鐘執(zhí)行一次；
var tag = document.getElementById('if'):或者局部變量，結(jié)合上面幾個字符串和變量，可以讓變量動起來
3. Dom 操作： ---找到標簽 document.getElementById('ID')獲取單個元素
? ?? ---document.getelementbytagname('div') 獲取多個元素
操作標簽： innerText： 獲取標簽中的文本內(nèi)容
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?className：
?
?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??
? ? ? ? ? ? ??
?
轉(zhuǎn)載于:https://www.cnblogs.com/spencersun/p/9402563.html
總結(jié)
以上是生活随笔為你收集整理的用Python 操作Web 前端 基础 1的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【设计模式】五、单例模式（独一无二的对象
- 下一篇： Ubuntu16.04换源