WEB 前端--Day2(css基礎)
一、html的常用標籤
1.表單標籤【重點掌握】
作用：可以提交不同的資料到指定的伺服器
標籤：
<form></form>:表示表單的範圍【父標籤】
作用：用於採集使用者輸入的資訊
標籤分為三大類：
表單標籤：包含資料提交到的位置【伺服器】，資料的提交方式【get和post】
表單域：用於採集使用者資訊
表單按鈕：提交按鈕，重置吧【復原】按鈕，普通按鈕
屬性：
action：提交到的伺服器的地址
method：提交採用的方法
enctype：做檔案上傳的時候需要設定這個屬性，很少用
子標籤：
<input />表示輸入項，可以輸入內容或者選擇內容【子標籤】
type：型別
text:普通文字
password：密碼
注意：可以將輸入的文字隱藏顯示
radio：單項選擇框【單選輸入項】
checkbox：多項選擇框
注意：單項輸入項和多項輸入項需要新增一個name屬性，用於識別
checked="checked"表示預設選中
都需要新增一個value屬性，表示需要提交給伺服器的值
file：檔案
email：郵箱
color：顏色
date：日期
<select></select>:表示下拉選單項【子標籤】
<option></option>: 下拉選單項中的選項【select標籤的子標籤】
name，value，預設選中：selected="selected"
<textarea></textarea>；文字域【子標籤】
cols:列
rows:行
注意：通過行和列來定義文字域的大小
表單按鈕：
<input />
type:按鈕型別
button：普通按鈕
submit：提交按鈕
reset：重置按鈕
http://127.0.0.1:8020/Day2Code/1.%E5%BC%80%E5%BF%83%E9%A4%90%E5%8E%85%E4%BD%9C%E4%B8%9A.html?phoneNum=yhtjhtj&pwd=jyj&username=jyje&sex=female&hobby=ppq&hobby=pq&headImg=&birth=1988&des=jyjjyj程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="1.開心餐廳作業.html" method="post"> <!--name:用於給伺服器進行識別不同型別的資料--> <!--value:用於 給伺服器識別同類型資料中的不同的資料--> <!--普通文字輸入項--> 手機號碼：<input type="text" name="phoneNum" /><br /> <!--密碼輸入項--> 建立密碼：<input type="password" name="pwd" /><br /> 姓 名：<input type="text" name="username" /><br /> <!--單項選擇框--> 性 別：<input type="radio" name="sex" value="male" checked="checked"/>男 <input type="radio" name="sex" value="female"/>女 <br /> <!--多項選擇框--> 愛 好：<input type="checkbox" name="hobby" value="lq" checked="checked"/>籃球 <input type="checkbox" name="hobby" value="ppq"/>乒乓球 <input type="checkbox" name="hobby" value="pq"/>排球 <input type="checkbox" name="hobby" value="zq"/>足球 <br /> <!--檔案--> 上傳頭像：<input type="file" name="headImg" /><br /> <!--下拉選擇框--> 出生年月：<select name="birth"> <option>1988</option> <option>1989</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> </select> <br /> <!--文字域--> 自我評價：<textarea name="des" cols="20" rows="10"></textarea><br /> <!--按鈕--> <!--按鈕上預設的文字為提交和重置，但是，可以通過value重新設定按鈕上的文字--> <input type="submit" value="regi" /> <!--注意：重置按鈕並不是清空，而是將表單中的資料恢復到最初狀態--> <input type="reset" value="reset" /> </form> </body> </html><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <form action="1.開心餐廳作業.html" method="post"> <!--name:用於給伺服器進行識別不同型別的資料--> <!--value:用於 給伺服器識別同類型資料中的不同的資料--> <!--普通文字輸入項--> 手機號碼：<input type="text" name="phoneNum" placeholder="請輸入手機號" /><br /> <!--密碼輸入項--> 建立密碼：<input type="password" name="pwd" /><br /> 姓 名：<input type="text" name="username" /><br /> <!--單項選擇框--> 性 別：<input type="radio" name="sex" value="male" checked="checked"/>男 <input type="radio" name="sex" value="female"/>女 <br /> <!--多項選擇框--> 愛 好：<input type="checkbox" name="hobby" value="lq" checked="checked"/>籃球 <input type="checkbox" name="hobby" value="ppq"/>乒乓球 <input type="checkbox" name="hobby" value="pq"/>排球 <input type="checkbox" name="hobby" value="zq"/>足球 <br /> <!--檔案--> 上傳頭像：<input type="file" name="headImg" /><br /> <!--下拉選擇框--> 出生年月：<select name="birth"> <option>1988</option> <option>1989</option> <option>1990</option> <option>1991</option> <option>1992</option> <option>1993</option> </select> <br /> <!--文字域--> 自我評價：<textarea name="des" cols="20" rows="10"></textarea><br /> <!--瞭解--> <!--郵箱--> <!--placeholder:表示提示內容--> 郵箱：<input type="email" placeholder="請輸入郵箱"/><br /> <!--隱藏域--> <input type="hidden" /><br /> <!--時間--> <input type="date" /><br /> <!--顏色--> <input type="color" /><br /> <!--進度條--> <input type="range" min="0" max="10" /> <!--按鈕--> <!--按鈕上預設的文字為提交和重置，但是，可以通過value重新設定按鈕上的文字--> <input type="submit" value="regi" /> <!--注意：重置按鈕並不是清空，而是將表單中的資料恢復到最初狀態--> <input type="reset" value="reset" /> </form> </body> </html>【面試題：get和post的區別】
相同點：二者都是用於向伺服器提交資料的方式
不同點：
a.get請求會將資料攜帶在請求的地址【網址】，post不會攜帶
b.get請求的安全級別較低，post相對較高
c.get請求傳輸資料的效率較高，post則相對較低
d.get請求傳輸資料對資料有大小限制，post則沒有
練習：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <h3>還沒有千鋒教育賬號？</h3> <form> <table width="100%"> <tr> <td align="right">電子郵箱</td> <td> <input type="email" name="mail" /> </td> </tr> <tr> <td> </td> <td> 你可以使用<a href="#">郵箱</a>或者<a href="#">手機號</a>進行註冊 </td> </tr> <tr> <td align="right">性別</td> <td> <input type="radio" name="sex"/>女 <input type="radio" name="sex"/>男 </td> </tr> <tr> <td align="right">生日</td> <td> <select name="year"> <option></option> <option></option> <option></option> </select>年 <select name="month"> <option></option> <option></option> <option></option> </select>月 <select name="day"> <option></option> <option></option> <option></option> </select>日 </td> </tr> <tr> <td> </td> <td> <input type="radio" />同意<a href="#">千鋒教育服務條款</a> </td> </tr> <tr> <td> </td> <td> <input type="submit" value="立即註冊"/> </td> </tr> </table> </form> </body> </html>
2.頭標籤
html標籤由兩部分組成：head和body
head標籤就是頭標籤
<head></head>:頭標籤【父標籤】
<title></tile>；指定瀏覽器標題欄顯示的內容【標題】
<base />:設定超連結的基本位置，可以統一設定當前頁面中超連結開啟的方式
<meta></meta>:設定和頁面相關的一些內容
name：關鍵字
content：內容
charset：設定當前頁面的編碼格式【字符集】
<link />:引入外部檔案【css檔案】
程式碼演示：
<!DOCTYPE html> <html> <head> <!--早期的搜尋引擎，通過關鍵字進行搜尋--> <meta charset="utf-8" name="keywords" content="Python,千鋒" /> <!--當前頁面經過3秒之後自動重新整理，跳轉到指定頁面--> <!--<meta http-equiv="refresh" content="3;url=http://www.baidu.com" />--> <title>當前頁面的標題</title> <!--統一設定當前頁面中的資訊，表示當前頁面中出現的所有的超連結都使用_blank的方式開啟--> <base target="_blank"/> <!--載入外部的css檔案--> <link href="" /> </head> <body> <a href="1.開心餐廳作業.html">超連結一</a> </body> </html>
3.框架標籤
<frameset></frameset>:劃分規則【父標籤】
rows：按照行進行劃分
cols：按照列進行劃分
<frame />:具體顯示的頁面【子標籤】
注意：使用框架標籤的時候，不能寫在body中，也不能寫在body外面，使用了框架標籤之後，則需要將body標籤刪除掉【違背了html的規範，很少用 已淘汰】
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <!--列分 <frameset cols="20%,50%,30%"> <frame src="1.開心餐廳作業.html"/> <frame src="1.開心餐廳作業.html"/> <frame src="1.開心餐廳作業.html"/> </frameset> --> <!--行分 <frameset rows="20%,50%,30%"> <frame src="1.開心餐廳作業.html"/> <frame src="1.開心餐廳作業.html"/> <frame src="1.開心餐廳作業.html"/> </frameset> --> <!--混合分--> <frameset rows="20%,*"> <frame src="1.開心餐廳作業.html"/> <frameset cols="40%,*"> <frame src="1.開心餐廳作業.html"/> <frame src="1.開心餐廳作業.html"/> </frameset> </frameset> </html>
二、css標準
1.概念
為了解決html結構和表現混雜在一起的問題，則引入css這個新的規範來專門負責網頁的表現
html和css的關係：內容結構和表現形式的關係，由html確定網頁的結構內容，通過css確定頁面的表現形式
css:Cascading Style Sheet，層疊樣式表，它用於控制網頁樣式並允許將將樣式資訊和網頁內容分離的一種標記性語言，對於網頁的樣式，推薦使用css
層疊：使用不同的新增方式為同一個標籤新增不同的樣式，最後將所有的樣式層疊起來，作用於同一個標籤
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*設定h2和p的樣式*/ h2{ color: red; } p{ color: blue; } </style> </head> <body> <!--<h2><font color="red">標題一</font></h2> <p><font color="blue">段落一</font></p> <h2><font color="red">標題一</font></h2> <p><font color="blue">段落一</font></p> <h2><font color="red">標題一</font></h2> <p><font color="blue">段落一</font></p>--> <h2>標題一</h2> <p>段落一</p> <h2>標題一</h2> <p>段落一</p> <h2>標題一</h2> <p>段落一</p> <h2>標題一</h2> <p>段落一</p> <h2>標題一</h2> <p>段落一</p> <h2>標題一</h2> <p>段落一</p> </body> </html>傳統html設定表現的缺點：
a.維護困難【為了修改某個標籤需要花費大量的時間】
b.樣式不足【文字間距，段落縮排等都是辦不到的】
c.定位困難【整體佈局頁面時，html對各個位置的標籤照顧不全面】
2.css與瀏覽器
遵循：保證在常用瀏覽器【IE，FireFox，谷歌】中的顯示是相容的
三、css的核心基礎【掌握】
1.css的語法規則
舉例：描述一個人的特徵，列出一張表
張飛{
民族：漢族；
體重:100kg;
性格：悶騷；
}
組成：姓名，屬性，屬性值
標題{
字型：宋體；
字號：15畫素；
顏色：紅色；
裝飾：下劃線；
}
h2{
font-family:宋體；
font-size:15px;
color:red;
text-decoration:underline;
}
說明：css由三部分組成：物件，屬性和屬性值【css的思想就是首先指定對什麼物件進行設定，然後指定該物件的哪個方面的屬性進行設定，最後給出屬性的值】
css的選擇器：為了能夠使得css和html元素對應起來，就必須指定一套完整的規則，實現css對html的選擇
css的語法：
選擇器名稱{
屬性1：值1；
。。。
}
2.css的選擇器
2.1萬用字元選擇器
作用：可以匹配任意的標籤【元素】
語法：
*{
屬性1：值1；
}
使用場景：當前頁面中需要統一設定的格式，一般採用萬用字元選擇器【內外邊距】
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--css程式碼--> <style> /*選擇器：萬用字元選擇器*/ *{ color: red; } </style> </head> <body> <p>hello</p> <h4>html</h4> <div>today is a good day</div> </body> </html>
2.2標籤名稱選擇器
作用：對某一類標籤進行設定樣式
語法：
標籤名稱{
屬性1：值1；
}
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*標籤名稱選擇器*/ div{ color: blue; } </style> </head> <body> <div>1111</div> <div>2222</div> <div>3333</div> <p>hello</p> </body> </html>
2.3類選擇器
使用場景：標籤名稱選擇器 一旦宣告，那麼頁面中所有的相應的標籤都會被修改樣式，但是，如果希望其中的某一個是不一樣的設定，則需要使用類選擇器或者id選擇器
語法：
.類名{
屬性1：值1；
}
說明：類名可以自定義，一般情況下，類名儘量全部小寫
主要是為了結合標籤中的屬性class使用
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*結論一：類選擇器的優先順序高於標籤名稱選擇器*/ /*類選擇器*/ .red{ color: red; } .green{ color: green; } .big{ font-size: 30px; } /*標籤名稱選擇器*/ p{ color: blue; } </style> </head> <body> <p class="red">欲窮千里目</p> <p class="green">更上一層樓</p> <p>這是一首詩</p> <!--結論二：同一個類選擇器可以應用於不同的標籤【多次使用】--> <p class="green">abc</p> <!--結論三：多個類選擇器可以同時作用於同一個標籤--> <h4 class="red big">標題</h4> <!--選擇器的好處：可以將多種不同的樣式作用於同一個標籤，在實際製作網站的過程中可以減少程式碼量，方便後期的維護--> </body> </html>
2.4id選擇器
id選擇器的用法和類選擇器的用法基本是相同的，不同之處在於id選擇器一般情況下，在同一個頁面中只能使用一次，因此針對性更強
語法：
#id名稱{ 屬性1：值1； }說明：id名稱可以自定義
id選擇器為了結合屬性id使用
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*id選擇器*/ /*文字加粗*/ #bold{ font-weight: bold; } #color{ color: cyan; } </style> </head> <body> <p id="bold">輕輕地我來了</p> <p id="color">正如你輕輕地走</p> <!--注意1：將id選擇器作用於不同的標籤，顯示效果正常，但是不建議這樣使用 原因：每個標籤中的id可以作為該標籤的唯一識別符號， 在javascript中可以通過getElementById(“bold”)獲取一個指定id對應的標籤物件. 如果作用於多個標籤，則在查詢的時候會出錯 --> <p id="bold">我揮一揮衣袖</p> <!--注意2：多個id選擇器作用於同一個標籤，將不起任何作用，這被認為完全錯誤的語法--> <p id="bold color">不帶走一片雲彩</p> </body> </html>優先順序：
<!DOCTYPE html> <html> <head> <!--在標籤名稱選擇器，類選擇器，id選擇器的優先順序問題--> <meta charset="UTF-8"> <title></title> <style> p{ color: red; } .yellow{ color: yellow; } #blue{ color: blue; } </style> </head> <body> <!--結論：在標籤名稱選擇器，類選擇器，id選擇器中， 標籤名稱選擇器的優先順序是最低的 id選擇器的優先順序是最高的 --> <p id="blue" class="yellow">hello</p> </body> </html>
2.5屬性選擇器
作用：根據某個標籤的指定屬性匹配
語法：
基本選擇器[屬性名]{
}
基本選擇器[屬性名=值]{
}
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*屬性選擇器*/ p[name]{ color: red; } p[name="bbbb"]{ color: blue; } </style> </head> <body> <p name="aaaa">aaaa</p> <p name="bbbb">bbbb</p> <p>ccccc</p> <p name="bbbb">dddd</p> </body> </html>
2.6包含選擇器
父子標籤 和 先輩後輩標籤
語法：
形式一：查詢父子標籤或者先輩後輩標籤
選擇器1 選擇器2{
}
形式二：父子標籤
選擇器1 > 選擇器2{
}
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*包含選擇器*/ /*形式一*/ /*形式一可以匹配子標籤或者後輩標籤*/ /*div p{ color: red; }*/ /*形式二*/ /*形式二一般情況下用來匹配子標籤*/ div>p{ color: red; } /*li{ color: blue; }*/ ul>li{ color: blue; } /*包含選擇器中可以是任意的基本選擇器*/ #box>p{ color: yellow; } </style> </head> <body> <div> <p>第一個p標籤</p> <span> <p>第二個p標籤</p> </span> </div> <div> <p>第三個p標籤</p> </div> <!--需求：將li中的文字設定為藍色--> <ul> <li>111</li> <li>222</li> <li>333</li> </ul> <div id="box"> <p>hello</p> </div> </body> </html>
2.7偽類選擇器
語法：
基本選擇器:選項{
}
說明:選項：hover【懸浮】，before【前面】，after【後面】，first-letter【第一個字元】，first-line【第一行】
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*偽類選擇器*/ /*結合基本選擇器使用*/ /*滑鼠懸浮事件*/ #first:hover{ color: blue; font-size: 25px; } /*新增頭部*/ #first:before{ content: "head"; } /*新增尾部*/ #first:after{ content: "tail"; } /*設定第一個字元的樣式*/ #first:first-letter{ font-size: 30px; } /*設定第一行的樣式*/ #first:first-line{ text-decoration: underline; } </style> </head> <body> <p id="first">世上無難事</p> <p>只怕有心人</p> </body> </html>
2.8結構選擇器
類似於偽類選擇器，
使用結合了包含選擇器和偽類選擇器
語法：
包含選擇器：選項{
}
說明：選項：first-child【第一個子標籤】 last-child【最後一個子標籤】，nth-child【第n個子標籤】 empty【空標籤】 not()【否定】
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*結構選擇器*/ ul li:first-child{ color: red; } ul li:last-child{ color: blue; } /*注意：子標籤編號從1開始 * nth-child * number：第number個子標籤 * odd：奇數 * even：偶數 ul li:nth-child(odd){ color: cyan; } */ /*倒序查詢*/ ul li:nth-last-child(2){ color: pink; } /*設定空標籤的樣式 * 空：沒有文字的標籤 */ li:empty{ background-color: purple; } /*否定標籤*/ li:not(#abc){ font-size: 30px; } </style> </head> <body> <ul> <li>aaa</li> <li>bbb</li> <li>ccc</li> <li id="abc">ddd</li> <li></li> </ul> </body> </html>
2.9組合選擇器
用於給多個不同的選擇器設定相同的樣式
語法：
選擇器1，選擇器2，。。。{
}
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*.header{ color: cyan; } #first{ color: cyan; } span{ color: cyan; }*/ /*組合選擇器*/ .header,#first,span{ color: cyan; } </style> </head> <body> <h1 class="header">名言警句</h1> <p id="first">拼搏到無能為力</p> <span>堅持到感動自己</span> </body> </html>
3.css和html的結合方式
3.1行內樣式
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!--行內樣式:通過style屬性直接 給某個標籤設定樣式--> <p style="color: red; font-size: 25px;"></p> </body> </html>
3.2內嵌樣式
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> p{ color: red; font-size: 25px; } </style> </head> <body> <p></p> </body> </html>
3.3連結樣式
在head標籤中新增link
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <!--引入一個外部的css檔案--> <!-- href:需要引入的css檔案的相對路徑 type：被引入的檔案的型別 ，格式：大範圍/小範圍，例如：text/javascript text/image rel:relation【關係】 stylesheet：樣式表 rel="stylesheet"：描述了當前頁面和href所指定檔案之間的關係，href連線到的是一個樣式表 --> <link href="css/style.css" type="text/css" rel="stylesheet"/> <link href="css/style1.css" type="text/css" rel="stylesheet"/> </head> <body> <p>hello</p> </body> </html>
3.4匯入樣式
匯入樣式的功能和連結樣式的功能時完全相同的，只是語法不同
在head標籤中新增style，在style標籤中進行匯入
匯入語法：
@import url(css檔案的相對路徑)
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> @import url("css/style.css"); /*@import url("css/style1.css");*/ </style> </head> <body> <p>hello</p> </body> </html>
3.5優先順序問題
程式碼演示：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> /*匯入樣式*/ @import url("css/red.css"); /*內嵌樣式*/ </style> <!--連結樣式--> <link href="css/green.css" type="text/css" rel="stylesheet" /> </head> <body> <!--行內樣式--> <p>html和css的結合方式</p> </body> </html> <!-- 結論一：在行內樣式，匯入樣式和內嵌樣式中，行內樣式的優先順序最高的，匯入樣式的優先順序是最低的 結論二：在內嵌樣式和連結樣式中，不存在優先順序問題，使用哪種樣式取決於哪種方式距離標籤更近【就近原則】 結論三：將匯入樣式和連結樣式統稱為外部樣式，不存在優先順序問題 注意：在實際開發中，不會出現多種樣式同時出現的情況，使用最多的是內嵌樣式和連結樣式 總結： 作用範圍： 行內樣式：僅作用於當前標籤 內嵌樣式：作用於當前的html檔案 外部樣式：關聯該css檔案的所有的html檔案 優先順序： 行內樣式的優先順序最高 內嵌樣式和外部樣式，誰後寫 則誰的優先順序高 -->