目錄

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

python day 21

2019/11/02

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

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。

1. 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)是一樣的意思。

1. 選擇器：

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

1. 盒模型

任何一個標簽都是一個盒模型，每個盒模型都有四個方向，是個矩形。
盒模型組成部分：
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;

1. 字體

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;

1. 浮動

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

1. 定位

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

1. 其他知識點：

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