html+css基礎 - 個人備忘錄
阿新 • • 發佈：2017-08-31
keyword cati 格式 padding png over inline 分數 head
最外面的div
<div id="container"></div>
背景圖片
<body background="你的背景圖片地址"></body>
註釋語法
<!--註釋的內容-->
滾動標簽
<marquee> </marquee>
direction 表示滾動的方向，值可以是left，right，up，down，默認為left
behavior 表示滾動的方式，值可以是scroll（連續滾動）slide（滑動一次）alternate（來回滾動）
loop 表示循環的次數，值是正整數，默認為無限循環
scrollamount 表示運動速度，值是正整數，默認為6
valign 表示元素的垂直對齊方式，值可以是top，middle，bottom，默認為middle
align 表示元素的水平對齊方式，值可以是left，center，right，默認為left
bgcolor 表示運動區域的背景色，值是16進制的RGB顏色，默認為白色
height、width 表示運動區域的高度和寬度，值是正整數（單位是像素）或百分數，默認width=100% height為標簽內元素的高度
hspace、vspace 表示元素到區域邊界的水平距離和垂直距離，值是正整數，單位是像素。
onmouseover=this.stop() onmouseout=this.start() 表示當鼠標移上區域的時候滾動停止，當鼠標移開的時候又繼續滾動。
輸入框
<input type="text" name="pin" maxlength="25" style = "width:400px,height:200px"/></p>
在圖片上添加文字
第一種方法：
添加一個DIV，采用絕對定位，圖片所屬DIV為基準
<div style="position:relative;width:100px;height:100px;">
<img src="" alt="註釋" />
<div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
文字
</div>
</div>
第二種方法：圖片作為背景圖片
<div style="background:url(abc.jpg) no-repeat left top;">
wenzi
</div>
Html插入視頻
<embed src="url" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>
簡單的下拉列表
<select name="cars">
<option value="volvo">選項1</option>
<option value="saab" selected="selected" (用來調默認)>選項2</option>
<option value="fiat">選項3</option>
<option value="audi">選項4</option>
</select>
表單
<form action="信息發送的地址" method="post" (隱藏提交信息)>
<input type="text" name="username" value="默認" /> 用戶名
<input type="password" name="password" /> 密碼
<input type="radio" name="xingbie" value="男" checked="checked" (用來調默認) /> 單選框 //value 是值 給後臺看的
<input type="checkbox" name="aihao" value="排球" /> 復選框
<input type="file" name="touxiang" /> 上傳文件
<input type="hidden" name="yincangIP" value="192.168.1.1" /> 隱藏域 //這個例子是隱藏了IP地址
<input type="submit" name="tijiao" /> 提交
</form >
//name 的作用是讓後臺區分數據
大文本框
<textarea name="intro">文本(默認值)</textarea>
overflow : visible | auto | hidden | scroll
visible : 默認值。不剪切內容也不添加滾動條。假如顯式聲明此默認值， 對象將以包含對象的 window 或 frame 的尺寸裁切。並且 clip 屬性設置將失效
auto : 在必需時對象內容才會被裁切或顯示滾動條
hidden : 不顯示超過對象尺寸的內容
scroll : 總是顯示滾動條
表格
<table>
<tr> //行
<td>1</td> //列
</tr>
<tr colspan="4"> //colspan 合並列
<td rowspan="3">2</td> //rowspan 合並行
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
內聯元素
<span class=” ”>行內元素 只在行內發揮作用 不像div是塊狀元素</span>
html圖片按鈕
<input name="imgbtn" type="image" src="login_08.gif" width="50" height="35" border="0">
head部分
<title>網站標題 - Admin10000.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Author" content="網頁作者" />
<meta name="Copyright" content="網站版權" />
<meta name="keywords" content="網站關鍵字" />
<meta name="description" content="網站描述" />
<link rel="Shortcut Icon" href="網站.ico圖標路徑" />
<link type="text/css" rel="stylesheet" href="CSS文件路徑" />
<script type="text/javascript" src="JS文件路徑"></script>
框架集
需要先將規範改為框架型 frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
然後將body去掉後, 寫上下面的
<frameset rows="200px , *"> (rows="200px , *" 表示將整個頁面分成2部分 第一部分200px高,剩下的都給第二部分. * 表示剩下的都給另一部;rows表示行(指行高) )
<frame src="a.html">名字</frame> > 這裏是第一部分 引入了a.html頁面
<frameset cols="30% , *"> (cols表示列) \
<frame src="b.html" name="zuo"></frame> } 這裏是第二部分
<frame src="c.html" name="you"></frame> /
</frameset> /
</frameset>
-------------------------b.html頁面中-------------------------------------------------
| <a href=" " target="you" >鏈接到c.html,並在右側顯示出來</a> |
-------------------------------------------------------------------------------------------
標題標簽
<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>
//標題標簽h1-6系列,表示1-6號標題
段落標簽
<p>段落標簽</p>
無序列表 ul
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
有序列表 ol
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
鏈接
a標簽
<a href="地址" target="_blank" title="鼠標放上來顯示"></a> [target="_blank" 在新網頁中打開]
a標簽去掉下劃線
a{
text-decoration:none;
}
或者把這個屬性分別加到a標簽下，
a:link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:none;
}
錨點
<a href="index.html#名字">錨點</a>
<a name="名字"></a> [一般用法: index.html#名字 ]
label標簽
<label><input type="checkbox" />點這裏也可以 </label>
//======================CSS部分=====================//
<style>
背景顏色
background: red orange yellow green indigo blue purple pink violet black white gray transparent
赤 橙 黃 綠 青 藍 紫 粉 紫羅蘭 黑 白 灰色 透明
背景顏色
body{
}
背景圖片
body{
background-image:url(img.png);
background-repeat:repeat-x; 在 x 軸上鋪開
background-repeat:repeat-y; 在 y 軸上鋪開
background-repeat:no-repeat; 不重復
}
大圖片做背景
{Width:50px; } div的寬
{Height:50px;} div的高
background-position：X值 Y值
以左上角為原點 分別 向右 和向下 X Y值為正, 反之像素則為負
{background-position:100px 200px;}
{padding: 10px;}
//用一句做背景
{background:transparent url(img.png) no-repeat 100px 200px;}
浮動
float:left/right;
定位
position: relative; 相對定位 //是指在其正常的位置上,偏移某些像素.
top:0px;
right:0px; //想怎麽移動就寫哪個方向
bottom:10px;
left:10px;
position:absolute; 絕對定位 //是指在其父元素的位置上,偏移某些像素.
top:0px;
right:0px; //想怎麽移動就寫哪個方向
bottom:10px;
left:10px;
//用絕對定位時,父元素要有 position:relative; 屬性才行,否則將依據父的父的父的父的父的.....body.
絕對定位相當於漂浮在父元素上面的,遮擋住了父元素的一部分.
如果再來一個子元素,就會遮擋住原來的子元素,這時可以調節高度來決定誰遮擋住誰.
z-index:1000; 高度 (沒有單位)
CSS距離
margin:10px 20px 30px 40px;
4個值是 是指上 右 下 左 4個方向的距離
margin:0 auto；
2個值是 是指 （上下） （左右) 一起控制
那麽 margin:0 auto；的意思 就是 上下距離是0 左右距離自動 也就是說 是居中的意思！
文字居中
text-align: center;
清除浮動
clear: left/right/both
.clr{
width: 0px;
height:0px;
clear: both;
}
邊距
外邊距 margin-top/right/bottom/left: //上右下左
內邊距 padding:
邊框
border: 20px solid/dashed/dotted green; //邊框寬 20px 實線/虛線/點線/..等 可以查手冊 green 還可以設置單條邊的邊框
去掉點:
li{list-style:none};
控制段落
段落縮進: text-indent:20px;
文字方向: text-align: center; //居中
文字裝飾線: text-decoration:underline; //下劃線 overline;//上劃線 line-through;//刪除線
字母間距: letter-spacing:10px;
文字控制
顏色控制: {color:blue;}
字型: {font-style:italic;} //斜體
文字粗細: {font-weight:bold;} //粗體
文字大小: {font-size:15px;}
行高: {line-height:20px;}
字體: {font-family:"SimHei";} //黑體 font-family:‘微軟雅黑‘,‘黑體‘,sans-serif;
(如果用一行寫,必須按照下面的順序寫屬性) font-family:‘New Times‘,‘新宋‘,‘宋體‘,serif;
用一行寫: {font:blue italic bold 15px/20px "SimHei";}
表格控制
table{
border: 1px solid blue;
border-collapse: collapse; //破裂融合 消除表格間距
border-collapse: separate; //獨立(默認)
border-spacing: 20px; //設置邊框間距
}
css偽類
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
必須按照以上順序: LVHA
a:link 可以簡寫為 a
CSS畫圓角
{border-radius:5px;} (數字為圓的半徑)
內聯與塊狀的轉化
{display:block;} //內聯轉塊狀 可用於消除圖片之間的距離
{display:inline;} //塊狀轉內聯
{display:none;} //隱藏元素
利用行高使字體豎直居中
{line-height:10px;} //行高
溢出處理
{overflow:visible;} //默認溢出
{overflow:hidden;} //隱藏 它還可以解決IE的一個BUG,在IE下控制小的元素不好,然後就用hidden把多余的隱藏起來.
{overflow:scroll;} //滾動框
{overflow:auto;} //內容多了再加滾動條
陰影
文字: {text-shadow:5px 5px 0px rgba(0,0,0,0.5); }
div: {box-shadow:5px 5px 0px rgba(0,0,0,0.5);}
透明度
{opacity:0.3}
</style>
//=========================註意事項=================================//
margin重疊現象研究
相鄰的普通元素,上下邊距,並非簡單的相加,
而是取其中較大的邊距值.
IE BUG
雙倍margin bug 解決方案 在CSS中添加樣式 _display:inline;
尺寸的表示
ex (x-height，字母 "x" 的高度)
cm (厘米，1厘米=10毫米)
mm (毫米)
pt (點，1點=1/72英寸)
pc (帕，1帕=12點)
% 還可以百分比來表示
em 是相對大小,是指其父元素中的一個‘M‘大小,可以理解為是父元素字體大小的em倍
字符實體
一般格式: & + 實體名 + ;
空格  
< 小於號 < <
> 大於號 > >
& 和號 & &
" 引號 " "
‘ 撇號 ' (IE不支持) '
￠ 分 ¢ ¢
£ 鎊 £ £
¥ 日圓 ¥ ¥
§ 節 § §
© 版權 © ©
® 註冊商標 ® ®
× 乘號 × ×
//======================html部分===================//
表現內容
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
創建一個css鏈接
<link rel="stylesheet" type="text/css" href="css/css.css" />
圖片標簽
<img src="img.png" alt="圖片名" title="鼠標放上去 他就顯示" />
//圖片是內聯元素,同時是 內聯替換元素,替換元素是能設置寬高的
//可用display轉換成塊狀元素 來消除圖片間距.
最外面的div
<div id="container"></div>
背景圖片
<body background="你的背景圖片地址"></body>
註釋語法
<!--註釋的內容-->
滾動標簽
<marquee> </marquee>
direction 表示滾動的方向，值可以是left，right，up，down，默認為left
behavior 表示滾動的方式，值可以是scroll（連續滾動）slide（滑動一次）alternate（來回滾動）
loop 表示循環的次數，值是正整數，默認為無限循環
scrollamount 表示運動速度，值是正整數，默認為6
valign 表示元素的垂直對齊方式，值可以是top，middle，bottom，默認為middle
align 表示元素的水平對齊方式，值可以是left，center，right，默認為left
bgcolor 表示運動區域的背景色，值是16進制的RGB顏色，默認為白色
height、width 表示運動區域的高度和寬度，值是正整數（單位是像素）或百分數，默認width=100% height為標簽內元素的高度
hspace、vspace 表示元素到區域邊界的水平距離和垂直距離，值是正整數，單位是像素。
onmouseover=this.stop() onmouseout=this.start() 表示當鼠標移上區域的時候滾動停止，當鼠標移開的時候又繼續滾動。
輸入框
<input type="text" name="pin" maxlength="25" style = "width:400px,height:200px"/></p>
在圖片上添加文字
第一種方法：
添加一個DIV，采用絕對定位，圖片所屬DIV為基準
<div style="position:relative;width:100px;height:100px;">
<img src="" alt="註釋" />
<div style="position:absolute;width:100px;height:100px;z-indent:2;left:0;top:0;">
文字
</div>
</div>
第二種方法：圖片作為背景圖片
<div style="background:url(abc.jpg) no-repeat left top;">
wenzi
</div>
Html插入視頻
<embed src="url" quality="high" width="480" height="400" align="middle" allowScriptAccess="always" allowFullScreen="true" mode="transparent" type="application/x-shockwave-flash"></embed>
簡單的下拉列表
<select name="cars">
<option value="volvo">選項1</option>
<option value="saab" selected="selected" (用來調默認)>選項2</option>
<option value="fiat">選項3</option>
<option value="audi">選項4</option>
</select>
表單
<form action="信息發送的地址" method="post" (隱藏提交信息)>
<input type="text" name="username" value="默認" /> 用戶名
<input type="password" name="password" /> 密碼
<input type="radio" name="xingbie" value="男" checked="checked" (用來調默認) /> 單選框 //value 是值 給後臺看的
<input type="checkbox" name="aihao" value="排球" /> 復選框
<input type="file" name="touxiang" /> 上傳文件
<input type="hidden" name="yincangIP" value="192.168.1.1" /> 隱藏域 //這個例子是隱藏了IP地址
<input type="submit" name="tijiao" /> 提交
</form >
//name 的作用是讓後臺區分數據
大文本框
<textarea name="intro">文本(默認值)</textarea>
overflow : visible | auto | hidden | scroll
visible : 默認值。不剪切內容也不添加滾動條。假如顯式聲明此默認值， 對象將以包含對象的 window 或 frame 的尺寸裁切。並且 clip 屬性設置將失效
auto : 在必需時對象內容才會被裁切或顯示滾動條
hidden : 不顯示超過對象尺寸的內容
scroll : 總是顯示滾動條
表格
<table>
<tr> //行
<td>1</td> //列
</tr>
<tr colspan="4"> //colspan 合並列
<td rowspan="3">2</td> //rowspan 合並行
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</table>
內聯元素
<span class=” ”>行內元素 只在行內發揮作用 不像div是塊狀元素</span>
html圖片按鈕
<input name="imgbtn" type="image" src="login_08.gif" width="50" height="35" border="0">
head部分
<title>網站標題 - Admin10000.com </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Author" content="網頁作者" />
<meta name="Copyright" content="網站版權" />
<meta name="keywords" content="網站關鍵字" />
<meta name="description" content="網站描述" />
<link rel="Shortcut Icon" href="網站.ico圖標路徑" />
<link type="text/css" rel="stylesheet" href="CSS文件路徑" />
<script type="text/javascript" src="JS文件路徑"></script>
框架集
需要先將規範改為框架型 frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
然後將body去掉後, 寫上下面的
<frameset rows="200px , *"> (rows="200px , *" 表示將整個頁面分成2部分 第一部分200px高,剩下的都給第二部分. * 表示剩下的都給另一部;rows表示行(指行高) )
<frame src="a.html">名字</frame> > 這裏是第一部分 引入了a.html頁面
<frameset cols="30% , *"> (cols表示列) \
<frame src="b.html" name="zuo"></frame> } 這裏是第二部分
<frame src="c.html" name="you"></frame> /
</frameset> /
</frameset>
-------------------------b.html頁面中-------------------------------------------------
| <a href=" " target="you" >鏈接到c.html,並在右側顯示出來</a> |
-------------------------------------------------------------------------------------------
標題標簽
<h1>title1</h1>
<h2>title2</h2>
<h3>title3</h3>
<h4>title4</h4>
<h5>title5</h5>
<h6>title6</h6>
//標題標簽h1-6系列,表示1-6號標題
段落標簽
<p>段落標簽</p>
無序列表 ul
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
有序列表 ol
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ol>
鏈接
a標簽
<a href="地址" target="_blank" title="鼠標放上來顯示"></a> [target="_blank" 在新網頁中打開]
a標簽去掉下劃線
a{
text-decoration:none;
}
或者把這個屬性分別加到a標簽下，
a:link{
text-decoration:none;
}
a:visited{
text-decoration:none;
}
a:hover{
text-decoration:none;
}
a:active{
text-decoration:none;
}
錨點
<a href="index.html#名字">錨點</a>
<a name="名字"></a> [一般用法: index.html#名字 ]
label標簽
<label><input type="checkbox" />點這裏也可以 </label>
//======================CSS部分=====================//
<style>
背景顏色
background: red orange yellow green indigo blue purple pink violet black white gray transparent
赤 橙 黃 綠 青 藍 紫 粉 紫羅蘭 黑 白 灰色 透明
背景顏色
body{
}
背景圖片
body{
background-image:url(img.png);
background-repeat:repeat-x; 在 x 軸上鋪開
background-repeat:repeat-y; 在 y 軸上鋪開
background-repeat:no-repeat; 不重復
}
大圖片做背景
{Width:50px; } div的寬
{Height:50px;} div的高
background-position：X值 Y值
以左上角為原點 分別 向右 和向下 X Y值為正, 反之像素則為負
{background-position:100px 200px;}
{padding: 10px;}
//用一句做背景
{background:transparent url(img.png) no-repeat 100px 200px;}
浮動
float:left/right;
定位
position: relative; 相對定位 //是指在其正常的位置上,偏移某些像素.
top:0px;
right:0px; //想怎麽移動就寫哪個方向
bottom:10px;
left:10px;
position:absolute; 絕對定位 //是指在其父元素的位置上,偏移某些像素.
top:0px;
right:0px; //想怎麽移動就寫哪個方向
bottom:10px;
left:10px;
//用絕對定位時,父元素要有 position:relative; 屬性才行,否則將依據父的父的父的父的父的.....body.
絕對定位相當於漂浮在父元素上面的,遮擋住了父元素的一部分.
如果再來一個子元素,就會遮擋住原來的子元素,這時可以調節高度來決定誰遮擋住誰.
z-index:1000; 高度 (沒有單位)
CSS距離
margin:10px 20px 30px 40px;
4個值是 是指上 右 下 左 4個方向的距離
margin:0 auto；
2個值是 是指 （上下） （左右) 一起控制
那麽 margin:0 auto；的意思 就是 上下距離是0 左右距離自動 也就是說 是居中的意思！
文字居中
text-align: center;
清除浮動
clear: left/right/both
.clr{
width: 0px;
height:0px;
clear: both;
}
邊距
外邊距 margin-top/right/bottom/left: //上右下左
內邊距 padding:
邊框
border: 20px solid/dashed/dotted green; //邊框寬 20px 實線/虛線/點線/..等 可以查手冊 green 還可以設置單條邊的邊框
去掉點:
li{list-style:none};
控制段落
段落縮進: text-indent:20px;
文字方向: text-align: center; //居中
文字裝飾線: text-decoration:underline; //下劃線 overline;//上劃線 line-through;//刪除線
字母間距: letter-spacing:10px;
文字控制
顏色控制: {color:blue;}
字型: {font-style:italic;} //斜體
文字粗細: {font-weight:bold;} //粗體
文字大小: {font-size:15px;}
行高: {line-height:20px;}
字體: {font-family:"SimHei";} //黑體 font-family:‘微軟雅黑‘,‘黑體‘,sans-serif;
(如果用一行寫,必須按照下面的順序寫屬性) font-family:‘New Times‘,‘新宋‘,‘宋體‘,serif;
用一行寫: {font:blue italic bold 15px/20px "SimHei";}
表格控制
table{
border: 1px solid blue;
border-collapse: collapse; //破裂融合 消除表格間距
border-collapse: separate; //獨立(默認)
border-spacing: 20px; //設置邊框間距
}
css偽類
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
必須按照以上順序: LVHA
a:link 可以簡寫為 a
CSS畫圓角
{border-radius:5px;} (數字為圓的半徑)
內聯與塊狀的轉化
{display:block;} //內聯轉塊狀 可用於消除圖片之間的距離
{display:inline;} //塊狀轉內聯
{display:none;} //隱藏元素
利用行高使字體豎直居中
{line-height:10px;} //行高
溢出處理
{overflow:visible;} //默認溢出
{overflow:hidden;} //隱藏 它還可以解決IE的一個BUG,在IE下控制小的元素不好,然後就用hidden把多余的隱藏起來.
{overflow:scroll;} //滾動框
{overflow:auto;} //內容多了再加滾動條
陰影
文字: {text-shadow:5px 5px 0px rgba(0,0,0,0.5); }
div: {box-shadow:5px 5px 0px rgba(0,0,0,0.5);}
透明度
{opacity:0.3}
</style>
//=========================註意事項=================================//
margin重疊現象研究
相鄰的普通元素,上下邊距,並非簡單的相加,
而是取其中較大的邊距值.
IE BUG
雙倍margin bug 解決方案 在CSS中添加樣式 _display:inline;
尺寸的表示
ex (x-height，字母 "x" 的高度)
cm (厘米，1厘米=10毫米)
mm (毫米)
pt (點，1點=1/72英寸)
pc (帕，1帕=12點)
% 還可以百分比來表示
em 是相對大小,是指其父元素中的一個‘M‘大小,可以理解為是父元素字體大小的em倍
字符實體
一般格式: & + 實體名 + ;
空格  
< 小於號 < <
> 大於號 > >
& 和號 & &
" 引號 " "
‘ 撇號 ' (IE不支持) '
￠ 分 ¢ ¢
£ 鎊 £ £
¥ 日圓 ¥ ¥
§ 節 § §
© 版權 © ©
® 註冊商標 ® ®
× 乘號 × ×
÷ 除號 ÷ ÷
html+css基礎 - 個人備忘錄