表格标签
要求:
制作一个三行四列的表格
工具:
table标签:表示一个表格,默认没有边框
border:设置表格边框
width:设置表格宽度 heigh:设置表格高度
align:设置表格对齐方式 left左对齐,right右对齐 center居中对齐
bgcolor:设置表格背景颜色
cellspacing:设置表格中单元格与单元格之间的间距
cellpadding:设置单元格边框与内容之间的间距
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<table border="1" width="900px" height="200px" align="center" bgcolor="#e5c4eb" cellsapacing="0">
<tr wigh="500px" height="60px" align="center" bgcolor="#d99bfe">
<td wigh="100px" height="50px">姓名</td>
<td>年龄</td>
<td>性别</td>
<td>爱好</td>
<td>备注</td>
</tr>
<tr wigh="500px" height="60px" align="center" bgcolor="#f3b4fe">
<td>张三</td>
<td>18</td>
<td>女</td>
<td>第五人格</td>
<td>嘿嘿嘿,狂欢之椅</td>
</tr>
<tr wigh="500px" height="60px" align="center">
<td>李四</td>
<td>19</td>
<td>女</td>
<td>麻了个麻将</td>
<td>红中红中,白板白板</td>
</tr>
<tr wigh="500px" height="60px" align="center" bgcolor="#f2d9ff">
<td>王五</td>
<td>19</td>
<td>女</td>
<td>蛋仔派对</td>
<td>咸鱼在手,打遍蛋仔无敌手</td>
</tr>
</table>
</body>
</html>
表单组件
代码:
上代码直接运行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>表单组件</title>
</head>
<body>
<!-- 表单:主要用于登录,注册的标签系列 -->
<h3>普通输入框</h3>
<!-- placeholder:显示提示信息 -->
<label for="name">姓名:</label>
<input type="text" placeholder="请输入姓名" value="张三"/>
<h3>密码框</h3>
密码:
<input type="password" />
<h3>单选框</h3>
性别:
<!-- 单选框需要设置相同的name属性来进行绑定
lable标签的特殊用法:通过for属性指定对应的表单元素的id名-->
<input type="radio" name="sex"/><label for="nan">男</label>
<input type="radio" name="sex"/><label for="nv">女</label>
<h3>复选框</h3>
游戏选择:
<input type="checkbox"/>第五人格
<input type="checkbox" checked/>蛋仔派对
<input type="checkbox"/>王者荣耀
<input type="checkbox"/>和平精英
<h3>下拉列表框</h3>
证件:
<select >
<option value="" selected>身份证</option>
<option value="">户口簿</option>
<option value="">护照</option>
</select>
<h3>文本域(列表框)</h3>
描述:
<textarea cols="10" rows="2"></textarea>
<!--
cols:最多字符数
rows:最大行数
-->
<h3>按钮</h3>
<input type="button" value="普通按钮"/><!-- 普通按钮 -->
<input type="reset" value="重置按钮"/><!-- 重置按钮 -->
<input type="submit" value="提交按钮"/><!-- 提交按钮 -->
<button>按钮</button>
<button type="button">普通按钮</button>
<button type="reset">重置按钮</button>
<button type="submit">提交按钮</button>
<!-- 推荐使用button标签实现按钮设置 -->
</body>
</html>
其他标签
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
正常文本
<!-- div可以看作一个容器,独占一行,没有任何样式,可以通过css来设置 -->
<div>DIV文本</div>
<marquee>公告:不玩第五人格会被绑到狂欢之椅</marquee>
<!-- 跑马灯:里面内容是从右往左,左侧消失,无限循环 -->
<iframe src="https://id5.163.com/index.html" frameborder="0" width="1000px" height="800px"></iframe>
<br />
<!-- 删除线标签,后续可以利用css统一设置 -->
<del>$998</del>
</body>
</html>