<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>LC的媒体元素</title> <!-- 音频和视频 src 资源路径 controls 控制条 不加什么都看不见 autoplay 自动播放--> </head> <body> <header> 网页头部</header> <section>网页主题</section> <footer>网页脚部</footer> <!-- iframe 内敛框架 src 地址 w-h 宽度高度 name :框架标识名 iframe 是一个内置框,a标签是跳转--> <iframe src="https://www.bilibili.com" frameborder="0" width = "1100px" height = "800px"></iframe> <iframe src="" name = "hello" frameborder="0"></iframe> <a href="First_html.html" target="hello">点击我跳转页面</a> </body> </html>
表单
<!--表单form action 表单提交的位置,可以是表单也可以是一个请求处理地址 method post get 提交方式 get 方式提交我们能在url中看见我们提交的信息(账号密码),不安全高效 post方式提交 比较安全可以传输大文件-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>LC的表单</title>
</head>
<body>
<h1>注册</h1>
<!--表单form
action 表单提交的位置,可以是表单也可以是一个请求处理地址
method post get 提交方式
get 方式提交我们能在url中看见我们提交的信息(账号密码),不安全高效
post方式提交 比较安全可以传输大文件-->
<form action="First_html.html" method="get">
<!--文本输入框 ;input type="text"-->
<p><input type="text" name = "username"></p>
<!--密码框 input type="password"-->
<p><input type="password" name="pwd"></p>
<p><input type="submit"><input type="reset"></p>
</form>
</body>
</html>
初始界面
基本表单元素
get方式提交不安全,网址有账号密码信息
post方法提交相对安全,网址隐藏信息,但可通过数据抓包显现,这时候就要用到数据加密的方法
1,type
指定元素类型,text,password,checkbox ,radio , submit , reset , file , hidden , image , button ,默认为text
2,name
指定表单元素名称
3,size
指定表单元素的初始宽度。
4,maxlength
type为text或password时,输入的最大字符数
5,checked
type为radio或checkbox时,指定按钮是否被选中
<!--设置成同一个组,不然都能勾选-->
<p>性别:
<input type="radio" value="boy" name = "sex">男
<input type="radio" value="girl" name = "sex">女</p>
value 初始值 size 文本框长度-->
单选框标签
input type = "radio"
value:初始值
name:表示组
多选框checkbox
<!-- 多选框checkbox
input type = "checkbox"-->
<p>爱好:
<input type="checkbox" name ="hobby">睡觉
<input type="checkbox" value = "code " name ="hobby">敲代码
<input type="checkbox" value = "game " name ="hobby">打游戏
<input type="checkbox" value = "chat" name ="hobby">聊天
</p>
按钮
<p>按钮: <input type="button" name = "btn1" value="点我"> <input type="image" src="resource/image/head.webp"></p>
图片按钮,可跳转
下拉框
<!-- 下拉框,列表框 option 子选项 selected 默认值--> <p> 国家: <select name="列表名称" id="LC"> <option value="选项的值">中国</option> <option value="选项的值">India</option> <option value="选项的值" selected>America</option> <option value="选项的值">Japan</option> </select></p>
文本域
<!-- 文本域 cols rows 行列--> <p>反馈: <textarea name="textarea" id="1" cols="30" rows="10"></textarea></p>
文件域
<!-- 文件域--> <input type="file" name = "files"> <input type="button" value="上传" name="upload">
所以的input标签,所有的表单元素都需要name属性,用键值对上传东西
功能属性
<!-- 邮件验证-->
<p>邮箱:
<input type="email" name = "email">
</p>
<!-- url-->
<p>
URL:
<input type="url" name = "url">
</p>
<!-- 数字-->
<p>
数字:
<input type="number" name="num" max="100" min="1" step="10">
</p>
<!-- 滑块-->
<input type="range" name = "voice" max="100" min="0" step="2">
<!-- 搜索框-->
<p>搜索框:
<input type="search" name="search"></p>
具有基本验证功能
应用属性
只读 readonly
写在定义之中,不能被修改
disabled 禁用,hidden 隐藏域
表单初级验证
<!-- 表单初级验证--> <!--placeholder 提示信息用于输入框--> <!-- required 非空--> <!-- pattern正则表达式-->