標籤：btn row 新網 頁面 有序 www direction back utf-8
//======================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
scrolldelay 表示停頓時間，值是正整數，預設為0，單位是毫秒
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基礎 - 個人備忘錄
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
