【html學習整理】meta,img,表格,表單
阿新 • • 發佈：2018-06-05
utf-8 rds 間距 自己的 title 實體 tip HR 例題
meta標簽:
作用: 給搜索引擎用 。 告訴瀏覽器是什麽編碼
<meta charset="UTF-8">
<meta name="keywords", content="燒餅 武大郎燒餅"> 關鍵字搜索
<meta name="description", content="******"> 。 描述- 圖片img
圖片格式:jpg gif png
語法：
<img src="圖片路徑"， width="寬度"，height="高度"， alt="說明">
alt屬性的作用：1.當圖片無法顯示的時候，將圖片的說明性文字顯示到圖片的位置上 2.給搜索引擎來搜索，目前搜索引擎確定圖片還是通過alt屬性 title : 移上去 顯示全部- object標簽,插入flash
- pre標簽,預格式化標簽,主要做調試用
- 實體標簽
< <
> >
  空格
" "
- 表格
默認情況下,網頁的布局是流布局(排隊),不能隨意擺放位置,因此可以通過表格來布局,表格的作用就是來做頁面布局的。
table 表
tr 行
td 單元格
th 列
單元格中的數據對齊方式:
1. 水平對齊 align left right center
2. 垂直對其 valign top bottom
單元格間距和單元填充:
1. 間距：單元格和單元格之間的距離 cellspacing 。 默認2像素
2. 填充：內容距離單元格的距離 cellpadding 默認1像素
合並單元格: 1. 合並行,和並列 2.column 列 span跨度 3.calspan 跨了幾列(和並列) 4.rowspan 跨了幾行(合並行)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<table border="1" width="500px" height="300px" bordercolor="#FF000" cellspacing="20px" cellpadding="20px">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td valign="top">令狐沖</td>
<td align="center">男</td>
<td align="right" valign="bottom">22</td>
</tr>
<tr>
<td>任盈盈</td>
<td>女</td>
<td>20</td>
</tr>
<tr>
<td>任我行</td>
<td>男</td>
<td>55</td>
</tr>
</table>
<hr>
<br>
<table border="5", cellspacing="10", width="300">
<tr>
<th colspan="3">學生證</th>
</tr>
<tr>
<td width="30%">姓名</td>
<td width="30%"> </td>
<th rowspan="3" >照<br>片</th>
</tr>
<tr>
<td>性別</td>
<td> </td>
</tr>
<tr>
<td>年齡</td>
<td> </td>
</tr>
<tr>
</tr>
</table>
</body>
</html>
- 表單 form
- 表單是用來收集用戶提交的數據
- 表單域:表單的區域,用來控制表單提交的時候的數據範圍 表單元素： 單行文本框：<input> type name maxlength size text 文字框 。 size寬度是多少字符的寬度 。 maxlength 最長字符數 name 給文本框取值 password密文 密碼框。 <radio> 單選框 checked默認選項 。 value 單選項的值 。 同一組的名稱要一致 checkbox：復選框 必須給無法輸入的屬性賦值 <select> 下拉菜單，<option>下拉選項 selected表示默認選中 <select>下拉列表 設置size顯示數量 。 多選multiple="multiple" 多行文本也叫文本域 textarea <textarea name="text" id="" cols="30" rows="10"></textarea> rows 容納行數 。 cols容納列數 提交按鈕 <input type="submit", value="提交"> 重置按鈕 <input type="reset" value="重置"> 清空填寫的數據 普通按鈕：提交按鈕和重置按鈕都是帶有功能的，在很多情況下點擊按鈕的時候不是需要提交和重置，而是執行自己的功能， 這時候需要不帶功能的按鈕 type=button input： text 。 password 。 checkbox radio submit reset button 使用表單 Action ="" 數據提交的位置， 為空表示提交到本頁面 Method=“”數據提交的方法 。 post get
例題:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表單提交</title> </head> <body> <form action="" method="get"> <table width="500", bordercolor="#666666" border="1" align="center"> <tr> <td>用戶名：</td> <td> <input type="text" size="50" maxlength="20" name="username" cellpadding="5" /> </td> </tr> <tr> <td>密碼：</td> <td> <input type="password" name="pwd" size="50"/> </td> </tr> <tr> <td>性別：</td> <td> <input type="radio" name="sex" value="男" checked="checked"/> 男 <input type="radio" name="sex" value="女"/> 女 </td> </tr> <tr> <td>愛好：</td> <td> <input type="checkbox", name="hobby" value="爬山"/> 爬山 <input type="checkbox", name="hobbby", value="遊泳"/> 遊泳 </td> </tr> <tr> <td>學歷：</td> <td> <select name="xueli"> <option value="高中">高中</option> <option value="大專" selected="selected">大專</option> <option value="本科">本科</option> </select> </td> </tr> <tr> <td>所在部門</td> <td> <select name="bumen" id="" size="3" multiple="multiple"> <option value="人事部">人事部</option> <option value="財務部">財務部</option> <option value="項目部">項目部</option> <option value="後勤部">後勤部</option> <option value="保衛部">保衛部</option> <option value="市場部">市場部</option> </select> </td> </tr> <tr> <td>留言</td> <td> <textarea name="text" id="" cols="30" rows="5"></textarea> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit", value="提交"> <input type="reset" value="重置"> <input type="button" value="返回"> </td> </tr> </table> </form> </body> </html>
【html學習整理】meta,img,表格,表單