HTML基础

iframe src https://www.baidu.com/ frameborder 0 width 300 height 300 /iframe iframe src //player.bilibili.com/player.html?aid 763053076 bvid BV1u64y1a7hW cid 409435705 page 1 scrolling no border 0 frameborder no framespacing 0 allowfullscreen true width 500 height 300 /iframe 表单

 !DOCTYPE html 
 html lang en 
 head 
 meta charset UTF-8 
 title 登录注册 /title 
 /head 
 body 
 !--表单from
 action:表单提交的位置 可以是网站 也可以是一个请求处理地址
 methon:post ,get 提交方式
 get :我们可以在url中看到我们提交的信息 不安全 高效
 post 比较安全 传输大文件
 value 默认初始值
 maxlength 最大长度
 size 文本框长度
 hidden :隐藏域
 readonly :只读
 disabled :禁用
 placeholder 提示信息
 required :非空
 pattern :正则表达式
 form action demo01.html methon post 
 !--文本输入框 input type “username” -- 
 p 名字 input type text name uername placeholder 请输入名字 required maxlength 10 size 15 /p 
 !--密码框 input type “password” -- 
 p 密码 input type password name pwd /p 
 !--单选框标签
 input type radio 
 value :单选框的值
 name 表示组 同一组只能选择一个
 p 性别 
 input type radio value boy name sex / 男
 input type radio value girl name sex / 女
 !-- 多选框
 input type “checkbox”
 checked 默认选中
 p 爱好 
 input type checkbox value sleep name habby 睡觉
 input type checkbox value code name habby checked 敲代码
 input type checkbox value chat name habby 聊天
 input type checkbox value game name habby 游戏
 !--按钮
 input type button 普通按钮
 input type image 图像按钮
 input type submit 提交按钮
 input type reset 重置
 !--value是按钮的内容 -- 
 input type button name btn1 value 点击变长 
 !-- input type image src ../resources/image/1.JPG width 100 height 100 -- 
 !--下拉框 列表框
 selected 默认选中
 p 下拉框国家 
 select name 列表名称 
 option value china 中国 /option 
 option value usa 美国 /option 
 option value indian 印度 /option 
 option value eth selected 瑞士 /option 
 /select 
 !--文本域
 cols ,rows 行列
 p 反馈 
 textarea name textarea id 12 cols 30 rows 10 /textarea 
 !--文件域-- 
 input type file name file 
 input type button value 提交 
 !--邮箱验证-- 
 p 邮箱 
 input type email name email 
 !--URL-- 
 p URL:
 input type url name url 
 !--数字-- 
 p 商品数量 
 input type number name 商品数量 max 100 min 0 step 2 
 !--滑块
 input type range 
 p 音量 
 input type range name voice min 0 max 100 step 2 
 !--搜索框-- 
 p 搜索框 
 input type search name search 
 !--增强鼠标可用性-- 
 label for mark 你点我试试 /label 
 input type text id mark 
 !--自定义邮箱
 https://tool.oschina.net/uploads/apidocs/jquery/regexp.html
 p 自定义邮箱 
 input type text name diymail pattern /^([a-z0-9_.-] ) ([da-z.-] ).([a-z.]{2,6})$/
 /^[a-zd] (.[a-zd] )* ([da-z](-[da-z])?) (.{1,2}[a-z] ) $/ 
 input type submit 
 input type reset 
 /form 
 /body 
 /html 

表单基本语法

 !--表单from
 action:表单提交的位置 可以是网站 也可以是一个请求处理地址
 methon:post ,get 提交方式
 get :我们可以在url中看到我们提交的信息 不安全 高效
 post 比较安全 传输大文件
 value 默认初始值
 maxlength 最大长度
 size 文本框长度
 hidden :隐藏域
 readonly :只读
 disabled :禁用
 placeholder 提示信息
 required :非空
 pattern :正则表达式

文本输入框

 !--文本输入框 input type “username” -- 
 p 名字 input type text name uername placeholder 请输入名字 required maxlength 10 size 15 /p 
 !--密码框 input type “password” -- 
 p 密码 input type password name pwd /p 
 !--单选框标签
 input type radio 
 value :单选框的值
 name 表示组 同一组只能选择一个
 p 性别 
 input type radio value boy name sex / 男
 input type radio value girl name sex / 女

多选框

 !-- 多选框
 input type “checkbox”
 checked 默认选中
 p 爱好 
 input type checkbox value sleep name habby 睡觉
 input type checkbox value code name habby checked 敲代码
 input type checkbox value chat name habby 聊天
 input type checkbox value game name habby 游戏

按钮

 !--按钮
 input type button 普通按钮
 input type image 图像按钮
 input type submit 提交按钮
 input type reset 重置
 !--value是按钮的内容 -- 
 input type button name btn1 value 点击变长 
 !-- input type image src ../resources/image/1.JPG width 100 height 100 -- 

下拉框

 !--下拉框 列表框
 selected 默认选中
 p 下拉框国家 
 select name 列表名称 
 option value china 中国 /option 
 option value usa 美国 /option 
 option value indian 印度 /option 
 option value eth selected 瑞士 /option 
 /select 

文本域

 !--文本域
 cols ,rows 行列
 p 反馈 
 textarea name textarea id 12 cols 30 rows 10 /textarea 

文件域

 !--文件域-- 
 input type file name file 
 input type button value 提交 

邮箱验证

 !--邮箱验证-- 
 p 邮箱 
 input type email name email 

URL

 !--URL-- 
 p URL:
 input type url name url 

数字

 !--数字-- 
 p 商品数量 
 input type number name 商品数量 max 100 min 0 step 2 

滑块

 !--滑块
 input type range 
 p 音量 
 input type range name voice min 0 max 100 step 2 

搜索框

 !--搜索框-- 
 p 搜索框 
 input type search name search 

增强鼠标可用性

 !--增强鼠标可用性-- 
 label for mark 你点我试试 /label 
 input type text id mark 

自定义邮箱

 !--自定义邮箱
 https://tool.oschina.net/uploads/apidocs/jquery/regexp.html
 p 自定义邮箱 
 input type text name diymail pattern /^([a-z0-9_.-] ) ([da-z.-] ).([a-z.]{2,6})$/
 /^[a-zd] (.[a-zd] )* ([da-z](-[da-z])?) (.{1,2}[a-z] ) $/