后面的內(nèi)容是分兩節(jié)課上的,但便于方面查看,我把HTML后面剩的標簽全都寫在這個文檔里面。首先學習了圖像和鏈接,錨點,表格,不規(guī)則表格,表格嵌套,結(jié)構(gòu)標記,表單,文本框與密碼框,按鈕設(shè)置。
圖像的標簽:

鏈接元素大部分都是<a>:
<a href="" target="">文本</a>
– href 屬性:鏈接 URL – target 屬性:
目標,可取值為 _blank、_self 等 – name 屬性:錨點名稱 <a >To Google</a> <br /> <a href="teacher/teacher.asp" target="_blank"> To other page </a>
alt搜索引擎優(yōu)化
target 屬性有兩個值,默認_self,_blank打開一個新的窗口
name屬性,作為錨點,可以回到當前標簽
下載直接給壓縮地址
mailto 調(diào)用郵件,發(fā)送給后面的對象
定義表格:使?用成對的 <table></table>
創(chuàng)建表?行:使?用成對的 <tr></tr> 標記
創(chuàng)建單元格:使?用成對的 <td></td> 標記
表格的常用屬性:
<table>元素 – width
設(shè)置表格寬度 – height
設(shè)置表格高度 – align
設(shè)置表格對齊方式(left|center|right) –
border設(shè)置表格邊框?qū)挾?–
cellpadding設(shè)置內(nèi)邊距(單元格邊框與內(nèi)容之間的距離) –
cellspacing設(shè)置外邊距(單元格之間的距離) –bgcolor設(shè)置表格背景顏色
<tr>元素 –
align設(shè)置水平對齊方式(left|center|right) –
valign設(shè)置垂直對齊方式(top|middle|bottom) <td>元素 –
align設(shè)置水平對齊方式(left|center|right) –
valign設(shè)置垂直對齊方式(top|middle|bottom) – width設(shè)置寬度 –
height,設(shè)置高度 –
colspan,設(shè)置單元格跨列 –
rowspan,設(shè)置單元格跨行
表格標題<caption></caption>
行分組
表格可以劃分為3個部分:表頭、表主體和表尾
表頭行分組:<thead></thead>
表主體?行分組:<tbody></tbody>
表尾?行分組:<tfoot></tfoot>
不規(guī)則表格
設(shè)置單元格 <td> 的跨?行或者跨列屬性
跨列:colspan – ?水平?方向延伸單元格,值為正整數(shù),代表此單元格?水平延伸的單元格數(shù)
跨行:rowspan – 垂直?方向延伸單元格,值為正整數(shù),代表此單元格垂直延伸的單元格數(shù)
結(jié)構(gòu)標記經(jīng)常使用<div>HTML5為了標記方便通常分為頁頭部分<div id="herder"></div>
頁面的主體部分<div id="main"></div>
頁面的結(jié)束部分<div id="footer"></div>
表單元素通常用<form></form>標記,表單的控制元素主要有:input元素,textarea元素,select和option元素,
?文本框與密碼框
文本框:<input type =“text” />
密碼框:<input type =“password”/>
主要屬性 name:名稱
value :由訪問者?自由輸?入的任何?文本 maxlength :限制輸?入的字符數(shù)
readonly :設(shè)置?文本控件只讀
單選框和復選框
單選框: <input type=“radio”/>
復選框: <input type=“checkbox” />
按鈕
提交按鈕: <input type=“submit”/>
傳送表單數(shù)據(jù)給服務(wù)器端或其它程序處理
重置按鈕: <input type=“reset” /> –
清空表單的內(nèi)容并把所有表單控件設(shè)置為最初的默認值 ?
普通按鈕: <input type=“button” />
用于執(zhí)行客戶端腳本
其他還有<label>元素
選項框有兩種:下拉選項框和滾動列表
可能還需要補充的有許多,用的特別不熟,希望自己多練一下,把寫出來的,沒有寫出來的都能運用。下面是用這些標簽寫的程序:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form>
<table border="1"cellpadding="20" cellspacing="0">
<caption>修改個人信息</caption>
<tr>
<td width="50">姓名:</td>
<td width="300"><input type="text" value="mary"></td>
<td rowspan="7" width="150" valign="top">
<details>
<summary>各項<mark>技能</mark>指數(shù)</summary>
<ul type="none">
<li>HTML:<meter max="100" min="0" value="100" title="100%"></meter></li>
<li>CSS3:<meter max="100" min="0" value="90" title="90%"></meter></li>
<li>AJAX:<meter max="100" min="0" value="50" title="50%"></meter></li>
</ul>
</details>
</td>
</tr>
<tr>
<td>性別:</td>
<td>
女士<input type="radio" value="1" name="city">
男士<input type="radio" value="2" name="city">
</td>
</tr>
<tr>
<td>學歷:</td>
<td>其他<select name="xueli" size="1" multiple="3"></select></td>
</tr>
<tr>
<td >意向工作城市:</td>
<td>
<select name="chengshi" size="5" multiple>
<option>北京</option>
<option>上海</option>
<option>南京</option>
<option>深圳</option>
</select>
</td>
</tr>
<tr>
<td>個人描述</td>
<td><textarea name="" id="" colos="3" rows="4"></textarea></td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="remeberpassword" id="remeberpassword">
<label for="remeberpassword">不要公開我的信息</label>
</td>
</tr>
<tr>
<td></td>
<td align="left">
<input type="submit"="保存">
<input type="reset">
</td>
</tr>
</table>
</form>
</body>
</html>
02
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>京東</title>
</head>
<body>
<form>
<div id="header"><img cellspacing src="j01.jpg" alt=""></div>
<table border="1" cellpadding="20" cellspacing="0">
<tr>
<td rowspan="8" width="300"><img width="500" height="500" cellspacing src="j03.jpg" alt=""> </td>
<td width="200"> 用戶名/郵箱:</td>
</tr>
<tr>
<td> <input type="text" value="mary@163.com"></td>
</tr>
<tr>
<td>密碼</td>
</tr>
<tr>
<td><input type="text" value=""></td>
</tr>
<tr>
<td> <input type="checkbox" name="remeberpassword" id="remeberpassword">
<label for="remeberpassword">自動登陸</label> </td>
</tr>
<tr>
<td align="center">
<input type="submit"="登陸">
<input type="reset">
</td>
</tr>
<tr>
<td>使用京東合作賬號登陸</td>
</tr>
<tr>
<td align="right">
<input type="radio" value="1" name="city" >QQ
<input type="radio" value="2" name="city"
>京東賬號
</td>
</tr>
<tr>
<td colspan="2" align="right"> <img cellspacing src="j02.jpg" alt=""></td>
</tr>
</table>
</form>
</body>
</html>