參考文獻《JavaWeb 從入門到精通》
另推相關博文一則 JavaScript_知識點梳理note1戴已，同樣是有一定量的Demo哈盲赊。
1.HTML的文檔結構
1.<html>標記
<html>標記是HTML文件的開頭形庭。所有HTML文件都是以<html>標記開頭坤邪，以</html>標記結束,HTML頁面的所有標記都要放置在<html>與</html>標記中灸撰，<html>標記并沒有實質(zhì)性的功能挪捕，但卻是HTML文件不可缺少的內(nèi)容粗梭。
另外，HTML標記是不區(qū)分大小寫的担神。
2.<head>標記
文件的頭標記楼吃，放置HTML文件的信息，
如：
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
- <title></title>
- <script>
3.<title>標記
定義網(wǎng)頁頁面的標題妄讯。
4.<body>標記
HTML頁面的主題標記孩锡。
2.HTML的常用標記
1.換行標記
demo：
<html>
<head>
<title>應用換行標記實現(xiàn)頁面文字換行</title>
</head>
<body>
<b>
黃鶴樓送孟浩然之廣陵
</b><br>
故人西辭黃鶴樓，煙花三月下?lián)P州亥贸。<br>
孤帆遠影碧空盡躬窜，唯見長江天際流
</body>
</html>
運行結果如圖：
2.段落標記
<p>開頭，</p>標記結束炕置。段落標記在段前段各添加一個空行荣挨，而定義在段落標記中的內(nèi)容不受該標記的影響。
3.標題標記
<h1>~<h6>6個標題標記朴摊，分為6級標題默垄。
demo：
<html>
<head>
<title>設置標題標記</title>
</head>
<body>
<h1>Java開發(fā)的3個方向</h1>
<h2>Java SE</h2>
<p>主要用于桌面程序的開發(fā)。它是學習Java EE和Java ME的基礎甚纲，也是本書的重點內(nèi)容口锭。 </p>
<h2>Java EE</h2>
<p>主要用于網(wǎng)頁程序的開發(fā)。隨著互聯(lián)網(wǎng)的發(fā)展介杆，越來越多的企業(yè)使用Java語言來開發(fā)自 己的官方網(wǎng)站鹃操，其中不乏世界500強企業(yè)。</p>
<h2>Java ME</h2>
<p>主要用于嵌入式系統(tǒng)程序的開發(fā)春哨。</p>
</body>
</html>
運行結果如圖：
image.png
4.居中標記
<center></center>荆隘。標記中的內(nèi)容為居中顯示。
demo:
<html>
<head>
<title>設置標題標記</title>
</head>
<body>
<center>
<h1>java開發(fā)的3個方向</h1>
<h2>Java SE</h2>
<p>主要用于桌面程序的開發(fā)赴背。它是學習Java EE和Java ME 的基礎椰拒，也是本書的重點內(nèi)容晶渠。</p>
<h2>Java EE</h2>
<p>主要用于網(wǎng)頁程序的開發(fā)。隨著互聯(lián)網(wǎng)的發(fā)展耸三，越來越 多的企業(yè)使用Java語言來開發(fā)自己的官方網(wǎng)站乱陡，其中不乏世界500強企業(yè)。</p>
<h2>Java ME</h2>
<p>主要用于嵌入式系統(tǒng)程序的開發(fā)仪壮。</p>
</center>
</body>
</html>
運行結果如圖：
image.png
5.文字列表標記
1）無序列表：<ul><li>
demo:
<html>
<head>
<title>無序列表標記</title>
</head>
<body>
編程詞典有以下幾個品種
<p>
<ul>
<li>Java編程詞典
<li>VB編程詞典
<li>VC編程詞典
<li>.net編程詞典
<li>C#編程詞典
</ul>
</body>
</html>
運行結果如圖：
image.png
1）有序列表：<ol><li>
demo:
<html>
<head>
<title>有序列表標記</title>
</head>
<body>
編程詞典有以下幾個品種
<p>
<ol>
<li>Java編程詞典
<li>VB編程詞典
<li>VC編程詞典
<li>.net編程詞典
<li>C#編程詞典
</ol>
</body>
</html>
運行結果如圖：
image.png
3.HTML表格標記
image.png
demo:
<body>
<table width="318" height="167" border="1" align="center">
<caption>學生考試成績單</caption>
<tr>
<td align="center" valign="middle">姓名</td>
<td align="center" valign="middle">語文</td>
<td align="center" valign="middle">數(shù)學</td>
<td align="center" valign="middle">英語</td>
</tr>
<tr>
<td align="center" valign="middle">張三</td>
<td align="center" valign="middle">89</td>
<td align="center" valign="middle">92</td>
<td align="center" valign="middle">87</td>
</tr>
<tr>
<td align="center" valign="middle">李四</td>
<td align="center" valign="middle">93</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">80</td>
</tr>
<tr>
<td align="center" valign="middle">王五</td>
<td align="center" valign="middle">85</td>
<td align="center" valign="middle">86</td>
<td align="center" valign="middle">90</td>
</tr>
</table>
</body>
運行結果如圖：
image.png
4.HTML表單標記
對于經(jīng)常上網(wǎng)的人來說，對網(wǎng)站中的登錄等頁面肯定不會感到陌生胳徽。在登錄頁面中积锅，網(wǎng)站會提供
給用戶用戶名文本框與密碼文本框，以供訪客輸入信息养盗。這里的用戶名文本框與密碼文本框就屬于
HTML中的表單元素缚陷。表單在HTML頁面中起著非常重要的作用，是用戶與網(wǎng)頁交互信息的重要手段往核。
1.<form>...</form>表單標記
基本語法如下：
<form action = "url" method = "get"|"post" name = "name" onSubmit = "" target = "">
</form>
2.<input>表單輸入標記
表單輸入標記是使用最頻繁的表單標記箫爷，通過這個標記可以向頁面中添加單行文本、多行文本聂儒、
按鈕等虎锚。
基本語法如下：
<input type="image" disabled = "disabled" checked="checked" width="digit" height="digit“ maxlength=”digit"
readonly="" size="digit" src="uri" alt="" name="checkbox" value="checkbox">
demo:
<html>
<head>
<title><input>標記的典型應用</title>
</head>
<body><form action="" method="post" name="myform">
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/01.gif" width="694" height="168"></td>
</tr>
</table>
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="103" height="231" valign="top"><img src="images/02.gif" width="35"></td>
<td width="547" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="17%" height="29" align="center">用 戶 名：</td>
<td colspan="2"><input name="username" type="text" id="UserName4" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">密 碼：</td>
<td height="28" colspan="2"><input name="pwd1" type="password" id="PWD14" size="20" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">確認密碼：</td>
<td height="28" colspan="2"><input name="pwd2" type="password" id="PWD25" size="20" maxlength="20"></td>
</tr>
<tr>
<td height="28" align="center">性 別：</td>
<td colspan="2"><input name="sex" type="radio" class="noborder" value="男" checked>
男
<input name="sex" type="radio" class="noborder" value="女">
女</td>
</tr>
<tr>
<td height="28" align="center">愛 好：</td>
<td colspan="2" class="word_grey"><input name="like" type="checkbox" id="like" value="體育">
體育
<input name="like" type="checkbox" id="like" value="旅游">
旅游
<input name="like" type="checkbox" id="like" value="聽音樂">
聽音樂
<input name="like" type="checkbox" id="like" value="看書">
看書</td>
</tr>
<tr>
<td height="28" align="center" style="padding-left:10px">E-mail：</td>
<td colspan="2" class="word_grey"><input name="email" type="text" id="PWD224" size="50"> </td>
</tr>
<tr>
<td height="34"> </td>
<td width="30%" class="word_grey"><input name="Submit" type="submit" class="btn_grey" value="確定保存">
<input name="Reset" type="reset" class="btn_grey" id="Reset" value="重新填寫"></td>
<td width="53%" class="word_grey"><input type="image" name="imageField" src="images/btn_bg.jpg"></td>
</tr>
</table></td>
<td width="44" valign="top"><img src="images/04.gif" width="44"></td>
</tr>
</table>
</form>
</body>
</html>
Demo中的圖片資源我放在碼云上面了，鏈接在這里衩婚，點擊前往窜护；
3.<select>...</select>下拉列表框標記
<select>標記可在頁面中創(chuàng)建下拉列表框，此時的下拉列表框是一個空的列表非春，要使用<option>
標記向列表中添加內(nèi)容柱徙。
<select>標記的語法格式如下：
<select name="name" size="digit" multiple="multiple" disabled="disabled">
</select>
image.png
demo:
<html>
<head>
<title>select標簽Demo</title>
</head>
<body>
<center>
下拉列表框：
<select name="select">
<option>數(shù)碼相機區(qū)</option>
<option>攝影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盤/移動硬盤</option>
</select>
多行列表框（不可多選）：
<select name="select2" size=2>
<option>數(shù)碼相機區(qū)</option>
<option>攝影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盤/移動硬盤</option>
</select>
多行列表框（可多選）：
<select name="select3" size=3 multiple>
<option>數(shù)碼相機區(qū)</option>
<option>攝影器材</option>
<option>MP3/MP4/MP5</option>
<option>U盤/移動硬盤</option>
</select>
</center>
</body>
</html>
運行結果：
image.png
CSS樣式表
1. CSS規(guī)則
選擇符{屬性：屬性值；}
image.png
2. CSS選擇器
1.標記選擇器
demo：
<style>
a{
font-size:9px;
color:#F93;
}
</style>
2.類別選擇器
"."配合“class"屬性
demo：
<!--以下為定義的CSS樣式-->
<style>
.one{ <!--定義類名為one的類別選擇器-->
font-family:宋體; <!--設置字體-->
font-size:24px; <!--設置字體大小-->
color:red; <!--設置字體顏色-->
}
.two{
font-family:宋體;
font-size:16px;
color:red;
}
.three{
font-family:宋體;
font-size:12px;
color:red;
}
</style>
</head>
<body>
<h2 class="one"> 應用了選擇器one </h2><!--定義樣式后頁面會自動加載樣式-->
<p> 正文內(nèi)容1 </p>
<h2 class="two">應用了選擇器two</h2>
<p>正文內(nèi)容2 </p>
<h2 class="three">應用了選擇器three </h2>
<p>正文內(nèi)容3 </p>
</body>
運行結果如下：
image.png
3.id選擇器
"#"配合“id"屬性
demo：
<head>
<style>
#one{
font-family:宋體;
font-size:36px;
color:red;
}
#two{
font-family:宋體;
font-size:16px;
color:red;
}
#three{
font-family:宋體;
font-size:12px;
color:red;
}
</style>
</head>
<body>
<p id = "one"> id選擇器1</p>
<p id = "two">id選擇器2 </p>
<p id = "three">id選擇器3 </p>
</body>
運行結果如下：
image.png
4.CSS2和CSS3的自適應特性比較
demo(CSS2)：
<title>使用CSS2對頁面中的文字添加彩色邊框</title>
<style>
#boarder {
margin:3px;
width:180px;
padding-left:14px;
border-width:5px;
border-color:blue;
border-style:solid;
height:104px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
</div>
</body>
demo(CSS3)：
<style>
#boarder {
border:solid 5px blue;
border-radius:20px;
-moz-border-radius:20px;
padding:20px;
width:180px;
}
</style>
</head>
<body>
<div id="boarder"> 文字一<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
文字二<br>
文字三<br>
文字四<br>
文字五<br>
</div>
</body>
運行結果如下：
CSS2（左）&CSS3 (右)
