標籤：紅色 text 參數 地址 fixed ros 引入 選取器 旅遊
經過一天的學習，把慕課網的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:[email protected] [email protected] &[email protected] &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%}
〖前端開發〗HTML/CSS基礎知識學習筆記
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
