11.25form标签
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>#提交信息的链接地址
<formaction="a/b/c/login"method="get">
<p>
用户名:#name对应的是提交时的key
<inputtype="text"name="username"value="EGON">#value:表单里写好的默认内容
<inputtype="text"name="username"placeholder="请输入用户名">#placeholder：暗色的提示信息
<inputtype="text"name="username"value="egon"disabled="disabled">
</p>#disabled：内容不可更改，也不会提交服务端
<p>#readonly:内容不可更改，但会提交服务端
密码:#密码输入时会被遮挡
<inputtype="password"name="password"placeholder="密码长度不能超过16位">
</p>
<p>
<inputtype="submit"value="登录">#登录按钮，没有value时显示提交
</p>
</form>
</body>
</html>
11.251单选框
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<formaction="https://www.baidu.com"method="get">
<p>
性别:#选择后提交gender=male
<inputtype="radio"name="gender"value="male"checked="checked">男#checked表示默认选择
<inputtype="radio"name="gender"value="female">女#选择后提交gender=female
</p>#二者仅选其一
<p>
<inputtype="submit"value="注册">#注册按钮
</p>
</form>
</body>
</html>
11.252多选框、file上传文件、按钮
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<formaction="https://www.baidu.com"method="get">
<p>
爱好:#选择后提交hobbies=basketball
<inputtype="checkbox"name="hobbies"value="basketball">篮球
<inputtype="checkbox"name="hobbies"value="football"checked="checked">足球
<inputtype="checkbox"name="hobbies"value="pingpang"checked>乒乓球#checked表示默认选择
</p>
<p>#选择提交后uploadfile='选择的文件名'
<inputtype="file"name="uploadfile">#选择文件按钮,点击选择本地文件
</p>
<p>
<inputtype="submit"value="注册">#注册按钮，没有value时显示提交，提交表单
<inputtype="button"value="注册"onclick="alert(123)">#普通按钮，点击显示alert内的提示信息
<inputtype="image"src="1.jpg"onclick="alert(1)">#图片按钮,点击显示alert内的提示信息,且跳转
<inputtype="reset"value="重置">#重置按钮，点击form表单清空
<inputtype='date'name="y-m-d">#选择日期，选择后提交y-m-d=选择的日期
<button>按钮</button>#button在form中可以做提交按钮用，在form外是普通按钮
</p>
</form>
</body>
</html>
11.253label标签
对于选择框，点击选择框后的文字也能实现选择；对于文本框，点击文字选择文本框并光标聚焦
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<formaction="https://www.baidu.com"method="get">
<p>#name对应的是提交时的key
<labelfor="el">用户名:</label><inputtype="text"name="username"value="EGON"id='e1'>#input添加id,label根据id名找到输入框并光标聚焦#value:表单里写好的默认内容
</p>
<p>
性别：#选择后提交gender=maleinput添加id,label根据id名找到单选框，并选择
<inputtype="radio"name="gender"value="male"id="ml"><labelfor="ml">男</label>
<inputtype="radio"name="gender"value="female"id="fl"><labelfor="fl">女</label>
</p>
<p>
爱好:#选择后提交hobbies=basketballinput添加id,label根据id名找到多选框，并选择
<inputtype="checkbox"name="hobbies"value="basketball"id="bb"><labelfor="bb">篮球</label>
<inputtype="checkbox"name="hobbies"value="football"checked="checked"id="fb"><labelfor="fb">足球</label>
</p>
<p>
<inputtype="submit"value="注册">#注册按钮，没有value时显示‘提交’，提交表单
</p>
</form>
</body>
</html>
11.254下拉列表
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<formaction="https://www.baidu.com"method="get">
<p>
城市：#选择后提交city=BJ/SH/SZ/GZ
<selectname="city"id=""size="2"multiple="multiple">#下拉多选两个
<optionvalue="BJ">北京</option>
<optionvalue="SH">上海</option>
<optionvalue="SZ"selected="selected">深圳</option>#selected表示默认选择
<optionvalue="GZ">广州</option>
</select>
</p>
<p>
城市：
<selectname="city"id=""style="width:200px">
<optgrouplabel="一线城市">#选项分组(label提示信息不能选择)
<optionvalue="BJ">北京</option>#选择后提交city=BJ/SH/SZ/GZ
<optionvalue="SH">上海</option>
<optionvalue="SZ"selected="selected">深圳</option>#selected表示默认选择
<optionvalue="GZ">广州</option>
</optgroup>
<optgrouplabel="二线城市">
<optionvalue="BJ">济南</option>
<optionvalue="SH">苏州</option>
<optionvalue="SZ"selected="selected">南京</option>
<optionvalue="GZ">成都</option>
</optgroup>
</select>
</p>
<p>
<inputtype="submit"value="注册">
</p>
</form>
</body>
</html>
11.255textarea标签
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>
<formaction="https://www.baidu.com"method="get">
<p>#填写后提交comment="输入的内容"cols和rows设置初始文本域大小style设置不可重置文本域大小
<textareaname="comment"id=""cols="30"rows="3"style="resize:none">
亲，给好评哈#显示提前写入文本域的信息
</textarea>
</p>
<p>
<inputtype="submit"value="注册">
</p>
</form>
</body>
</html>
11.256fieldset标签
<body>
<formaction="https://www.baidu.com"method="get">
<fieldset>#设置方框样式表单
<legend>注册页面</legend>
<p>
.....
</p>
</fieldset>
</form>
</body>
11.26table标签
水平对齐和垂直对齐:
#水平对齐:align可以给table、tr、td标签设置,垂直对齐:valign只能给tr、td标签设置
强调：table只能设置水平方向
#========水平对齐===========
align=“left”align=“center”align=“right”
1给table标签设置水平对齐，可以让表格在水平方向上对齐
2给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐
3给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准
?
#========垂直对齐===========
valign=“top”valign=“center”valign=“bottom”
1给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐
2给td设置垂直对齐可以让当前单元格内容垂直对齐
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
</head>
<body>#border边框边界cellspacing单元格边界bgcolor表格边框背景颜色
<tableborder="0px"cellspacing="1px"bgcolor="aqua">#cellpadding单元格内内容距单元格边框
<trbgcolor="white">#一行单元格背景颜色
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr>
<trbgcolor="white">
<td>egon1</td>
<td>male</td>
<td>18</td>
</tr>
</table>
</body>
</html>
11.261表格结构
<tableborder="1"cellspacing="1px"bgcolor="black"width="300px"height="300px">#表格宽度和高度
<caption>学员信息统计</caption>#1、表格的标题
<thead>#2、表格的表头
<trbgcolor="white">
<th>姓名</th>#表头行加粗，居中
<th>性别</th>
<th>年龄</th>
</tr>
</thead>
<tbody>#3、表格的主体
<trbgcolor="white">
<td>egon</td>
<td>male</td>
<td>18</td>
</tr>
</tbody>
<tfoot>#4、表尾
<trbgcolor="white">
<td>3</td>
<td>3</td>
<td>3</td>
</tr>
</tfoot>
</table>
11.262单元格合并
1、水平向上的单元格colspan可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待
2、垂直向上的单元格rowspan可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待
<tableborder="0px"cellspacing="1px"bgcolor="aqua"width="200px"height="200px">
<trbgcolor="white">
<tdcolspan="2"></td>#第一行第一列向后合并一个单元格
<td></td>#相应删除一个列
</tr>
<trbgcolor="white">
<td></td>
<td></td>
<tdrowspan="3"></td>#第二行第三列向下合并两个单元格
</tr>
<trbgcolor="white">
<td></td>#相应的这两行都只有两列
<td></td>
</tr>
<trbgcolor="white">
<td></td>
<td></td>
</tr>
</table>
注意:1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并
如需转载，请注明文章出处和来源网址：http://www.divcss5.com/html/h54926.shtml
