css與html基本用法
1.圖片格式:
<img src="" alt="" title=" ">
:圖片屬性,alt:可替換的文字,圖片顯示不出來顯示這個
title:滑鼠移上去顯示的內容
jpg:有失真壓縮 影響畫質 小
png:無失真壓縮 不影響畫質 大 透明通道
gif:動態圖
圖片方式:本地圖片:絕對路徑:從碟符算起的路徑
相對路徑:從當前路徑算起的路徑 與該檔案下同一級別的
網路圖片
2.超連結:
<a href="(網頁地址)" target="_blank"></a>
_blank:在新頁面開啟
書籤標記:錨點,
<br id="mid1">
<a href="#mid1"></a>回到指定頁面的地方
<a href="#"></a>回到頁面的最頂上
3.圖片對映:
<img src=“C:\Users…\xx.jpg”uesmap="#xxx">
<map name="xxx">
<area shape="" coords=" " href=""alt="">area標籤是地圖裡面具體可點選的區域的 shape:定義區域形狀:有三個屬性:circle rect(矩形) poly(多邊形) coords:定義座標點 circle:中心座標,圓的半徑 rect:左上角點的座標,右下角點的座標 </map>地圖標籤
4.列表:
無序列表 :內容列表 ul+li 無順序關係
有序列表 :內容列表 ol+li有順序關係
自定義列表:內容標題+內容 dl+dt(標題)+dd(內容)
5.表格:
<table>
colspan 列數
rowspan行數
若干 行 <tr>
若干個 單元格
<th></th>標題
<td></td>內容
</tr>
</table>
6.表單:
収集 使用者輸入 傳送或提交給伺服器
輸入:內容
文字:普通 密碼
單選框:
多選框:
下拉框:
提交:提交按鈕
http:超文字傳輸協議 瀏覽器和伺服器的通訊
模式:請求-應答 瀏覽器主動發起請求-》伺服器 接收 -》自身做處理-》結果返回瀏覽器-》瀏覽器根據結果展現出來
GET :提交的內容放到網址裡
POST:提交的內容放到http裡
註冊頁面:
表單:<form action="提交給伺服器到哪個網址" method=“ GET”>
使用者名稱:<input type="text" name="username"><br >
密碼: <input type="password" name="pas">
性別(單選框):<input type="radio" name="sex"value="male">男
<input type="radio" name="sex"value="female">女
<input type="radio" name="sex">未知
興趣愛好(複選框):<input type="checkbox"name="ckb"value="kanshu">看書
<input type="checkbox"name="ckb" value="chifan">吃飯
<input type="checkbox"name="ckb" value="daqiu">打球
選擇城市(下拉框):<select name="city">
<option value="sh">上海</option>
<option value="bj">北京</option>
</select>
提交按鈕:<input type="submit">
</from>
- 網頁佈局:功能-》小塊-》排列好 把具體的內容填充到小塊
div:容器 用來裝東西的 div table frameset:管理後臺 iframe:巢狀頁面 百度搜索:`
8.巢狀規則:
塊元素:獨立成立一行 可以設定寬高 預設寬高100%
塊元素分為:文字類塊元素p h1-h6
容器類塊元素div table tr td th form ul li ol dl dt dd
行元素:不獨立成立一行 不可以設定寬高 內容覺得寬高
a img input strong em del span
特殊字元:文字 br  (空格);
巢狀規則:
1.塊元素可以巢狀行元素<div></div>
2.行元素可以巢狀行元素
3.行元素不可以巢狀塊元素
4.文字類塊元素不可以巢狀塊元素
5.容器類塊元素可以巢狀塊元素
- css:層疊樣式表, 選擇器:
萬用字元:* 包括所有的
標籤div:div
id選擇器:以#開頭
class選擇器:以.開頭
原理:
1.優先原則:後解析的內容會覆蓋掉之前解析的內容
1.同一選擇器:從上往下執行 解析,
2.同一型別的選擇器:從上往下
3.不同型別選擇器:優先順序 先解析低優先順序的-》高優先順序
4.外部樣式跟內部樣式,合併之後一起解析
5.內聯樣式:外部+內部解析完了,才解析內聯樣式
6.加了important,最後執行
2.繼承原則:巢狀裡面的標籤 擁有外部標籤的某些樣式,子元素可以繼承父類元素的屬性
1.跟文字 文字相關的樣式 可以被繼承,其他不能被繼承
2.塊級元素 寬度不設定-》父類元素的寬 高-》內容決定
-
組合選擇器:1.分組選擇器:把基本選擇器 通過特殊符號串在一起div,p
2.巢狀選擇器:空格隔開 div p-> 選擇的是p標籤 ,必須是巢狀在div裡的p標籤才生效,可以是父級及以上
3.子選擇器:div>p p(父標籤 div)
4.相鄰的 同級別的選擇器 div+p -》與p是同一級別的標籤 -
屬性選擇器:
p1
p2
基本選擇器[屬性], [屬性=值] p[title=qiuqiu]{樣式} p1有樣式 [屬性~=值] 只要title裡的值包含qiuqiu就算 p[title~=qiuqiu]{樣式}p1有樣式,p2包含qiuqiu2,無樣式 [屬性^=值]開始 屬性裡有這個值且以qiuqiu開始的 p[title^=qiuqiu]{樣式} p1,p2標籤都有樣式 [屬性$=值]結束 屬性裡有這個值且以cc開始的 p[title$=cc]{樣式} p1,p2標籤都有樣式
-
偽元素選擇器:
偽元素:假的
元素
開始:before
結束:after
p::before{
content:“before”;
}
p::after{
content:“after”;
}
13.背景使用:background-color:背景顏色
background-image:url('圖片地址')
background-repeat:repeat-x 沿著x軸平鋪
repeat-y 沿著y軸平鋪
no-repeat 不平鋪
background-attachment:fixed 固定 滑鼠滾動背景圖不會隨著滾動
background-position:x軸 y軸 100px 100px
50% 0%
cenrer top
x:left center right
y:top center bottom