国际会议网站建设,小程序营销策略,网站建设书籍,优化设计答案大全英语HTML笔记02
页面结构分析
元素名描述header标题头部区域的内容#xff08;用于页面或页面中的一块区域#xff09;footer标记脚部区域的内容#xff08;用于整个页面或页面的一块区域#xff09;sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用…HTML笔记02
页面结构分析
元素名描述header标题头部区域的内容用于页面或页面中的一块区域footer标记脚部区域的内容用于整个页面或页面的一块区域sectionWeb页面中的一块独立区域article独立的文章内容aside相关内容或应用常用于侧边栏nav导航类辅助内容
下面我们通过写代码的方式来简单地分析一下页面结构
!DOCTYPE html
html langen
headmeta charsetUTF-8title页面结构分析/title
/head
bodyheaderh2网页头部/h2
/headersectionh2网页主体/h2
/sectionfooterh2网页脚部/h2
/footer/body
/html打开浏览器查看网页 iframe内联框架 下面我们通过写代码的方式来学习iframe内联框架
!DOCTYPE html
html langen
headmeta charsetUTF-8title内联框架iframe学习/title
/head
body!-- iframe内联框架
src: 地址
width: 宽度
height: 高度
--
iframe srchttps://www.taobao.com/ namehello frameborder0 width1000px height800px/iframe!-- 通过a标签可以实现跳转 --
a hrefhttps://www.tmall.com/ targethello点击跳转到天猫商城/a!-- bilibili分享视频的内联框架嵌入代码 --
!--iframe src//player.bilibili.com/player.html?aid55631961bvidBV1x4411V75Ccid97257967page11 --
!-- scrollingno border0 frameborderno framespacing0 allowfullscreentrue--
!--/iframe--/body
/html打开浏览器查看网页 点击文字可以跳转到天猫官网 表单语法 下面我们通过写代码的方式来学习表单语法
!DOCTYPE html
html langen
headmeta charsetUTF-8title登陆注册/title
/head
bodyh1注册/h1!-- 表单: form
action: 表单提交的位置。可以是一个网站也可以是一个请求处理的地址
method: post/get --提交方式get方式提交: 我们可以直接在网页的URL中看到我们提交的信息。缺点: 不安全不能传输大文件优点: 效率高。post方式提交: 我们不会直接在网页的URL中看到我们提交的信息。缺点: 效率低优点: 较为安全且能够传输大文件。
--
form action1.我的第一个网页.html methodget!-- 文本输入框: input typetext --p名字: input typetext nameusername/p!-- 密码框: input typepassword --p密码: input typepassword namepwd/p!-- 提交按钮: input typesubmit / 重置按钮: input typereset --pinput typesubmitinput typereset/p
/form/body
/html打开浏览器查看网页 随便输入一下名字和密码这里我输入的名字为Clown密码为123456并点击提交。查看此时的网页 可以发现网页跳转到了我们指定的表单提交的位置即 “我的第一个网页” 。由于我们使用的表单提交方式为get方式所以我们能直接从跳转后网页的URL上看到我们刚才提交的信息很明显这是不安全的。 下面我们将表单提交方式改为post
form action1.我的第一个网页.html methodpost我们再打开浏览器查看网页 再次输入名字和密码并提交。查看此时的网页 由于这次我们使用的表单提交方式为post方式所以我们不能直接从跳转后网页的URL上看到我们提交的信息了这相对于使用get方式来说较为安全。当然由于我们并未进行任何加密操作所以我们仍然可以通过以下步骤获取到我们提交的信息具体的加密操作我们学习 JavaScript 时再详细了解 表单元素格式
属性说明type指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image和button默认为textname指定表单元素的名称value元素的初始值。type为radio时必须指定一个值size指定表单元素的初始宽度。当type为text或password时表单元素的大小以字符为单位。对于其他类型宽度以像素为单位maxlengthtype为text或password时输入的最大字符数checkedtype为radio或checkbox时指定按钮是否是被选中
下面我们在之前的代码的基础上继续添加代码来学习其他的表单元素
!DOCTYPE html
html langen
headmeta charsetUTF-8title登陆注册/title
/head
bodyh1注册/h1!-- 表单: form
action: 表单提交的位置。可以是一个网站也可以是一个请求处理的地址
method: post/get --提交方式get方式提交: 我们可以直接在网页的URL中看到我们提交的信息。缺点: 不安全不能传输大文件优点: 效率高。post方式提交: 我们不会直接在网页的URL中看到我们提交的信息。缺点: 效率低优点: 较为安全且能够传输大文件。
--
form action1.我的第一个网页.html methodget!-- 文本输入框: input typetextname: 指定表单元素的名称(每个input标签都需要一个name否则无法提交)value: 默认初始值maxlength: 最长能输入几个字符size: 文本框的长度--p名字: input typetext nameusername value张三 maxlength8 size30/p!-- 密码框: input typepassword --p密码: input typepassword namepwd/p!-- 单选框: input typeradiotyperadio时必须指定一个单选框的值(value)要想实现单选效果必须分组(name相同的就是同一个组)--p性别:input typeradio valuemale namegender checked男input typeradio valuefemale namegender女/p!-- 多选框: input typecheckbox --p爱好:input typecheckbox valuesleep namehobby睡觉input typecheckbox valuecode namehobby checked敲代码input typecheckbox valuechat namehobby聊天input typecheckbox valuegame namehobby玩游戏/p!-- 按钮:普通按钮: input typebutton图片作为提交按钮: input typeimage提交按钮: input typesubmit重置按钮: input typereset--p按钮:input typebutton value点击变长input typeimage src../resources/image/1.jpg width100px height70px/p!-- 下拉框: select列表框: option --p国家:select namecountryoption valuechina中国/optionoption valueusa美国/optionoption valueswitzerland selected瑞士/optionoption valueindia印度/option/select/p!-- 文本域: textareacols: 列数rows: 行数--p反馈textarea nametextarea cols50 rows10文本内容/textarea/p!-- 文件域: input typefile --pinput typefile namefilesinput typebutton value上传/p!-- 带验证的邮箱输入框: input typeemail --p邮箱:input typeemail nameemail/p!-- 带验证的URL地址输入框: input typeurl --pURL:input typeurl nameurl/p!-- 带验证的数字输入框: input typenumbermax: 允许的最大值min: 允许的最小值step: 步长--p商品数量:input typenumber namenum max100 min0 step1/p!-- 滑块: input typerange --p音量:input typerange namevoice max100 min0 step2/p!-- 搜索框: --p搜索: input typesearch namesearch/ppinput typesubmitinput typereset value清空表单/p
/form/body
/html打开浏览器查看网页 表单的应用 隐藏域 hidden 只读 readonly 禁用 disabled 我们在上面代码的基础上再次进行修改 让名字的文本输入框变为只读不可修改 !-- 只读: readonly --
p名字: input typetext nameusername valueadmin readonly/p让密码的输入框隐藏不可见 !-- 隐藏: hidden --
p密码: input typepassword namepwd value123456 hidden/p让性别的单选框禁用选项女只能选择男 !-- 禁用: disabled --
input typeradio valuefemale namegender disabled女补充 label在最后再添加一个文本输入框使鼠标点击输入框左侧的文字时能自动锁定到右侧的输入框 !-- 增强鼠标可用性: label --
label formark点我可自动锁定右侧输入框/label
input typetext idmark打开浏览器查看网页 上述应用全都正常实现。
表单初级验证 为什么要进行表单验证 降低服务器开销使用户填写更高效保证数据的安全性 常用方式 用户提示 placeholder非空判断 required正则表达式 pattern 常用正则表达式点此查看 我们在上面代码的基础上再次进行修改 设置名字右侧的文本输入框中的提示信息且设置其不能为空 !-- 提示信息: placeholder / 非空判断: required --
p名字: input typetext nameusername placeholder请输入用户名 required/p使用正则表达式自定义一个带验证的邮箱 !-- 正则表达式: pattern --
p自定义邮箱input typetext namediymail pattern^\w([-.]\w)*\w([-.]\w)*\.\w([-.]\w)*$
/p打开浏览器查看网页
