轉載請註明出處：http://blog.csdn.net/u011569040/article/details/46737119
1.每個模塊用div，模塊裏面的內容用span
<div>這是一個div</div>
<span>這是一個span</span>
2.表格標籤（已被淘汰）
一個簡單的表格由三大部分組成：table，tr，td。還有兩個專門用來控制樣式的thead和tbody。
- tr是“table row（表格行）”的縮寫，表示表格的一行。
- td是“table data（表格數據）”的縮寫，表示一行的一個單元格。
<table>
<tr>
<td>A11</td><td>A12</td><td>A13</td>
<tr/>
<tr>
<td>A21</td><td>A22</td><td>A23</td>
<tr/>
<tr>
<td>A31</td><td>A32</td><td>A33</td>
<tr/>
</table>
居中：align，線條border
<table width="300" align="center" border="1">
合併2個單元格colspan="2"
<table width="300" align="center" border="5">
<tr>
<td>A11</td><td>A12</td><td>A13</td>
<tr/>
<tr>
<td>A21</td><td>A22</td><td>A23</td>
<tr/>
<tr>
<td colspan="2">A31</td>
<td >A32</td>
<tr/>
</table>
最後一行的兩個單元格均分，需要嵌套一個table
3.表單：表格是不能填數據的，表單可以。
常用的表單標籤：原則上所有的表單標籤都要放置在form標籤中。
input標籤可以用來設置文本框、密碼框等數據。
submit表示表單的提交按鈕，當提交的時候會連接到form中的action中
button表示按鈕，如果沒有進行任何控制，點擊什麼都不會做
</html>
<head>
<title>第一個網頁</title>
</head>
<body>
<form action="http://www.baidu.com">
用戶名：<input type="text"/><br/>
密碼： <input type="password"/><br/>
性別：<input type="radio" value="男" name="sex"/>男
<!--radio是單選框，通過name來分組，當name一樣時表示這幾個radio都在一個分組裏且僅有一個可以被選中 -->
<input type="radio" value="女" name="sex"/>女<br/>
興趣：<input type="checkbox"/>足球<input type="checkbox"/>籃球<input type="checkbox"/>羽毛球<br/>
籍貫：<select>
<option>北京</option>
<option>湖北</option>
<option>上海</option>
</select><br/>
個人簡介：<textarea cols="50" rows="10"></textarea><br/>
<input type="submit" value="用戶註冊"/>
<input type="button" value="按鈕">
</form>
</body>
</html>
3. 這個效果：
</html>
<head>
<title>框架標籤</title>
</head>
<frameset cols="150,*,150" frameborder="1" border="30">
<frame src="a.html" noresize />
<frame src="http://www.baidu.com"/>
<frame src="helloWorld.html" />
</frameset>
</html>cols="150,*,150"表示每個frame的寬度，noresize屬性使兩邊的框框不能拉伸，frameborder="0"使兩個框框沒有界限，frameborder="1"、border="30"使邊界變寬
<html>
<head>
<title>第一個css</title>
<style type="text/css">
/*h2表示對頁面當中的所有h2標籤都有效*/
h2{
background:#256314;
color:#fff;
}
</style>
</head>
<body>
<!--通過style屬性來設置樣式，這個樣式是嵌套在標籤中，可以成爲內嵌樣式，內嵌樣式僅僅只是對當前標籤有效，
內嵌標籤中的元素會把在style當中的樣式替換掉-->
<h2 style="color:#212635;text-decoration:underline;font-size:12px">這是我的第一個css文件</h2>
<h2>這是一個樣式</h2>
<h2>這是另一個樣式</h2>
</body>
</html>
另一種寫法，用css：
h2{
boeder:2px solid red;
background:#aa22dd;
color:#fff;
}<html>
<head>
<title>外部鏈接css文件</title>
<link rel="stylesheet" type="text/css" href="css.css"/>
</head>
<body>
<h2>這是一個樣式</h2>
<h2>這是另一個樣式</h2>
</body>
</html>
<html>
<head>
<title>外部鏈接css</title>
<style type="text/css">
/*標籤選擇器，頁面中的所有p標籤都會使用該樣式*/
p{
color:red;
}
/*ID選擇器，此時會對所有的id位cho的標籤進行樣式的設置*/
p.#k2{
font-weight:bold;
text-decoration:underline;
}
p.p1{
color:#54a;
font-size:16px;
}
p.p2{
color:#1df;
font-size:16px;
}
/*包含選擇符，指的是p標籤中的所有span標籤都來設置這個信息*/
p span{
background:#859361;
font-weight:bold;
}
/*子對象選擇符*/
div > h3{
background:#ffddcc;
}
/*包含選擇符會包含div標籤中的所有span包括是子標籤中的span*/
div span{
background:#0f0;
}
/*子對象選擇符，僅僅只針對div標籤的第一級子對象*/
div > span{
background:#0f0;
}
/*分組選擇符，以下表示所有的id爲d1或者p2的標籤都使用該樣式*/
#d1,#p2{
font- size:19px;
background:#999;
}
</style>
</head>
<body>
<div>
<h3>tools for Java EE, JPA,</h3>
</div>
<p class="p1">
Tools for Java developers creating <span>Java EE and Web applications,</span>
including a <h5>Java <span>IDE, JSF,</span> Mylyn, EGit</h5> and others.
</p>
<p id="k2">
The essential tools for any PHP developer, including PHP language support,
Git client, Mylyn and editors for JavaScript, HTML, CSS and
</p>
<p class="p2">
Tools for Java developers creating Java EE and Web applications,
including a Java IDE, tools for Java EE, JPA, JSF, Mylyn, EGit and others.
</p>
<p class="p2">
Tools for Java developers creating Java EE and Web applications,
including a Java IDE, tools for Java EE, JPA, JSF, Mylyn, EGit and others.
</p>
</body>
</html>