python之前端HTML/CSS基礎知識學習筆記
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>單獨樣式文字</span> 沒有語義的，它的應用就是為了 設定單獨的格式用的
<q>引用的文字</q> 引用的文字內容，會自動加上雙引號
<blockquote>大段引用</blockquote> 引用大段的文字內容，文字前後會加上縮排
<br/> 換行
<hr/> 水平橫線
空格
<address>地址資訊</address> 地址資訊，通常用於公司地址顯示
<code>程式碼內容</code> 程式碼，通常是一行內
<pre>多行程式碼</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">膽小如鼠</span>
9. CSS ID選擇器
語法：
#ID選擇器名稱{css樣式程式碼}
舉例：
#setGreen{color:green;}
<span id="setGreen">膽小如鼠</span>
區別：
起始於 `.` 與 `#`
呼叫時 class= 與 id=
ID選擇器只能在文件中使用一次，類選擇器則可以使用多次
一個元素可以使用多個類選擇器同時設定多個樣式，而ID選擇器是不可以的，如 <span class="stress bigsize">三年級</span>
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%}
本文轉自 張衝andy 部落格園部落格，原文連結： http://www.cnblogs.com/andy6/p/6953817.html ，如需轉載請自行聯絡原作者
相關文章
- python之 前端HTML/CSS基礎知識學習筆記Python前端HTMLCSS筆記
- 前端基礎知識複習之html前端HTML
- 前端基礎知識複習之CSS前端CSS
- 前端-html和css基礎知識前端HTMLCSS
- 前端基礎知識之html和css全解前端HTMLCSS
- 基礎知識學習筆記筆記
- 前端學習記錄 1：HTML 基礎知識點歸納前端HTML
- matlab學習筆記之基礎知識（一）Matlab筆記
- RxJava 學習筆記 -- 基礎知識RxJava筆記
- Python學習筆記—day1—基礎知識Python筆記
- HTML5學習之Canvas基礎知識HTMLCanvas
- linux基礎知識學習筆記Linux筆記
- 前端基礎學習1 | Web、Html、CSS前端WebHTMLCSS
- HTML5學習之Web Storage基礎知識HTMLWeb
- GO 學習筆記 《1. 基礎知識》Go筆記
- 虛擬化學習筆記-基礎知識筆記
- Java基礎知識學習筆記總結Java筆記
- R語言學習筆記：基礎知識R語言筆記
- Node基礎知識點--學習筆記（一）筆記
- PHP學習筆記（1）–基礎知識篇PHP筆記
- C++基礎知識學習筆記（1）C++筆記
- C++基礎知識學習筆記（3）C++筆記
- CSS 基礎學習筆記CSS筆記
- 前端進階筆記之核心基礎知識---那些HTML標籤你熟悉嗎？前端筆記HTML
- 資料庫學習筆記 - MySQL基礎知識資料庫筆記MySql
- Redis基礎知識（學習筆記3--Redlock）Redis筆記
- Redis基礎知識（學習筆記11--SDS）Redis筆記
- LiteOS學習筆記[01]-weharmonyos-基礎知識筆記
- 技術分享 | Kubernetes 學習筆記之基礎知識篇筆記
- Html標籤知識點學習筆記HTML筆記
- 前端開發知識點之 html &css前端HTMLCSS
- HTML5學習之離線儲存基礎知識HTML
- iOS開發學習筆記：基礎知識之代理模式之老王的故事iOS筆記模式
- web前端教程之HTMLCSS學習筆記HTML5基礎Web前端HTMLCSS筆記
- Redis基礎知識（學習筆記5--Redis Cluster）Redis筆記
- Redis基礎知識（學習筆記19--Redis Sentinel）Redis筆記
- JVM學習之JVM基礎知識JVM
- Python基礎學習筆記Python筆記