Html簡單標記語言
基本框架：<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
簡單標記語言：
1.換行符：<br> <b></b>:字體加粗
2.段落標記：<p></p>:段落標記在段前和段後各添加一個空行，而定義在段落標記中的內容，不受該標記的影響。
3.6個級別的標題：<h1>至<h6>,數字越小，級別越高，也就是字體越大。
4.<center></center>:居中標記
5.文字列表標記：將文字以列表的形式依次排列
無序列表是在每個列表項的前面添加一個圓點符號。
有序列表和無序列表的區別是，使用有序列表標記可以將列表項進行排號。有序列表的標記爲<ol>，每一個列表項前使用<li>。有序列表中項目項是有一定的順序的。
6.定義表格：<table>,標題標記<caption>,他有align,valign等屬性
表頭標記<th></th>，也可以通過align,valign，background,colspan,valign等屬性來設置表頭
表格標記<tr>，一組<tr>標記表示表格中的一行，<tr>標記要嵌套在<table>標記中使用，該標記也具有align,background等屬性
單元格標記<td>，又稱爲列標記，一個<tr>標記中要嵌套若干個<td>標記。也具有align（排列成一條線）,valign（垂直對其），background（背景）。屬性
注：定義表格光使用<table>是不夠的，還需要定義表格中的行、列、標題等內容。
7.Html表單標記：
7.1<from></from>表單標記
<from action="url" method="get"|"post" name="name" onSubmit=""target=""></from>
action屬性：用來指定處理表單數據的url地址，
method屬性：用來指定數據傳送到服務器的方式：get/post
name屬性：用來設置表單的名稱，
onSubmit屬性：用於指定當用戶單機提交按鈕時觸發的事件。
target屬性：指定輸入結果在哪個窗口顯示，屬性值可設置爲：_blank:在新窗口中打開目標文件。_self:在同一個窗口打開。_parent::在上一級窗口打開。_top在整個窗口中打開
7.1<input>表單輸入標記
<input type="image" disabled="disable" checked="checked" width="digit" height="digit" maxlength="digit"
readonly="" size="digit" src="uri" alt="" name="checkbox" value="checkbox"></input>
<input>標記中type屬性的屬性值
1.text：文本框。2.password:密碼域。3.file:文件域 4.radio:單選按鈕。5.CheckBox:複選框 6.submit:提交按鈕 7.reset:重置按鈕 8.:button普通按鈕 9.hidden:隱藏域。 10.image:圖像域
7.3<select>…</select>下拉菜單標記 <select name="name" size="digit" multiple="multiple" disabled="disabled"></select> <select>標記的屬性：
1.name:用於指定列表框的名稱。
2.size：用於指定列表框中顯示的選項數量，超出該數量的選項可以通過拖動滾動條查看。
3.disabled:用於指定當前列表框不可使用(變成灰色)
4.multiple:用於讓多行列表框支持多選
7.4<textarea>多行文本標記
<from name="from1" method="post" action="">
<textarea name="content" cols="30" rows="5" wrap="hard"></textarea>
</from>
8.1 超鏈接標記是頁面中非常重要的元素，在網站中實現從一個頁面跳轉到另一個頁面，這個功能就是通過超7接標記<a>來完成。
<a href=""></a>
8.2 在瀏覽網站中通常會看到各式各樣的漂亮的圖片，在頁面中添加的圖片是通過<img>標記來實現的。
<img src="url" width="value" height="value" border="value" alt="提示文字">
<img>的標記的屬性：
src:用於指定圖片的來源。
width:用於指定圖片的寬度。
height:用於指定圖片的高度。
border:用於指定圖像外邊框的寬度。默認值爲0
alt:用於指定圖片無法顯示的文字。
練習代碼：
eg1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單練習</title>
</head>
<body>
<b>
<center>
格言：只要步履不停，終會得償所願！<br></center>
黃鶴樓送孟浩然之廣陵<br>
</b>
故人西辭黃鶴樓，煙花三月下揚州。<br>
孤帆遠影碧空盡，唯見長江天際流。
<h2>Java基礎學習</h2>
<h3>JavaSE</h3>
<p>它主要用於桌面程序的開發，越來越多的企業使用Java語言來開發自己的官方網站，其中不乏世界500強企業。</p>
<h3>JavaEE</h3>
<p>主要用於網頁程序的開發</p>
<h3>JavaME</h3>
<p>主要用於嵌入式是程序的開發</p>
</body>
</html>運行結果：
eg2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>簡單練習</title>
</head>
<body>
<b>無序列表標記</b>
<p>
<ul>
<li>Java編程詞典
<li>VB編程詞典
<li>VC編程詞典
<li>.NET編程詞典
<li>c#編程詞典
</ul>
</p>
<b>有序列表標記</b>
<p>
<ol>
<li>Java編程詞典
<li>VB編程詞典
<li>VC編程詞典
<li>.NET編程詞典
<li>c#編程詞典
</ol>
</p>
<table width="310" 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">數學</td>
<td align="center"valign="middle">英語</td>
</tr>
<tr>
<td align="center"valign="middle">張三</td>
<td align="center"valign="middle">87</td>
<td align="center"valign="middle">89.5</td>
<td align="center"valign="middle">101</td>
</tr>
<tr>
<td align="center"valign="middle">薛晉</td>
<td align="center"valign="middle">85</td>
<td align="center"valign="middle">85.5</td>
<td align="center"valign="middle">109</td>
</tr>
</table>
</body>
</html>運行結果：
表單標記練習代碼：
eg3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單標記input的使用</title>
</head>
<body>
<form action="" method="post" name="myform">
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
</table>
<table width="694" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<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>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>0.運行結果圖：
eg4:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>select標記和option標記添加下拉列表框和多行下拉列表框</title>
</head>
<body>
<select name="select">
<option>數碼相機區</option>
<option>攝影器材</option>
<option>MP3/MP4/MP5</option>
<option>u盤</option>
</select><br>
多行列表框(不可多選)
<select name="select2" size="2">
<option>數碼相機區</option>
<option>攝影器材</option>
<option>MP3/MP4/MP5</option>
<option>u盤</option>
</select><br>
多行列表框(可多選)
<select name="select3" size="3" multiple>
<option>數碼相機區</option>
<option>攝影器材</option>
<option>MP3/MP4/MP5</option>
<option>u盤</option>
</select>
</body>
</html>運行結果圖：
eg5:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>textarea多行文本</title>
</head>
<body>
<from name="from1" method="post" action="">
<textarea name="content" cols="30" rows="5" wrap="hard"></textarea>
</from>
</body>
</html>運行結果圖：
eg6.1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超鏈接及圖片標記</title>
</head>
<body>
<table width="409" height="523" border="1 align="center">
<tr>
<td width="199" heijht="99">
<img src="E:/timg.jpg">
</td>
</tr>
<tr>
<td height="35" align="center" valign="middle"><a href="07.html">查看詳情</a></td>
<tr>
</table>
</body>
</html>eg6.2:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超鏈接及圖片標記的超鏈接</title>
</head>
<body>
<p>
我是胡歌粉，
</p>
</body>
</html>運行結果圖：
超鏈接運行結果圖：
1.<section>元素表示頁面中的一個區域，例如章節，頁眉，頁腳或者頁面的其他部分與<h1>--<h4>電腦更元素聯合起來使用
<article>:頁面中定義一塊與上下文不相關的內容
<header>頁眉。<footer>:腳註
<aside>元素用來表示當前頁面的附屬信息部分
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>新增元素的使用</title>
</head>
<body>
<section>
<h2>section標記的使用</h2>
<p>完成百分比：100%</p>
<input type="button" value="請單擊">
</section>
<article>
<!-- <header>是<article>的頁眉 -->
<header>
<h1>所謂愛情</h1>
</header>
<p>我們還小，說愛太浮誇，但我知道，喜歡和在一起是倆件完全不同的事情。</p>
<footer><!-- 頁腳 -->
<p>1996.10.14</p>
</footer>
</article>
<aside>
<nav>
<h3>側欄</h3>
<ul>
<li><a href="#">大話西遊</a></li>
</ul>
<ul>
<li><a href="#">周星馳</a></li>
</ul>
<ul>
<li><a href="#">至尊寶</a></li>
</ul>
</nav>
</aside>
</body>
</html>運行結果圖：
