2018-03-22 HTML的单双标签2
今天学习的是依然是HTML的单双标签
双标签
<table>:表格标签
属性：border="表格线粗细" border=0时是没有边框线的
bgcolor="背景颜色"
width="高度"
height="高度"
align="对齐"
<tr>：行标签
属性：bgcolor="背景颜色"
height="高度"
align="对齐"
<td>：单元格标签
属性：bgcolor="背景颜色"
width="高度"
align="对齐"
valign="垂直"
colspan：跨列
rowspan：跨行（跨行跨列写在<td>属性中）
另外：
tablz中有<caption>表格标题
tr中有<th>单元格标题
table标签示例可回看3月16号笔记
现在举例
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="200px" height="400px">
<tr align="center" valign="top">
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td align="center" valign="top">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<title></title>
</head>
<body>
<table border="1" width="200px" height="200px">
<tr>
<td colspan="2">B</td>
<td rowspan="2">C</td>
</tr>
<tr>
<td rowspan="2">1</td>
<td>2</td>
</tr>
<tr>
<td colspan="2">b</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<table border="1" width="400px" height="50px">
<tr align="center">
<td rowspan="2">阿里巴巴旗下网站</td>
<td>我要买</td>
<td>我要买</td>
<td>我淘宝</td>
</tr>
<tr>
<td colspan="3" align="center">您好，欢迎来淘宝</td>
</tr>
</table>
</body>
</html>
<form>:表单标签
属性：action="提交地址"
method="提交方法"（get/post，其中get是默认的，如果表格中是输入密码，那么需要把密码打包保障信息安全，使用的就是post方法）
id="编号"
name="名称"
class="css选择器"
8,下拉框控件<select>
属性;size(默认1)
<option>:下拉列表项
属性：value，selected（默认被选中）
<select name="ctiy" size="1">
<option value="shanghai">上海</option>
<option value="北京">北京</option>
</select>
9,多行文本框<textarea>
属性;rous,cols,readonly
<textarea rous="20" cols="30" readonly>去淘宝</textarea>
单标签
<input>：表单控件标签
属性：type="控件类型"
控件类型分9个；7个单标签+2个双标签
1，默认text，单行文本框
属性：size="长度" maxlength="最多能输入的位数" value="值" readonly="只读''
用户名<input type="text" id="uname" name="uname" size="26" maxlength="8" value=" ">
2，password密码框
密码<input type="password" id="pxw" name="pxw" size="26" maxlength="8" >
3,单选按钮：radio
属性：name，value，checked(name名称需要一致)
性别：男<input type="radio" name="sex" value="male" checked>
女<input type="radio" name="sex" value="female" >
4，复选框：checkbox
属性：name，value，checked
兴趣：游戏<input type="checkbox" name="game" value="game" checked>
音乐<input type="checkbox" name="music" value="music" >
5，提交按钮：submit
属性：size，value
<input type="submit" value="确定" name="ok">
6,重置按钮：reset
属性：size，value
<input type="reset" value="取消" name="cancel">
7，普通按钮：button
属性：onclick
<input type="button" value="帮助" name="help" onclick="alert">
举例：
<html>
<head>
<title></title>
</head>
<body>
用户名<input type="text" name="asd" id="asd" size="26" maxlength="8" value="">
<p>
密码<input type="password" name="wer" id="wer" size="28" maxlength="8">
</p>
<p>性别：男<input type="radio" name="sex" value="male" checked> 女<input type="radio" name="sex" value="female">
<p>
兴趣：听音乐<input type="checkbox" name="music" value="music" checkde>
玩游戏<input type="checkbox" name="game" value="game">
</p>
<p>
城市<select name="city" size="1">
<option value="shanghia">上海</option>
<option value="beijing">北京</option>
<option value="nanjing">南京</option>
</select>
</p>
<p>
<textarea rous="20" cols="30" readonly>去淘宝</textarea>
</p>
<p>
<input type="submit" name="确定" name="ok">
<input type="reset" name="取消" name="cancel">
<input type="button" name="帮助" name="help" onclick="alert">
</p>
</p>
</body>
</html>
<html>
<head>
<title>3月22日小结作业</title>
</head>
<body>
<table border="1" bgcolor="pink">
<tr>
<td>
<p align="center">申请表</p>
<p>
姓名:<input type="text" name="xingming" id="xingming" size="26" value="">
<br>
密码:<input type="password" name="mima" id="mima" size="26" value="">
</p>
<p>
感兴趣的职位：
<br>
<input type="radio" name="occupation" value="design" checkde>Web设计
<input type="radio" name="occupation" value="develop">Web开发
</p>
<p>
其他要求：
<br>
<textarea rous="47" cols="26" readonly>
包括薪水待遇、工作地点等。
</textarea>
</p>
<p>
<input type="checkbox" name="xinxi" value="xinxi" checked> 发送确认信息
</p>
<p>
经验<select name="经验" size="1">
<option value="wujingyan">无经验</option>
<option value="jingyan">经验</option>
</select>
</p>
<p>
<input type="submit" value="提交" name="OK">
<input type="reset" value="重置" name="cancel">
</p>
</td>
</tr>
</table>
</body>
</html>
