web前端表单（重点）
来源：互联网 发布：手机淘宝装修软件 编辑：程序博客网 时间：2024/05/15 08:33
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
</head>
<body>
<!--
src属性：指路径
alt属性：当图片不能加载是的说明文字
audio标签：音频标签
video:视频标签
controls属性：音乐的控制台
autoplay属性：自动播放音乐
autoplay="autoplay"
-->
<img src="./images/118.gif" alt="图片不能加载" />
<audio ></audio>
<audio src="images/beyond.mp3" alt="不支持音乐" controls="controls" ></audio>
<video src="images/1.mp4" alt="视频不能加载" controls="controls" ></video>
<!--
无序列表；
ul标签和li标签联合使用
ul中不能放其他的标签只能放li标签
li标签中可以再次嵌套ul标签
style=“list-style:none”可以去掉前面的小黑点
-->
<ul style="list-style:none">
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
<!--
有序列表，
ol标签：
-->
<ol type="A">
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
<!--
定义列表：不怎么会使用d
dl 和dd标签,dt标签嵌套使用：
dt标签：是dd表签的上一层
-->
<dl>
<dd>nihao</dd>
<dd>nihao</dd>
</dl>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<!--
表格(table)
tr标签：定义行
td标签：定义列
thead：表头
<caption>定义表的标题
th：定义表头单元格
跨行跨列都是写在td中
rowspan标签：跨行 删掉下几个个tr中多的
colspan标签：跨列 删点同意个tr里的多的
-->
<table border="2" width="500">
<thead>成绩表</thead>
<caption>定义表的标题</caption>
<tr >
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr >
<td>1</td>
<td>2</td>
</tr>
<tr >
<td colspan="2">1</td>
<td>2</td>
</tr>
<tr >
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr >
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<!--
表单的知识有点多
创建表单必须在form中
type="text" 文本框 有一个placeholder属性可以设置提示语句其他也有这个属性
maxlength：最长文字设置
readonly属性：将文本设置只能只读 readonly=“readoonly”
type="password"密码 会生成掩码
type="submit" 提交按妞
type="button" 普通按钮
type="reset" 重置按钮
单选和多选有一个<label>属性：在点击文字时就可以选中
type="radio" 单选
type="checkbox"多选
type="image" 图片按钮
type="file" 文件上传
上传文件必须写enctype="multipart/form-data"
<select>下拉框 必须和option配合使用
-->
<form action="post.php" method="post">
用户名：
<input type="text" name="username" placeholder="请输入用户名" />
<br/>
密码：
<input type="password" name="pwd"/>
<br />
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
<label><input type="radio" name="sex" value="男" />男</label>
<label><input type="radio" name="sex" value="女" />女</label>
<br />
爱好：
<label> <input type="checkbox" name="duo"value="1">篮球</label>
<label><input type="checkbox" name="duo"value="2">足球</label>
<label><input type="checkbox" name="duo"value="3">羽毛球</label>
<label><input type="checkbox" name="duo"value="4">乒乓球</label>
<label><input type="checkbox" name="duo"value="5">排球</label>
<label><input type="checkbox" name="duo"value="6">网球</label>
<br />
文件上传：<input type="file" name="upfile"/><br />
<input type="image"src="images/118.gif"/>
<select >
<option name="e" value="1">1</option>
<option name="e" value="2">2</option>
<option name="e" value="3">3</option>
<option name="e" value="4">4</option>
<option name="e" value="5">5</option>
</select>
<textarea name="r" cols="200" rows="40" background="red">
</textarea>
<input type="submit" name="subMit" value="提交"/>
</form>
</html>
<html>
<head>
<meta charset="utf-8"/>
<title>
</title>
</head>
<body>
<!--
src属性：指路径
alt属性：当图片不能加载是的说明文字
audio标签：音频标签
video:视频标签
controls属性：音乐的控制台
autoplay属性：自动播放音乐
autoplay="autoplay"
-->
<img src="./images/118.gif" alt="图片不能加载" />
<audio ></audio>
<audio src="images/beyond.mp3" alt="不支持音乐" controls="controls" ></audio>
<video src="images/1.mp4" alt="视频不能加载" controls="controls" ></video>
<!--
无序列表；
ul标签和li标签联合使用
ul中不能放其他的标签只能放li标签
li标签中可以再次嵌套ul标签
style=“list-style:none”可以去掉前面的小黑点
-->
<ul style="list-style:none">
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ul>
<!--
有序列表，
ol标签：
其他的和无序列表一样
type属性：可以改变序号-->
<ol type="A">
<li>第一</li>
<li>第二</li>
<li>第三</li>
</ol>
<!--
定义列表：不怎么会使用d
dl 和dd标签,dt标签嵌套使用：
dt标签：是dd表签的上一层
-->
<dl>
<dd>nihao</dd>
<dd>nihao</dd>
</dl>
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
<!--
表格(table)
tr标签：定义行
td标签：定义列
thead：表头
<caption>定义表的标题
th：定义表头单元格
跨行跨列都是写在td中
rowspan标签：跨行 删掉下几个个tr中多的
colspan标签：跨列 删点同意个tr里的多的
-->
<table border="2" width="500">
<thead>成绩表</thead>
<caption>定义表的标题</caption>
<tr >
<td rowspan="2">1</td>
<td>2</td>
<td>3</td>
</tr>
<tr >
<td>1</td>
<td>2</td>
</tr>
<tr >
<td colspan="2">1</td>
<td>2</td>
</tr>
<tr >
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr >
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<!--
表单的知识有点多
创建表单必须在form中
type="text" 文本框 有一个placeholder属性可以设置提示语句其他也有这个属性
maxlength：最长文字设置
readonly属性：将文本设置只能只读 readonly=“readoonly”
type="password"密码 会生成掩码
type="submit" 提交按妞
type="button" 普通按钮
type="reset" 重置按钮
单选和多选有一个<label>属性：在点击文字时就可以选中
type="radio" 单选
type="checkbox"多选
type="image" 图片按钮
type="file" 文件上传
上传文件必须写enctype="multipart/form-data"
<select>下拉框 必须和option配合使用
-->
<form action="post.php" method="post">
用户名：
<input type="text" name="username" placeholder="请输入用户名" />
<br/>
密码：
<input type="password" name="pwd"/>
<br />
<input type="button" value="普通按钮"/>
<input type="reset" value="重置按钮"/>
<label><input type="radio" name="sex" value="男" />男</label>
<label><input type="radio" name="sex" value="女" />女</label>
<br />
爱好：
<label> <input type="checkbox" name="duo"value="1">篮球</label>
<label><input type="checkbox" name="duo"value="2">足球</label>
<label><input type="checkbox" name="duo"value="3">羽毛球</label>
<label><input type="checkbox" name="duo"value="4">乒乓球</label>
<label><input type="checkbox" name="duo"value="5">排球</label>
<label><input type="checkbox" name="duo"value="6">网球</label>
<br />
文件上传：<input type="file" name="upfile"/><br />
<input type="image"src="images/118.gif"/>
<select >
<option name="e" value="1">1</option>
<option name="e" value="2">2</option>
<option name="e" value="3">3</option>
<option name="e" value="4">4</option>
<option name="e" value="5">5</option>
</select>
<textarea name="r" cols="200" rows="40" background="red">
</textarea>
<input type="submit" name="subMit" value="提交"/>
</form>
</html>
1 0
- web前端表单（重点）
- WEB前端面试重点
- WEB前端面试重点
- Web前端-找工作重点
- 数据验证【web前端，表单】
- WEB前端-JQuery-表单验证
- 前端笔试重点（3）
- Web前端-html页面-01（锚点、表单、个人简历）
- web前端之锋利的jQuery八：jQuery插件的使用（表单验证、表单提交）
- [Web前端]梳理-HTML5.3.表单验证
- [Web前端]梳理-DOM.19. HTML表单
- Web前端-表单及时验证(Jquery)
- web前端－HTML表单－015
- web前端—列表和表单
- Web前端(表单)基础知识笔记(3)
- web前端学习-------表单的应用
- web前端关于html5的表单控件
- Web前端-HeadFirst-笔记-Ch14-表单
- 【CodeForces】[599B]Spongebob and Joke
- Android注销功能
- 扬尘的监测和软件技术
- HTML手机端页面模版
- what fucking is PHP
- web前端表单（重点）
- 好玩的注释
- UITextField 限制输入字数
- 2016 Multi-University Training Contest 2 Acperience
- 【转】【three.js详解之一】入门篇
- 扬尘噪声监测app
- 小图标网址推荐
- 模拟测试秒杀
- 英语和计算机程序的转换
