網頁設計表單代碼案例（網頁設計表單設計）
本篇文章給大家談談網頁設計表單代碼案例，以及網頁設計表單設計對應的知識點，希望對各位有所幫助，不要忘了收藏本站喔。
本文目錄一覽：
急求?。?！網頁設計 HTML代碼大全
HTML標記_HTML大全_HTML標記大全_超文本標記語言
網頁（WebPage）文件主要是用超文本標記語言（HyperText Markup Language，簡稱HTML）語句來寫成。您可以通過IE瀏覽器的“查看”菜單中的“源文件”看到該頁的HTML代碼。HTML語言由一系列元素(element)組成，用于組織文件的內容和指導文件的輸出格式。元素名稱不分大小寫。一個元素可以有多個屬性，屬性及其屬性值不分大小寫。屬性名＝屬性值合起來構成一個完整的屬性，一個元素可以有多個屬性，各個屬性用空格分開。元素又由標記(tag)的構成，大多數(shù)標記是成對出現(xiàn)的，分起始標記 (start tag)和結尾標記/ (end tag)，以便和頁面的內容區(qū)分開來。其寫成的文件是標準的ASCII文件，不同于一般的編程語言，故稱為腳本（Script）更準確一點。其實也很簡單，特別是在專門的HTML編輯器的幫助下，您可以迅速地學會HTML，并能很快寫出有自己特色的Homepage來。
需要說明的是：各種瀏覽器對html元素及其屬性的解釋不完全一樣，如NC與IE是有區(qū)別的。
標 簽 內 容 備 注
基 本 標 簽 所有HTML文件都有的
html……/html 表示文件類型為HTML文檔
head……/head 設置文檔描述及其他不在WEB網頁上顯示的信息
body……/body HTML文檔的主體（頁面的實際內容）
標 題 標 簽
title……/title 在標題欄中顯示的題目（放在head/head內）
擴 展 屬 性 標 簽
base
基址標簽，為解決相對編址作參考值
META
將HTTP命令發(fā)給CONTENT=number;url允許，描述不包含在標準HTML里的文檔信息。使用詳解
link
提供將現(xiàn)行文檔與其它文檔或實體關聯(lián)起來的信息
ISINDEX 指明在服務器上提供文檔的可以檢索的索引
style……/style 允許包含樣式表（CSS）信息
頁 面 屬 性 標 簽 body……/body標簽的擴展屬性。使用詳解
body bgcolor=#…… 設置背景顏色，用名字或十六進制值
body text=#…… 設置文本文字顏色，用名字或十六進制值
body link=#…… 設置鏈接顏色，用名字或十六進制值
body vlink=#…… 設置已使用的鏈接的顏色，用名字或十六進制值
body alink=#…… 設置正在被擊中鏈接的顏色，用名字或十六進制值
文 本 標 簽
pre……/pre 創(chuàng)建預格式化文本
h1……/h1 創(chuàng)建最大的標題
h6……/h6 創(chuàng)建最小的標題
b……/b 創(chuàng)建黑體字
i……/i 創(chuàng)建斜體字
tt……/tt 創(chuàng)建打字機風格的字體
cite……/cite 創(chuàng)建一個引用，通常是斜體
em……/em 加重（通常是斜體加黑體）
strong……/strong 強調（通常是斜體加黑體）
font size=value/font 設置字體大小，從1到7
font color=……/font 設置字體的顏色，使用名字或十六進制值
鏈 接
a href="/URL"/a 創(chuàng)建一個超鏈接
a href="mailto:EMAIL" /a 創(chuàng)建一個自動發(fā)送電子郵件的鏈接
a name="NAME"/a 創(chuàng)建一個位于文檔內部的靶位
a href="#NAME"/a 創(chuàng)建一個指向位于文檔內部靶位的鏈接
格 式 排 版
p 創(chuàng)建一個新的段落
p align=…… 將段落按左、中、右對齊
br 插入一個回車換行符
blockquote……/blockquote 從兩邊縮進文本
dl……/dl 創(chuàng)建一個定義列表
dt 放在每個定義術語詞之前
dd 放在每個定義之前
ol……/ol 創(chuàng)建一個標有數(shù)字的列表
li 放在每個數(shù)字列表項之前，并加上一個數(shù)字
ul……/ul 創(chuàng)建一個標有圓點的列表
li 放在每個圓點列表項之前，并加上一個圓點
div align=…… 一個用來排版大塊HTML段落的標簽，也用于格式化表
圖 形 元 素
img src="/name" 添加一個圖像
img src="/name" align=value 排列對齊一個圖像：左中右或上中下
img src="/name" border=value 設置圍繞一個圖像的邊框的大小
hr 加入一條水平線
hr size=value 設置水平線的大?。ǜ叨龋?/p>
hr width=value 設置水平線的寬度（百分比或絕對像素點）
hr noshade 創(chuàng)建一個沒有陰影的水平線
表 格
table……/table 創(chuàng)建一個表格
tr……/tr 開始表格中的每一行
td……/td 開始一行中的每一個格子
th……/th 設置表格頭：一個通常使用黑體居中文字的格子
表 格 屬 性
table border=value 設置圍繞表格的邊框的寬度
table cellspacing=value 設置表格格子之間空間的大小
table cellpadding=value 設置表格格子邊框與其內部內容之間空間的大小
table width=value 或 % 設置表格的寬度－用絕對像素值或文檔總寬度的百分比
tr align=…… 設置表格格子的水平對齊（左中右）
tr valign=…… 設置表格格子的垂直對齊（上中下）
td colspan=value 設置一個表格格子應跨占的列數(shù)（缺省為1）
td rowspan=value 設置一個表格格子應跨占的行數(shù)（缺省為1）
td nowrap 禁止表格格子內的內容自動斷行回卷
窗 框
frameset……/frameset 放在一個窗框文檔的body標簽之前，也可以嵌在其他窗框文檔中
frameset rows="value,value" 定義一個窗框內的行數(shù)，可以使用絕對像素值或高度的百分比
frameset cols="value,value" 定義一個窗框內的列數(shù)，可以使用絕對像素值或寬度的百分比
frame 定義一個窗框內的單一窗或窗區(qū)域
noframes……/noframes 定義在不支持窗框的瀏覽器中顯示什么提示
窗 框 屬 性
frame src="/URL" 規(guī)定窗框內顯示什么HTML文檔
frame name="name" 命名窗框或區(qū)域以便別的窗框可以指向它
frame marginwidth=value 定義窗框左右邊緣的空白大小，必須大于等于1
frame marginheight=value 定義窗框上下邊緣的空白大小，必須大于等于1
frame scrolling=value 設置窗框是否有滾動欄，其值可以是"yes","no","auto"，缺省時一般為"auto"
frame noresize 禁止用戶調整一個窗框的大小
表 單 對于功能性的表單，一般需要運行一個CGI小程序，HTML僅僅是產生表單的表面樣子。
form……/form 創(chuàng)建所有表單
select multiple name="NAME" size=value………/select 創(chuàng)建一個滾動菜單，size設置在需要滾動前可以看到的表單項數(shù)目
option 設置每個表單項的內容
select name="NAME"……/select 創(chuàng)建一個下拉菜單
textarea name="NAME" cols=value rows=value……/textarea 創(chuàng)建一個文本框區(qū)域，列的數(shù)目設置寬度，行的數(shù)目設置高度
input type="checkbox" name="NAME" 創(chuàng)建一個復選框，文字在標簽后面
input type="radio" name="NAME" value="x" 創(chuàng)建一個單選框，文字在標簽后面
input type=text name="……" size=value 創(chuàng)建一個單行文本輸入?yún)^(qū)域，size設置以字符計的寬度
input type="submit" value="NAME" 創(chuàng)建一個submit（提交）按鈕
input type="image" border=0 name="NAME" src="/name.gif" 創(chuàng)建一個使用圖象的submit（提交）按鈕
input type="reset" 創(chuàng)建一個reset（重置）按鈕
附 加 屬 性
PRE……/PRE 預置格式風格標簽用來顯示字體寬度固定的文本塊，主要用來在表格格式中顯示文本
TT……/TT 打字機風格用來顯示打字機字體寬度固定的文本
SAMP……/SAMP 示例風格以單倍距顯示文本
ADDRESS……/ADDRESS 地址風格一般用于文檔的開始或結尾處，并以斜體格式顯示文本。
DL……/DL 定義列表風格用來顯示術語及其定義
顏色
#=rrggbb 16 進制 RGB 數(shù)值，或者是下列預定義色彩：
Black,Olive,Teal,Red,Blue,Maroon,Navy, Gray,Lime,Yellow,white,Silver,Fuchsia,Purple,Green,Aqua[返回本頁首部]
META標簽
描述不包含在標準HTML里的文檔信息。
META NAME="keywords" CONTENT="yourkeyword"
META NAME="description" CONTENT="your homepage's description"
本頁的關鍵字和描述。在頁面里加上這些定義后，一些搜索引擎就能夠讓讀者根據(jù)這些關鍵字搜索到您的主頁，了解你的主頁內容。
META HTTP-EQUIV="refresh" CONTENT="30, URL=new.htm"
瀏覽器將在30秒后，自動轉到new.htm。您可用它制作一個封面，在若干時間后，自動帶讀者來到您的目錄頁。如果URL項沒有，瀏覽器就是刷新本頁。這就是WWW聊天室定期刷新的實現(xiàn)原理。
meta http-equiv="Content-Type" content="text/html; charset=gb2312"
描述本頁使用的語言。瀏覽器根據(jù)此項，就可以選擇正確的語言編碼，而不需要讀者自己在瀏覽器里選擇。GB2312是指簡體中文，而臺灣BIG5內碼的主頁則是用BIG5。
META HTTP-EQUIV="Pragma" CONTENT="no-cache"
強制性調用網上的最新版本。瀏覽器為節(jié)約時間，在本地硬盤上保存一個臨時文件。在重新調用時，便直接顯示那個臨時文件。如果您想讓讀者每次都看到最新的版本，可加上句。[返回本頁首部]
LINK
顯示本文檔和其他文檔之間的連接關系。一個最有用的應用就是外部層疊樣式表的定位。格式如下：
LINK REL="stylesheet" href="/style.css"REL參數(shù)說明兩個文檔之間的關系，HREF說明目標文檔名。關于層疊樣式表，將在后面的課程中詳述。[返回本頁首部]
BASE
本文檔的原始地址。語法：BASE HREF="原始地址"當讀者下載您的文檔后，由此可以知道是從哪里下載的。[返回本頁首部]
BODY
BODY標記有一些屬性，用于定義頁面內的顯示效果。 ALINK、LINK、TEXT、VLINK—— 文字的顏色。
ALINK：當前激活的連接的文字顏色。
LINK：連接的文字顏色。
TEXT：文字的顏色。
VLINK：參觀過的文字顏色。
注意：文字的顏色要和背景色有明顯的差別，以便讀者瀏覽。
BACKGROUND、BGPROPERTIES、BGCOLOR——頁面的背景部分。
BACKGROUND：背景圖案，該圖案在頁面內平鋪。背景圖案應保持單一色調，以保證頁面文字易于閱讀。
BGPROPERTIES：設置成FIXED，則背景圖案不滾動。（只對INTERNET EXPLORER有效）
BGCOLOR：背景色。
注意：如果你的背景圖案是深色調，因之文字顏色為淡顏色，那么由于瀏覽器調用頁面的順序是“背景色-文字-背景圖案”，那么在背景圖案沒有顯示的情況下，你的文字在白顏色下很難閱讀，所以應該選用一個跟你的背景圖案顏色一致的背景色。
LEFTMARGIN、TOPMARGIN——頁邊空白。（只對INTERNET EXPLORER有效）
LEFTMARGIN：左邊頁邊空白。
TOPMARGIN：頂端頁邊空白。
HTML5網頁前端設計中如下圖表單的代碼怎么寫？
下面是表單代碼，你直接再加屬性就可以了，表單用 table 寫比較簡單，div 太麻煩了；
html xmlns=" "
head
meta http-equiv="Content-Type" content="text/html; charset=utf-8" /
title黑板/title
/head
body
div style="width:500px;"
h1 style="width:500px;height:50px;color:#2A8DF0;border-bottom:#2A8DF0 solid 3px; text-align:center;"用戶注冊頁面/h1
table cellpadding="0" cellspacing="10" style="margin:0 auto;"
tr
td align="right" valign="top"div用戶名：/div/td
tdinput style='width:250px' value='請輸入用戶名' //td
/tr
tr
td align="right" valign="top"div密 碼：/div/td
tdinput style='width:250px' value='請輸入密碼' //td
/tr
tr
td align="right" valign="top"div確 認：/div/td
tdinput style='width:250px' value='請再次輸入密碼' //td
/tr
tr
td align="right" valign="top"div姓 名：/div/td
tdinput style='width:250px' value='請輸入真實姓名' //td
/tr
tr
td align="right" valign="top"div郵 箱：/div/td
tdinput style='width:250px' value='請輸入電子郵箱' //td
/tr
/table
div align="center"input style="width:100px;height:30px;text-align:center;line-height:30px;background:#2289F0;border:#2289F0;color:white;font-weight:bold;font-size:16px;" type="submit" value="提交注冊" //div
/div
/body
/html
設計如下一個表單頁面，寫出相應的代碼。
表單是實現(xiàn)動態(tài)網頁的一種主要的外在形式。表單和表單域并不具有排版的能力，表單網頁的制作最終還是要由表格組織起來。html表單是html頁面與瀏覽器端實現(xiàn)交互的重要手段。利用表單可以收集客戶端提交的有關信息。 在瀏覽網站時經常會遇到表單，它是網站實現(xiàn)互動功能的重要組成部分。無論網站使用的是那種形式的語言來實現(xiàn)網站的互動功能，例如ASP、PHP、JSP，表單已經成為它們統(tǒng)一的外在形式。 表單的主要功能是收集信息，具體說是收集瀏覽者的信息。例如在網上要申請一個電子信箱，就必須按要求填寫完成網站提供的表單頁面，其主要內容是姓名、年齡、聯(lián)系方式等個人信息。又例如要在某論壇上發(fā)言，發(fā)言之前要申請資格，也是要填寫完成一個表單網頁。 表單可以用于調查、訂購、搜索等功能。一般的表單由兩部分組成，一是描述表單元素的html源代碼，二是客戶端的腳本，或者服務器端用來處理用戶所填信息的程序。在html里，我們可以定義表單，并且使表單與CGI或ASP等服務器端的表單處理程序配合。 表單信息處理的過程為：當單擊表單中的提交按紐時，輸入在表單中的信息就會上傳到服務器中，然后由服務器中的有關應用程序進行處理，處理后或者將用戶提交的信息儲存在服務器端的數(shù)據(jù)庫中，或者將有關的信息返回到客戶端瀏覽器中。 表單是網頁上的一個特定區(qū)域。這個區(qū)域是由一對Form標記定義的。這一步有幾方面的作用。第一方面，限定表單的范圍。其它的表單對象，都要插入到表單之中。單擊提交按紐時，提交的也是表單范圍之內的內容。第二方面，攜帶表單的相關信息，例如處理表單的腳本程序的位置、提交表單的方法等。這些信息對于瀏覽者是不可見的，但對于處理表單確有著決定性的作用。 基本語法01 Form name="Form＿name" method="method" action="url" enctype="value" target="target＿win" 02 …… 03 /Form 語法解釋Form標記的屬性如下表所示 屬性 描述 name 表單的名稱 method 定義表單結果從瀏覽器傳送到服務器的方法，一般有兩種方法：get和post action 用來定義表單處理程序(ASP，CGI等程序)的位置(相對地址或絕對地址) enctype 設置表單資料的編碼方式 target 設置返回信息的顯示方式 FORM標記的ENCTYPE屬性基本語法01 Form enctype="value" 02 …… 03 /Form 語法解釋value的取值如所下表所示 屬性值 描述 Text/plin 以純文本形式傳送信息 Application/x-www-Form-urlencoded 默認的編碼形式 Multipart/Form-data 使用mine編碼 文件范例:11-4.htm設置表單信息提交的編碼方式。01 !-- ------------------------------ --02 !-- 文件范例：11-4.htm --03 !--文件說明：設置信息提交的編碼方式--04 !-- ------------------------------ --05 html06 head07 title設置信息提交的編碼方式/title08 /head09 body10 h1用戶調查/h111 Form name=invest action=mailto:tslxg@hotmail.com method=get enctype=text/plain12 /Form13 /body14 /html
網頁設計表單代碼案例的介紹就聊到這里吧，感謝你花時間閱讀本站內容，更多關于網頁設計表單設計、網頁設計表單代碼案例的信息別忘了在本站進行查找喔。
掃描二維碼推送至手機訪問。
版權聲明：本文由飛速云SEO網絡優(yōu)化推廣發(fā)布，如需轉載請注明出處。
