python day 21

2019/11/02

• python day 21
  • 1. HTML
    • 1.1 常見的HTML元素

學習資料來自老男孩與尚學堂

1. HTML

1.1 常見的HTML元素

1. HTML的作用：定義整個頁面"長"成什么樣，相當于網站的骨架，

2. HTML搭骨架的標簽：
   2.1. 標題標簽: h1~h6
   2.2. 容器標簽: div :定義大的模塊
   2.3. 段落標簽: p :段落
   2.4. 行內標簽: span :元素內容可以在同一行內顯示，是個行內元素
   2.5. 跳轉標簽: a :跳轉，有兩個屬性，一個是href屬性放網路路徑，一點擊就跳轉到指定網路路徑，另外一個屬性是target，target屬性值有self和blank，target屬性指跳轉時是否打開新視窗，
   2.6. 圖片標簽: img :src屬性，要顯示的圖片的路徑，可以是網路路徑也可以是本地路徑，alt屬性，在圖片顯示不出來的時候，用文字顯示，
   2.7. 換行標簽: br :多個行內元素在同一行時，如果需要換行，就可以使用br標簽，
   2.8. 分割標簽: hr :顯示一條分割線，width屬性設定分割線寬度,size屬性設定分割線的粗細，默認是1，
   2.9. 串列標簽:

   • 不顯示串列型別list-style值為None. style="list-style:none"
   • 有序串列：ol(order list)，標簽中嵌套li標簽，li標簽中放串列項內容，串列項前面的型別通過type屬性設定，常見型別有:數字1(表示按數字排序),a(小寫字母順序),i(羅馬數字順序),I,A，默認是數字型別，
   • 無序串列：ul(unordered list)，標簽中嵌套li標簽，li標簽中放串列項內容，串列項前面的型別通過type屬性設定，常見型別有disc,square,circle，
   • 圖文混排：dl，用來顯示標簽項不用li，使用dt,dd. dt: 放標題部分;dd:放內容部分.

3. 塊級元素和行內元素
   3.1. 塊級元素：特征是獨占一行，塊級元素標簽的寬度是瀏覽器螢屏的寬，高度是內容決定的，常見的塊級元素：div/p/ul/li/dl.
   3.2. 行內元素：特征是不獨占一行，同一行可以放多個行內元素，行內元素的寬與高都是由內容決定的，常見的行內元素：span/a/em/i.
   3.3. 行內-塊級元素：特點是不獨占一行，且寬度可以自己設定，常見元素：input/button/img.
   3.4. 改變元素屬性方法：display:block; 塊級元素;inline; 行內元素inline-block；行內-塊級元素;none; 隱藏元素

4. 雙/單標簽
   雙標簽：成對出現的，有開始標簽，有結束標簽，大部分標簽是雙標簽，<div>
   單標簽：單個出現，寫法<br>,<hr>,<input>,<img>，

5. 表格table
   使用table標簽制作一個表格，
   caption標簽：在table里面嵌套使用，用來設定標題，
   tr行標簽：在table里面嵌套使用，用來生成一行，
   th表頭標簽：在tr里面嵌套使用，用來設定表格的表頭，
   td表格內容標簽：在tr里面嵌套使用，用來生成表格的內容，
   table的屬性：
   border:邊框，值為數字，越大，邊框越粗
   cellpadding:單元格內邊距
   cellspacing:單元格外邊距
   align: 表格中文字的對齊形式，可選值: left,right,center. 如果寫在table標簽上，就是table表格相對瀏覽器的位置，如果寫在tr上，則是表格內容的對齊方式，
   width: 設定寬度，如果在table上，就是整個表格的寬度，如果在td上，就是列的寬度，
   合并屬性：
   行合并：rowspan=2,表示合并2行，如果是5就表示合并5 行
   列合并：colspan=3，表示合并3列，

6. 表單

form 表單標簽
區域塊:fieldset> legend設定區域塊的名稱
用戶輸入框：input type='text'
單選按鈕: input type='radio'
多選按鈕: input type='checkbox'
下拉框： select，嵌套使用option標簽
密碼: input type='password'
上傳檔案: input type='file'
范圍數字：Input type='range'
提交: input type='submit'
重置: input type='reset'
按鈕: button
input標簽屬性：
placeholder,用來設定提示的，
name, 設定input標簽的提交資料鍵名
value,設定input標簽的值
form標簽屬性：
action：url地址，資料提交的地址，不寫默認是本機，
method：提交方式，get/post，默認是get，

7. css樣式

css樣式的作用是裝飾html，使頁面美化
css樣式的寫法有有三種：
第一種：行內樣式，指把樣式寫在標簽內部，需要在標簽中添加一個屬性style，在style中定義樣式，
第二種：內部樣式表，指在head中定義一個style標簽，在style標簽中寫當前頁面的樣式
第三種：外部樣式式，指在html檔案外創建.css結尾的檔案，在檔案中寫css樣式，引入頁面需要使用link標簽，
css的兩個簡單樣式：
設定字體大小和顏色
font-size:12px(最小12px，最大無限制);
color:
值可以是英文單詞red/black/green/yellow/whilt等，
還可以是rgb(),比如rgb(0,0,0),rgb(255,255,255)等
rgba(),帶透明度的顏色值，rgba(0,255,123,0.3),a的取值范圍是0-1，0表示完全透明，
還可以是十六進制寫法#000，與rgb(0,0,0)是一樣的意思，

8. 選擇器：

id選擇器：
需要在標簽上添加id屬性，給id屬性一個變數名，<div id="container">
id要具有唯一性，css設定樣式時，通過#id名{}來添加樣式，
類選擇器：
需要在標簽上添加class屬性，給class一個變數名，<div class='box'>
class，不具備唯一性，可以存在多個，.classname來設定樣式
標簽選擇器: 標簽，不具備唯一性，設定樣式時，通過標簽名設定樣式，
通用選擇器：*代表所有
偽類選擇器：<div >
元素:before/:after,當前元素前后添加的分類,設定時.box:before{}
元素:nth-child(n)查找當前元素的第n個子集元素(n是按照子集元素在當前元素中的順序是n),設定時.box:nth-child(2){}
元素:nth-of-type(n)查找當前元素的指定兄弟元素,設定時.box:nth-of-type(2){}
子集選擇器：父級>子集
后代選擇器：父級 后代

9. 盒模型

任何一個標簽都是一個盒模型，每個盒模型都有四個方向，是個矩形，
盒模型組成部分：
content：內容部分，經常設定寬高(塊級/行內-塊級元素有效,行內元素無效).
padding：內邊距，內容部分和邊框直接的距離，
border：邊框
margin：外邊距，撐開不同盒模型直接的距離，
塊級元素/行內-塊級元素可以寬高，這里設定的寬和高指的是content的寬度和高度
padding/border/margin都有四個方向可以設定，四個方向:上top,右right，下bottom,左left.
設定方式(簡寫時是按照上右下左順時鐘來取值的，盒子是上右下左):
9.1. 有四個值：上右下左四個方向的值: padding: 10px 20px 30px 40px;
9.2. 設三個值：上10，下30，左右20：padding: 10px 20px 30px;
9.3. 設兩個值：上下10，左右20：padding: 10px 20px
9.4. 設一個值：上下左右都是這個值：padding: 10px;
margin:10px auto; 表示讓元素在頁面中水平方向上居中顯示，
border的三個屬性：
寬度：border-width
樣式：border-style:solid(實線)，dotted(點線),dashed(虛線)
顏色：red /#000/rgb()/rgba()
border的簡寫方式：border:1px solid #000; 可以單獨設定某一個方向border-bottom:3px red solid;

10. 字體

font-family：設定使用什么字體(宋體/微軟雅黑)，默認微軟雅黑，
font-size ：字體大小 16px;
font-weight:100/200/400/bold，字體的粗細，

11.背景

background:設定背景的復合屬性
分開的屬性有：
background-color:背景顏色 ，背景顏色比背景圖片更靠近底層，
background-image:背景圖片，接收url屬性，url('圖片路徑')
background-size:背景圖片大小，兩個屬性：x軸方向，y軸方向
background-position:背景定位，x軸與y軸，原點左上角是(0,0)
background-repeat:背景是否重復，no-repeat;repeat-x;repeat-y;

12. 浮動

浮動指讓元素脫離檔案流，“漂”起來.
檔案流指：前端頁面在瀏覽器中展示時是從左上角開始排列，橫向從左至右依次排列行內元素或行內塊元素，縱向是從上到下依次排列塊級元素，
要使塊級元素從左到右排列，可以display:inline-block,或使其浮動float.
浮動關鍵字：float,值為left/right.
浮動后：元素會脫離檔案流，變成行內-塊級元素，漂在其上方最近的塊級元素后面，一般在浮動元素外部設定一個容器，使浮動元素嵌套在容器里面，
元素浮動后的一個問題：浮動元素后面元素會受浮動影響，所以使用了浮動后就要清除浮動，
清除浮動方法1：添加一個空標簽，給空標簽設定clear屬性 clear:left/right/both，即清除左邊/右邊/兩邊的浮動效果
清除浮動方法2：給有浮動的元素添加一個父級元素，然后父級元素在style中設定overflow:hidden，

13. 定位

定位關鍵字：position
定位分為三種：相對定位(relative)/絕對定位(absolute)/固定定位(fixed)
相對定位(relative)：是元素本身相對自己的一個偏移量，但不脫離檔案流，即原來的位置還是屬于該元素，position:relative. 設定相對定位之后，可以設定4個方向的值，一般是作為父級來設定相對定位，為使用絕對定位做準備，body默認有相對定位，
絕對定位(absolute)：是元素相對于設定了相對定位的父級元素的一個偏移量，絕對定位之后是脫離檔案流的，先浮起來，所以如果該元素的父級沒有設定相對定位，則會往上找父父組，一直找到body元素，
固定定位(fixed)：是相對于瀏覽器視窗的定位，不會隨著頁面滾動而發生位置位置改變，也是脫離檔案流的，

14. 其他知識點：

width:寬
height:高
text-align文字對齊方式:left/right/center
line-height:行高
vertical-align:top/middle/bottom垂直方向上對齊方式
overflow:hidden 溢位隱藏，文字超出容器范圍隱藏文字

標籤：Html/Css

上一篇：css3 影片

下一篇：前端 JS 獲取 Image 影像 寬高 尺寸