HTML表格table
<table>标签表示这是一个表格，构成元素有<tr>、<td>、<th>
HTML表单
**form**
<form>标签表示这是一个表单，它的属性有action、 method,action表示提交到的地址， method表示提交的方式，有post和get
**input**
<input>标签表示输入控件，它的属性有type,type的有： text 表示文本框 radio 表示单选框 checkbox 表示复选框 submit 表示提交按钮 reset 表示重置按钮 button 表示按钮，它也是一个标签 file 文件上传控件 hidden 隐藏字段 color 颜色 email 邮件 date 日期 number 数字 ......
**button**
<button>按钮</button> 在button元素内部，可以放置内容。比如图像、文本。
**label**
<label for ="相关标记的id"> <label for="male">Male</label> <input type="radio" name="sex" id="male" /> <br /> <label for="female">Female</label> <input type="radio" name="sex" id="female" /> 点击这里的文字就可以让单选框选中。
**texterea**
<texterea>这是一个多行文本域标签</texterea> 可以设置它的行 rows 列cols
**radio**
<input type="radio"/>这是一个单选框.
**checkbox**
<input type="checkbox" checked="checked"/> 这是一个复选框,当checked="checked"时 该选项被默认选中。
**select**
<select>这是一个下拉列表</select> <select> <option value ="volvo">Volvo</option> <option value ="saab" selected="selected">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select> 当selected="selected"时表示这是默认选中.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生成绩表</title>
<style>
.biaoti{
color: mediumvioletred;font-size: 50px;
background-color:deeppink; padding: 20px;
}
#biaoti{
color: black;
}
</style>
<style type="text/css">
p{font-family:sans-serif;font-size: 30px;
background-color:deeppink;}
.hang{font-family:sans-serif;font-size: 30px;
background-color:deeppink;}
</style>
</head>
<body >
<table border="4" align="center" cellpadding="60">
<caption class="biaoti"><strong id="biaoti">二年级3班学生成绩表</strong></caption>
<tr class="hang">
<td colspan="4"><strong>姓名</strong></td>
<td colspan="4"><strong>语文</strong></td>
<td colspan="4"><strong>英语</strong></td>
<td colspan="4"><strong>化学</strong></td>
<td colspan="4"><strong>英语</strong></td>
</tr>
<tr>
<td colspan="4"><strong>小明</strong></td>
<td colspan="4">56</td>
<td colspan="4">56</td>
<td colspan="4">99</td>
<td colspan="4">100</td>
</tr>
<tr>
<td colspan="4"><strong>小红</strong></td>
<td colspan="4">99</td>
<td colspan="4">99</td>
<td colspan="4">99</td>
<td colspan="4">92</td>
</tr>
<tr>
<td colspan="4"><strong>小白</strong></td>
<td colspan="4">88</td>
<td colspan="4">84</td>
<td colspan="4">96</td>
<td colspan="4">99</td>
</tr>
</table>
<p>这是一个字体</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>为表格添加边框</title>
<style>
#biao-1{
font-size: 100%;
background-color: aqua;
}
body{background-color: aqua;}
.suojin{text-indent: 3em; text-align: center; }
</style>
</head>
<body>
<p><strong>1.表格标签table</strong></p>
<table border="4" align="center" cellpadding="60" dotted #000;
>
<caption id="biao-1"><strong>二年级学生成绩表</strong></caption>
<tr>
<td colspan="4"><strong>姓名</strong></td>
<td colspan="4"><strong>语文</strong></td>
<td colspan="4"><strong>英语</strong></td>
<td colspan="4"><strong>化学</strong></td>
<td colspan="4"><strong>英语</strong></td>
</tr>
<tr>
<td colspan="4"><strong>小明</strong></td>
<td colspan="4">56</td>
<td colspan="4">56</td>
<td colspan="4">99</td>
<td colspan="4">100</td>
</tr>
<tr>
<td colspan="4"><strong>小红</strong></td>
<td colspan="4">99</td>
<td colspan="4">99</td>
<td colspan="4">99</td>
<td colspan="4">92</td>
</tr>
<tr>
<td colspan="4"><strong>小白</strong></td>
<td colspan="4">88</td>
<td colspan="4">84</td>
<td colspan="4">96</td>
<td colspan="4">99</td>
</tr>
</table>
<br>
<ol>
<li><a href="#"Title="优秀同学">优秀同学</a> </li>
<li><a href="#"Title="优秀同学">优秀同学</a> </li>
<li><a href="#"Title="优秀同学">优秀同学</a> </li>
</ol>
<br>
<br>
<p><strong>2.表单标签form</strong></p>
<form method="post" action="#">
用户：
<div><input type="text" name="FirstName"></div>
<br>
密码：
<div><input type="password" name="password"></div>
<br>
<div>
<p><strong>3.创建一个单选按钮</strong></p>
男性：
<input type="radio" checked="checked" name="sex" value="male"/>
<br>
女性：
<input type="radio" name="Sex" value="female" />
<br>
</div>
<div>
<p><strong>4.创建一个复选框</strong></p>
<p>你对那些运动感兴趣？</p>
<input type="checkbox" name="checkbox1" value="跑步"/>跑步
<input type="checkbox" name="checkbox2" value="羽毛球" checked="checked"/>羽毛球
<input type="checkbox" name="checkbox3" value="游泳" checked="checked"/>游泳
</div>
<p><strong>5.创建一个文本域</strong></p>
<label >个人简介：</label>
<textarea name="" id="" cols="30" rows="10">输入内容：</textarea><br><br>
<input type="submit" value="提交" name="提交"/>
<input type="reset" value="重置" name="重置"/><br>
<p><strong>6.创建一个下拉列表</strong></p>
<label>水果：</label>
<select>
<option value="苹果">苹果</option>
<option value="香蕉">香蕉</option>
<option value="车厘子">车厘子</option>
<option value="榴莲" selected="selected">榴莲</option>
</select>
<p>7.创建一个按钮</p>
<input type="button" value="Hello world!">
</form>
<ul style="list-style-type: none">
<li>去掉小圆点</li>
</ul>
<p class="suojin">设置文本首行缩进</p>
</body>
</html>
时间： 2024-10-05 13:10:33