H5 制作部分网站页面

第三章 表单

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

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

代码释义：
视频元素：
其中：
        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

多行文本域：                iG夺冠
           

可写文本域

       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制作的网页，谨记！！！
暂时不能随便跳转你想要的网页 ( 起码暂时不能 ！！！)所以想要实现更厉害的操作，就要好好学习，慢慢来，后面一定会更加有趣！！！

三、 课后作业制作：

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

    
    




电子邮箱:

会员登录名:

密码:

再次输入密码:

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

验证码:
    
    
    看不清？换一张



      欢迎阅读阿里巴巴公司（阿里巴巴）服务条款协议(下称"本协议")，您应当在使用服务之前认真阅读本协议全部内容，且对本协议中加粗字体显示的内容，阿里巴巴督促您应重点阅读。本协议阐述之条款和条件适用于您使用阿里巴巴中文网站（所涉域名为：Alibaba.com.cn、alibaba.cn、1688.com，下同），所提供的在全球企业间(B-TO-B)电子市场(e-market)中进行贸易和交流的各种工具和服务(下称"服务")。

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

阿里巴巴会员注册页面

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

拉克丝-大元素使

古力娜扎

OK！OK！OK！明天见！！！