標籤：也有 cte 圓點 美國 gre 關係 相容 改進 imp
一、Html和CSS的關係1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓使用者瀏覽的資訊，可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如，標題字型、顏色變化，或為標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之為表現。
3. JavaScript是用來實現網頁上的特效效果。如：滑鼠滑過彈出下拉式功能表。或滑鼠滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換。可以這麼理解，有動畫的，有互動的一般都是用JavaScript來實現的。
二、常見、常用標籤認識html檔案基本結構 1. <html></html>稱為根標籤，所有的網頁標籤都在<html></html>中。
2. <head> 標籤用於定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標籤，頭部標籤在下一小節中會有詳細介紹。
3. 在<body>和</body>標籤之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標籤，在這裡的標籤中的內容會在瀏覽器中顯示出來。
（1） <p></p> p標籤、段落標籤
（2） <div></div> 把一些獨立的邏輯部分劃分出來，放在一個<div>標籤中，這個<div>標籤的作用就相當於一個容器 <div id="版塊名稱">…</div>給div命名
（3） <span></span> span標籤是沒有語義的，它的作用就是為了設定單獨的樣式用的。
（4）<h></h> h標籤、標題標籤，標題標籤一共有6個，h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。
（5）<strong>和<em>標籤，在瀏覽器中<em> 預設用斜體表示，<strong> 用粗體表示。
（6）<q>引用文本</q> q標籤，短文引用
（7）<blockquote>引用文本</blockquote> blockquote標籤，長文本引用
（8）<br />標籤 <br>標籤 分行顯示文本
（9） 空格
（10）<hr> <hr>標籤 添加水平橫線
（11）<address>聯絡地址資訊</address> <address>標籤，為網頁加入地址資訊
（12）<code>代碼語言</code> code標籤 在網頁中顯示一些電腦專業的編程代碼，當代碼為一行代碼時，你就可以使用<code>標籤
（13）<pre>語言程式碼片段</pre> pre標籤 在網頁中加入大段代碼
（14）ul標籤，添加新聞資訊列表
<ul> <li>資訊</li> <li>資訊</li> ......</ul>
（15）ol標籤，添加圖書銷售熱門排行榜
<ol> <li>資訊</li> <li>資訊</li> ......</ol>
（16）table標籤，認識網頁上的表格
運行結果
（17）caption標籤，為表格添加標題和摘要
<table> <caption>標題文本</caption> <tr> <td>…</td> <td>…</td> … </tr>…</table>
（18） <a href="目標網址" title="滑鼠滑過顯示的文本">連結顯示的文本</a> <a>標籤 連結到另一個頁面
例如：
<a href="http://www.imooc.com" title="點擊進入慕課網">click here!</a>
在建立瀏覽器視窗中開啟連結：
<a href="目標網址" target="_blank">click here!</a>
使用mailto在網頁中連結Email地址：
<a href="mailto:[email protected]?subject=觀了不起的蓋茨比有感&body=你好，對此評論有些想法">對此影評有何感想，發送郵件給我</a>
（19）<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本"> <img>標籤 為網頁插入圖片
舉例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
（20）<form></form> 標籤 form標籤 表單標籤，與使用者互動; 表單控制項（文字框 input、文本域 textarea、按鈕 button、單選框、複選框等）
文法：
<form method="傳送方式" action="伺服器檔案">文本輸入框、密碼輸入框
舉例：
<form> 姓名： <input type="text" name="myName"> <br/> 密碼： <input type="password" name="pass"></form>文本域，支援多行文本輸入
舉例：
<form method="post" action="save.php">使用單選框、複選框，讓使用者選擇<label>聯絡我們</label><textarea cols="50" rows="10" >在這裡輸入內容...</textarea></form>
文法：
<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>
1、type:
當 type="radio" 時，控制項為單選框
當 type="checkbox" 時，控制項為複選框
2、value：提交資料到伺服器的值（背景程式PHP使用）
3、name：為控制項命名，以備背景程式 ASP、PHP 使用
4、checked：當設定 checked="checked" 時，該選項被預設選中
使用下拉式清單方塊，節省空間的舉例：
<form action="save.php" method="post" >
<label>愛好:</label>
<select>
<option value="看書">看書</option>
<option value="旅遊" selected="selected">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
在<select>標籤中設定multiple="multiple"屬性，就可以實現多選功能
舉例：
<form action="save.php" method="post" >
<label>愛好:</label>
<select multiple="multiple">
<option value="看書">看書</option>
<option value="旅遊">旅遊</option>
<option value="運動">運動</option>
<option value="購物">購物</option>
</select>
</form>
文法：
<input type="submit" value="提交">使用重設按鈕，重設表單資訊
文法：
<input type="reset" value="重設">
label標籤不會向使用者呈現任何特殊效果，它的作用是為滑鼠使用者改進了可用性。如果你在 label 標籤內點擊文本，就會觸發此控制項。就是說，當使用者單擊選中該label標籤時，瀏覽器就會自動將焦點轉到和標籤相關的表單控制項上（就自動選中和該label標籤相關連的表單控制項上）。
文法：
<label for="控制項id名稱">三、CSS樣式和文法認識CSS樣式
<style type="text/css"> 嵌入式
p{
font-size:20px;/*設定文字字型大小*/
color:red;/*設定文字顏色*/
font-weight:bold;/*設定字型加粗*/
}
</style>
內聯式css樣式，直接寫在現有的HTML標籤中內聯式css樣式表就是把css代碼直接寫在現有的HTML標籤中，如下面代碼：
<p style="color:red">這裡文字是紅色。</p>外部式css樣式，寫在單獨的一個檔案中
外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部檔案中，這個css樣式檔案以“.css”為副檔名，在<head>內（不是在<style>標籤內）使用<link>標籤將css樣式檔案連結到HTML檔案內，如下面代碼：
<link href="base.css" rel="stylesheet" type="text/css" />
注意：
1、css樣式檔案名稱以有意義的英文字母命名，如 main.css。
2、rel="stylesheet" type="text/css" 是固定寫法不可修改。
3、<link>標籤位置一般寫在<head>標籤之內。
三種方法的優先順序優先順序：內聯式 > 嵌入式 > 外部式 （但是嵌入式>外部式有一個前提：嵌入式css樣式的位置一定在外部式的後面。如右代碼編輯器就是這樣，<link href="style.css" ...>代碼在<style type="text/css">...</style>代碼的前面（實際開發中也是這麼寫的）。） 總結來說，就是--就近原則（離被設定元素越近優先順序別越高）
每一條css樣式聲明（定義）由兩部分組成，形式如下：
選取器{ 樣式;}
標籤選取器
標籤選取器其實就是html代碼中的標籤。如右側代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼：
p{font-size:12px;line-height:1.6em;}
上面的css樣式代碼的作用：為p標籤設定12px字型大小，行間距設定1.6em的樣式。
類別選取器
類別選取器在css樣式編碼中是最常用到的，如右側代碼編輯器中的代碼:可以實現為“膽小如鼠”、“勇氣”字型設定為紅色。
文法：
.類選器名稱{css樣式代碼;}
注意：
1、英文圓點開頭
2、其中類選器名稱可以任意起名（但不要起中文噢）
使用方法：
第一步：使用合適的標籤把要修飾的內容標記起來，如下：
<span>膽小如鼠</span>
第二步：使用class="類別選取器名稱"為標籤設定一個類，如下：
<span class="stress">膽小如鼠</span>
第三步：設定類選器css樣式，如下：
.stress{color:red;}/*類前面要加入一個英文圓點*/
ID選取器
ID選取器都類似於類選擇符，但也有一些重要的區別：
1、為標籤設定id="ID名稱"，而不是class="類名稱"。
2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。
右側代碼編輯器中就是一個ID選擇符的完整執行個體：
<style type="text/css">
#stress{
color:red;
}
#setGreen{
color:green;
}
</style>
</head>
<body>
<h1>勇氣</h1>
<p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個勇氣來回答老師提出的問題。學校舉辦的活動我也沒勇氣參加。</p>
<p>到了三年級下學期時，我們班上了一節<span id="setGreen">公開課</span>，老師提出了一個很簡單的問題，班裡很多同學都舉手了，甚至成績比我差很多的，也舉手了，還說著："我來，我來。"我環顧了四周，就我沒有舉手。</p>
</body>
類和ID選取器的區別
相同點：可以應用於任何元素
不同點：
1、ID選取器只能在文檔中使用一次。與類別選取器不同，在一個HTML文檔中，ID選取器只能使用一次，而且僅一次。而類別選取器可以使用多次。
下面代碼是正確的：
<p>三年級時，我還是一個<span class="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span class="stress">勇氣</span>來回答老師提出的問題。</p>
而下面代碼是錯誤的：
<p>三年級時，我還是一個<span id="stress">膽小如鼠</span>的小女孩，上課從來不敢回答老師提出的問題，生怕回答錯了老師會批評我。就一直沒有這個<span id="stress">勇氣</span>來回答老師提出的問題。</p>
2、可以使用類別選取器詞列表方法為一個元素同時設定多個樣式。我們可以為一個元素同時設多個樣式，但只可以用類別選取器的方法實現，ID選取器是不可以的（不能使用 ID 詞列表）。
下面的代碼是正確的(完整代碼見右側代碼編輯器)
.stress{ color:red;}.bigsize{ font-size:25px;}<p>到了<span class="stress bigsize">三年級</span>下學期時，我們班上了一節公開課...</p>
上面代碼的作用是為“三年級”三個文字設定文本顏色為紅色並且字型大小為25px。
下面的代碼是不正確的(完整代碼見右側代碼編輯器)
#stressid{ color:red;}#bigsizeid{ font-size:25px;}<p>到了<span id="stressid bigsizeid">三年級</span>下學期時，我們班上了一節公開課...</p>
上面代碼不可以實現為“三年級”三個文字設定文本顏色為紅色並且字型大小為25px的作用。
子選取器
子選取器，即大於符號(>),用於選擇指定標籤元素的第一代子項目。如右側代碼編輯器中的代碼：
.food>li{border:1px solid red;}
這行代碼會使class名為food下的子項目li（水果、蔬菜）加入紅色實線邊框。
包含(後代)選取器
包含選取器，即加入空格,用於選擇指定標籤元素下的後輩元素。如右側代碼編輯器中的代碼：
.first span{color:red;}
這行代碼會使第一段文字內容中的“膽小如鼠”字型顏色變為紅色。
請注意這個選取器與子選取器的區別，子選取器（child selector）僅是指它的直接後代，或者你可以理解為作用於子項目的第一代後代。而後代選取器是作用於所有子後代元素。後代選取器通過空格來進行選擇，而子選取器是通過“>”進行選擇。
總結：>作用於元素的第一代後代，空格作用於元素的所有後代。
通用選取器
通用選取器是功能最強大的選取器，它使用一個（*）號指定，它的作用是匹配html中所有標籤元素，如下使用下面代碼使用html中任意標籤元素字型顏色全部設定為紅色：
* {color:red;}
偽類選擇符
偽類選擇符，為什麼叫做偽類選擇符，它允許給html不存在的標籤（標籤的某種狀態）設定樣式，比如說我們給html中一個標籤元素的滑鼠滑過的狀態來設定字型顏色：
a:hover{color:red;}
上面一行代碼就是為 a 標籤滑鼠滑過的狀態設定字型顏色變紅。這樣就會使第一段文字內容中的“膽小如鼠”文字加入滑鼠滑過字型顏色變為紅色特效。
關於偽選擇符：
關於偽類選擇符，到目前為止，可以相容所有瀏鑒器的“偽類選擇符”就是 a 標籤上使用 :hover 了（其實偽類選擇符還有很多，尤其是 css3 中，但是因為不能相容所有瀏覽器，本教程只是講了這一種最常用的）。其實 :hover 可以放在任意的標籤上，比如說 p:hover，但是它們的相容性也是很不好的，所以現在比較常用的還是 a:hover 的組合。
分組選擇符
當你想為html中多個標籤元素設定同一個樣式時，可以使用分組選擇符（，），如下代碼為右側代碼編輯器中的h1、span標籤同時設定字型顏色為紅色：
h1,span{color:red;}
它相當於下面兩行代碼：
h1{color:red;}span{color:red;}
繼承
CSS的某些樣式是具有繼承性的，那麼什麼是繼承呢？繼承是一種規則，它允許樣式不僅應用於某個特定html標籤元素，而且應用於其後代。比如下面代碼：如某種顏色應用於p標籤，這個顏色設定不僅應用p標籤，還應用於p標籤中的所有子項目文本，這裡子項目為span標籤。
<title>繼承</title>
<style type="text/css">
p{color:red;}
p{border:1px solid red;}
</style>
可見右側結果視窗中p中的文本與span中的文本都設定為了紅色。但注意有一些css樣式是不具有繼承性的。如border:1px solid red;特殊性
標籤的權值為1，類選擇符的權值為10，ID選擇符的權值最高為100。例如下面的代碼：
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;}p{color:green;}<p class="first">三年級時，我還是一個<span>膽小如鼠</span>的小女孩。</p>
這時 p 段落中的文本會顯示的red紅色。
注意：!important要寫在分號的前面
這裡注意當網頁製作者不設定css樣式時，瀏覽器會按照自己的一套樣式來顯示網頁。並且使用者也可以在瀏覽器中設定自己習慣的樣式，比如有的使用者習慣把字型大小設定為大一些，使其查看網頁的文本更加清楚。這時注意樣式優先順序為：瀏覽器預設的樣式 < 網頁製作者樣式 < 使用者自己設定的樣式，但記住!important優先順序樣式是個例外，權值高於使用者自己設定的樣式。
文字排版--字型為網頁中的文字設定字型為宋體。
body{font-family:"宋體";}
代碼：
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微軟雅黑";}
注意：第一種方法比第二種方法相容性更好一些。
文字排版--字型大小、顏色使用下面代碼設定網頁中文字的字型大小為12像素，並把字型顏色設定為#666(灰色)：
body{font-size:12px;color:#666}文字排版--粗體
使用css樣式來改變文字的樣式：粗體、斜體、底線、刪除線，可以使用下面代碼實現設定文字以粗體樣式顯示出來。
p span{font-weight:bold;}文字排版--斜體
以下代碼可以實現文字以斜體樣式在瀏覽器中顯示：
p a{font-style:italic;}<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>文字排版--底線
為文字設定為底線樣式，這樣可以在視覺上強調文字，可以使用下面代碼來實現：
p a{text-decoration:underline;}<p>三年級時，我還是一個<a>膽小如鼠</a>的小女孩。</p>文字排版--刪除線
原價上的刪除線使用下面代碼就可以實現：
.oldPrice{text-decoration:line-through;}段落排版--縮排
中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現：
p{text-indent:2em;}<p>1922年的春天，一個想要成名名叫尼克卡拉威（托比?馬奎爾Tobey Maguire 飾）的作家，離開了美國中西部，來到了紐約。那是一個道德感漸失，爵士流行，走私為王，股票飛漲的時代。為了追尋他的美國夢，他搬入紐約附近一海灣居住。</p>
注意：2em的意思就是文字的2倍大小。
在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實現設定段落行間距為1.5倍。
p{line-height:1.5em;}<p>菲茨傑拉德，二十世紀美國文學巨擘之一，兼具作家和編劇雙重身份。他以詩人的敏感和戲劇家的想象為"爵士時代"吟唱華麗輓歌，其詩人和夢想家的氣質亦為那個奢靡年代的不二註解。</p>段落排版--中文字間距、字母間距
中文字間隔、字母間隔設定：
如果想在網頁排版中設定文字間隔或者字母間隔就可以使用 letter-spacing 來實現，如下面代碼：
h1{ letter-spacing:50px;}...<h1>了不起的蓋茨比</h1>
注意：這個樣式使用在英文單詞時，是設定字母與字母之間的間距。
單詞間距設定：
如果我想設定英文單詞之間的間距呢？可以使用 word-spacing 來實現。如下代碼：
h1{ word-spacing:50px;}...<h1>welcome to imooc!</h1>段落排版--對齊
為塊狀元素中的文本、圖片設定置中樣式嗎？可以使用text-align樣式代碼，如下代碼可實現文本置中顯示。(那麼什麼是塊狀元素呢？在後面的11-1、11-2小節中會講到。)
h1{ text-align:center;}<h1>了不起的蓋茨比</h1>
同樣可以設定居左：
h1{ text-align:left;}<h1>了不起的蓋茨比</h1>
還可以設定居右：
h1{ text-align:right;}<h1>了不起的蓋茨比</h1>
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
