html基礎用法（下）
設計表格：
1 <html> 2 <head> 3 <title>表格</title> 4 <meta charset="utf-8" /> 5 </head> 6 <body> 7 <table width="500" height="500" border="1" bordercolor="red"> 8 <caption>這是表格的標題！</caption> 9 <tr> 10 <th>姓名</th> 11 <th>學科</th> 12 <th>成績</th> 13 </tr> 14 <tr align="center" valign="bottom"> 15 <td colspan="2">張三</td> 16 <td>php</td> 17 <td>60</td> 18 </tr> 19 <tr align="right" vlign="middle"> 20 <td rowspan="2">張三</td> 21 <td>pthon</td> 22 <td>70<td> 23 </tr> 24 <tr align="left" valign="top"> 25 26 <td>java</td> 27 <td>80</td> 28 </tr> 29 30 </table> 31 </body> 32 <html>
width：設置表格的寬
height：設置表格的高
border：設置表格邊框的粗細
bordercolor：設置表格邊框的顏色
caption：表格的標題，默認居中
th：表頭
tr：行
align：水平的（表格默認left，然後可以自己設置right，center）
valign：垂直的（表格默認middle，然後可以設置top，bottom）
td：單元格
colspan：合並行
rowspan：合並列
表單：
1 <html> 2 <head> 3 <title></title> 4 <meta charset="utf=8" /> 5 </head> 6 <body> 7 <form action="1.php" method="GET"> 8 用戶名：<input type="text" name="username" /> 9 密碼：<input type="password" name="pass" /> 10 <input type="submit" value="立即註冊" /> 11 <input type="radio" name="sex" />男 12 <input type="radio" name="sex" />女 13 <input type="checkbox" />java 14 <input type="checkbox" />php 15 <input type="checkbox" />python 16 <select> 17 <option value="bj">北京</option> 18 <option>廣州</option> 19 <option>上海</option> 20 <select> 21 <textarea cols="50" rows="10"></textarea> 22 <input type="submit" value="立即註冊" /> 23 </form> 24 <div> 25 你好！ 26 </div> 27 <div> 28 我好！ 29 </div> 30 <span> 31 大家好！ 32 </span> 33 </body> 34 </html>
form
action是要提交的地址
【get】是通過url傳輸的，相對不安全，當你傳輸的時候會有長度限制。
【post】通過header頭傳輸的，相對安全，它傳輸的時候比get傳的數據要多。
enctype：編碼類型，默認不用寫
只有在上傳文件的時候才指定該類型。
radio 單選按鈕，如果你想實現只能選中一個的時候加上name，name值一樣。
checkbox 復選框，可以選中多個，默認選中的話，是加一個checked
hiden 隱藏表單，用途是當數據沒有必要讓用戶看見，但是我們後臺還要用這個數據的時候，就用隱藏的去傳。
file 上傳文件
reset 重置按鈕
input
type
text//文本框
password/密碼
submit//提交按鈕
value
placeholder：提示功能，當你在文本輸入東西的時候，提示消失。
select
<option></option>
textarea 文本域
cols rows 註意：他是雙標簽，在寫的時候切記要挨著寫兩個標簽，中間不許有空格，縮進 換行。
塊元素，行內塊元素，行內元素：
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>塊元素</title> 5 <style> 6 div{height:20px;background:red;} 7 span{width:20px;height:15px;#ccc;} 8 img{width:300px;height:300px;border:1px solid red;} 9 </style> 10 </head> 11 <body> 12 <div>今天是個好天氣！</div> <div>今天是個好天氣！</div> 13 <span>今天肚子疼！</span><span>今天肚子疼！</span> 14 <img src="bjqs.jpg" /> <img src="bjqs.jpg" /> 15 </body> 16 </html>
塊：
div ，p，ul，ol，dl，hr，h1-h6 特點：1、可以設置寬高 2、獨占一行 3、不受空格影響
行內：
span，em，strong，b，i，u 特點：1、不支持寬高 2、共處一行 3、受空格影響
行內快：
img，input 特點：1、支持寬高 2、共處一行 3、受空格影響
行內樣式：
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>塊元素</title> 5 <style> 6 7 </style> 8 </head> 9 <body> 10 <div style="width:20px;height:15px;background:#ccc;">今天是個好天氣！</div> <div>今天是個好天氣！</div> 11 </body> 12 13 </html>
內聯樣式表：
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>塊元素</title> 5 <style> 6 div{width:20px;height:15px;backgrounf:#ccc;} 7 </style> 8 </head> 9 <body> 10 <div>今天是個好天氣！</div> <div>今天是個好天氣！</div> 11 </body> 12 </html>
外聯樣式表：
1 <html> 2 <head> 3 <meta charset="utf-8" /> 4 <title>塊元素</title> 5 <style> 6 7 </style> 8 <link rel="stylesheep" type="text/css" href="1.css" /> 9 </head> 10 <body> 11 <div>今天是個好天氣！</div> <div>今天是個好天氣！</div> 12 </body> 13 </html>
1 div{width:20px;height:15px;background:#ccc;}
1、行內樣式表：
寫在標簽裏面的 style"width:......."
2、內聯樣式表：
<style>
css 代碼
</style>
3、外聯樣式表：
<link rel="stylesheep" type="text/css" href="css 文件地址" />
html基礎用法（下）