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>