html之簡單網(wǎng)頁表格制作示例介紹
發(fā)布時間:2013-08-05 16:28:34 作者:佚名
我要評論
本文為大家介紹下html的網(wǎng)頁元素的基本知識,以一個簡單的網(wǎng)頁表格示例為大家演示下,需要了解的朋友可以參考下哈
<input>用于搜集用戶信息,無結束語。
<type>input元素類型,
input 之type 屬性,type屬性值:
text(文本框),button(按鈕),checkbox(復選框),file(文件),hidden(隱藏字段),
image(圖像),password(密碼框),radio(單選按鈕),reset(重置按鈕),submit(提交按鈕)。
<textarea>定義一個文本區(qū)域,結束語</textarea>.textarea屬性:
例:
<textarea rows="3" cols="30">
文本...
</textarea>
<b>粗體,結束語</b>
<i>斜體,結束語</i>
<u>加下劃線,結束語</u>
<big>大型字體</big>
<small>小型字體</small>
<blink>閃爍效果</blink>
<em>一般為斜體,強調</em>
<strong>一般為粗體,強調</strong>
<cite>一般為斜體,用于引證、舉例</cite>
<html>
<head>
<title>歡迎注冊/登陸</title>
</head>
<form name="form1" method="post" action="">
<P>名 字:
<input type="text" value="小神" size="20">
</P>
</form>
<form name="form2" method="post" action="">
<P>密 碼:
<input value=“ 123456 ” type="password" size="22">
</P>
</form>
<form name="form3" method="post" action="">
單選性別:
<input name="gen" type="radio" class="input" value="男" checked>
<img src="b.gif" width="23" height="21">男
<input name="gen" type="radio" class="input" value="女" >
<img src="g.gif" width="23" height="21">女
復選愛好:
<label>
<input type="checkbox" name=""value=""checked>
</label>聊天
<label>
<input type="checkbox" name="" value="">
</label>電影
<label>
<input type="checkbox" name="" value="">
</label>游戲
出生日期:
<input name="byear" value="yyyy" size=4 maxlength=4 >年
<select name="bmon">
<option value=" " selected>[選擇月份] </option>
<option value=0>一月</option>
<option value=1>二月</option>
<option value=2>三月</option>
<option value=3>四月</option>
</select>月
<input name="bday" value="dd" size=2 maxlength=2 >日
<div class="left">
<span class="spanTxt">輸入右圖數(shù)字驗證</span>:
<span class="shortInputSpan"><input type="text" class="short_input" name="validatecode" id="validatecode" maxlength="4" onFocus="textshow(this,'請正確輸入驗證碼');"/></span>
<span class="h1">
<img id="vcode" name="vcode" alt="" src="help_alarm.jpg" height="28" width="63" align="absmiddle"/><a href="javascript:changeimg();" class="code_style">看不清,換一張</a>
</span>
</div>
</form>
<form>
<input type="checkbox" id="chkagreement" name="chkagreement" checked="checked"/>
接受<a href="小神幻化成形.html" target="_blank" >《XXX注冊協(xié)議書》</a>
</form>
<form name="form7" method="post" action="">
<textarea name="textarea" cols="35" rows="6">歡迎閱讀本服務條款協(xié)議,本協(xié)議闡述之條款和條件適用于您使用XXX的各服務。
本服務協(xié)議為me,you,ta,
本服務協(xié)議具有合同效力。
me的權利和義務
</textarea>
</form>
</html>
<type>input元素類型,
input 之type 屬性,type屬性值:
text(文本框),button(按鈕),checkbox(復選框),file(文件),hidden(隱藏字段),
image(圖像),password(密碼框),radio(單選按鈕),reset(重置按鈕),submit(提交按鈕)。
<textarea>定義一個文本區(qū)域,結束語</textarea>.textarea屬性:
例:
復制代碼
代碼如下:<textarea rows="3" cols="30">
文本...
</textarea>
<b>粗體,結束語</b>
<i>斜體,結束語</i>
<u>加下劃線,結束語</u>
<big>大型字體</big>
<small>小型字體</small>
<blink>閃爍效果</blink>
<em>一般為斜體,強調</em>
<strong>一般為粗體,強調</strong>
<cite>一般為斜體,用于引證、舉例</cite>
復制代碼
代碼如下:<html>
<head>
<title>歡迎注冊/登陸</title>
</head>
<form name="form1" method="post" action="">
<P>名 字:
<input type="text" value="小神" size="20">
</P>
</form>
<form name="form2" method="post" action="">
<P>密 碼:
<input value=“ 123456 ” type="password" size="22">
</P>
</form>
<form name="form3" method="post" action="">
單選性別:
<input name="gen" type="radio" class="input" value="男" checked>
<img src="b.gif" width="23" height="21">男
<input name="gen" type="radio" class="input" value="女" >
<img src="g.gif" width="23" height="21">女
復選愛好:
<label>
<input type="checkbox" name=""value=""checked>
</label>聊天
<label>
<input type="checkbox" name="" value="">
</label>電影
<label>
<input type="checkbox" name="" value="">
</label>游戲
出生日期:
<input name="byear" value="yyyy" size=4 maxlength=4 >年
<select name="bmon">
<option value=" " selected>[選擇月份] </option>
<option value=0>一月</option>
<option value=1>二月</option>
<option value=2>三月</option>
<option value=3>四月</option>
</select>月
<input name="bday" value="dd" size=2 maxlength=2 >日
<div class="left">
<span class="spanTxt">輸入右圖數(shù)字驗證</span>:
<span class="shortInputSpan"><input type="text" class="short_input" name="validatecode" id="validatecode" maxlength="4" onFocus="textshow(this,'請正確輸入驗證碼');"/></span>
<span class="h1">
<img id="vcode" name="vcode" alt="" src="help_alarm.jpg" height="28" width="63" align="absmiddle"/><a href="javascript:changeimg();" class="code_style">看不清,換一張</a>
</span>
</div>
</form>
<form>
<input type="checkbox" id="chkagreement" name="chkagreement" checked="checked"/>
接受<a href="小神幻化成形.html" target="_blank" >《XXX注冊協(xié)議書》</a>
</form>
<form name="form7" method="post" action="">
<textarea name="textarea" cols="35" rows="6">歡迎閱讀本服務條款協(xié)議,本協(xié)議闡述之條款和條件適用于您使用XXX的各服務。
本服務協(xié)議為me,you,ta,
本服務協(xié)議具有合同效力。
me的權利和義務
</textarea>
</form>
</html>
相關文章
文章介紹了HTML中img標簽的使用,包括src屬性(指定圖片路徑)、相對/絕對路徑區(qū)別、alt替代文本、title提示、寬高控制及邊框設置等,本文主要給大家介紹HTML img標簽和超鏈2025-06-20- HTML meta標簽用于提供文檔元數(shù)據(jù),涵蓋字符編碼、SEO優(yōu)化、社交媒體集成、移動設備適配、瀏覽器控制及安全隱私設置,優(yōu)化頁面顯示與搜索引擎索引,本文給大家介紹HTML中meta2025-06-20
input 標簽主要用于接收用戶的輸入,隨 type 屬性值的不同,變換其具體功能,本文通過實例圖文并茂的形式給大家介紹HTML input 標簽,感興趣的朋友一起看看吧2025-06-20
這篇文章主要介紹了html 滾動條滾動過快會留下邊框線的解決方案,解決方法很簡單,可以將 dialog 單獨拿出來別放在 transform 的子元素里,需要的朋友可以參考下2025-06-09- 本文將介紹如何使用<img>標簽在 HTML 中添加圖片,并展示一些常見的用法和技巧,通過本文的介紹,應該掌握了在 HTML 中添加和調整圖片的基礎知識,感興趣的朋友一起看2025-05-16
- HTML表格用于在網(wǎng)頁上展示數(shù)據(jù),通過標簽及其相關標簽來創(chuàng)建,表格由行和列組成,每一行包含一個或多個單元格,單元格可以包含文本、圖像、鏈接等元素,本文將詳細介紹HTML表格2025-03-12
- 本文介紹了三種禁止HTML頁面滾動的方法:通過CSS的overflow屬性、使用JavaScript的滾動事件監(jiān)聽器以及使用CSS的position:fixed屬性,每種方法都有其適用場景和優(yōu)缺點,感興2025-02-24
在 Web 開發(fā)中,文本的視覺效果是提升用戶體驗的重要因素之一,通過 CSS 技巧,我們可以創(chuàng)造出許多獨特的效果,例如文字鏤空效果,本文將帶你一步一步實現(xiàn)一個簡單的文字鏤空2024-11-17
在Html中,a標簽默認的超鏈接樣式是藍色字體配下劃線,這可能不滿足所有設計需求,如需去除這些默認樣式,可以通過CSS來實現(xiàn),本文給大家介紹Html去除a標簽的默認樣式的操作代碼2024-09-25- 在HTML中,可以通過設置CSS的resize屬性為none,來禁止用戶手動拖動文本域(textarea)的大小,這種方法簡單有效,適用于大多數(shù)現(xiàn)代瀏覽器,但需要在老舊瀏覽器中進行測試以確保2024-09-25





