1、meta標籤
<metacharset="UTF-8"/>
<metaname="Keywords" content=" "/>
<meta name='Description' content=" "/>
Charset:指定當前文檔編碼格式
Keywords:表示關鍵字,對搜索引擎友好,實現網站推廣
Description:表示網站描述,網站優化
2、表格
<table width='30px' height='60px'border='1' cellpadding='0'>定義一個表格
<tr> 定義行
<td></td>定義列
</tr>
</table>
width: 設置寬度
height:設置高度
border:設置邊框
cellpadding: 設置文字與列(td)之間的距離
cellspacing: 設置列與列之間的距離(默認爲2)
align='center' 給表格設置,讓表格居中,給列設置,讓文字居中
<th></th> 設置表格內容標題,用法和td用法是一樣的
bgcolor 設置表格背景顏色
<caption></caption> 給表格加標題
table結構:
<table>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
</table>
如果按照結構去寫表格,就一定要按照順序去寫
2、表單
作用:搜索用戶信息
屬性:action/method
action 指定處理表單信息的程序
method get或者post 指的是表單的提交方式
get:講我們的表單信息暴漏在地址欄中(安全性差)
post:通過後臺方式提交給處理程序(安全性比較高)
表單結構:
<form>
表單控件
</form>
表單控件:
a、文本框 <inputtype="text">
<form action="1.php"method="post">
<input type="text" name="username"maxlength="3" readonly="readonly" >
maxlength:設置最大長度
readonly="readonly":只讀(此時表單不能輸入信息)
<input type="text" name="username"maxlength="6" disabled="disabled">
disabled="disabled"控件未激活(此時表單不能輸入信息)
</form>
b、密碼框 <inputtype="password">
<input type="password">
c、單選框 <input type="radio">
<form action="1.php"method="post">
<inputtype="radio" name="xingbie">男
<inputtype="radio" name="xingbie" checked="checked">女
checked="checked"設置默認選中
</form>
d、多選框<inputtype="checkbox">
<inputtype="checkbox" checked="checked">看書
<inputtype="checkbox">上網
<input type="checkbox">旅遊
<inputtype="checkbox" checked="checked">學習
e、下拉列表框
<select></select>這是下拉列表框
<select>
<option>北京</option>
<option>上海</option>
<option>河南</option>
</select>
下拉列表分組顯示
<select>
<optgrouplabel="上海">
<option>松江區</option>
<option>閔行區</option>
<option>徐彙區</option>
</optgroup>
</select>
屬性:multiple="multiple" 實現多選效果
屬性:selected="selected"設置下拉列表框實現默認選中
<selectmultiple="multiple">
<option>北京</option>
<option>安徽</option>
<optionselected="selected">上海</option>
</select>
f、多行文本框 <textarea></textarea>
屬性: cols="30" 用法效果和width一樣
rows="10" 用法效果和height一樣
介紹自己:
<textareacols="30" rows="60">
</textarea>
g、上傳控件
<inputtype="file">
三種按鈕:
h、普通按鈕
<input type="button" value="確定">
注意:此按鈕和js配合使用
i、重置按鈕(將表單中的數據恢復到默認值)
<inputtype="reset">
j、提交按鈕
<input type="submit">
<input type="image"src="Hydrangeas.jpg"> 此按鈕和submit按鈕都可以提交表單
k、表單分組控件:<fieldset></fieldset>
<fieldset>
<legend>人員註冊信息</legend>
<label>姓名:</label>
<label>年齡:</label>
</fieldset>