2021.1.6学习
页面结构分析
内联框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>9.内联框架 iframe</title>
</head>
<body>
<!--iframe 内联-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no"
border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<iframe
src="http://www.baidu.com" frameborder="0"width="300px" height="300px">
</iframe>
<iframe src="" frameborder="0"name="haha"></iframe>
<a href="1.我的第一个网站.html" target="haha">跳转</a>
</body>
</html>
表单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表单 登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form-->
<!--action : 表单提交方式，可以是网站，可以是请求处理地址-->
<!--method : post get 提交方式-->
<!--get 方式，我们可以在url中看到我们提交的信息，不安全，高效。-->
<!--post 方式 比较安全 可以传输大文件 -->
<form action="1.我的第一个网站.html" method="post" >
<!--文本输入框 : input type = "text"-->
<p>名字 : <input type="text" name="usermane"> </p>
<!--密码框: input type="password"-->
<p>密码 ： <input type="password" name="密码"></p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.表单 登录注册</title>
</head>
<body>
<h1>注册</h1>
<!--表单form-->
<!--action : 表单提交方式，可以是网站，可以是请求处理地址-->
<!--method : post get 提交方式-->
<!--get 方式，我们可以在url中看到我们提交的信息，不安全，高效。-->
<!--post 方式 比较安全 可以传输大文件 -->
<form action="1.我的第一个网站.html" method="get" >
<!--
文本输入框 : input type = "text"
value : 默认值
maxlength 最大输入字符
size : 文本框长度
-->
<p>名字 :
<input type="text" name="usermane" value="赵" maxlength="8" size="9" readonly> <!--readonly只读-->
<input type="text" name="usermane" placeholder="赵云锁" > <!-- placeholder提示信息-->
<input type="text" name="usermane" required > <!-- required: 非空判断。-->
</p>
<!--密码框: input type="password"-->
<p>密码 ： <input type="password" name="密码" hidden></p> <!--隐藏：hidden-->
<!-- 单选框标签
input type="radio"
value:单选框的值
name: 组，一样就是一个组
-->
<p>
性别：
<input type="radio"value="boy" name="sex" checked />男 <!-- 默认选中： checked-->
<input type="radio" value="girl" name="sex" disabled />女 <!-- disable:禁用-->
</p>
<!--
多选框
inPut type="checkbox"
-->
<p>
爱好：
<input type="checkbox"value="sleep" name="hobby" >睡觉
<input type="checkbox"value="3" name="hobby" checked >2 <!-- 默认选中 ： checked-->
<input type="checkbox"value="4" name="hobby" >3
</p>
<!--
按钮
input type ="button" 普通按钮
input type ="image" 图像按钮
input type = "submit" 提交按钮
input type = "reset" 重置
-->
<p>
按钮：
<input type="button" name="btn1" value="点击变长">
<input type="image" src="../resources/image/天若截图_20220005080046.png">
</p>
<!--下拉框，列表框-->
<p>
数字：
<select
name="列表名称">
<option value="123">123</option>
<option value="23" selected>23</option> <!--selected 默认值 -->
<option value="选项的值">143</option>
<option value="选项的值">1253</option>
</select>
</p>
<!--
文本域
textarea
colos： 行
rows: 列
-->
<p>
反馈：
<textarea name="" id="" cols="10" rows="10">why are you so serious?</textarea>
</p>
<!--
文件域
input type ="file"
name = "files"
-->
<p>
<input type="file" name="files">
<input type="button" value="上传" name="upload">
</p>
<!-- 邮件验证-->
<p>
邮件：
<input type="email" name="email">
</p>
<!--url -->
<p>
url：
<input type="url" name="url">
</p>
<!--数字验证-->
<p>
数字：
<input type="number" name="uum" max="100" min="10" step="2">
</p>
<!--滑块-->
<p>滑块：
<input type="range" min="0" max="100" name="vioce">
</p>
<!--搜索框 -->
<p>搜索：
<input type="search" name="serach">
</p>
<!-- 增强鼠标可用性-->
<p>
<label for="mark">你点我试试</label>
<input type="text" id="mark">
<p>
<!-- 常用正则表达式 https://tool.oschina.net/uploads/apidocs/jquery/regexp.html
patten
-->
自定义邮箱：
<input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/
/^[a-z\d]+(\.[a-z\d]+)*@([\da-z](-[\da-z])?)+(\.{1,2}[a-z]+)+$/">
</p>
</p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
