整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
為了不再被疑似涉嫌低俗，我只能給大家提供這種圖片了，耐得住寂寞才能學有所成！吸引人的東西未必珍貴。
昨天我們學習了《HTML表單元素初識1——零基礎自學網頁制作》（目錄在結尾），大家通過學習對HTML頁面中的表單元素的基本寫法已經非常熟悉了。同時也學會了通過變換<input/>標簽中的type屬性的值為表單賦予不同的功能，例如輸入文本和建立多選表單。期間，對name與value這兩個屬性的作用與特點進行了闡釋。今天我們繼續學習新的表單內容。
建立單選表單：單選表單把<input/>標簽的type屬性修改為"radio"（收音機），為什么單選表單使用"收音機"這個詞呢？其實道理很簡單，收音機調頻旋鈕是對應角度對應相應調頻，不可能一個角度對應兩個調頻，所以選這個就不能選其他的表單中的type屬性使用"radio"這個詞表示，是不是很形象。
示例代碼如下：
<form>
最高學歷：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>碩士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>因為描寫的是最高學歷，一般人最高學歷只有一個，不可能又是學士又是博士，因此使用單選表單。
向服務器提交時，name叫做"education"（教育），value對應不同層次。
頁面效果如下：
大家可以點點試試，每次只能有一個被選中。如圖：
綜合練習：到這為止，我們把之前零散的代碼拼湊一下看看效果吧！
<!DOCTYPE HTML>
<html>
<head>
<title>表單 </title>
</head>
<body>
<form>
會員名稱：
<input type = "text" placeholder = "請輸入英文或漢語拼音" name="memberName"/><br>
會員密碼：
<input type = "text" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type = "text" name="confirmPassWord"/><br>
<input type = "submit" value = "提交"/><br>
</form>
<hr>
<form>
興趣愛好：
<br>
<input type = "checkbox" name = "hobby" value = "reading"/>讀書
<input type = "checkbox" name = "hobby" value = "film"/>電影
<input type = "checkbox" name = "hobby" value = "painting"/>繪畫
<input type = "checkbox" name = "hobby" value = "music"/>音樂
<br>
最高學歷：<br>
<input type = "radio" name = "education" value = "highSchool"/>高中
<input type = "radio" name = "education" value = "bachelor"/>本科
<input type = "radio" name = "education" value = "master"/>碩士
<input type = "radio" name = "education" value = "doctor"/>博士
<br>
<input type = "submit" value = "submit"/>
</form>
</body>
</html>頁面效果如下：
密碼輸入：我們在使用上述表單輸入密碼時發現，密碼時實時顯示在輸入框中，這一點是不安全的，如圖：
如何讓密碼隱藏呢？其實看過上一篇中type屬性列表的小伙伴肯定猜到了，把type從"text"改為password。示例代碼如下：
會員密碼：
<input type = "password" placeholder = "請輸入英文字母、特殊符號、數字" name="passWord"/><br>
確認密碼：
<input type = "password" name="confirmPassWord"/><br>頁面效果如下：
上傳文件：使用type="file"可以上傳文件！
示例代碼如下：寫在"submit"的上面即可。
<input type = "file"/><br><input type = "submit" value = "submit"/>頁面效果如下：
點擊"瀏覽"看下效果：
神奇！
使用圖片制作按鈕：將type="image"即可，代碼如下：
<input type = "image" src = "img/示例圖片/submit.jpg"/><br>頁面效果如下：用一個src導入圖片即可。
示例圖片：路徑自行設置即可！
為表單設置一個重置按鈕：如果用戶打算重置表單內容后從新填寫，我們可以給他這樣一個按鈕：
<input type="reset" /><br>頁面如圖所示：
大家要注意的是這個"重置"按鈕的作用范圍僅僅是它所在的<form></form>標簽之間！
舉個例子，如圖：
下面我們點擊"重置"后效果如下：
form1中的內容沒有被清空，"重置"按鈕所在的form2內容被清空了！
type屬性值講解我們到此結束了，hidden值這里先不給大家介紹，以后有機會再細說。
button值以后在JavaScript部分還會細說，這里也先略過。
除了<input/>外，還有其他一些標簽，例如<select>或<textarea>等有趣且實用的標簽，我們明天再學習吧！
今天的內容先到這里。希望大家看完之后可以寫寫代碼進行實操。代碼這種東西即使再簡單，寫過和沒寫過的體會也是不一樣的。這個部分的代碼使用"文本編輯器"就可以實踐。具體操作請詳見《》。
碎片化的知識其實對人并沒有多大作用，但是我們的時間在現代化的生活節奏中被撕地越來越碎，因此我希望大家可以利用碎片時間來學習完整的知識，所以，以短篇的形式，每天20分鐘左右，通過積少成多的辦法為大家提供零基礎頁面制作的教程體系是我的主要目的。希望大家學有所成！
喜歡我的教程的小伙伴請關注我，點贊也會讓我充滿動力！
喜歡的小伙伴請關注和轉發，閱讀中遇到任何問題請給我留言，如有疏漏或錯誤歡迎大家斧正，不勝感激！
HTML序章（學習目的、對象、基本概念）——零基礎自學網頁制作
HTML是什么？——零基礎自學網頁制作
第一個HTML頁面如何寫？——零基礎自學網頁制作
HTML頁面中head標簽有啥用？——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2（路徑詳解）——零基礎自學網頁制作
使用HTML添加表格1（基本元素）——零基礎自學網頁制作
使用HTML添加表格2（表格頭部與腳部）——零基礎自學網頁制作
使用HTML添加表格3（間距與顏色）——零基礎自學網頁制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作！為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3（下拉列表、多行文字輸入）——零基礎自學網頁制作
HTML表單4（form的action、method屬性）——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
ava程序員學習HTML，表格和表單是用得比較多的，掌握好這2個標簽的詳細用法會對你非常有益！
一、table表格
表格由table標簽表示，里面嵌套tr，表示一行，而tr里面嵌套td和th，表示一行有多少列。它們的具體屬性和使用方法如下：
注意點：table、tr和td都有align屬性，但含義不同。其中table的align表示整個表格居中對齊，而在tr中表示整行中所有的單元格中的內容居中對齊，在td中則表示該單元格中的內容劇中對齊。此外td和th還有跨行和跨列的功能。現在利用這個知識點實現一個具有層次結構的表格：
代碼：
<html>
<head>
<TITLE>first page!!</title>
</head>
<body>
<table border="1" width="700px" align="center">
<tr>
<th>待執行項目</th>
<th> </th>
<th>正在執行項目</th>
</tr>
<tr>
<td valign="top">
<table border="1" width="100%" >
<tr>
<th>
<input type="checkbox" />
</th>
<th>項目名</th>
<th>花費</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
<td align="center">
<input type="button" value="移入>>" /><br/><br/>
<input type="button" value="<<移出" />
</td>
<td valign="top">
<table border="1" width="100%">
<tr>
<th>
<input type="checkbox" />
</th>
<th>項目名</th>
<th>花費</th>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
<tr align="center">
<td>
<input type="checkbox" />
</td>
<td>A</td>
<td>998.00</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
代碼運行效果：
二、form表單
對于javaEE程序員，我們日常輸入用戶名和密碼，然后提交表單，可是對表單總是懵懵懂懂，現在超詳細精煉總結如下，希望可以幫到你！
希望你照著我給出的模板，每一個都去測試一下，你便會豁然開朗，從此表單提交不再困惑！
幾天學習了HTML相關的基礎知識之后，老師出了五道自測題，通過這幾天學習的總結，和查閱相關文檔，我也作出了自己的理解，以下是我學習的相關心得分享給大家。
如果想要搞清楚HTML元素、標簽、屬性之間的關系，首先我們應該了解3個概念：
了解上述三個概念，我明白了，一個HTML頁面就是由多個元素構成，元素是由標簽描述，每一個元素的特征，都是由屬性決定的。
根據W3C標準，HTML是一種Web語言，它是使用一些“標簽”來定義網頁內容的，例如我們在一個HTML文檔中寫<html xmlns="http://www.w3.org/1999/xhtml"></html>，就聲明了一個HTML文檔的開始，里面可以放各種標簽，一個HTML文檔是由以下結構構成的：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
</body>
</html>
由以上代碼不難看出，HTML結構層次分明，是一種具有結構層次的標記語言，通過這些標簽可以告訴瀏覽器如何做出相應的解析。否則，如果HTML標簽任意位置都能放置，就沒法做標準高度統一了，那么瀏覽器也就無法做出正確的解析了。因此，我們看到的各種網頁，都是通過這種具有結構化的標簽組合而成的。
表單控件中的name值，是前端與后端進行交互時傳值的變量名稱，后端只有通過控件的name值才可以接收到該值進行相應的處理。
1.頁面布局不靈活；
2.代碼的可讀性：表格布局的代碼可讀性低，沒有使用<div>， <h1>等標簽直觀；
3.表格加載速度慢；
4.不利于SEO；
1.繼承的：根據元素在文檔的結構和層級關系來確定它的最終樣式；
2.瀏覽器客戶端：用戶代理樣式（user agent style），基本上瀏覽器的表現樣式都是一致的；
3.用戶自定義：寫在HTML文檔<style>標簽中的樣式；
4.行內樣式（內聯樣式）：寫在元素的style屬性中的樣式。
以上就是我個人的總結，不知道是否完全正確，如果有錯誤的地方煩請各位指正，多謝大家。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
