1、meta标签
|
1
2
3
|
<metacharset="UTF-8"/><metaname="Keywords" content=" "/><meta name='Description' content=" "/> |
Charset:指定当前文档编码格式
Keywords:表示关键字，对搜索引擎友好，实现网站推广
Description:表示网站描述，网站优化
2、表格
|
1
2
3
4
5
|
<table width='30px' height='60px' border='1' cellpadding='0'> 定义一个表格 <tr> 定义行 <td></td>定义列 </tr></table> |
设置宽度
height: 设置高度
border: 设置边框
cellpadding: 设置文字与列(td)之间的距离
cellspacing: 设置列与列之间的距离（默认为2）
align='center' 给表格设置，让表格居中，给列设置，让文字居中
<th></th> 设置表格内容标题，用法和td用法是一样的
bgcolor 设置表格背景颜色
<caption></caption> 给表格加标题
table结构:
|
1
2
3
4
5
|
<table> <thead></thead> <tbody></tbody> <tfoot></tfoot></table> |
如果按照结构去写表格，就一定要按照顺序去写
3、表单
作用：搜索用户信息
属性：action/method
action 指定处理表单信息的程序
method get或者post 指的是表单的提交方式
get:讲我们的表单信息暴漏在地址栏中（安全性差）
post:通过后台方式提交给处理程序（安全性比较高）
表单结构：
|
1
2
3
|
<form> 表单控件</form> |
表单控件:
a、文本框<inputtype="text">
|
1
2
3
4
5
6
7
|
<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">
|
1
2
3
4
|
<form action="1.php"method="post"> <inputtype="radio" name="xingbie">男 <inputtype="radio" name="xingbie" checked="checked">女 # checked="checked"设置默认选中</form> |
d、多选框 <inputtype="checkbox">
|
1
2
3
4
|
<inputtype="checkbox" checked="checked">看书<inputtype="checkbox">上网<input type="checkbox">旅游<inputtype="checkbox" checked="checked">学习 |
e、下拉列表框
<select></select>这是下拉列表框
|
1
2
3
4
5
|
<select> <option>北京</option> <option>上海</option> <option>河南</option></select> |
下拉列表分组显示
|
1
2
3
4
5
6
7
|
<select> <optgrouplabel="上海"> <option>松江区</option> <option>闵行区</option> <option>徐汇区</option> </optgroup></select> |
属性：multiple="multiple" 实现多选效果
属性：selected="selected" 设置下拉列表框实现默认选中
|
1
2
3
4
5
|
<selectmultiple="multiple"> <option>北京</option> <option>安徽</option> <optionselected="selected">上海</option></select> |
f、多行文本框 <textarea></textarea>
属性: cols="30" 用法效果和width一样
rows="10" 用法效果和height一样
介绍自己：
|
1
2
3
|
<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>
|
1
2
3
4
5
|
<fieldset> <legend>人员注册信息</legend> <label>姓名：</label> <label>年龄：</label></fieldset> |
