javaWeb技術(shù)第一篇之HTML
時間：2023-08-29 03:30:01 | 來源：網(wǎng)站運營
時間：2023-08-29 03:30:01 來源：網(wǎng)站運營
javaWeb技術(shù)第一篇之HTML：<!-- 當(dāng)前是最簡的html -->
<html>
<!-- 告訴瀏覽器當(dāng)前是一個html文檔
最外面的標(biāo)簽。 -->
<head>
<!--head頭標(biāo)簽:用來設(shè)置網(wǎng)頁的參數(shù) -->
<!--title告訴瀏覽器展示網(wǎng)頁標(biāo)題-->
<title>百度百科</title>
<!--meta標(biāo)簽:用來設(shè)置網(wǎng)頁編碼
charset="utf-8":utf-8 防止中文亂碼 -->
<meta charset="utf-8"/>
</head>
<body>
<!-- body主體標(biāo)簽:用來顯示網(wǎng)頁內(nèi)容-->
Hello world! 我愛你中國
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
h1~6 是告訴瀏覽器展示標(biāo)題。
格式
<h1>標(biāo)題</h1>
效果:
級數(shù)越大字體越小。
-->
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--font字體標(biāo)簽:告訴瀏覽器按照指定的顏色 大小 字體效果展示文字
格式:
<font color="設(shè)置顏色" size="設(shè)置大小" face="設(shè)置字體">
文字
</font>
* color可以使用單詞來設(shè)置顏色，也可以使用16進制來設(shè)置顏色，項目中一般使用取色器
* size取值 1~7
* face使用中文提示
-->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--i標(biāo)簽：告訴瀏覽器把文字傾斜
格式:
<i>我是傾斜</i>
b標(biāo)簽:告訴瀏覽器把文字加粗
格式:
<b>我是加粗</b>
strong標(biāo)簽:告訴瀏覽器把文字加粗
格式
<strong>我是加粗</strong>
-->
<!--加粗帶有傾斜-->
<i><b>我是加粗加傾斜</b></i>
<i><strong>我是加粗加傾斜</strong></i>
<strong><i>我是加粗加傾斜</i></strong>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
排版:設(shè)置文字的排列順序
意義：提高閱讀體驗
1. 空格:告訴瀏覽器隔開內(nèi)容
2.<br/>換行:告訴瀏覽器該標(biāo)簽右邊的內(nèi)容另起一行，沒有留白
3.分段:將文字設(shè)置成段落,留白 <p>文字 內(nèi)容</p>
4.<hr width="設(shè)置寬度 百分比/像素px" align="設(shè)置對齊方向"/>分割線：告訴瀏覽器展示一條線
*p標(biāo)簽有留白 br標(biāo)簽沒有留白
-->
宋<hr width="50px" align="right"/>jj馬蓉 王<br/>寶強
<p>故事1</p>
<p>故事2</p>
<p>故事3</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1)聯(lián)想
2)列點
*公司簡介 使用h1標(biāo)簽
* 分割線使用hr標(biāo)簽
* “訓(xùn)練營” 使用font標(biāo)簽
* CSDN 使用i+b或者 i+strong
* 使用p標(biāo)簽 創(chuàng)建四個段落
3)編碼-->
<!--*公司簡介 使用h1標(biāo)簽-->
<h1>公司簡介</h1>
<!--* 分割線使用hr標(biāo)簽-->
<hr/>
<!--* “訓(xùn)練營” 使用font標(biāo)簽-->
<!--* 使用b/strong-->
<!--* 使用i-->
<!--* CSDN 使用i+b或者 i+strong-->
<p>
<font color="red">“訓(xùn)練營”</font>是由<b></b>聯(lián)合<i>中關(guān)村軟件園</i>、<i><b>CSDN</b></i>
</p>
<!--* 使用p標(biāo)簽 創(chuàng)建四個段落-->
<p>
</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--img標(biāo)簽：告訴瀏覽器展示一個圖片文件
<img src="設(shè)置好路徑" width="設(shè)置寬度" height="設(shè)置高度" alt="設(shè)置圖片找不到的提示文字 "/>
*相對路徑:項目內(nèi)部使用相對路徑。 ./當(dāng)前目錄
*絕對路徑:
http://...
* D:/用戶目錄/我的文檔/HBuilderProjects/dayHtmlCode/img/zhaoliyin.jpg
-->
<img src="./img/zhaoliyin.jpg" width="100px" height="200px"/><br/>
<img src="http://localhost:8080/tomcat.png" /></br/>
<img src="./img/zhaoliyin.jpg" width="100px" height="200px" alt="這是一張黃圖"/><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--a標(biāo)簽：告訴瀏覽器當(dāng)用戶點擊文字 時，打開隱藏的資源(圖片 網(wǎng)頁)
<a href="設(shè)置資源路徑">文字</a>
-->
<a href="./img/huangtu.jpg">這是一張黃圖</a><br/>
<a href="./index.html">這是一張黃頁</a><br/>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--一條記錄一行地展示就叫列表
<ul type="設(shè)置符號 實習(xí)圓disc 空心圓circle 方塊square"> 無序表:順序?qū)τ涗浀膬r值沒有影響 unorder list
<li>記錄1</li> list item
<li>記錄2</li> list item
</ul>
<ol type="設(shè)置符號 有順序 ">有序表:順序?qū)τ涗浀膬r值有極大影響 order list
<li>記錄1</li> list item
<li>記錄2</li> list item
</ol>
* 1代表自然數(shù)
* a小寫字母
* A大寫字母
* i 羅馬字母
* I 大寫邏輯字母
-->
你喜歡的四大名著有哪些？
<ul type="disc">
<li>金pin梅</li>
<li>哈利波特</li>
<li>指環(huán)王</li>
<li>誅仙</li>
</ul>
你喜歡的幾個老師?
<ol type="I">
<li>瀧老師</li>
<li>大橋老師</li>
<li>蒼老師</li>
<li>波老師</li>
<li>瀧老師</li>
</ol>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--*使用ul表示一個列表
*使用li表示一條記錄
*使用a表示一個超鏈接
*使用font設(shè)置顏色 -->
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
列表：一列多行
表格:多列多行
表格看成列表的擴展
table標(biāo)簽:告訴瀏覽器展示一個表格
<table order="1px 設(shè)置邊框" width="50% 設(shè)置寬度"></table>
tr標(biāo)簽:告訴瀏覽器展示一個表格行
tr必須包含在table內(nèi)
td標(biāo)簽:告訴瀏覽器展示一個單元素
td必須包含在tr內(nèi)
th與td都是單元格,前者對內(nèi)容進行居中加粗
數(shù)據(jù)必須被td包含
理解:table就是一個死腦筋。認為數(shù)據(jù)必須被td包含，其它情況顯示在列表。
-->
<table border="1px" width="50%">
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
<tr>
<td>1</td><td>2</td><td>3</td>
</tr>
</table>
<table border="1px" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
擴展:合并單元格
*span范圍
rowspan
colspan
<table border="1px" width="100%">
<tr>
<!--*1.刪除合并單元格
*2.創(chuàng)建新單元格
*3.設(shè)置colspan跨列合并1+n
bgcolor="設(shè)置背景顏色"
-->
<td colspan="2" bgcolor="gray" align="right"><b>1 2</b></td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
跨行合并:合并的單元格涉及多個行，相鄰
<table border="1px" width="100%">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<!--
*刪除需要合并的單元格
*新建新的單元格
*設(shè)置rowspan=1+n-->
<td rowspan="2" bgcolor="gray">1 1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
</tr>
</table>
<!--商城的熱門商品結(jié)構(gòu)-->
<table border="1px" width="100%">
<tr>
<td colspan="7" bgcolor="gray">熱門商品</td>
</tr>
<tr>
<td rowspan="2" bgcolor="yellow">大圖</td>
<td colspan="3" bgcolor="blue">大圖</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
1）聯(lián)想
2）列點
*使用表格table展示6行
*第一行 兩個img 三個 a標(biāo)簽
*第二行 背景bgColor為黑的 行 文字為白色
*第三個 大的img
*第四個 熱門商品 跨行跨列
*第五個 img
*第六個 5個a標(biāo)簽 p完成分段居中
3) 編碼
-->
<!--*使用表格table展示6行-->
<table border="1px" width="100%">
<tr>
<td>
<!--*第一行 兩個img 三個 a標(biāo)簽-->
<table width="100%">
<tr>
<td><img src="img/logo2.png"/></td>
<td><img src="img/header.jpg"/></td>
<td><a href="#">登錄</a> <a href="#">注冊</a> <a href="#">關(guān)于</a></td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="black" height="40px">
<td>
<!--*第二行 背景bgColor為黑的 行 文字為白色-->
<font color="white" size="4">電腦</font>
<font color="white" size="4">手機</font>
</td>
</tr>
<tr>
<td>
<!--*第三個 大的img-->
<img src="img/1.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<!--*第四個 熱門商品 跨行跨列
td內(nèi)部是可以再包含表格的。
但是寫的時候要小心
-->
<table width="100%" border="0px">
<tr>
<td colspan="7">
<h3>熱門商品 <img src="img/title2.jpg" /></h3>
</td>
</tr>
<tr height="240px">
<td rowspan="2">
<img src="img/big01.jpg" />
</td>
<td colspan="3">
<img src="img/middle01.jpg" width="100%" height="96%"/>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
</tr>
<tr height="240px">
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
<td width="14.2%">
<p align="center"><img src="img/small08.jpg"/></p>
<p align="center">妹子</p>
<p align="center"><font color="red">$200</font></p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<!--*第五個 img-->
<img src="img/ad.jpg" width="100%"/>
</td>
</tr>
<tr>
<td>
<!--*第六個 5個a標(biāo)簽 p完成分段居中-->
<p align="center">
<a href="#">友情連接</a>
<a href="#">友情連接</a>
<a href="#">友情連接</a>
<a href="#">友情連接</a>
<a href="#">友情連接</a>
</p>
</td>
</tr>
</table>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<!--frame是代表瀏覽器界面的一個小窗口
可以加載html頁面
格式
<frame src="設(shè)置html頁面路徑"/>
frameset是小窗口的集合
*可以包含多個小窗口
*但是不能跟body一塊使用，要不就失效
* 可以在frameset里面使用cols屬性:依次設(shè)置小窗口的寬度。值使用,隔開 cols="30%,30%,40%"
* 最后一個值也可使用*代替
* 使用rows屬性:依次設(shè)置小窗口的高度。值使用,隔開 rows="30%,30%,40%"
-->
<!--<frameset cols="30%,30%,*">
<frame src="001.最簡html.html"/>
<frame src="002.文字元素-標(biāo)題.html"/>
<frame src="003.文字元素-字體.html"/>
</frameset>-->
<frameset rows="20%,60%,*">
<frame src="001.最簡html.html"/>
<frame src="002.文字元素-標(biāo)題.html"/>
<frame src="003.文字元素-字體.html"/>
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<frameset rows="20%,*,20%">
<frame src="html/head.html" />
<!--<frame src="html/rygl.html" />-->
<frameset cols="20%,*">
<frame src="html/left.html"/>
<!--這里不設(shè)置展示頁面，頁面內(nèi)容由鏈接給定
name相當(dāng)于給frame設(shè)置了一個id
-->
<frame name="detail"/>
</frameset>
<frame src="html/foot.html" />
</frameset>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
表單是什么？
一個網(wǎng)頁的單子。
表單作用？
收集不同用戶的輸入數(shù)據(jù)
應(yīng)用場景:注冊/登錄，銀行-表單。
格式:
<form>
輸入元素
</form>
告訴瀏覽器當(dāng)前需要顯示一個表單。
*表單是一個集合.
* 內(nèi)部可以添加輸入元素
輸入元素:
*input 輸入標(biāo)簽
* select 下拉列表標(biāo)簽
* textarea文本域
* button(了解)
-->
<form>
賬號:<input />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
輸入元素:所有輸入元素必須被包含在form標(biāo)簽內(nèi)
*input 輸入標(biāo)簽
*屬性type：設(shè)置輸入元素的外觀
*屬性value：提交給服務(wù)器的數(shù)據(jù)/設(shè)置按鈕的顯示文字
* text:設(shè)置文本框 默認
* password：提高安全性，密碼顯示
* radio:單選效果,一組選項選一個
* checkbox:復(fù)選效果,一組里面選多個
* submit提交數(shù)據(jù)到服務(wù)器
* 屬性name:可以給單選/復(fù)選 分組。
* 屬性checked:選中 標(biāo)準(zhǔn) ：checked="checked" 變態(tài):checked或者checked="" 加上這個表示直接選中一個選項,一進入頁面性別男就被選中
* select 下拉列表標(biāo)簽
* textarea文本域
* button(了解)
-->
<form>
賬號:<input type="text"/>
<br/>密碼:<input type="password" />
<br/>確認密碼:<input type="password" />
<br />性別<input type="radio" name="sex" checked="checked" value="0"/>男<input type="radio" name="sex" value="1"/>女
<br />追女孩不正確辦法：<input type="checkbox" name="method" checked="checked" value="0"/>送禮物
<input type="checkbox" name="method" checked="checked" value="1"/>太關(guān)心
<input type="checkbox" name="method" checked="checked" value="2"/>call/sms
<br /> <input type="submit" value="注冊" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
輸入元素:所有輸入元素必須被包含在form標(biāo)簽內(nèi)
*input 輸入標(biāo)簽
*屬性type：設(shè)置輸入元素的外觀
*屬性value：提交給服務(wù)器的數(shù)據(jù)/設(shè)置按鈕的顯示文字
* text:設(shè)置文本框 默認
* password：提高安全性，密碼顯示
* radio:單選效果,一組選項選一個
* checkbox:復(fù)選效果,一組里面選多個
* submit提交數(shù)據(jù)到服務(wù)器
* 了解:
* file:選擇文件
* date:日期
* button:顯示一個按鈕
* image:顯示一個圖片按鈕 可以使用src設(shè)置圖片文件
* reset:重置.
* hidden:隱藏,一般是后續(xù)程序使用，隱藏是不想讓用戶去編輯
* 屬性name:可以給單選/復(fù)選 分組/只要提交給服務(wù)端的數(shù)據(jù)都必須加上name作變量名
* 屬性checked:選中 標(biāo)準(zhǔn) ：checked="checked" 變態(tài):checked或者checked=""
* 屬性readonly="readonly" 取消編輯功能
* 屬性disabled="disabled" 取消編碼功能，顯示灰色
*
* size="60":設(shè)置顯示寬度
* maxlength:設(shè)置最大輸入字符
* select 下拉列表標(biāo)簽
* textarea文本域
* button(了解)
-->
<form>
<input type="hidden" name="id" value="123" />
<br/>賬號:<input type="text" name="username"size="60" maxlength="30"/>
<br/>密碼:<input type="password" name="pwd"/>
<br/>確認密碼:<input type="password" value="123" disabled="disabled" name="pwd2"/>
<br />性別<input type="radio" name="sex" checked="checked" value="0"/>男<input type="radio" name="sex" value="1"/>女
<br />追女孩不正確辦法：<input type="checkbox" name="method" checked="checked" value="0"/>送禮物
<input type="checkbox" name="method" checked="checked" value="1"/>太關(guān)心
<input type="checkbox" name="method" checked="checked" value="2"/>call/sms
<br /> <input type="file" name="head" />
<br />生日:<input type="date" name="birthday" value="2014-01-02" readonly="readonly"/>
<br /><input type="button" value="我是按鈕" /> <input type="image" src="img/015.jpg" width="60" height="30" />
<br /> <input type="submit" value="注冊" /> <input type="reset" value="我是重置" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
輸入元素:所有輸入元素必須被包含在form標(biāo)簽內(nèi)
*input 輸入標(biāo)簽
*屬性type：設(shè)置輸入元素的外觀
*屬性value：提交給服務(wù)器的數(shù)據(jù)/設(shè)置按鈕的顯示文字
* text:設(shè)置文本框 默認
* password：提高安全性，密碼顯示
* radio:單選效果,一組選項選一個
* checkbox:復(fù)選效果,一組里面選多個
* submit提交數(shù)據(jù)到服務(wù)器
*
* 了解:
* file:選擇文件
* date:日期
* button:顯示一個按鈕
* image:顯示一個圖片按鈕 可以使用src設(shè)置圖片文件
* reset:重置.
* hidden:隱藏,一般是后續(xù)程序使用，隱藏是不想讓用戶去編輯
* 屬性name:可以給單選/復(fù)選 分組/只要提交給服務(wù)端的數(shù)據(jù)都必須加上name作變量名
* 屬性checked:選中 標(biāo)準(zhǔn) ：checked="checked" 變態(tài):checked或者checked=""
* 屬性readonly="readonly" 取消編輯功能
* 屬性disabled="disabled" 取消編碼功能，顯示灰色
* size="60":設(shè)置顯示寬度
* maxlength:設(shè)置最大輸入字符
* select 下拉列表標(biāo)簽
* textarea文本域
* button(了解)
*
*
* 表單屬性
* action:設(shè)置提交給服務(wù)端的地址。當(dāng)前使用#
* method:設(shè)置提交方法
* 1)get，默認值.
* 特點:提交參數(shù)會顯示在地址欄上面
* ?id=123&username=122&pwd=222&sex=0&method=0&method=1&method=2&head=&birthday=2014-01-02#
* 使用&連接多個參數(shù)
* 第一個參數(shù)前加?
* 每個參數(shù)都有k=v
* 有數(shù)據(jù)限制.
* 2)post
* 提交的數(shù)據(jù)不顯示地址欄,安全性高
* 提交文件。
* 如果項目中提交文件,不允許顯示參數(shù)在地址欄上，一般使用post
-->
<form action="#" method="post">
<input type="hidden" name="id" value="123" />
<br/>賬號:<input type="text" name="username"size="60" maxlength="30"/>
<br/>密碼:<input type="password" name="pwd"/>
<br/>確認密碼:<input type="password" value="123" disabled="disabled" name="pwd2"/>
<br />性別<input type="radio" name="sex" checked="checked" value="0"/>男<input type="radio" name="sex" value="1"/>女
<br />追女孩不正確辦法：
<input type="checkbox" name="method" checked="checked" value="0"/>送禮物
<input type="checkbox" name="method" checked="checked" value="1"/>太關(guān)心
<input type="checkbox" name="method" checked="checked" value="2"/>call/sms
<br /> <input type="file" name="head" />
<br />生日:<input type="date" name="birthday" value="2014-01-02" readonly="readonly"/>
<br /><input type="button" value="我是按鈕" /> <input type="image" src="img/015.jpg" width="60" height="30" />
<br /> <input type="submit" value="注冊" /> <input type="reset" value="我是重置" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
textarea標(biāo)簽：告訴瀏覽器顯示一個多行的輸入框
格式:
<textarea rows="設(shè)置高度" cols="設(shè)置寬度">
內(nèi)容
</textarea>
下拉列表:select標(biāo)簽告訴瀏覽器顯示一個下拉列表
作用:單選或者多選(類似ul/ol)
格式:
<select >
<option>記錄1</option>
<option>記錄2</option>
<option>記錄3</option>
</select>
屬性:multiple 設(shè)置多選multiple="multiple"
size:設(shè)置顯示項數(shù)
應(yīng)用場景:省 市 學(xué)歷
-->
<form action="#" method="post">
今晚想翻誰?
<br />
<select name="onenight" multiple="multiple" size="9" >
<option value="0" >班長</option>
<option value="1">詹老師</option>
<option value="2">王老師</option>
<option value="3">波老師</option>
</select>
<br />
<textarea name="desc" rows="20" cols="60">我是小海賊</textarea>
<br />
<input type="submit" value="發(fā)表" />
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
聯(lián)想
列點
*表單:集合
*表單元素
*使用table標(biāo)簽
*text
*password
*date
*radio
*image
*submit
* placeholder占位符
編碼
-->
<!-- *表單:集合-->
<form action="#" method="post">
<!--*表單元素-->
<!--*使用table標(biāo)簽-->
<table width="50%" border="0px">
<tr>
<td align="right">
<font color="blue">會員注冊</font>
</td>
<td align="left" colspan="2">USER REGISTER</td>
</tr>
<!--*text-->
<tr>
<td align="right"><b>用戶名</b></font>
</td>
<td align="left" colspan="2"><input type="text" name="username" size="50" placeholder="用戶名"/></td>
</tr>
<!--*password-->
<tr>
<td align="right"><b>密碼</b></font>
</td>
<td align="left" colspan="2"><input type="password" name="password" size="50" /></td>
</tr>
<tr>
<td align="right"><b>確認密碼</b></font>
</td>
<td align="left" colspan="2"><input type="password" name="password2" size="50" /></td>
</tr>
<tr>
<td align="right"><b>Email</b></font>
</td>
<td align="left" colspan="2"><input type="text" name="email" size="50" /></td>
</tr>
<tr>
<td align="right"><b>姓名</b></font>
</td>
<td align="left" colspan="2"><input type="text" name="uname" size="50" /></td>
</tr>
<!--*radio-->
<tr>
<td align="right"><b>性別</b></font>
</td>
<td align="left" colspan="2"><input type="radio" name="sex" checked="checked" />男<input type="radio" name="sex" />女</td>
</tr>
<!--*date-->
<tr>
<td align="right"><b>出生日期</b></font>
</td>
<td align="left" colspan="2"><input type="date" name="birthday" /></td>
</tr>
<!--*image-->
<tr>
<td align="right"><b>驗證碼</b></font>
</td>
<td align="left" width="33%"><input type="text" name="code" width="100" /></td>
<td align="left" width="33%"><input type="image" src="img/015.jpg" width="60" height="40" /></td>
</tr>
<!--*submit-->
<tr>
<td colspan="3" align="center">
<input type="submit" value="注冊" width="200px" />
</td>
</tr>
</table>
</form>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--
div:塊級元素,設(shè)置區(qū)域
獨占一行
格式
<div>
元素
</div>
span:內(nèi)聯(lián)元素/行內(nèi)元素,設(shè)置區(qū)域
不獨占一行
格式
<span>
元素
</span>
應(yīng)用場景 ：特別多，幾乎每個頁面都要大量使用
-->
<div style="background-color: green;">
我是div
</div>
<div style="background-color: blue;">
我是div
</div>
<span style="background-color: green;">
我是span
</span>
<span style="background-color: blue;">
我是span
</span>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/out.css"/>
</head>
<body>
在線咨詢