<html> --開始標簽
<head>
網頁上的控制信息
<title>頁面標題</title>
</head>
<body>
頁面顯示的內容
</body>
</html> --結束標簽
<!--注釋內容--> 注釋
body的屬性：（了解）
bgcolor 頁面背景色
text 文字顏色
topmargin 上頁邊距
leftmargin 左頁邊距
rightmargin 右頁邊距
bottomargin 下頁邊距
background 背景壁紙
1.1、一般標簽
1.1.1、格式控制標簽
<b></b> 字體加粗
<i></i> 傾斜
<u></u> 下划線
<strong></strong> 字體加粗（強調，語氣加強用）
<em></em> 字體傾斜（強調，語氣加強用）
<center></center> 居中
<br> 或<br /> 相當於回車
； 表示空格 也可以在設計頁面中按ctrl+shift+space
1.1.2、內容容器標簽
<h1></h1>……<h6></h6> 標題（會自動換行）。HTML標題（Heading）是通過<h1> - <h6> 等標簽進行定義的。
<p></p> 段落標簽（段落之間空行）
<div></div> 層標簽（默認占一行）
<span></span> 層標簽（默認用多大空間占多大空間）
<ol type="1"> --有序列表，序號為1,2,3……，引號中可以更改序號形式
<li>內容</li>
<li>內容</li>
</ol> --上面“ol”改為“ul”則為無序列表
“../” 表示上級目錄
“./” 表示當前目錄
相對路徑：從當前頁面開始查找。
絕對路徑：從網站的根開始查找。 “/”，代表網站的根
HTML 元素指的是從開始標簽（start tag）到結束標簽（end tag）的所有代碼。
詳細內容參閱：http://www.w3school.com.cn/
例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>網頁標簽</title>
</head>
<body>
<font color="#0066FF" face="華文新魏" size="5">字體控制</font> <!--注釋--><br>
<b>字體加粗</b> <br>
<i>傾斜</i> <br>
<u>下划線</u> <br>
<strong>加粗</strong> <br>
<em>傾斜</em> <br>
<center>居中</center> <br>
回<br>車 <br>
空 格 <br>
<br>
<br>
<h1>標題1</h1>
<h2>標題2</h2>
<h6>標題6</h6>
<p>段落1</p>
<p>段落<br>
2</p>
<font>第一種<div>層標簽</div></font>
<font>第二種<span>層標簽</span></font>
<ol type="a">有序列表
<li>序號1</li>
<li>序號2</li>
<li>序號3</li>
</ol>
<ul type="circle">無序列表
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
<a href="http://www.w3school.com.cn">This is a link</a>
</body>
</html>
顯示如下：
1.2、常用標簽
超鏈接標簽
<a href="超鏈接地址" target=“_blank”>超鏈接的文字</a> --href（hyperlink reference）；_blank是在新窗口打開。
第一步：做錨點的標簽。<a name=""></a>
第二步：做錨點鏈接。<a href="目標鏈接的name的值"></a>
圖片標簽
<img src="圖片地址" alt="文字" width="" height="" /> --高跟寬設置一個即可，顯示圖片會按比例縮放。alt在圖片無法加載時，顯示文字，還可幫助搜索引擎搜索。
1.3、表格與表單
1.3.1、表格
<table></table> 表格
width:寬度。可以用像素或百分比表示。常用960像素。
border：邊框。常用值0。
cellpadding：內容跟單元格邊框的邊距。常用值0。
cellspacing：單元格之間的間距。常用值0。
align:對齊方式。
bgcolor:背景色。
background:背景圖片。
<tr></tr> 行
align：一行的內容的水平對齊方式
valign：一行的內容的垂直對齊方式
height：行高
bgcolor:背景色
background:背景圖片
<td></td> 單元格
<th></th> 表頭，單元格的內容自動居中、加粗
align:單元格的內容的對齊方式
valign：單元格的內容的垂直對齊方式
width：單元格寬度
height：單元格高度
bgcolor:背景色
background:背景圖片
內容必須放在單元格里，單元格必須放在行里，行必須放在表格里。設置單元格行高、列高時，會同時影響對應的行或列
單元格合並：（建議盡量用表格嵌套）
colspan="n" 合並同一行單元格（后面寫代碼要減去相對應的列）
rowspan="n" 合並同一列單元格（從第二行開始減去對應的列）
1.3.2、表單
<form id="" name="" method="post/get" action="負責處理的服務端"> id不可重復；name可重復；get提交有長度限制，並且編碼后的內容在地址欄可見，post提交無長度限制，且編碼后內容不可見。
</form>
1、文本輸入
文本框<input type="txt" name="" id="" value="" />
密碼框<input type="password" name="" id="" value="" />
文本域<textarea name="" id="" cols=""（字符多少） rows=""（幾行高）></textarea>
隱藏域<input type="hidden" name="" id="" value="" />
2、按鈕
提交按鈕<input type="submit" name="" id="" disabled="disabled" value=""/>點擊后轉到form內的提交服務器的地址
重置按鈕<input type="reset" name="" id="" disabled="disabled" value=""/>
普通按鈕<input type="button" name="" id="" disabled="disabled" value=""/>
圖片按鈕<input type="image" name="" id="" disabled="disabled" src="圖片地址"/>
附：
disabled，使按鈕失效；enable，使可用。
3、選擇輸入
單選按鈕組<input type="redio" name="" checked="checked" value=""/> name的值用來分組；value值看不見，是提交給程序用的；checked，設置默認選項。
復選框組<input type="checkbox" name="" checked="checked" value=""/>
文件上傳<input type="file" name="" id="" />
<lable for=""></lable>
<label> 標簽為 input 元素定義標注（標記）。
label 元素不會向用戶呈現任何特殊效果。不過，它為鼠標用戶改進了可用性。如果您在 label 元素內點擊文本，就會觸發此控件。就是說，當用戶選擇該標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上。
<label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。
下拉列表框
<select name="" id="" size="" multiple="multiple"> --size=1時，為菜單；>1時，為列表。multiple為多選。
<option value="值">內容1</option>
<option value="值" selected="selected">內容2</option> --selected，設為默認
<option value="值">內容3</option>
</select>
1.4、框架
1、frameset
frameset最外城的去掉body用frameset
<frameset rows="100,*" frameborder="no"> --上下分，第一行100像素，剩余為第二行；rows換成cols，則上下分變為左右分。frameborder=“no”，去掉分割線。
<frame src="頁面地址" noresize="noresize"> --noresize，禁止窗口調整大小
<frame src="" scrolling="no"> --scrolling="no",取消顯示滾動條
</frameset>
在超鏈接指定目標頁面顯示在哪個框架窗口中
第一步：給要顯示內容的目標frame設置name屬性
第二步：給超鏈接的target屬性賦值成第一步設置的name
讓整個frameset頁面跳轉至某個頁面：
把超鏈接的target屬性設置為“_top”。
2、iframe
在原來頁面嵌入小窗口顯示其他頁面
<iframe src="其他頁面的地址" width="" height="" frameborder="0" scrolling="no"></iframe>
frameborder，邊線；scrolling，滾動條。如果設置高和寬為0，則不顯示，但是在后台會存在這么一個頁面，例如熊貓燒香病毒。
第2部分 CSS樣式表
CSS（Cascading Style Sheets,層疊樣式表），作用是美化HTML網頁。
/*注釋*/ 注釋語法
2.1、樣式表的基本概念
2.1.1、樣式表分類
1、內聯樣式表
和html聯合顯示，控制精確，但是可重用性差，冗余多。
例：<p style="font-size:14px;">內聯樣式表</p>
2、內嵌樣式表
作為一個獨立區域內嵌在網頁里，必須寫在head標簽里邊。
<style type= "text/css">
p //格式對p標簽起作用
{
樣式;
}
</style>
3、外部樣式表
新建一個CSS文件，用來放樣式表。如果要在HTML文件中調用樣式表，需要在HTML文件中點右鍵→CSS樣式→附加樣式表。一般用link連接方式。
有些標簽有些默認的邊距，一般寫樣式表代碼的時候都會先去除(也可以設置其他樣式)，如下：
<style type= "text/css">
* //格式對所有標簽起作用
{
margin:0px;
padding:0px;
}
</style>
2.1.2、選擇器
1、標簽選擇器。用標簽名做選擇器。
<style type= "text/css">
p //格式對p標簽起作用
{
樣式;
}
</style>
2、class選擇器。都是“.”開頭。
<head>
<style type="text/css">
.main /*定義樣式*/
{
height:42px;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div class="main"> <!--調用class樣式-->
</div>
</body>
3、ID選擇器。以“#”開頭
<div id="樣式名">
<head>
<style type="text/css">
#main /*定義樣式*/
{
height:42px;
width:100%;
text-align:center;
}
</style>
</head>
<body>
<div id="main"> <!--調用id樣式-->
</div>
</body>
4、復合選擇器。
1）、用“，”隔開，表示並列。
<style type="text/css">
p，span /*標簽p、span兩者同樣的樣式*/
{
樣式;
}
</style>
2）、用空格隔開，表示后代。
<style type="text/css">
.main p /*找到使用樣式“main”的標簽，在該標簽里的P標簽使用該樣式*/
{
樣式；
}
</style>
3）、篩選“.”。
<style type="text/css">
p.sp /*在標簽p中的class="sp"的標簽，執行以下樣式*/
{
樣式;
}
</style>
2.2、樣式屬性
2.2.1、背景與前景
/*背景色，樣式表優先級高*/
background-image:url(路徑); /*設置背景圖片（默認）*/
background-attachment:fixed; /*背景是固定的，不隨字體滾動*/
background-attachment:scroll; /*背景隨字體滾動*/
background-repeat:no-repeat; /*no-repeat,不平鋪；repeat,平鋪；repeat-x,橫向平鋪；repeat-y,縱向平鋪*/
background-position:center; /*背景圖居中，設置背景圖位置時，repeat必須為“no-repreat”*/
background-position:right top; /*背景圖放到右上角（方位可以自己更改）*/
background-position:left 100px top 200px; /*離左邊100像素，離上邊200像素（可以設為負值）*/
字體
font-family:"新宋體"; /*字體。常用微軟雅黑、宋體。*/
font-size:12px; /*字體大小。常用像素12px、14px、18px。還可以用“em”，“2.5em”即：默認字體的2.5倍。還可以用百分數*/
font-weight:bold; /*bold是加粗，normal是正常*/
font-style:italic; /*傾斜，normal是不傾斜*/
color:#03C; /*顏色*/
text-decoration:underline; /*下划線，overline是上划線，line-through是刪除線,none是去掉下划線*/
text-align:center; /*（水平對齊）居中對齊，left是左對齊，right是右對齊*/
vertical-align:middle; /*（垂直對齊）居中對齊，top是頂部對齊，bottom是底部對齊。一般設置行高后使用。*/
text-indent:28px; /*首行縮進量*/
line-height:24px; /*行高。一般為1.5~2倍字體大小。*/
display:none; /*none，不顯示；inline-block,顯示為塊，不自動換行，寬高可設；block，顯示為塊，自動換行；inline，效果同span標簽，不自動換行，寬高不可設。*/
visibility:hidden; /*可視性。hidden，隱藏但是占空間；visible，顯示。*/
2.2.2、邊界和邊框
border（表格邊框、樣式等）、margin（表外間距）、padding（內容與單元格間距）
border:5px solid blue; /*四邊框：5像素寬、實線、藍色（相當於以下三行）*/
border-width:5px;
border-style:solid;
border-color:blue;
border-top:5px solid blue; /*上邊框：5像素寬、實線、藍色（分寫同上）*/
border-bottom:5px solid blue; /*下邊框：5像素寬、實線、藍色（分寫同上）*/
border-left:5px solid blue; /*左邊框：5像素寬、實線、藍色（分寫同上）*/
border-right:5px solid blue; /*右邊框：5像素寬、實線、藍色（分寫同上）*/
margin:10px; /*四邊外邊框寬度為10像素。auto，居中。*/
margin-top:10px; /*上邊外邊框寬度為10像素；其他三邊邊框類似*/
margin:20px 0px 20px 0px; /*上-右-下-左，四邊外邊框順時針順序*/
padding:10px; /*內容與邊框的四邊間距為10像素*/
padding-top:10px; /*內容與邊框的上間距為10像素；其他三邊間距類似*/
padding:20px 0px 20px 0px; /*上-右-下-左，內容與邊框的四邊間距順時針順序*/
2.2.3、列表與方塊
width、height、（top、bottom、left、right）只有在絕對坐標情況下才有用
list-style:none; /*取消序號*/
list-style:circle; /*序號變為圓圈，樣式相當於無序*/
list-style-image:url(圖片地址); /*圖片做序號*/
list-style-position:outside; /*序號在內容外*/
list-style-position:inside; /*序號跟內容在一起*/
2.2.4、格式與布局
1、position：fixed
鎖定位置（相對於瀏覽器的位置），例如有些網站的右下角彈窗
例：
<head>
<title>123</title>
<style type="text/css">
#a
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
left:30px;
bottom:20px;
position:fixed;
}
</style>
</head>
<body>
<div id="a">a
</div>
</body>
顯示如下
2、position：absolute
1）、外層沒有position:absolute（或relative）;，那么div相對於瀏覽器定位，如下圖中b（距離瀏覽器的右邊框50像素，距離瀏覽器的下邊框20像素）。
2）、外層有position:absolute（或relative）;，那么div相對於外層邊框定位，如下圖中bb（距離d的右邊框50像素，距離d的下邊框20像素）。
代碼：
<head>
<title>123</title>
<style type="text/css">
.b
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
right:50px;
bottom:20px;
position:absolute; /**/
}
.c
{
border:2px solid red;
width:400px;
height:200px;
}
</style>
<style type="text/css">
.d
{
border:2px solid red;
width:400px;
height:200px;
position:absolute;
}
</style>
</head>
<body>
<div class="c">c
<div class="b">b
</div>
</div>
<div class="d">d
<div class="b">bb
</div>
</div>
</body>
3、position：relative
相對於默認位置的移動。如下圖，a在用relative移動前的位置，aa為用relative移動后的位置，aa距原位置上部間距50像素，距原位置左邊距20像素。
代碼：
<head>
<title>123</title>
<style type="text/css">
#a
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
position:fixed;
}
#aa
{
border:5px solid blue;
width:100px;
height:100px;
margin:10px;
left:20px;
top:50px;
position:relative;
}
</style>
</head>
<body>
<div id="a">a
</div>
<div id="aa">aa
</div>
</body>
顯示如下
5、float：left，right
overflow:hidden; //超出部分隱藏；scroll,顯示出滾動條；
<div style="clear:both"></div> 截斷流
附：
overflow:hidden; /*超出范圍時隱藏；scroll，超出范圍時出滾動條。*/
超鏈接樣式：
<style type="text/css">
a:link /*一般鏈接*/
{
color:blue;
}
a:visited /*訪問過的鏈接的格式*/
{
color:green;
}
a:hover /*設置鼠標指向鏈接時的形式*/
{
color:red;
}
</style>
cursor:pointer 鼠標指到上面時的形狀。
© 版權符號©
半透明效果
<div class="box">透明區域</div>
//樣式表中代碼：
.box
{
opacity:0.5; -moz-opacity:0.5; filter:alpha(opacity=50)
}