python之 前端HTML/CSS基礎知識學習筆記

張衝andy發表於2017-06-06
Python前端HTMLCSS筆記
1. 檔案結構：
    HTML檔案的固定結構： <html>
        <head>...</head>
        <body>...</body>
    </html> html是根標籤
    head定義文件頭部，包含： title, script, style, link, meta
    body是網頁主要內容，包含：h1,h2-h6, p, a, img

2. 認識head標籤： <head>
        <title>...</title> 網頁標題 <meta>
        <link>
        <style>...</style>
        <script>...</script>
    </head> 3. 語義化：
    明白每個標籤的用途（在什麼情況下我可以使用這個標籤才合理）
        比如，網頁上的文章的標題就可以用標題標籤，
        網頁上的各個欄目的欄目名稱也可以使用標題標籤。
        文章中內容的段落就得放在段落標籤中，在文章中有想強調的文字，就可以使用em標籤表示強調等等。

4. 認識body標籤： <p>段落文字</p>              有三段就放三個<p></p>
    <h1>標題文字</h1> h1-h6共6個標題分級 <em>斜體文字（強調）</em> 斜體文字內容 <strong>粗體文字</strong> 粗體顯示文字內容 <span>單獨樣式文字 沒有語義的，它的應用就是為了 設定單獨的格式用的 <q>引用的文字</q> 引用的文字內容，會自動加上雙引號 <blockquote>大段引用</blockquote> 引用大段的文字內容，文字前後會加上縮排 <br/> 換行 <hr/> 水平橫線 &nbsp; 空格 <address>地址資訊</address> 地址資訊，通常用於公司地址顯示 <code>程式碼內容</code> 程式碼，通常是一行內 <pre>多行程式碼
多行程式碼,你需要在網頁中預顯示格式時都可以使用它 <ul> ul-li 列表資訊，以圓點顯示 <li>資訊1</li> <li>資訊2</li> ...... </ul> <ol> ol-li 列表資訊，帶上序號 <li>資訊</li> <li>資訊</li> ...... </ol> <div>排版內容<div> 排版中使用，相當於一個容器 確定邏輯部分：邏輯部分是頁面上相互關聯的一組元素，如欄目版塊 <div id="版塊名稱">…</div> div 帶上ID號，使之更清晰 <table>表格內容</table> 建立表格 <caption>標題文字</caption> 為表格新增標題文字 <tbody>...</tbody> 若加此標籤後，表格會一次性顯示出來（而非網頁載入一點顯示一點） <tr>表格一行</tr> 表格中的一行 <td>表格單元格</td> 表格中的一個單元格 <th>表格表頭</th> 表格頭部的一個單元格，表格表頭 <table summary="表格摘要">...</table> 為表格新增摘要，但不會被瀏覽器顯示出來 <a href="目標網址" title="滑鼠滑過時顯示文字">連結顯示文字</a> 連結標籤 target="_blank" 網頁將在新視窗中開啟 mailto: 網頁中郵件地址，可帶多個引數 mailto: 郵箱地址 cc= 抄送地址 bcc= 密抄地址 ; 多個郵箱地址 subject=郵件主題 body= 郵件內容 完整舉例: <a href="mailto:yy@sf.com ?cc=aa@sf.com &bcc=bb@sf.com &subject=主題 &body=郵件內容">傳送郵件</a> <img scr="圖片地址" alt="下載失敗時替換文字" title="提示文字" /> 5. 與使用者互動： 語法： <form method="傳送方式" action="伺服器檔案"></form> 舉例： <form method="post" action="save.php"> <label for="username">使用者名稱:</label> <input type="text" name="username" /> <label for="pass">密碼:</label> <input type="password" name="pass" /> </form> 表單控制元件： 文字框、文字域、按鈕、單選框、核取方塊 method: post/get 1. 文字框（文字/密碼） <form> <input type="text/password" name="名稱" value="文字" /> </form> type：有“text”和“password”兩種型別 name：為文字框命名，方便後臺ASP和PHP使用 value：文字框預設值，一般起提示作用 2. 文字域（多行文字） <textarea rows="行數" cols="列數">預設文字內容</textarea> cols：多行輸入域的列數 rows：多行輸入域的行數 3. 單選框、核取方塊 <input type="radio/checkbox" value="值" name="名稱" checked="checked"/> type：radio單選，checkbox核取方塊 value：提交資料到伺服器的值，後臺PHP處理使用 name：為控制元件命名，以備後臺程式ASP和PHP使用 checked：checked="checked"時，此選項預設被選中 注意：同一組的單選按鈕，name取值一定要一致 4. 下拉選單框 <form action="save.php" method="post" > <label>愛好:</label> <select multiple="multiple"> <label for="book>看書</label> <option value="看書" id="book">看書</option> <option value="旅遊">旅遊</option> <option value="運動">運動</option> <option value="購物">購物</option> </select> <input type="submit" value="提交"> <input type="reset" value="重置" /> </form> value：向伺服器提交值 selected：設定selected="selected"時，預設選中 multiple：multiple="multiple"時，可以使用Ctrl多選，但很醜 label：為了改進滑鼠易用性，滑鼠點選文字時，選擇上Radio 6. 認識CSS樣式： CSS：層疊樣式表（Cascading Style Sheets），主要用於定義HTML內容在瀏覽器內的顯示樣式 語法： 選擇符{ 屬性: 值} 舉例： p{ color: blue} 選擇符：又稱選擇器，指明要應用樣式規則的元素，如<html>、<body>、<h1>、<p>、<img>... 宣告：指的是冒號”:“ 多條宣告：使用分號”;“隔開，最好每行都加上分號 註釋：CSS使用 /**/，HTML註釋則使用<!--內容--> 7. CSS樣式分類： 1. 內聯式 <p style="color:red;font-size:12px">這裡文字是紅色。</p> 2. 嵌入式 較通用的一類，CSS樣式放置在<style>標籤中，而<style>通常要放置在<head>內 <style type="text/css"> span{ color:blue; font-size:12px; } </style> 3. 外部式 把CSS程式碼寫到一個單獨的外部檔案中，以.css副檔名結尾，在<head>內使用<link>標籤引入，如： <link href="base.css" rel="stylesheet" type="text/css" /> href: .css檔案路徑 rel和type: rel="stylesheet" type="text/css" 是固定寫法，不能改 三種方法的優先順序： 內聯式 > 嵌入式 > 外部式 就近原則，嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面 以上規則適用於相同權值的情況 8. CSS 類選擇器 語法： .類選器名稱{css樣式程式碼;} 舉例： <style type="text/css"> .stress{ color:red; } </style> 注意：前邊的小圓點是必須要有的 使用： <span class="stress">膽小如鼠 9. CSS ID選擇器 語法： #ID選擇器名稱{css樣式程式碼} 舉例： #setGreen{color:green;} <span id="setGreen">膽小如鼠 區別： 起始於 '.' 與 '#' 呼叫時 class= 與 id= ID選擇器只能在文件中使用一次，類選擇器則可以使用多次 一個元素可以使用多個類選擇器同時設定多個樣式，而ID選擇器是不可以的，如 <span class="stress bigsize">三年級 10.CSS 子選擇器 還有一個比較有用的選擇器子選擇器，即大於符號(>),用於選擇指定標籤元素的第一代子元素。舉例： .food>li{border:1px solid red;} 若大於符號換成空格( ),用於選擇指定標籤元素的所有後輩元素，舉例： .first span{border:1px solid red;} 11. CSS 通用選擇器 通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素： * {color: red;} 此時，所有元素的字型都為紅色 12. CSS 偽類選擇符 偽類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設定樣式，比如說我們給html中一個標籤元素的滑鼠滑過的狀態來設定字型顏色 a:hover{color:red;} 此時，把滑鼠放置到元素上邊，顏色就會切換為紅色 13. CSS 分組選擇符 多個標籤使用逗號隔開： h1,span{color:red;} 相當於： h1{color:red;} span{color:red;} 14. CSS 繼承 CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代 如： p{color:red;} /*可被span繼承*/ p{border:1px solid red;} /*此時，span將不繼承，邊框顯示紅色*/ 15. CSS 特殊性（權值） 權值： p{color:red;} /*權值為1*/ p span{color:green;} /*權值為1+1=2*/ .warning{color:white;} /*權值為10*/ p span.warning{color:purple;} /*權值為1+1+10=12*/ #footer .note p{color:yellow;} /*權值為100+10+1=111*/ 注意：還有一個權值比較特殊--繼承也有權值但很低，有的文獻提出它只有0.1，所以可以理解為繼承的權值最低。 層疊： 相同權值時，最後一個將被應用 重要性： 相同權值時，使用 !important 將得到最高權重，如 p{color:red!important;} 樣式優先順序為：瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式，使用 !important 優先順序比 使用者自己設定 還高 16. CSS 文字排版 1. 字型 body{font-family:"宋體";} body{font-family:"Microsoft Yahei";} 2. 字號，顏色 body{font-size:12px;color:#666} 3. 粗體 p span{font-weight:bold;} a{font-weight:bold;} 4. 斜體 p a{font-style:italic;} p{font-style:italic;} 5. 下劃線 p a{text-decoration:underline;} 6. 刪除線 .oldPrice{text-decoration:line-through;} 7. 縮排 p{text-indent:2em;} /*2em 表示兩倍文字大小*/ 8. 行間距 p{line-height:1.5em;} 9. 字間距、字母間距 h1{letter-spacing:50px;word-spacing:50px;} /*分別是字母、單詞間距*/ 19.對齊 h1{text-align:center;} /*left、right和center*/ 17. CSS 元素分類 塊狀元素： <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form> 內聯元素： <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code> 內聯塊狀元素： <img>、<input> 1. 塊狀元素： 1、每個塊級元素都從新的一行開始，並且其後的元素也另起一行。（真霸道，一個塊級元素獨佔一行） 2、元素的高度、寬度、行高以及頂和底邊距都可設定。 3、元素寬度在不設定的情況下，是它本身父容器的100%（和父元素的寬度一致），除非設定一個寬度。 注意：a{display:block;} /*可以把內聯元素 a 轉換為 塊狀元素*/ 2. 內聯元素： 1、和其他元素都在一行上； 2、元素的高度、寬度、行高及頂部和底部邊距不可設定； 3、元素的寬度就是它包含的文字或圖片的寬度，不可改變。 注意：display:inline 可以轉換成內聯元素 3. 內聯塊狀元素： 1、和其他元素都在一行上； 2、元素的高度、寬度、行高以及頂和底邊距都可設定。 注意：display:inline-block 可以轉換成內聯塊狀 18. CSS 盒模型 1. 邊框 div{ border:2px solid red;} 相當於： div{ border-width:2px; border-style:solid; border-color:red; } border-style: dashed（虛線）| dotted（點線）| solid（實線） border-color:#888; //前面的井號不要忘掉。 border-width: 有 thin | medium | thick（但不是很常用），最常還是用象素（px） 2. 上下左右邊框： div{border-bottom:1px solid red;} /*top、bottom、left和right*/ 3. 高度和寬度 div{ width:200px; /*寬度*/ height:30px; /*高度*/ padding:20px; /*元素到邊框的距離，又名為“填充”*/ border:1px solid red; margin:10px; /*兩盒子距離，又名為“邊界”*/ } 19. CSS 佈局模型 元素有三種佈局模型： 1、流動模型（Flow） 網頁在預設狀態下的 HTML 網頁元素都是根據流動模型來分佈網頁內容的 第一點，塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈，因為在預設狀態下，塊狀元素的寬度都為100% 第二點，在流動模型下，內聯元素都會在所處的包含元素內從左到右水平分佈顯示 2、浮動模型 (Float) 現在我們想讓兩個塊狀元素並排顯示 任何元素在預設情況下是不能浮動的，但可以用CSS定義為浮動，如div、p、table、img等元素都可以被定義為浮動 舉例： #div1{float:left;} #div2{float:right;} 3、層模型（Layer） 就像是影像軟體PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由於網頁大小的活動性，層佈局沒能受到熱捧 層模型有三種形式： 1、絕對定位(position: absolute) 需要設定position:absolute(表示絕對定位)，這條語句的作用將元素從文件流中拖出來 然後使用left、right、top、bottom屬性相對於其最接近的一個具有定位屬性的父包含塊進行絕對定位 如果不存在這樣的包含塊，則相對於body元素，即相對於瀏覽器視窗 舉例： div{ xxxx:yyyy; position:absolute; right:100px; top:20px; } 2、相對定位(position: relative) position:relative（表示相對定位），它透過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置 相對定位完成的過程是首先按static(float)方式生成一個元素(並且元素像層一樣浮動了起來)， 然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動 舉例： #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div> 3、固定定位(position: fixed) 如彈窗廣告 fixed：表示固定定位，與absolute定位型別類似，但它的相對移動的座標是檢視（螢幕內的網頁視窗）本身 它不會隨瀏覽器視窗的捲軸滾動而變化，除非你在螢幕中移動瀏覽器視窗的螢幕位置，或改變瀏覽器視窗的顯示大小， 因此固定定位的元素會始終位於瀏覽器視窗內檢視的某個位置，不會受文件流動影響 舉例： #div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px; } Relative與Absolute組合使用： 1、參照定位的元素必須是相對定位元素的前輩元素 <div id="box1"><!--參照定位的元素（前輩）--> <div id="box2">相對參照元素進行定位</div><!--相對定位元素--> </div> 2、參照定位的元素必須加入position:relative; #box1{ width:200px; height:200px; position:relative; } 3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了 #box2{ position:absolute; top:20px; left:30px; } 20. 程式碼簡寫： 1. 盒模型： margin:10px; 相當於 margin:10px 10px 10px 10px; （上右下左順序） margin:10px 40px; 相當於 margin:10px 40px 10px 40px; （上右 下左順序） padding, border和 margin是一致的； 2. 顏色值： p{color:#000000;} 相當於 p{color: #000;} p{color: #336699;} 相當於 p{color: #369;} 3. 字型： body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋體",sans-serif; } 編寫為： body{font:italic small-caps bold 12px/1.5em "宋體",sans-serif;} 注意： 1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性未指定將自動使用預設值。 2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。 21. 長度值 1. 畫素 畫素為什麼是相對單位呢？因為畫素指的是顯示器上的小點（CSS規範中假設“90畫素=1英寸”） 2. em 假定 font-size設定 14px，那麼 1em=14px 3. 百分比 p{font-size:12px;line-height:130%}

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/31383567/viewspace-2140366/，如需轉載，請註明出處，否則將追究法律責任。

相關文章