一、 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必須組合使用。
例子：

1.江戶川柯南：

真實身份是工藤新一

2.毛利小五郎：

一個老油條

8.p標簽：段落標記。 9.font標簽：屬性size的值：size = [1,7]。 10.b標簽與strong標簽：都是加粗效果，只是名稱不同。 11.i標簽與em標簽：都是強調，即斜體效果，只是名稱不同。 12.pre標簽：在頁面中，原樣輸出標簽中的文本。 13.u標簽：一個下劃線，盡量不使用。 14.del標簽：一個刪除橫線，不常用。 15.sub標簽：一個下標效果。 16.sup標簽：一個上標效果。 17.hn標簽：一套標簽，其中n = [1,6]，常用于做標題，n與字體大小呈負相關。 18.small標簽：相對其前一個標簽里的字體大小小一號。 19.big標簽：相對其前一個標簽里的字體大小大一號。 20.div標簽：一個div獨占一行，其默認寬度為瀏覽器寬度的100%。 21.span標簽：多個span可并排一行，其寬度、高度、邊距均不可修改；用于修飾你想修飾的文字。 22.table標簽： 屬性border：整個表格邊框的寬度； 屬性bordercolor：邊框的顏色； 屬性width：整個表格的寬度； 屬性height：整個表格的高度； 屬性cellspacing：單元格之間的間距； 屬性cellpadding：單元格中的內容與單元格的間距； table的結構： table：一個表格區域； caption：一個表格的標題內容； thead：一個表頭區域； tr：表的一行區域； td：一個普通的單元格； th：一個表頭單元格的內容； tbody：一個表格主體區域； tfoot：一個表格尾部的區域； 例子： …… …… …… 一張表的標題內容表頭單元格的內容

普通單元格的內容

表腳注單元格的內容

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：將空間分成多少列，多列間的大小用英文逗號隔開；
例子：

29.幾個常用的特殊字符： ?：空格； ?：大一點的空格 >：> <：< &：& 30.
：一個換行標記。 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：包含選擇符；
不只是類型才有包含選擇符；

當同一個同時面臨多種選擇時，需要考慮樣式優先級： a)不同級別時：js>行間style>id>class>類型=偽類（有包含的類型>沒有包含的類型）； b)相同級別時：按照解析順序看； 包含時，對包含的一切該類型均有效； 一個標簽同時使用多個class時，用空格隔開，不分前后。

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；

行標簽有：a標簽、span標簽、strong標簽、em標簽； 塊標簽有：p標簽、div標簽、列表標簽、hn標簽。

13.屬性display的值：
block：將該元素顯示為塊元素；
inline：將該元素顯示為行元素；
inline-block：將該元素顯示為行塊元素（即塊與行的綜合）【ie7及以下不支持】。
14.屬性float的屬性值：
left
right
默認情況：none；
特性：除了不解析行標簽代碼之間的換行以及能夠漂浮外；其他的特性與inline-block同；
所謂漂浮：
按照指定方向漂；
脫離文檔流；
其里面的內容與元素本身分離。
使得塊可以內容撐開寬度；
使得行元素支持寬高；
float只會影響其后頭的元素，不會影響到其前頭的元素。

ie6、ie7下的兼容問題，即被擠出的內容會與漂浮的元素有一定的距離，并非緊緊排在一起； 解決方法：要求浮動元素緊排在一行；得給相關元素都加float； 在ie6下，float的塊標簽的水平方向margin會被加大一倍； 解決方法：給float的塊加上display:inline；在ie6下，float的li之間會產生幾個px的間隙； 解決方法：給li加上vertical-align:top\middle\bottom；

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:-元素水平方向的大小的一半;-元素縱向方向的大小的一半;

fixed：固定定位；特性同上，不同在于，fixed定位是始終相對文檔進行相對定位；ie6不支持fixed； static：默認情況；absolute或是fixed定位元素可以清楚浮動的弊端，即當該元素內元素都float時，不需要再考慮該元素的清浮動；

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入门笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。