南京网站制作公司

当前位置: 网站首页 - 新闻动态 - 安优观点 -

H5 制作部分网站页面

发布时间:2024-08-23

来源:

第三章 表单

主要内容:制作简单的网页,实现简单的页面跳转

网页中有很多视频和音频,简单实现方式如下:
将所需要的视频、音频与代码放在同一文件夹下,


代码释义:
视频元素:
其中:
        controls:提供播放、暂停和音量的控件。
        autoplay:自动播放(部分浏览器不支持自动播放,详情可自行百度,我所了解到的一些小情况)
        网址(https://www.cnbeta.com/articles/soft/652127.htm)所见!!!
音频元素:
        controls:提供播放、暂停和音量的控件
页面结构:
网页主要包含三个部分
       header:标题头部区域的内容(用于页面或页面中的一块区域)
       section:Web页面中的一块独立区域
       footer:标记脚部区域的内容(用于整个页面或页面的一块区域)
页面中的区域又分为三个部分:
       article:独立的文章内容
       aside:相关内容或应用(常用于侧边栏)
       nav:导航类辅助内容

今天的主要内容表单等网页的制作:
一、 表单语法:
  • 1.文本框:
文本框:账号:
账号
  • 2.密码框:
密码框:密码:
密码

属性:
       type:表单类型
       size:指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位
       maxlength:type为text 或 password 时,输入的最大字符数

  • 3.单选按钮:
单选按钮:性别:
性别

       注意:
       相互排斥的单选按钮name必须一致才能达到效果
       checked:默认选择一个单选按钮

  • 4
复选框: 爱好: 运动 聊天 玩游戏
爱好

       checked:默认选择一个选项

  • 5
       下拉列表框:月份
       
月份

       selected=selected:页面加载时默认选择的一项

  • 6
多行文本域:
可写文本域

       cols:显示的行数
       rows:显示的列数

  • 7
文件域:
选择文本域
  • 8
邮箱:
          
          
邮箱

       带有自动验证输入的邮箱格式功能。

  • 9
数字:
数字

       只能输入数字,且可滚动加减。

  • 10
滑块:
滑块

       max:最大值
       min:最小值
       step:合法的间隔数

  • 11
隐藏域:
       
       
隐藏域

       readonly:只读
       disabled:禁用

  • 12
搜索框:
搜索框
  • 13
重置按钮:重置:
重置
  • 14
图片按钮:图片:
图片按钮
  • 15
普通按钮:提交:
普通按钮
二、 网页跳转:

1-15个表单都掌握后,就可以制作简单的网页,网页制作完成后,就要去实现简单的网站页面跳转,就像你注册QQ号一样,填完所需要的资料,点击申请就要进入下一个新的页面。

这主要就是

······网页制作过程例如上面1-15个表单的内容一样······

的功劳了其中:
       method 属性规定如何发送表单数据(表单数据发送到 action 属性所规定的页面)。
表单数据可以作为 url 变量(method="get")或者 http post (method="post")的方式来发送。
       action"程序"指明提交保单后执行的程序URL地址,也就是按回车或者点提交以后打开的网页,可以是任何存在的网页地址(抱歉!目前我们所学的知识还不可以!)。
       在action后加上你制作的网站的名称,就可以实现简单的网页跳转,要实现复杂的网页跳转,还是有待学习啊!!!
网页跳转代码如下:

账号:

密码:

性别:

爱好: 运动 聊天 玩游戏

噢!!!对了,所谓的简单网页跳转,并不是跳转随便一个网页,而是跳转到你用HTML5制作的网页,谨记!!!
暂时不能随便跳转你想要的网页 ( 起码暂时不能 !!!)所以想要实现更厉害的操作,就要好好学习,慢慢来,后面一定会更加有趣!!!

三、 课后作业制作:

阿里巴巴会员注册页面:
代码内容如下:
所需照片导入与此代码保存文件夹相同的位置




    
    



电子邮箱:

会员登录名:

密码:

再次输入密码:

会员身份: 买家 卖家 两者都是




网页制作结果如下图所示:

阿里巴巴会员注册页面

有意思吧!!!好玩吧!!!
行了,行了,今天就这样吧!!!
看代码也看累了,来个美图养养眼。

拉克丝-大元素使
古力娜扎

OK!OK!OK!明天见!!!

策略思维与细节的完美结合,有效帮您减少试错成本

策略思维与细节的完美结合,有效帮您减少试错成本

立即与安优联系,开启网站设计全新体验

立即与安优联系,开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

立即与安优联系
开启网站设计全新体验

在线咨询

在线咨询

拨打电话

返回顶部

品质设计 用心服务

  • 12年+定制经验

  • 600+客户选择

  • 高效售后保障

7*24小时服务热线