跨平台开发 H5 学习第一天 - 登录页面设计

一个具体功能的完整的网页，一般由3个部分组成

1.HTML

网页的具体内容和结构

2.css

网页的样式

3.JavaScript

网页的交互效果，比如对用户鼠标事件作出响应

---

HTML5新增标签
HTML5新增了27个标签元素，废弃了16个标签，主要包括结构性标签，级块性标签，行内语义性标签，交互性标签

1.结构性标签

负责web上下文结构的定义，确保html文档，包含：

* article 文章主体内容（一篇博客，一篇论坛帖子，一段用户评论，插件）
* header 标记头部区域内容
* footer 标记脚部区域内容
* section 区域章节表述
* nav 菜单导航，链接导航

2.块级性标签

完成web页面区域的划分，确保内容的有效分隔，包含

* aside 注记，贴士，侧栏，摘要，插入的引用作为补充主体的内容
* figure 对多个元素组合并展开的元素，常与figcation联合使用
* code 表示一段代码块
* dialog 人与人之间对话，包含dt和dd两个组合元素（dt 用于表示说话者，dd用于表示说话着的内容）

3.行行语义行标签

完成web页面具体内容的引用和表述，丰富展示内容，包含

* meter 特定范围内的数值，如工资，数量，百分比
* time 时间值
* progress 进度条，可用max，min，step进行控制，完成对进度的表示和监听
* video 视频元素，用于视频播放，支持缓冲预加载和多种视频媒体格式
* audio 音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式

4.交互性标签

功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包含：

* details 表达一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
* datagrid 控制客户端数据与显示，可用于动态脚本及时更行
* menu 用于交互菜单
* command 用来处理命令按钮

简单登录页面

    
    
    
    
    



    

        

            
数据采集
        
        

            

                
                
            
            

                
                
            
            

                记住密码
                注册登陆
            
            

                登陆
            
        
    
    
    

图效果

登录页面.png

说明

图标采用的是mui-icon，跳转和提示功能采用方式的mui，使用时需导入mui.min.css和mui.min.js