用表格和表单制作网页
于 2025-01-14 11:30:15 首次发布
目录
列表参数介绍及举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- 有序列表 -->
<!-- type属性控制序号的类型有 1(数字) a(英文小写) A(英文大写) i(罗马数字小写) I(骡马数字大写) -->
<!-- start属性决定列表项起始序号 -->
<!-- reversed降序 -->
<ol type="1" start="100" reversed="reversed">
<!-- li*5{$} emmet表达式-->
<li>abcd1</li>
<li>abcd2</li>
<li>abcd3</li>
<li>abcd4</li>
<li>abcd5</li>
</ol>
<!-- type属性决定序号的形状 square正方形 circle空心圆 disc实心圆 -->
<!-- -->
<ul type="sqaure">
<li>abcd1</li>
<li>abcd2</li>
<li>abcd3</li>
<li>abcd4</li>
<li>abcd5</li>
</ul>
<!-- 数据列表 -->
<dl>
<dt>天气预报</dt>
<dd>桂林：阴天</dd>
<dd>南宁：阴天</dd>
<dd>雁山区：阴天</dd>
</dl>
</body>
</html>效果
表单参数介绍及举例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!-- action属性指向处理数据的服务器接口 -->
<!-- method属性决定使用哪种请求方式(get/post) -->
<!-- enctype决定上传的数据类属性 有url编码 有字节流数据 有明文数据 -->
<!-- get -->
<!-- 1.在前端的表单中，get上传数据量是受浏览器限制 -->
<!-- 2.会将表单的所有数据频道url中，所以安全性较差 -->
<!-- 3.get会在浏览器的历史记录中保存 -->
<!-- post -->
<!-- 1.数据量无限制 -->
<!-- 2.post使用requestbody,他是隐蔽的，所以安全性较强 -->
<!-- 3.post不会讲关键表单信息保存在历史记录中 -->
<form action="#"
method="get"
enctype="text/plain">
<!-- input标签必须给name设置一个值，否则该标签没有任何意义，无法上传相关数据 -->
<!-- input标签的type属性决定标签的样式 -->
<label for="edit">用户名:</label>
<!-- readonly只读-->
<input type="edit" name="用户名" id="" value="刘英豪" readonly/> <br />
<label for="edit">密 码:</label>
<!-- disable 使失效 -->
<input type="password" disabled/> <br />
<label for="emai">邮 箱:</label>
<!-- 获取用户焦点 -->
<!-- placeholder属性 是编辑框的提示信息 -->
<input type="email" name="邮箱" required autofocus placeholder="请输入你的email"/> <br />
<!-- 在单选标签中，name属性决定单选的取值范围 -->
<label for="hob">专业</label>
<!-- checked：选中当前标签 -->
<input type="radio" name="专业" value="计科" checked/>计科
<input type="radio" name="专业" value="电信" checked/>电信
<input type="radio" name="专业" value="通信" checked/>通信
<input type="radio" name="专业" value="电气" checked/>电气 <br />
<label for="hob">爱好</label>
<input type="checkbox" name="爱好" value="篮球" checked/>篮球
<input type="checkbox" name="爱好" value="唱" checked/>唱
<input type="checkbox" name="爱好" value="跳" checked/>跳
<input type="checkbox" name="爱好" value="rap" checked/>rap <br />
<input type="submit" name="" id=""> <input type="reset" /><br />
<!-- 上传文件 -->
<input type="file" name="文件" id="">
<!-- 图像按钮 -->
<input type="image" src="pic/衣服.jpg"/>
<!-- select是下拉菜单 -->
<!-- multiple属性会使下拉菜单 变为多选菜单-->
<select name="省份" multiple>
<option >陕西</option>
<option >广西</option>
<option >山西</option>
</select>
<!-- 文字域标签允许多行输入 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- 调色盘 -->
<input type="color" /><br />
<input type="date" name="" id=""> <br />
<input type="datetime-local" />
<input type="range" min="0" max="100"/>
</form>
</body>
</html>效果
制作一个网页
要求
HTML代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<form action="#"
method="get"
enctype="text/plain">
<label for=""></label>
<table border="1" width="center" height=50% align="center">
<tr>
<td align="center" colspan="2" >用户注册</td>
</tr>
<tr>
<td align="right" width="80">
<label for="" >用户名:</label>
</td>
<td>
<input type="text" name="" />
</td>
</tr>
<tr>
<td align="right" width="80">
<label for="" >密码:</label>
</td>
<td>
<input type="password" name="" />
</td>
</tr>
<tr>
<td align="right" width="80">
<label for="" >性别</label>
</td>
<td>
<input type="radio" name="性别" value="男"/>男
<input type="radio" name="性别" value="女"/>女
</td>
</tr>
<tr>
<td align="right" width="80">
<label for="" >爱好</label>
</td>
<td>
<input type="checkbox" name="爱好" value="写作"/>写作
<input type="checkbox" name="爱好" value="听音乐"/>听音乐
<input type="checkbox" name="爱好" value="体育"/>体育
</td>
</tr>
<tr>
<td align="right" width="80">
<label for="" >省份</label>
</td>
<td>
<select name="" id="">
<option value="广西">广西</option>
<option value="广西">广东</option>
<option value="广西">海南</option>
<option value="广西">云南</option>
</select>
</td>
</tr>
<tr>
<td align="right" width="80">
<label for="" >自我介绍</label>
</td>
<td>
<textarea name="comment" rows="10" cols="25" ></textarea>
</td>
</tr>
<tr>
<td align="center" colspan="2" >
<input type="submit"/>
<input type="reset" value="重置" />
</td>
</tr>
</table>
</form>
</body>
</html>结果
07-11
1498
1498
08-25
701
701
暂无认证
到【灌水乐园】发言
汉武大帝·: https://blog.csdn.net/yinge0508/article/details/141154824?spm=1001.2014.3001.5501
CSDN-Ada助手: 恭喜你这篇博客进入【CSDN月度精选】榜单，全部的排名请看 https://bbs.csdn.net/topics/619455742。
CSDN-Ada助手: 恭喜你这篇博客进入【CSDN月度精选】榜单，全部的排名请看 https://bbs.csdn.net/topics/619453738。
CSDN-Ada助手: 恭喜你这篇博客进入【CSDN月度精选】榜单，全部的排名请看 https://bbs.csdn.net/topics/619451742。
CSDN-Ada助手: 恭喜你这篇博客进入【CSDN每天值得看】榜单，全部的排名请看 https://bbs.csdn.net/topics/619348879。