Html+css學習筆記
一、一些比較好用的html小技巧：
1）在文字<head>標籤中加入<meta charset="uft-8">,這樣就不用考慮文字的字元編碼問題了。
2）html是標記語言，不是程式語言
3）在某個頁面停留幾秒之後重新整理到新的網頁<meta http-equiv=”refresh” content=”2;URL=http://…”/>
4）html中的註釋語法是<!--語句-->，但是在css中是// 或者/**/
5）用顏色值的時候，單詞用來除錯，十六進位制用來一般的顏色填入，rgba（）用於加入帶有透明的情況中
6）錨點連結跳轉<a href="#log"></a> ,跳轉到帶有<a id="log"></a>或者<a name="log"></a>的那一行
7）點選影象跳轉連結，用<a>巢狀<img>,點選影象某一部分實現跳轉，用影象地圖
8）colspan 左右合併 rowspan 上下合併<img src=”1.jpg” usemap=”#find”> <map name=”find”> <area shape=”circle(圓)|rect（矩形）|poly（多邊形）” coords=“” href=“”/> </map>
深層含義：將某個<td>的格增大
9）<frameset>與<body>不共存，一個<frame/>一個頁面
<frameset>
<frame/>
</frameset>
<body>中也可以由內嵌頁面<iframe name=""></iframe>
10）<head>中加入<base target="_blank"/>預設所有連結都在新標籤中開啟
11）<marquee> （滾動標籤）
二、css中的一些小技巧
1）在最開始的時候對各個該清零的標籤清零
<style>
*{
margin:0px;
padding:0px;
list-style-type:none;
text-decoration:none;
}
這樣在開始把所有的標籤的外邊距，內邊距，列表標記和下劃線都去了，這樣比較方便。
注：
1 連同<body>的內外邊距都去了
</style>
2）字型的粗細 font-weight為100~900，整數。
3）用2em表示兩個字元的距離。
4）padding不能設定負值，但是margin可以
5）塊狀元素預設有外邊距，清零的時候最好去掉。
6）導航欄的設定方式 用浮動 用行內元素（作用於li）
7）字型嵌入方法：
將字型放在自己的資料夾裡，然後在css加入如下程式碼
@font-face(font-family:”宋體”;src:url(););
8）清除浮動的幾個方式1 clear
2 overflow:hidden;
3 div:after
{
clear:both;
display:;
visible:hidden;
content:””;
}
9）對一些框的處理
color
width
height
display：none ，block，inline，inline-block
line-height
text-align
border-radius：圓角
border-top-left-radius
border-top-right-radius
border-bottom-left-radius
border-bottom-right-radius：xxpx；
border
10）不太常用的屬性
border-collapse 合併表格 separate 分開 collapse 合併
border-spacing 單元格邊框之間的距離
background-position 背景影象位置，可以用top left什麼的（最多兩個詞），
也可以用畫素值
background-attachment 背景影象是否滾動，fixed不滾動，scroll滾動
background-clip 背景影象被裁剪的範圍，content-box,border-box,
padding-box, 內容框，邊框，內邊距框
background-origin 定義背景影象相對於哪裡定位，content-box,
border-box,padding-box, 內容框，邊框，內邊距框
text-overflow 文字溢位時的屬性 ellipsis 多餘的顯示為省略號
text-shadow 文字陰影text-shadow:水距 垂距模糊距模糊顏色
box-shadow 盒子陰影text-shadow:水距 垂距模糊距模糊顏色
ul 預設的寬是螢幕寬
hr 預設的內容是空，所以顯示是一條線，相當於div中沒
有文字，只有border
overflow visible 內容不會被修剪，呈現在元素框之外
hidden 內容被修剪
scroll auto
clip 裁剪一個矩形區域，剩下的區域根據overflow選擇，值
為rect（top，right，bottom，left）
:before :after 在某個元素之前或者之後新增東西，要有屬性content
:input 獲得焦點的元素
visibility visible 可視的 hidden 隱藏的
collapse 隱藏table單元格
cursor 改變游標的樣式
opacity：0.4； 改變透明度值為0.0到1.0，越小越透明
filter:alpha(opacity=40); 針對IE8以及以前版本用這個
css3中可以為一個background新增多個圖片背景
background-image:url(1.jpg),url(2.jpg);
11）img是行內元素
12）在HTML佈局當中出現<input>表單無法正常對齊的情況，或者是包圍著文字的div框無法對齊，如下圖：
外邊的藍色框是一個div框，裡邊的紅色字型是巢狀的一個<img>標籤，後邊的紅色框是與<img>並列的一個<input>標籤
但是<input>標籤並沒有和藍色框對齊。
這是因為在一個巢狀的框中，<input>中的文字作為基準最後決定了<input>的位置。在巢狀的框中，小框中如果需要填入文字，那麼就要先考慮這個框中文字的情況，再來考慮框的佈局
可以在父元素position：relative。子元素用position：absolute
13）寫css時候的步驟
/*基礎佈局*/
/*特殊程式碼*/
/*調整程式碼*/