Notes after listening to class at station B
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表单</title>
</head>
<body>
<!--设置了一个锚链接-->
<a name="top"></a>
<!--图片链接
alt图片无法显示时出现的文字
tittle 鼠标悬停在上面时显示的文字
-->
<img src="https://content.halocdn.com/media/Default/community/blogs/hi_campaign_tower_light_module-37ed93813c034a84a8f77bb4b9dafd78.jpg" alt="光环">
<p>
<audio src="src/resource/audio/Digital World - Amaranthe.mp3" autoplay controls></audio>
</p>
<!--表单form
action:表单所提交的位置,可以是网站,也可以是一个请求处理地址
method: post,get 提交方式
get方式提交:我们可以在url中看到我们提交的信息,不安全但是高效
-->
<form action="表格.html" method="post">
<!-- 文本输入框:input type="text"
value="" 默认初始值
maxlength="8" 最长能写几个字符
size="30" 文本框的长度
readonly 使得名字文本框只读
hidden 隐藏密码文本域
-->
<p>名字 : <input type="text" name="username" value="admin" readonly></p>
<!-- 密码输入框:input type="password"-->
<p>密码 : <input type="password" name=" pwd" hidden></p>
<!-- 单选框标签
input type="radio"
value: 单选框的值
-->
<!-- name同属于sex组,可以让选择变为单选
checked 默认选择
-->
<p>
性别:
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<!-- 多选框标签 disabled使得游戏选项禁用-->
<p>
爱好:
<input type="checkbox" value="game" name="hobby" disabled>游戏
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="study" name="hobby" checked>学习
<input type="checkbox" value="code" name="hobby">敲代码
</p>
<!-- 按钮
value: 改变按钮的名字
type="button" 普通按钮
type="submit" 提交按钮
type="reset" 重置按钮
type="image" 图像按钮
-->
<!-- 列表框标签
-->国家:
<select name="listName">
<option value="china">中国</option>
<option value="USA" selected>美国</option>
<option value="India">印度</option>
</select>
<p>
<input type="file" name="files">
<input type="button" name="btn1" value="upload">
</p>
<!-- cols列数 rows行数 label标签,可以增强鼠标的点击性,当点击反馈时会进入文本域textarea-->
<p><label for="press">反馈:</label>
<textarea id="press" name="textarea" cols="30" rows="10">hello</textarea>
</p>
<!-- 超链接-->
<p>
<a href="https://www.baidu.com">
<input type="button" value="前往百度">
</a>
</p>
<!-- 表格学习
align 对齐方式,分为三个属性center,right,left,默认为left
bgcolor 表格背景颜色
cellspacing 间距
colspan 跨列
rowspan 跨行
-->
<table border="1xp">
<tr>
<td rowspan="2">姓名</td>
<td colspan="3" align="center">成绩</td>
</tr>
<tr>
<td>数学</td>
<td>英语</td>
<td>科技</td>
</tr>
</table>
<!-- 邮件验证-->
<p>邮箱验证 :
<input type="email" name="email">
</p>
<!-- URL-->
<!--required 判断填入的是否为空
pattern 正则表达式
-->
<p>URL :
<input type="url" name="url" required>
</p>
<p>
<!-- 数量
placeholder 提示词
-->
数量 :
<input type="number" name="number" max="100" min="0" step="1" placeholder="填入数量">
</p>
<!-- 滑块
step每次调整的数量
value默认数值
-->
<p> 音量 :
<input type="range" name="voice" max="100" min="0" step="1" value="5">
</p>
<p>搜索框 :
<input type="search" name="search">
</p>
<p>
<input type="submit" name="Button" value="提交">
<input type="reset" name="Reset" value="重填">
</p>
</form>
<!--iframe内联框架
href:表示跳转到哪一个页面
target:_blank 先打开一个标签页
_self 在当前页面打开
-->
<iframe src="https://www.bilibili.com/" frameborder="1xp" width="100%" height="900"></iframe>
<iframe src="https://www.bilibili.com/" name="hello" frameborder="0" width="1000" height="800"></iframe>
<a href="https://www.halowaypoint.com" target="hello">
<input type="button" value="前往光环官网"></a>
<!--当前显示为b站官网,点击按钮后在这个内置框架中打开光环官网-->
<!--锚链接-->
<p>
<a href="#top">返回顶部</a>
</p>
</body>
</html>