Web-HTML+CSS入门笔记
一、 Web-HTML入門筆記
1.注釋無法嵌套。
2.a標簽:可做跳轉、下載、錨點。
屬性href必須有;
屬性target的值:
_blank:在新的標簽頁打開連接;
_self:在當前頁面打開連接(默認情況);
外部連接:域名;
內部連接:非域名;
錨點連接:用于跳轉到指定的名稱的部件處,目標部件名前必須打上#;
偽類一般用在a標簽中,分別有4個:link(默認情況)、visited、hover、active。
偽類的語法格式:a:偽類{a的樣式};
錨點連接例子:
這里是頂部,單擊可到達底部
這里是底部,單擊可到達頂部
3.audio標簽:
屬性src:音頻的URL;
屬性autoplay:自動播放;
屬性controls:出現播放控件;
屬性muted:靜音;
標簽中間放打開失敗的提示信息。
4.video標簽:
屬性src:播放的視頻的URL;
屬性autoplay:自動播放;
屬性controls:出現播放控件;
屬性width:設置視頻的寬度;
屬性height:設置視頻的高度;
屬性poster:播放前顯示海報,海報圖片的URL;
屬性width、height:當只修改某一個時,另一個會等比例縮放;
標簽中間放打開失敗的提示信息。
5.ul、li標簽:ul是一個無序列表區域,li是列表里的項;子項里可以嵌套列表;
ul里的屬性type:
disc:實心小圓點(默認情況);
square:實心正方形;
circle:空心小圓圈;
ul與li必須組合使用。
6.ol、li標簽:ol是一個有序列表區域,li是列表里的項;子項里可以嵌套列表;
ol里的屬性type:
1:li前的是阿拉伯數字(默認情況);
i:li前的是小寫羅馬數字;
I:li前的是大寫羅馬數字;
a:li前的是小寫字母;
A:li前的是大寫字母;
ol與li必須組合使用。
7.dl、dt、dd標簽:dl是一個自定義列表域,dt是概念名詞、dd是對概念的描述;
子項里可以嵌套列表;
dl、dt、dd必須組合使用。
例子:
| 普通單元格的內容 |
| 表腳注單元格的內容 |
table的特性:一個table獨占“一行”,單元格是內容撐開寬度,支持寬高;
對表格加樣式,就加在table、th、td中,不要對其他表格的東西加樣式;
默認情況下,單元格的寬度和高度自動按需分配;
每一列必須設置寬度;
若想固定單元格的寬高,則需要設置單元格的寬高;
單元格的合并:合并前需要去掉結構化區域,同時記得刪除原來的單元格,即刪除緊跟著它的相應個數的單元格;
單元格的屬性:
屬性rowspan:跨行合并;
屬性colspan:跨列合并;
23.form標簽:
屬性action:數據發送的目標URL;
屬性method:數據發送的方式,為get或post;
get:
在URL中可以看到數據,數據傳送量小,數據傳送的格為:
?name1=value&name2=value……;
post:
在URL中看不到數據,數據傳送量較大;
屬性enctype:當input標簽里的type為file時,必須將enctype的值置為“multipart/form-data”,同時將method的值置為“post”;
24.label標簽:label標簽沒有任何特效,用于將內容與input關聯起來,一般用在單復選框中;
使用方法:
a)單選框或多選框,直接將單復選框包住即可。ie6不支持這種用法;
b)關聯的內容;ie6支持;
25.textarea標簽:一個多行文本域;屬性name:多行文本域的名稱。
26.select、option標簽:select是一個下拉框域,option是下拉列表里的一個子項;select與option一般組合使用;
select的屬性:
屬性name:下拉列表框的名稱;
屬性multiple:允許同時選中多個子項;
option的屬性:
屬性value:被選中的一個值;當沒有value時,提交的內容是option里的內容;
屬性selected:與單復選框里的checked的意思一樣;
27.iframe標簽:將當前頁面與iframe內的東西分離開。
在iframe中可以存放另一個網頁或文件;
屬性src:顯示文檔的URL;
屬性frameborder:是否顯示框架的邊框,0則不顯示,1則顯示;
屬性width:框架的寬度;
屬性height:框架的高度;
屬性name:框架的名稱,把該名稱填入a標簽里的target,則a跳轉的內容會顯示在該框架中;
屬性scrolling:是否顯示框架滾動條,yes則顯示,no則不顯示,auto則自動;
標簽中間放打開失敗的提示信息:
28.frameset標簽:
frameset是在整體上劃分空間,而frame是具體的部分;frameset與frame必須組合使用;
使用框架集,必須去掉body標簽;
frameset的屬性:
屬性rows:將空間拆分成多少行,多行間的大小用英文逗號隔開;
屬性clos:將空間分成多少列,多列間的大小用英文逗號隔開;
例子:
:一個換行標記。 31.
:一條水平分割線。 32. : 屬性src:圖片的URL; 屬性alt:圖片打開失敗顯示的文字; 屬性title:鼠標放在圖片上時顯示的文字; 屬性width、height:當只修改某一個時,另一個會等比例縮放;
img標簽默認會在圖片下多出幾px的間隙;
去除該間隙的方法:給img加上vertical-align:top\middle\bottom;
33.:對提供的資源依次進行選擇,直到遇到能夠播放的、或選擇完為止;
屬性src:播放的音頻或視頻的URL;
屬性type:audio或者video;
必須與audio標簽或video標簽組合使用。
34.:支持寬高,一般不改單復選框的寬高和select的高度;
在ie6下,input里的背景會被多出的內容擠走,因此一般不給input加除了寬高以外的樣式;
屬性name:要提交數據的input標簽必須具有name;
屬性type:所有input標簽必須說明屬性type的值;
text或password或button或submit或file或reset或radio或hidden或checkbox;
text:文本域,value是文本域中的文本內容;
password:密碼框,會以*號或.來顯示密碼框的內容,value是密碼框里的密碼;
submit:提交按鈕,value是提交按鈕顯示的名稱;
button:普通按鈕,結合js使用,value是該按鈕顯示的名稱;
reset:恢復當前form里提交數據的全部的input的初始狀態,value是該按鈕顯示的名稱;
radio:單選,同一組里的radio型的input的name必須相同,value是被選中的一個值;
checkbox:多選,同組的checkbox型的input的name必須相同,value是被選中的多個值;
hidden:隱藏性質的input,會把value的值提交上去;
屬性readonly:只讀性質的,該內容會被提交,用在text、password型的input中才有效;
屬性placeholder:在文本域中,顯示提示用戶要輸入的信息內容,用在text、password型的input中才有效;
屬性maxlength:最多可在文本域中輸入的字或字符個數,用在text、password型的input中才有效;
屬性disabled:禁用該所有類型的input,該內容不會提交上去;
屬性checked:選中的意思,用在radio或是checkbox型的input中才有效;
35.:
frame的屬性:frane標簽與frameset標簽組合使用。
屬性src:顯示文檔的URL;
屬性scrolling:是否顯示滾動條,yes則顯示,no則不顯示,auto則自動;
屬性noresize:不允許縮放框架的空間大小;
36. :用于規定默認的href和target,使用位置在head。
二、 WEB-CSS入門筆記
1.外部樣式的引用方法:在head中,
2.盒子的width、height指的是盒子的容積,并非盒子的大小。
3.屬性background的屬性值:
background-color:背景顏色;
background-image:背景圖片;url(背景圖片的URL);
background-position:設置背景圖片在盒子里的位置;x y或
center top right bottom left;
background-repeat:是否在盒子里重復背景圖片;no-repeat或repeat-x或repeat-y;
background-attachment:是否固定背景圖片在盒子里的位置;fixed:相對固定;
默認情況:絕對固定,fixed的參照物是瀏覽器大小,而默認情況的參照物是盒子;
4.屬性border的屬性值:border會改變盒子的大小。
border-width:邊框的寬度;
border-style:邊框的樣式;多數用solid;要顯示邊框必須給出此屬性值;
border-color:邊框的顏色。
5.可以將屬性padding內邊距理解為,給盒子內部周邊填充了與盒子背景顏色相同的區域,因此padding會改變盒子的大小;
padding的語法格式:top right bottom left
屬性padding的屬性值:
padding-top
padding-right
padding-bottom
padding-left
6.在垂直方向上相遇的margin會產生合并,即:
第一種情況:當兩個相鄰的外邊距都是正數時,折疊結果是它們兩者之間較大的值。
第二種情況:當兩個相鄰的外邊距都是負數時,折疊結果是兩者絕對值的較大值。
第三種情況:當兩個外邊距一正一負時,折疊結果是兩者的相加的和。
常用解決方法:加border或用padding代替margin或去掉其中一個margin,
把另一個margin的值改為自己想要的值;
屬性margin不會給盒子填充東西,因此不會改變盒子的大小,但是,但是,margin會占用空間,要注意margin后該盒子是否會從父級盒子產生溢出;margin是從該元素向四周散發出去的,在垂直方向上,直至遇到border或是padding才會斷,不然垂直方向上的margin會整個直接溢出;
margin的語法格式:top right bottom left
屬性margin外邊距的屬性值:
margin-top
margin-right
margin-bottom
margin-left
屬性margin的auto值的作用:將該元素附近的可用空間轉移到指定的水平方向,auto在垂直方向上無效;
auto的應用:a)居中;b)左對齊、右對齊。
7.屬性font的值(一般不使用font的復合):
font-style:文字斜體之類的,不常用;默認情況:normal;
font-weight:文字加粗;默認情況:normal;bold;
font-size:通常使用偶數,漢字一般不小于12px;
line-height:行高;對行高的理解:行高就像信箋紙的一行,行高就是一行的高度,文字就在行高的上下居中處;
行高的應用:將行高設置成盒子的高度,可以使得文字在該盒子中上下居中;
font-family:可以使用英文逗號提供多種字體,以供瀏覽器選擇;字體名建議加雙引號;
默認情況:中文的為宋體,英文的為arial。
8.屬性color:此color指的是字體的顏色。
9.屬性text的值(一般不使用text的復合):
text-align:文本對齊方式;left或right或center或justify(兩端對齊);
text-indent:單位為em時,首行縮進多少個漢字;單位為px時,首行縮進多少像素;
text-decoration:underline或overline或line-through;
默認情況:none。
10.樣式選擇符:
a)#:id選擇符;
b)id a+一個英文逗號+id b:群組選擇符;
c).:class選擇符;
d)類型名:類型選擇符;
e)類型名a+一個空格+類型名b:包含選擇符;
不只是類型才有包含選擇符;
11.重置默認的樣式(css reset)常用代碼:
body{
margin:0;
}
ul,ol{
margin:0;
padding:0;
list-style:none;
}
dl,dd,p,h1,h2,h3,h4,h5,h6{
margin:0;
}
a{
text-decoration:none;
}
img{
border:none;
vertical-align:top;
}
table{
border-collapse:collapse;
}
th,td{
padding:0;
}
form{
margin:0;
}
input{
padding:0;
margin:0;
}
select{
margin:0;
}
textarea{
margin:0;
padding:0;
}
12.行標簽和塊標簽:
行標簽里不可以有塊標簽;
a標簽里不可以嵌套a標簽;
p標簽、hn標簽、dt標簽里不可以有塊標簽;
行標簽特性:
行標簽代碼之間的換行會被解析成半個漢字的px;
不支持垂直方向的margin和padding;
13.屬性display的值:
block:將該元素顯示為塊元素;
inline:將該元素顯示為行元素;
inline-block:將該元素顯示為行塊元素(即塊與行的綜合)【ie7及以下不支持】。
14.屬性float的屬性值:
left
right
默認情況:none;
特性:除了不解析行標簽代碼之間的換行以及能夠漂浮外;其他的特性與inline-block同;
所謂漂浮:
按照指定方向漂;
脫離文檔流;
其里面的內容與元素本身分離。
使得塊可以內容撐開寬度;
使得行元素支持寬高;
float只會影響其后頭的元素,不會影響到其前頭的元素。
15.vertical-align是垂直方向上的對齊方式;屬性值有:top;middle、bottom;
對齊的相關元素都得加上相同的vertical-align,否則vertical-align無效;
vertical-align只對行元素起作用,對塊元素無效,對浮動的元素也無效;
16.屬性clear的值:
left
right
both
默認情況:none:
作用:清除上一層中指定方向的浮動,使得當前層不會受到上層浮動的影響。
17.簡單的布局模型:
html:
test
css:body{margin:0;font-size:14px;}dl,dd,p,h1,h2,h3,h4,h5,h6,ol,ul{margin:0;}ul,ol{padding:0;list-style:none;}a{text-decoration:none;}img{border:none;}#box{width:900px;margin:0 auto;zoom:1;}#box:after{content:"";display:block;clear:both;}.left,.right,.center{width:300px;}.left div,.center div,.right div{border:1px solid white;}.left div,.right div{height:298px;background:gold;}.left,.center{float:left; }.right{float:right;}.center div{height:198px;background:orchid;}
18.清除浮動的弊端的方法:
a)給父級加dislay:inline-block;但是會使得水平方向的margin失效;
b)給父級指定高度;但是不便于以后修改;
c)給所有相關“父級”加float;但是會使得水平方向的margin失效;
d)加一個“clear和font-size:0”的空標簽;但是ie6、ie7不兼容;
e)加一個
;但是不符合結構、樣式、行為分離的原則;
f)給父級加overflow:hidden;
屬性overflow的值:auto、hidden、scroll(會始終顯示滾動條)、visible(默認情況);
以上方法不是常用的方法,以下的方法是常用的清除浮動弊端的方法;
g)給父級加上:zoom:1;和after:content:"";display:block;clear:both;
對g方法的理解:屬性zoom:縮放頁面;after是個偽類,after里必須有content、display、clear才能起到清除浮動弊端的效果;
g中的after效果,可以理解為是在父級最后新加了一個clear的div。
19.在ie6下,高度小于ie6默認px的元素,其高度均會被作為ie6默認的高度處理;
解決方法:給該元素加上overflow:hidden;
20.網頁設計模型(步驟):
(1)確定結構:
a)根據整個網頁的內容,將其分成多個塊;即確定哪些內容屬于哪些塊;
b)確定用哪些標簽來展示內容;不同塊的內容用div包起來;
(2)樣式的書寫順序:
a)布局前須明確每個元素的最終效果;
b)書寫css reset;
c)從左到右一個一個元素地寫;最好樣式的作用對象就是元素它自己,而不是隔著其他元素;
d)確定元素的寬度、高度和border;對于圖片、視頻、音樂類的內容,最好定高度、寬度和border,以免這類元素加載不出來時,影響到其他元素的布局;
e)確定元素的字體樣式;
ps:修改hn,strong,em,b,i標簽里頭的字體時,注意需要在這些標簽的css里也加上字體修改,不然對布局有一定影響;
f)確定元素本身的位置;
g) 元素里的內容的位置;即float、margin、padding等;
h)記得清除浮動的弊端;
i)確定背景及其位置;
21.屬性position的值:
relative:相對定位;相對自己發生移動;不會使得元素脫離文檔流;不會影響元素本身的特性,但是在ie6下,當相對定位元素溢出父級時,使用overflow無效;
absolute:絕對定位;默認相對文檔發生移動,若有定位父級,則相對該定位父級移動(一般用relative來給absolute當定位父級);使得塊支持內容撐開寬度,行標簽支持寬高;使得元素完全脫離文檔流;
在ie6下,定位父級的width或height的值為奇數時,那么水平方向或是縱向方向上的定位會有1px的偏差;
margin:0 auto無效的解決方法:
left:50%;top:50%;margin-top:-元素水平方向的大小的一半;-元素縱向方向的大小的一半;
body<html<文檔;當html和body的heigh均被設置為100%時,他們的height才能與文檔的height一樣;
定位元素具有以下位置控制的屬性(單位px或%):top、right、bottom、left;
正值就是在該方向向原中心靠,負值則是在該方向向原中心遠離;
移動后,依然會占據著原先的位置;
22.定位元素之間存在層級關系:
默認情況下,后者的層級高于前者;
屬性z-index的值:阿拉伯數字(自己定);該屬性用于控制元素所在的層級;
只有當不同元素處于同一層的時候,z-index才有效;
23.屬性opacity的值:[0,1];
屬性opacity是不透明度;
ie里沒有屬性opacity,用filter:alpha(opacity=[0,100])可以實現同樣的效果;
24.屬性outline的值:none:去除聚焦效果;
25.滑動門:;
26.css spirit:;
27.ps的web基礎:
a)常用的選項卡:
信息;歷史記錄;圖層;
b)常用工具介紹:
移動工具:移動圖層,注意與抓手工具不同,對圖像有影響;
抓手工具:用于移動視角,對圖像無影響;
矩形選框工具:用于選中一個圖層里的一塊區域,然后可對該區域進行復制,剪切,刪除;
按住Ctrl鍵進行,可微調選框大小與參考線一致;Ctrl+c之后Ctrl+v,可快捷地將該選區創建在一個新的圖層,大小同原圖層;
若在上步驟之前Ctrl+n,則可以創建出與選區大小一致的圖層;
配合標尺,可用于測量大小;
自由變換:快捷鍵:Ctrl+t,調整圖層的大小、可使圖層旋轉;
取消選擇:快捷鍵:Ctrl+d,取消選擇;
裁剪工具:回車,快捷地將工作區里所有圖層里的選中的區域獨立地剪切出來;
吸管工具:吸取顏色值;
橫排文字工具:設置橫排文字的字體、大小、顏色等屬性;
縮放工具:Ctrl+“+”、Ctrl+“-”、快捷地放大或縮小圖像;
標尺工具:Ctrl+r快捷地打開或關閉標尺;每單擊標尺往圖層拖拽,可出現一條參考線;
png8:支持透明,不支持半透明;
png24:支持半透明和透明;
jpg:用于存儲高清圖;不支持半透明以及透明,所有透明區域均會被白色填充;
gif:用于存儲動態圖;支持透明,不支持半透明;
*.疑問:
* 1.如截圖所示
* 2.float的行元素;
*3.塊中margin-right無效;
總結
以上是生活随笔為你收集整理的Web-HTML+CSS入门笔记的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: Lucas-Kanade 算法原理以及应
- 下一篇: 低版本浏览器使用最新渲染模式以免IE不支