html中所有的标记语言,html 标记语言组成和常用元素介绍

HTML 标记语言组成

一、HTML 标记语言中标签和元素介绍

标签(tag):两个成对的尖括号以及其中的所有字符。如

、,标签分为起始标签和结束标签。

元素(element):一对标签和其中包含的内容统。如

hello world。

元素特性:特性用于对附带它们的元素进行补充说明。组成部分为-名称和值。如 baidu 特性href的值为“baidu.com”。

二、元素特性组

大多数XHTML 元素可以附带的特性,主要分为3个特性组:

核心特性:class、id和title特性。

国际化特性:dir\lang 和xml:lang

UI事件:与事件关联的特性:onclick,ondoubleclick等

2.1、元素特性分组补充

其中核心特性和国际化特性组合称为基础特性。

id 特性:唯一标识页面内的任何元素。

class 特性:指定某个元素属于哪一类元素。

dir 特性:指定文本在浏览器中显示的方向。

lang 特性:指示文档中使用的主要语言。

三、html 基本标签分类列表

标题的6个等级:h1、h2、h3、h4、h5、h6

预先格式化的一节:pre

换行:br

地址:address

表示元素:b、i、u、s、tt、sup、sub、strike、big、small、hr

短语元素:em、strong、abbr、acronym、dfn、blockquote、q、cite、code、kbd、var、samp、address

列表:ul、li、li、ol、dl、dt、dd

编辑元素:ins、del

分组元素:div、span

段落:p

常用 HTML 标记语言介绍

html 页面编写过程中有一些元素需要特别注意使用方法。

一、!DOCTYPE 声明

此声明必须在html文档的第一行,位于html标签之前

此声明不是 HTML 标签;它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。

在 HTML 4.01 中, 声明引用 DTD,因为 HTML 4.01 基于 SGML。DTD 规定了标记语言的规则,这样浏览器才能正确地呈现内容。

HTML5 不基于 SGML,所以不需要引用 DTD。声明的写法

二、head 标签

所有头部元素的容器;可包含脚本,指示浏览器在何处可以找到样式表,提供元信息,等等。

包括的标签:title、base、link、meta、script和style 。

三、title 标签

定义文档的标题。

四、base 标签

为页面上的所有链接规定默认地址或默认目标(target)

默认地址:页面链接使用相对地址

默认目标:控制页面打开方式

五、link 标签

定义文档与外部资源的关系。常用于链接样式表

href

规定被链接文档的位置

type

规定被链接文档的 MIME 类型

rel

规定当前文档与被链接文档之间的关系

rel:stylesheet

文档的外部样式表

rel:start

集合中的第一个文档

rel:next

集合中的下一个文档

rel:prev

集合中的上一个文档

rel:icon

图标favicon.ico

rel:profile

链接标识的映射关系

rel:alternate

提供链接到文档的替代版本

rel:index

文档的索引

六、meta 标签

元数据(metadata)是关于数据的信息

meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

charset

页面的编码格式

content

与 http-equiv 或 name 属性相关的元信息

http-equiv

把 content 属性关联到 HTTP 头部

http-equiv:refresh

定义文档自行刷新的时间间隔

http-equiv:content-type

指定文档的字符编码

name

把 content 属性关联到一个名称。

name:author

作者

name:description

描述

name:keywords

关键词

name:viewport

控制视口(用户的网页可见区域)

七、style 标签

为 HTML 文档定义样式信息。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
详尽的前端笔记,包含html和css部分,由xmind8做的笔记。css部分:编写的位置 1.内联样式 将样式编写到标签的style属性 <p style="color:red;"></p> 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用 2.内部样式表 将样式表编写到head的style标签 <style type="text/css"></style> 使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件,然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表,可以在不同的页面使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式 编写的位置 1.内联样式 将样式编写到标签的style属性 <p style="color:red;"></p> 这种样式只会对当前标签起作用,不能对样式进行复用,不方便后期维护,不推荐使用 2.内部样式表 将样式表编写到head的style标签 <style type="text/css"></style> 使用内部样式表,进一步将表现和结构分离,可以同时为多个元素设置样式,方便后期的维护 3.外部样式表 将样式表编写到外部的CSS文件,然后通过link标签将外部文件引入 <link rel="stylesheet" type="text/css" href="文件的路径"/> 将样式编写到外部样式表,可以在不同的页面使用同一个样式表,完全将表现和结构分离,方便后期的维护,推荐使用的方式 基本语法 选择器 通过选择器可以选页面的一组元素,然后为其设置样式 元素选择器 根据标签名,选页面的指定元素 语法标签名{ } 例子: div{} p{} h1{} id选择器 根据元素的id属性值选一个唯一的元素 语法:#id {} 例子: #box1{} #hello{} 类选择器 根据元素的class属性值,选一组元素 语法:.class{} 例子: .hello{} .box{} 通配选择器 选页面的所有元素 语法:*{} 通配选择器的性能比较差,尽量避免使用 并集选择器 可以同时选符合多个选择器的元素 语法:选择器1,选择器2,选择器N{} 例子: div,p,#box,.hello{} 交集选择器 可以选满足多个条件的元素 语法:选择器1选择器2选择器N{} 例子:p.hello{} 后代元素选择器 选指定元素的指定后代元素 语法:祖先元素 后代元素{} 例子: div span {} div p{} 子元素选择器 选指定元素的指定子元素 语法:父元素 > 子元素 {} 例子: div > span {} div > p{} 声明块 声明块实际上就是一个一个CSS声明 声明 每一个CSS声明都是一个样式,实际上就是一个名值对的结构 名和值之间使用:链接 :左边是样式的名字 :右边是样式的值 每一个声明以;结尾 例子 color:red; font-size:20px; 元素之间的关系 父元素 直接包含子元素的的元素叫做父元素元素 直接被父元素包含的元素叫做子元素 祖先元素 直接或间接包含后代元素元素叫做祖先元素,父元素也是祖先元素 后代元素 直接或间接被祖先元素包含的元素叫后代元素,子元素也是后代元素 兄弟元素 拥有相同父元素元素叫做兄弟元素元素和内联元素元素元素会独占页面的一行,无论他的内容的多少 一般使用元素对页面进行布局 常见的块元素 div p h1~h6 内联元素 内联元素只占用自身的大小,不会独占一行 内联元素也叫行内元素(inline) 一般内联元素都是用来为文本来设置效果 常见的内联 span a img 包裹规则 一般都是使用元素去包裹内联元素,而不会使用内联去包裹块元素 a元素可以包含任意元素,除了a本身 p元素不能包含任何块元素 伪类和伪元素 伪类和伪元素用来表示元素所处的一个特殊的状态,或者是一个特殊的位置 :link 表示一个普通的链接(未访问过的链接) :visited 表示访问过的链接 :hover 鼠标移入的链接,也可以为其他元素设置hover :active 正在被点击的链接,也可以为其他元素设置active :focus 表示元素获取焦点的状态,一般用于文本框 ::selection 表示内容被选的状态 在火狐使用::-moz-selection来代替 :first-letter 表示第一个字符 :first-line 表示文字的第一行 :before 选元素的最前边 一般该伪类都会结合content一起使用,通过content可以向指定位置添加内容 :after 选元素的最后边 一般该伪类都会结合content一起使用,通过content可以向指定位置添加内容 属性选择器 根据元素的属性选择指定元素 [属性名] 选取含有指定属性的元素 [属性名="属性值"] 选取属性值等于指定值的元素 [属性名^="属性值"] 选取属性值以指定内容开头的元素 [属性名$="属性值"] 选取属性值以指定内容结尾的元素 [属性名*="属性值"] 选取属性值包含指定内容元素 兄弟元素选择器 选取后一个兄弟元素 前一个 + 后一个 选取后边所有的兄弟元素 前一个 ~ 后边所有 子元素的伪类 :first-child 寻找父元素的第一个子元素,在所有的子元素排序 :last-child 寻找父元素的最后一个子元素,在所有的子元素排序 :nth-child 寻找父元素的指定位置子元素,在所有的子元素排序 例子 p:nth-child(3) 可以使用even,来找到偶数的子元素 可以使用odd,来找到奇数的子元素 :first-of-type 寻找指定类型的第一个子元素 :last-of-type 寻找指定类型的最后一个子元素 :nth-of-type 寻找指定类型的指定子元素 否定伪类 从一组元素将符合要求的元素剔除出去 语法: :not(选择器) 例子: .abc:not(div) HTML,超文本标记语言 负责页面的结构,定义出页面的各个组成部分 HTML是采用纯文本的形式的编写,采用HTML标签来标识出页面的不同部分 标签 成对出现 <标签名></标签名> 自结束标签 <标签名 /> 属性 通过属性可以设置标签的效果 属性需要定义在开始标签或这自结束标签 属性实际上是一组一组名值对结构 例子: <标签名 属性名="属性值" 属性名="属性值"></标签名> <标签名 属性名="属性值" 属性名="属性值" /> HTML页面的基本结构 常用标签 <html> 网页的根标签 一个页面有且只有一个根标签 网页的所有内容都需要写在html标签的内部 <head> 网页的头部 该标签内容不会在网页直接显示 该标签用于帮助浏览器解析页面 子标签 <title> 用来设置网页的标题 默认会在浏览器的标题栏显示 搜索引擎检索网页时,会主要检索title内容,它会影响到页面在搜索引擎的排名 <meta> 用来设置网页的元数据,比如网页使用的字符集 <meta charset="utf-8" /> 设置网页的关键字 <meta name="keywords" content="关键字,关键字,关键字,关键字"/> 设置网页的描述 <meta name="description" content="网页的描述"/> 请求的重定向 <meta http-equiv="refresh" content="秒数;url=地址" /> <body> 网页的主体 网页所有的可见部分都需要在body编写 <h1> ~ <h6> 标题标签html一共有六级标题 六级标题,h1最重要,h6最不重要,一般页面只会使用h1~h3 h1的重要性仅次于title,浏览器也会主要检索h1内容,以判断页面的主要内容 一般一个页面只能写一个h1 <p> 段落标签 <br /> 换行标签 <hr /> 水平线标签 内联框架 可以向一个页面引入其他的外部页面 <iframe></iframe> 属性 src 外部页面的地址,可以使用相对路径 width和height 可以设置框架的宽度和高度 name 可以为内联框架指定一个名字 可以将该属性值设置为超链接的target属性的值 这样当点击超链接时,页面将会在相应的内联框架打开 内联框架内容不会被搜索引擎所检索,所以开发尽量不要使用内联框架 超链接 可以使当前页面跳转到其他的页面 <a>链接的文字</a> 属性 href 指向链接跳转的目标地址,可以是一个相对路径 还可以是#id属性值,这样当点击超链接以后,将会跳转到当前页面的指定位置 可以使用mailto:来创建一个发送电子邮件的超链接 target 指定在哪个窗口打开链接 可选值 _self 默认值,默认在当前窗口打开链接 _blank 在新窗口打开链接 内联框架的name属性值 在指定的内联框架打开链接 注释 语法 <!-- 注释内容 --> 注释内容不会在页面显示,但是会在源码显示,我们可以通过注释来说明网页的代码 也可以通过注释隐藏一些页面不想显示的内容 实体 在HTML页面一些特殊符号是不能直接使用,需要使用实体来代替这些特殊符号 实体也可以称为转义字符 实体的语法 &实体名; 常用的实体 空格   < < > > 版权符号 © 图片标签 <img /> 使用图片标签可以向页面引入一个外部图片 属性 src 指向一个外部图片的路径,可以使用相对路径 alt 指定一个在图片无法加载时对图片的描述 搜索引擎主要通过该属性来识别图片的内容 如果不写该属性则搜索引擎会对图片进行收录 width 设置图片的宽度 height 设置图片的高度 图片的格式 JPEG 颜色丰富的图片,如,照片 GIF 颜色单一,简单透明的图片,动态图 PNG 颜色丰富,复杂透明的图片 图片选择的原则 效果一致,用小的 效果不一致,用效果好的 相对路径 相对于当前资源所在的目录的路径 可以使用../返回一级目录,返回几级使用几个../ xHtml语法规范 1.HTML不区分大小写,但是尽量使用小写 2.HTML的注释不能嵌套 3.标签必须结构完整 要么成对出现 要么自结束标签 4.标签可以嵌套但是不能交叉嵌套 5.属性必须有值,且值必须加引号,单引号双引号都可以 文本标签 <em> 表示语气上的强调 <strong> 表示内容的重要性 <i> 表示单纯的斜体 <b> 表示单纯的加粗 <small> 表示细则一类的内容 <cite> 表示参考的内容,凡是加书名号的都可以使用cite <q> 短引用,行内引用 <blockquote> 长引用,块级引用 <sup> 上标 <sub> 下标 <del> 删除的内容 <ins> 插入的内容 <pre> 预格式标签,可以保留代码空格换行这些格式 <code> 表示程序代码 列表 无序列表 使用ul来创建一个无序列表,在列表使用li来表示一个列表项 无序列表使用符号作为项目符号 有序列表 使用ol来创建一个无序列表,在列表使用li来表示一个列表项 使用有序的序号作为项目符号 定义列表 列表相关的元素都是块元素,他们之间可以互相嵌套 去除项目符号 list-style:none
目录 第一章:Java开始 1 学习目标 1 Java历史 2 Java技术概述 3 Java技术的优点 3 Java虚拟机 4 类加载器 6 Windows环境变量 8 内容总结 13 独立实践 14 第二章: 面向对象概述 15 学习目标 15 面向对象(Object Oriented) 16 面向对象的主要特性 18 抽象(Abstraction) 18 封装(Encapsulation): 19 多态(Polymorphism) 20 面向对象的优点 22 面向对象的分析、设计和编程 23 面向对象语言的发展简史 26 内容总结 29 独立实践 30 第三章:面向对象的程序设计 31 学习目标 31 类和对象的描述 32 声明类 32 声明属性 33 声明成员方法 34 源文件的布局 36 包的声明 36 包与目录的布局 38 内容总结 45 独立实践 46 第四章: Java语法基础 47 学习目标 47 基本语法元素 48 Java关键字 49 基本Java数据类型 50 变量声明和赋值 52 引用(Reference)类型 52 存储器分配和布局 53 this引用 55 Java编码约定 56 运算符的优先级 58 升级和表达式的类型转换 62 独立实践 70 第五章:数组 71 学习目标 71 数组的描述 72 创建数组 72 多维数组 78 拷贝数组 80 内容总结 83 独立实践 84 第六章:继承 86 学习目标: 86 单继承(single inheritance) 87 访问控制 89 方法重载(method overloading) 91 方法覆盖(method overriding) 93 基于继承的多态实现 94 隐藏(hiding) 95 构造方法在继承使用 96 super关键字 97 包装类 97 toString( )方法 100 内容总结 101 独立实践 102 第七章:类的高级特征 103 学习目标 103 static关键字 104 final关键字 106 内部类 106 实例分析 110 抽象类,接口 115 内容总结 120 独立实践 121 第八章:异常 122 学习目标 122 异常的概念 123 异常的分类 123 实例分析 124 自定义异常 126 方法覆盖和异常 127 内容总结 129 第九章:基于文本的应用 131 学习目标 131 程序交互的几种方式 132 常用类方法说明 132 String的方法 132 正则表示式(Regular expression) 133 StringBuffer类 135 StringBuffer与String的区别 136 集合类的使用 136 实例分析 136 内容总结 153 独立实践 154 第十章:JAVA GUI概述 155 学习目标 155 GUI概述及组成 156 Swing优点 157 布局管理器 158 BorderLayout 159 GridLayout 161 CardLayout 162 GridBagLayout 164 实例分析 165 内容总结 172 独立实践 173 第十一章 线程 174 学习目标 174 线程的概念 175 线程状态和调度 ….176 线程断/恢复的几种方式 178 创建线程的两种方式 179 线程的控制 180 实例分析 182 内容总结 189 独立实践 190 第十二章:高级I/O流 192 学习目标 192 I/O基础知识 193 字节流 193 字符流 194 节点流 194 过程流 194 基本字符流类 198 对象串行化 201 实例分析 203 内容总结 211 独立实践 212 第十三章:网络 213 学习目标 213 TCP/IP协议模型 214 基于Java的网络技术 216 DatagramSocket 219 InetAddress类的使用 221 扩展知识: 227 SocketChannel类 227 内容总结 229 独立实践 230 第十四章:数据结构与算法(上) 231 学习目标 231 算法(algorithm): 232 查找算法: 234 排序算法: 237 递归(recursive): 240 快速排序: 242 内容总结 245 独立实践 246 第十五章:数据结构与算法(下) 247 学习目标 247 数据结构介绍: 248 数组 248 逻辑大小和物理大小 248 链表 248 栈(stack) 249 队列: 250 树: 250 实例分析 252 内容总结 274 独立实践 275 第十六章:数据库(一) 276 学习目标 276 数据库的基本概念 277 数据的描述 277 数据联系的描述 278 数据模型 278 数据库三级模式结构 279 数据库三个范式 280 范式总结 282 创建数据库 283 创建表 287 内容总结 290 独立实践 291 第十七章: 数据库(二) 292 学习目标: 292 查询(从基本到高级) 293 模糊查询 293 排序 295 集合操作-并 296 集合操作-交 297 集合操作-差 297 常用函数 297 数据类型转换函数CAST和CONVERT 298 分组查询 299 五大约束 301 索引 303 数据库的备份与恢复 304 内容总结 308 独立实践 309 第十八章:数据库(三) 310 学习目标: 310 存储过程 311 触发器 313 函数 314 规则 314 事务 315 while语句 317 case语句 317 内容总结: 318 独立实践 319 第十九章: JDBC基础 320 学习目标 320 JDBC的概念 321 连接数据库的几种方式 321 JAVA编程语言和JDBC 323 JDBC编程的步骤 323 实例分析 325 内容总结 335 独立实践 336 第二十章:高级JDBC 337 学习目标 337 使用DDL,DML语言对数据库进行基本操作 338 查询数据库里的数据 339 预编译语句(PreparedStatement) 340 使用事务 341 事务的级别控制 343 使用存储过程 345 操作元数据 347 ResultSetMetaData(结果集元数据) 349 可滚动的和可更新的结果集 350 批处理更新 354 二进制大对象BLOB 357 RowSet 新特性 359 JdbcRowSet 360 FilteredRowSet 361 内容总结 363 独立实践 364 第二十一章:XML基础 366 学习目标 366 XML的概念 367 定义XML文档 368 命名冲突 371 使用前缀解决命名冲突问题 371 使用命名空间 371 命名空间属性 372 统一资源标识符 372 默认的命名空间 372 使用命名空间 373 XML 文档规则 374 XML Schema 379 Schema和DTD的区别: 380 Schema的数据类型 380 样式表(XSL) 384 CSS样式表 384 XSL样式表 385 XSL的基本结构 386 XSL的基本语法 390 节点选择语句<xsl:value-of > 392 循环判断语句<xsl:for-each> 392 条件判断语句<xsl:if> 392 内容总结 395 独立实践 395 第二十二章:使用Java解析XML 397 学习目标 397 解析器的介绍 398 DOM以及广义的基于树的处理具有几个优点 399 文档对象模型(DOM)解析实例 402 DOM对象 404 DOM解析的例子: 406 SAX解析实例 409 DOM4J解析实例 412 JDOM解析实例 413 JAVA操纵XML 实例讲解 414 通过JAVA写数据到XML里面 415 内容总结 418 独立实践 418 第二十三章:HTML基础 419 学习目标 419 知识要点 420 HTML元素 420 标签属性 420 HTML基本标签 422 标题元素 422 HTML格式 427 HTML实体 431 不可拆分的空格 431 HTML表格 439 表格 441 HTML列表 461 HTML图像 469 Img标签和src属性 469 HTML背景 475 内容总结 478 独立实践 479 第二十四章:HTML进阶 480 学习目标 480 知识要点 481 表单 481 HTML框架 488 框架 488 在子窗体访问并控制父窗体对象 493 内容总结 495 独立实践 496 第二十五章:JavaScript介绍 497 学习目标 497 JavaScript语言概况 498 JavaScript和Java的区别 499 基于对象和面向对象 499 解释和编译 499 强变量和弱变量 500 静态联编和动态联编 500 实例 500 内容总结 503 独立实践 504 第二十六章:JavaScript基础 505 学习目标 505 基本结构 506 JavaScript代码的加入 506 基本数据类型 506 常量 507 表达式和运算符 509 实例 511 JavaScript程序构成 513 事件驱动及事件处理 516 内容总结 519 独立实践 520 第二十七章:JavaScript进阶 521 学习目标 521 基于对象的JavaScript语言 522 对象的基础知识 522 this关键词 523 new运算符 523 常用对象的属性和方法 525 算术函数的math对象 527 创建新对象 529 JavaScript的数组 532 实例 535 文档对象功能及其作用 538 document三个主要的对象 539 文档对象的基本元素 541 窗口及输入输出 544 输出流及文档对象 546 简单的输入、输出例子 547 内容总结 551 独立实践 552 第二十八章: Servlet 553 学习目标 553 Java Servlet概述 554 Servlet能够做什么 554 Servlet的生命周期 557 Java Servlet API 560 Web上使用的HTTP Servlet 560 处理HTTP Servlet的关键方法 560 其它相关接口的说明 561 HTTP协议基本概念及其特点 563 获取Cookie 565 HTTP响应报头--Response 566 会话管理 566 Servlet过滤器 569 Servlet监听器 576 内容总结 579 独立实践 580 第二十九章: Jsp 技术 583 学习目标 583 JSP介绍 584 JSP语法 584 模板元素 588 指令元素 588 页面指令 588 标签库指令 593 脚本元素 593 动作元素 597 <jsp:include> 598 JSP内置对象 605 Session和Application对象 610 JSP的汉字问题的原理 611 自定义标签 613 标准标签使用 618 内容总结 621 独立实战 622 第三十章:struts入门 623 学习目标 623 Struts简介 624 什么是应用框架 624 WEB框架所要解决的问题 625 建立简单的Struts应用 627 内容总结 636 独立实践 636 第三十一章:Struts基础 637 学习目标 637 MVC 638 struts框架的优势 639 Struts如何实现Model 2, MVC 639 Struts 控制流 639 Struts framework的工作原理和组件 642 Struts ActionServlet控制器对象 642 Struts Action Classes 642 搞定Action对象 643 处理异常 643 Action的分类 643 Struts Action Mapping 646 使用ActionForward导航 647 Struts ActionForm Bean捕获表单数据 648 ActionForm的处理流程 649 Struts的其他组件 652 内容总结 653 独立实践 653 第三十二章:配置Struts组件 654 学习目标 654 三个 XML文件和一个属性文件 655 Web应用部署描述符 web.xml 655 ActionServlet的参数的配置 656 应用资源文件 658 Ant构建文件 659 配置Tiles框架 660 内容总结 661 独立实践 661 第三十三章:Struts标记库 662 学习目标 662 Struts标记库taglib介绍 663 Bean标记 663 逻辑标记 665 转发和重定向标记 668 HTML标记 669 显示错误信息的标记 673 其他HTML标记 673 模板标记 673 内容总结 676 独立实践 676 第三十四章:Hibernate基础 677 学习目标 677 Hibernate简介 678 建立简单的Hibernate应用 678 通过 Hibernate API 操纵数据库 684 Hibernate的初始化 687 访问Hibernate的Session接口 688 Hibernate工作原理图 691 内容总结 693 独立实践 693 第三十五章: 映射继承关系 694 学习目标 694 域模型关系 695 继承关系树的每个具体类对应一个表 696 创建映射文件 696 操纵持久化对象 698 选择继承关系的映射方式 699 映射多对一多态关联 702 内容总结 705 独立实践 705 第三十六章:HQL介绍 706 学习目标 706 HQL的出现 707 进入HQL世界 707 聚合 708 分组 709 在Java使用HQL 709 内容总结 712 独立实践 712 第三十七章 Spring介绍 713 学习目标 713 Spring简介 714 IOC控制反转 714 Spring的容器 715 AOP面向切面编程 715 AOP的专业术语 715 Spring事务管理 718 Spring与Struts整合 719 Spring与Hibernate整合 721 独立实践 724
HTML + JavaScript + Ajax + CSS 赵旭 [email protected] HTML5 1、WEB基础知识(了解) 1、Internet - 网 由若干台电脑、手机、平板 通过 网线(WIFI) 连接起来的结构 2、基于Internet上的程序 1、C / S 结构 Client / Server 特点:必须通过指定的客户端软件才能访问服务器端的一种程序 :如 :桌面版QQ,... ... 2、B / S 结构 Browser / Server Browser :浏览器 特点:通过 浏览器 就能访问服务器端的一种程序 如 :网页版百度,网页版 QQ,网页版 京东,... ... 3、WEB 1、什么是WEB WEB,是基于Internet上的一种应用程序(网页应用程序) WEB页面,简称WEB页(网页),就是保存在服务器端上的一个具体的页面( **.html / **.htm 作为结尾的文件) 2、WEB浏览器 1、功能 1、提交用户请求 (UA : User Agent) 2、作为HTML 以及 脚本执行的 解释器 3、以图形化的方式显示web页面 2、主要浏览器产品 1、Microsoft Internet Explorer (IE) 2、Mozilla Firefox 3、Google Chrome 4、Apple Safari 5、Opera Opera(欧朋) 3、主要技术 1、HTML 2、CSS 3、Javascript 2、HTML入门(重点) 1、什么是HTML Hyper Text Markup Language 超级 文本 标记 语言 超文本 :也是文本,但会具备特殊功能 普通文本 a : 普通字符 a 超文本 a : 表示超链接 普通文本 b : 普通字符 b 超文本 b : 加粗显示文本 标记 :超文本的表现形式 普通文本 a : a 超文本 a : 语言 :具备一定的语法规范 HTML 也具备自己的语法规范 WEB页面(HTML页面)就是由 HTML 语言来进行开发的 ,以 .html 或 .htm 进行结尾的文件 开发 & 运行网页的工具: 1、记事本 2、浏览器 2、HTML 的基础语法 1、标记语法 HTML用于描述功能的符号称为"标记" 标记使用时,用尖括号 "",标记的分类 1、封闭类型的标记 也称为 "双标记" , 必须成对出现 语法内容 Demo : 1、创建 p 标记 --... 2、创建 div 标记 -- 3、创建 header 标记 -- <header></header> 2、非封闭类型的标记 也称为 "单标记" 语法: 或 Demo : 1、创建 br 标记 -- 2、创建 hr 标记 -- 3、创建 img 标记 -- 4、创建 input 标记 -- <input/> 2、标记(元素)的嵌套 在一对标记,允许出现另外一对(一个)标记 注意:嵌套标记的书写格式 -- 被嵌套的标记要通过一个 缩进键(Tab) 来表示层级关系 Demo : 1、编写一对 body 标记,在body标记,嵌套一对 div标记,在 div 标记 ,嵌套一对 a 标记,在 a标记,嵌套一对 b 标记,b标记,随意编写一些文本 <body> 这是一段测试文本 </body> 3、标记的属性 1、什么是属性 用来修饰标记的效果的内容,就是属性 2、语法 1、属性必须声明在开始标记 2、属性与标记名称之间,用 空格 隔开 3、属性的值 与 属性之间 使用 "=" 连接 4、一个元素允许有多属性,多属性间,排名不分先后,间用 空格 隔开即可 Demo : 1、创建一个 div 标记 ,增加属性 ,设置 align 属性的值为 center ,设置 id 属性的值为 container,设置 title 属性的值为 这是一个div 四大标准属性: 1、id :定义元素在页面独一无二的名称 2、title :鼠标悬停在元素上时,体现的文字 3、class :引用 类选择器时使用(CSS) 4、style :定义 内联方式方式使用(CSS) 4、注释 语法:<!-- --> 注意: 1、注释不能嵌套 2、注释不能出现在标记 3、HTML 文档结构 W3C :Word Wide Web Consortium (万维网联盟) 1、HTML文档的组成 1、文档类型声明 告知浏览器当前的HTML文档用的是哪个版本 在网页的最顶端 2、由一对 html标记,来表示页面的开始与结束 Demo : 1、在 htdoc ,创建一个网页 01-first.html 文件 创建一个 记事本,将 .txt 重命名为 .html 2、搭建HTML网页结构 1、添加 文档类型声明 2、添加 html标记 2、<html> 标记 包含两对子元素 1、<head></head> 包含的子元素(2对) 1、<title>网页的标题</title> 2、<meta charset="utf-8"/> -- 能正常显示文 2、<body></body> 属性: 1、text ,取值是一个颜色值(red,green,blue...) 2、bgcolor ,取值也是一个颜色值 Demo : 在刚才的 Demo 基础上 1、在 <html> 增加 <head> 和 <body> 2、为网页指定标题 - 我的第一个HTML文档 3、指定网页的字符编码格式为 utf-8 4、在 body 输出一句话 "我的第一HTML页面" 5、设置 body text为red,bgcolor为yellow 3、文本 1、特殊文本的实现 页面的空格以及一些特殊字符需要通过转义字符的方式体现 1、  表示一个空格 2、< 表示 4、© 表示© Demo : 1、创建一个页面 02-text.html 2、在页面 输出以下内容 The element. ©2017 By Tarena The <p> element.     © By Tarena 2、文本样式相关标记 : 加粗 : 斜体 : 下划线 : 删除线 : 上标 : 下标 Demo : 这是一段包含 ,粗体,斜体,下划线,删除线,上标,下标的文本内容 将以上文本内,对应文字的特殊效果,用标记体现出来 3、标题元素 以 醒目 的方式表现出文本 语法: 一级标题 二级标题 三级标题 四级标题 五级标题 六级标题 属性: 1、align 文本的水平对齐方式 取值:left / center / right 4、段落元素 语法: 属性:align : left / center / right Demo : 1、在 02-text.html ,增加以下内容 1、用 段落标记表示 :The first paragraph 2、用 段落标记表示 :The second paragraph ,文本表现为 右对齐 5、换行元素 6、分割线元素 作用:在页面表现为一条直线 语法: 属性: 1、size 尺寸,以 px 为单位的数值 2、width 宽度,以 px 或 % 为单位的数值 3、align 水平对其方式 4、color 颜色 Demo : 02-text.html 增加一根水平线,size为5px,宽度为50%,居对齐,颜色为红色(red) 7、预格式化 作用:保留源文档的回车 和 空格 的作用 8、分区元素 1、块分区元素 语法: 作用:布局 2、行内分区元素 语法: 作用:设置同一行文字内的不同样式 9、行内元素 与 块级元素 按照元素们的表现形式来分类,分为 行内元素 和 块级元素1、行内元素 在一行内允许显示多个元素的,称为 "行内元素" span,i,b,s,u,sup,sub 作用:包裹文本,并处理文本的表现形式 2、块级元素 每个元素独占一行显示的,称为 "块级元素" div,p,h1,h2,h3,h4,h5,h6 作用:布局 注意: 1、p标记不能嵌套其它的块级元素 2、行内元素 最好 不要嵌套块级元素 4、图像 和 链接 1、URL 目录结构 : 目录 ,保存文件的文件夹名称 多个文件夹之间的关系,就是目录结构 1、什么是 URL URL (Uniform Resource Locator),统一资源定位器。用来标识某资源文件的位置 2、URL 在 WEB 的表现形式 共三种表现形式: 1、绝对路径 特点:从文件所在的最高级目录处开始查找资源文件所经过的路径,就是绝对路径 使用场合:当想访问互联网上的资源时,只能用绝对路径 完整的绝对路径分四部分: 1、协议名 http 2、域名(主机名,IP地址) www.codeboy.com 3、目录路径 img/header 4、文件名 logo.png http://www.codeboy.com/img/header/logo.png img/header/logo.png 2、相对路径(重点) 场合:使用本机文件时使用 什么是相对路径: 从当前文件位置处开始查找资源文件所经过的路径,就是相对路径 1、同目录,直接用 2、子目录,先进入 3、父目录,先返回 3、根相对路径 路径形式是以 / 作为开始的。 / : 表示的是服务器的根路径 2、图像 1、图像格式 WEB支持的图像格式 1、*.jpg 2、*.gif(动图) 3、*.png(透明) 2、图像的语法 标记: 属性: 1、src :指定要显示图像的 URL 2、width :图像的宽度 3、height :图像的高度 4、title :鼠标悬停时,要显示的文本 Demo : 1、将 学子网的 logo 下载下来 2、显示在自己的网页 3、超链接 1、语法 标记内容 属性: 1、href : 要链接的HTML页面URL 2、target : 目标,指定新网页的打开形式 取值: 1、_blank : 在新标签打开网页 2、_self : 在自身标签打开新网页(默认值) Demo 1、创建一个超链接,内容为 :学子商城,点击时,在自身标签 打开 http://www.codeboy.com 2、创建一个超链接,内容为 :学子商城的LOGO,点击时,在新标签打开 http://www.codeboy.com 2、链接的四种表现形式 1、点击操作时,完成资源下载的操作 链接的资源为 zip / rar 时则为下载操作 下载 2、电子邮件链接 联系我们 前提 : 必须在计算机安装并配置好至少一个邮件客户端的信息 3、返回页面顶部的空连接 返回顶部 4、执行Javascript代码片段 执行JS 3、锚点 1、作用 锚点用于在网页的某个位置处做个记号,允许从其他位置处跳转到记号位置处 2、使用方式 1、定义锚点 1、使用 a 标记的 name 属性允许定义锚点 xxxx 2、任何标记的 id 属性定义锚点 2、链接到锚点 链接到锚点 链接到锚点 5、表格 1、表格 1、表格的作用 按照一定的格式来显示数据的 表格是由 单元格(列),行 来组成的 2、表格的语法 1、标记 1、 : 表示一个表格 2、 : 表示表格的一行 3、 : 表行的一列(单元格) : 行/列 标题 (加粗,水平居) 4、 : 表格的标题 该元素必须添加在 之下,所有的tr之上 2、常用属性 1、table 1、width 2、height 3、align 设置表格的对齐方式 , left / center / right 4、border 边框宽度,取值以 px 为单位的数值 5、bgcolor 6、cellspacing :单元格外边距(单元格与单元格 或 单元格与表格之间的距离) 7、cellpadding : 单元格内边距(单元格与内容之间的距离) 2、tr 1、align 控制当前行内容的水平对齐方式 2、valign 控制当前行内容的垂直对齐方式 top / middle / bottom 3、bgcolor 3、td / th 1、align 2、valign 3、width 4、height 5、colspan :跨列 6、rowspan :跨行 Demo : 在 刚才的表格基础上,增加以下内容 1、为表格增加边框 1px 2、为表格增加尺寸 400 * 400 3、为表格增加单元格内边距 5px 4、为第四行 增加属性 ,内容水平居对齐 3、表格的复杂应用 1、行分组 允许将若干行划分到一个组,以便实现统一管理 1、表头行分组 允许将第一行的内容单独分到表头行分组 2、表尾行分组 允许将最后一行的内容单独分到表尾行分组 3、表主体行分组 2、不规则表格创建 通过 td 的跨行 和 跨列来实现不规则的表格 1、跨列 从指定单元格位置处开始,横向向右,合并掉几个单元格(包含自己),被合并掉的单元格,要删除 2、跨行 从指定单元格位置处开始,纵向向下,合并掉几个单元格(包含自己),被合并掉的单元格,要删除 3、表格的嵌套 被嵌套的所有的内容,只能放在 td 2、列表 1、作用 按照一定的格式显示数据 2、列表的分类 & 语法 1、列表的组成 由列表类型 以及 列表项 来组成 2、分类 & 语法 1、有序列表 --> Order List 允许包含若干列表项: --> List Item 2、无序列表 --> Unorder List 允许包含若干列表项: 3、属性 1、ol 1、type 1 、按数字方式排列,默认值 a 、按小写英文方式排列 A 、按大写英文方式排列 i 、按小写罗马数字排列 I 、按大写罗马数字排列 2、start 指定标识从 几 开始显示 2、ul 1、type 1、disc,实心圆,默认值 2、circle,空心圆 3、square,实心矩形 4、none 3、列表的嵌套 被嵌套的内容只能放在 li Demo : 1、声明一个列表在 html (有序),包含两个列表项,显示 两部小说的名字 2、在两个列表项,再各嵌套一个无序列表,各写3-4个小说的主角 3、定义列表 1、作用 以一种特殊的结构来排列数据 通常用语对一类事物/名词 的解释上面 2、语法 :声明一个定义列表 :声明要解释的事物名称 或 名词 :对上述名词或事物解释的内容 3、常用场合 图文混排 3、结构标记 1、结构标记的作用 搭建网页的结构(布局),用于替代 div,最大的优点是提升了标记的"语义性" 2、结构标记详解 1、<header></header> 作用:表示网页 或 某块内容的头部 2、 作用:表示网页的 导航内容 3、 作用:表示网页主体内容的某一部分 4、 作用:出现在文字描述性比较强的场合:一则新闻,论坛的帖子,微博信息,博客的信息 5、 作用:表示网页,或某部分内容的 边栏信息 6、 作用:表示网页尾部的信息 4、表单(难点) 1、表单的作用 用于收集用户的信息并提交给服务器 表单主体是由两部分组成的 1、表单元素 收集信息,并提交给服务器 2、表单控件 用于与用户交互的一些元素:文本框,密码框 2、表单元素(难点) 标记:<form></form> 注意:只有放在 <form></form> 里面的表单控件的值,才能提交给服务器 属性: 1、action 提交给服务器处理程序的地址 (动作) 2、method 提交方式,以什么样的方式把数据交给服务器 1、get 特点: 1、以明文的方式将数据传递给服务器(提交的数据会显示在地址栏上) 2、安全性很低 3、提交数据最大限制为 2KB 4、向服务器要数据时可以使用 2、post 特点: 1、以隐式的方式将数据传递给服务器 2、安全性很高 3、不限制提交数据的大小 4、要提交数据给服务器处理时使用 3、... ... 3、enctype 作用:指定表单数据进行编码的方式 取值: 1、application/x-www-form-urlencoded 默认值,允许将任意类型的文本提交给服务器 2、multipart/form-data 允许将文件提交给服务器 3、text/plain 不对任何数据进行编码和传输 Demo : 1、创建 05-form.html 2、声明一个表单元素 form 3、指定提交地址为 login.php,提交方式为 get,编码方式为默认 3、表单控件 表单元素分类: 1、input元素 2、textarea 多行文本域 3、select 和 option 选项框 4、其它元素 5、新input元素 详解 : 1、input元素 里面会包含若干个不同的表单控件 标记 :<input> 属性 : 1、type 根据不同的type属性值,可以创建不同的input元素 2、name 定义表单控件的名称,主要提交给服务器使用的 注意:如果不声明name属性的话,元素则无法提交给服务器 3、value 定义当前控件的值,主要提交给服务器使用的 4、disabled 禁用控件,无值的属性 <input disabled> 2、文本框 与 密码框 文本框:<input type="text"> 密码框:<input type="password"> 具备除以上四个属性外,还具备以下几个独立属性: 1、maxlength 限制输入的字符数,取值为数字 2、readonly 只读,无值属性 Q : readonly 和 disabled 的区别 1、readonly ,是只读的意思,是允许提交给服务器,不让用户改数据而已 2、disabled , 是禁用的意思,不仅不让用户改数据,而且还不能提交给服务器 3、placeholder 占位符,即默认显示在文本框用于给用户提示的文字 3、按钮 1、提交按钮 作用:将表单提交给服务器 标记:<input type="submit" value="显示的文本"> 2、重置按钮 作用:将表单恢复到初始化的状态 标记:<input type="reset" value="显示的文本"> 3、普通按钮 作用:通过 JS 自定义功能 标记:<input type="button" value="显示的文本"> 4、显示的内容 属性: 1、type :submit / reset / button 4、单选按钮 和 复选框 单选按钮:<input type="radio"> 复选框:<input type="checkbox"> 属性: 1、name 设置名称,并用于分组,一组单选按钮 或 复选框的名称必须相同 2、value 必须设置 3、checked 默认被选,无值属性 5、隐藏域 和 文件选择框 1、隐藏域 <input type="hidden" name="" value=""> 想提交给服务器,但不想给用户看的数据,可以放在隐藏域 2、文件选择框 <input type="file" name=""> 注意: 1、form的 method 属性值必须为 post 2、form的 enctype属性值必须为 multipart/form-data http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=bingbing http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fengjie&gender=1&question=0&question=1&question=2&question=3 http://localhost/02-HTML/Day02/login.php?uname=wenhua.li&upwd=fdsafdsafdsa&gender=0&question=0&question=1&question=2&question=3&uid=10000567789 1、表单 1、form ... 2、input ... 3、textarea 控件 标记:<textarea></textarea> 属性: 1、name 定义名称,提交给服务器使用 2、cols 指定文本域的列数,变相指定宽 3、rows 指定文本域的行数,变相指定高 4、readonly 只读 Demo : 创建 01-form.html 文件 创建一个 多行文本域,列数为 50,行数为 5,名称为 intro 4、选项框 1、标记 表示 下拉列表 或 滚动列表 列表内容,允许出现多个 2、属性 1、 1、name :控件的名称 2、size :默认显示选项的数量,默认为1,为下拉列表,如果取值>1的话,则为滚动列表 3、multiple 设置多选,无值的属性 2、 1、value :选项的值,提交给服务器用 2、selected :默认被选 5、其它标记 1、label 元素 作用:关联文本与表单控件的,点击文本时就如同点击表单控件一样 标记:文本 属性: 1、for 指定要关联的表单控件的ID值 2、为控件分组 分组标题 分组内容 3、浮动框架 1、作用 将其他页面导入到当前页面来 2、语法 标记:<iframe></iframe> 属性: 1、src 要引入的页面的url 2、frameborder 指定浮动框架的边框,默认为1,则显示边框 不需要边框则设置为 0 3、width 4、height 练习: 创建一个 02-iframe 的网页,将 01-form.html 页面引入进来 ,适当调整宽度,高度,边框 6、新input元素 (HTML5) 1、电子邮件类型 作用:提交时会验证数据是否符合Email的规范 标记:<input type="email"> 2、搜索类型 作用:在文本框的基础上,提供了快速清除操作 标记:<input type="search"> 3、URL类型 作用:提交时会验证数据是否符合Web站点的URL规范(绝对路径) 标记:<input type="url"> 4、电话号码类型 作用:在移动端设备,能展开 拨号键盘,在PC无效 标记:<input type="tel"> 5、数字类型 作用:只能让用户输入 或 选择数字 标记:<input type="number"> 属性: 1、min :当前控件接受的最小值 2、max :当前控件接受的最大值 3、step :微调数字时每次变化的长度,默认为1 6、范围类型 作用:提供一个滑块,让用户选择数字 标记:<input type="range"> 属性: 1、min :当前控件的最小值 2、max :当前控件的最大值 3、value :设定初始值 7、颜色类型 作用:提供一个颜色拾取控件 语法:<input type="color"> 8、日期类型 作用:提供一个日期输入控件 标记:<input type="date"> 9、周类型 作用:提供一个日期控件,用于选取周 标记:<input type="week"> 10、月份类型 作用:选取月份控件 标记:<input type="month"> =============================
工程硕士学位论文 基于Android+HTML5的移动Web项目高效开发探究 研究生姓名: 唐帅 导师姓名: 罗军舟 教授 苏生 教授 申请学位类别 工 程 硕 士 学位授予单位 东 南 大 学 工程领域名称 软 件 工 程 论文答辩日期 研究方向 Android+HTML5 学位授予日期 答辩委员会主席 评阅人 硕士学位论文 基于Android+HTML5的移动Web项目 高效开发探究 专业名称: 软件工程 研究生姓名: 唐帅 导师姓名: 罗军舟 校外导师: 苏生 THE RESEARCH OF EFFICIENT DEVELOPMENT OF MOBILE WEB PROJECTS BASED ON ANDROID AND HTML5 A Thesis Submitted to SoutheastUniversity For the Academic Degree of Master of Engineering BY Tang Shuai Supervised by Luo Junzhou and Su Sheng College of Software Engineering SoutheastUniversity February 2017 东南大学学位论文 独创性声明 本人声明所呈交的学位论文是我个人在导师指导下进行的研究工作及取得的研究成果。尽我所知,除了文特别加以标注和致谢的地方外,论文不包含其他人已经发表或撰写过的研究成果,也不包含为获得东南大学或其它教育机构的学位或证书而使用过的材料。与我一同工作的同志对本研究所做的任何贡献均已在论文作了明确的说明并表示了谢意。 研究生签名: 日期: 东南大学学位论文使用 授权声明 东南大学、国科学技术信息研究所、国家图书馆有权保留本人所送交学位论文的复印件和电子文档,可以采用影印、缩印或其他复制手段保存论文。本人电子文档的内容和纸质论文的内容相一致。除在保密期内的保密论文和在技术保护期限内的论文外,允许论文被查阅和借阅,可以公布(包括以电子信息形式刊登)论文的全部内容、英文摘要等部分内容。论文的公布(包括以电子信息形式刊登)授权东南大学研究生院办理。 研究生签名: 导师签名: 日期: 摘要 目前工业市场上认证检测领域,业务流程陈旧繁琐,用户与检测机构无法便捷有效的沟通。除此之外,用户需要亲临检测机构实地送检,在检测的每一个环节用户也无法有效的进行追踪,这些都制约着认证检测领域的进一步发展。鉴于市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本,本文采用Android+HTML5相结合的方式进行移动端Web系统的设计研发工作。 然而,由于HTML5的W3C标准规范还未制定,安卓系统类浏览器Webview自身存在一些局限性,因此仍存在着诸多问题亟需解决,包括:(1)多窗口类浏览器模式问题。安卓上用于加载的Webview视图窗口只是作为类浏览器而存在,在安卓上更是只能同时运行一个Webview。(2)跨域数据交互问题。不同的Webview之间无法共享数据。(3)页面自适应问题。页面难以兼容适应不同分辨率的设备和浏览器。 本文研究并设计了基于Android+HTML5的在线认证检测系统,主要工作包括以下四个方面: (1)针对多窗口类浏览器模式问题,指出并分析了该问题存在的原因,利用Activity的运行机制,通过Fragment栈对主要模块的Webview进行管理,实现对不同模块之间切换的控制。 (2)针对跨域数据交互问题,指出并分析了跨域缓存交互问题出现的原因,通过在HTML5存储技术的基础上,重写LocalStorage,用移动端本地的Sqlite进行数据维护,实现跨域数据交互。 (3)针对页面自适应问题,本文结合渐进增强以及拥抱流式布局的思想,同时研究利用了移动设备的视口特性,实现跨分辨率、跨设备的页面自适应。 (4)针对系统的功能实现问题,通过结合利用原生态框架与HTML5的跨平台性,实现了“认我测”在线认证检测系统。 综上所述,“认我测”在线认证检测系统,率先填补了认证检测领域移动端的空缺,提供了Web浏览器+移动端的双端访问模式,给用户提供了多种访问途径,真正实现了用户和检测机构的随时随地在线下单检测。 关键词:HTML5,检测与认证,Android,多窗口浏览器模式,跨域处理,页面自适应 Abstract At present business processes are old and explicit in industrial market of certification and detection filed, as well as users can not have effective and convenient communication with detection institutions. Apart from these, customers have to come to detection institutions personally to send samples, and they can not take effective trace of each process during detection. All of these limit the advanced development of certification and detection field. As the versions, types and resolution of users' mobile phones vary in current market, conditional ways depending on systems respectively cost extra time and resources. In order to develop efficiently and save cost of projects, this paper combines android with HTML5 to design and start the development of mobile web system. However, due to standard specification of W3C of HTML5 hasn't been drafted, and browser-alike webview in android has several limits itself, there are still many problems to be solved. Including: (1) Multi-window browser pattern. Webview window in android used to load pages just works like browser, as well as there is only one webview running at the same time. (2)Cross-domain data interaction. Different webviews can not share data. (3)Self-adaption of pages. It is difficult for pages to adapt to devices and browsers of different resolution. This paper researched and designed an online certification and detecting system based on Android and HTML5. Four main parts are included as following: (1) Considering multi-window browser problem, this paper pointed out and analysed reasons of it. The running mechanism of Activity was used cleverly and webiews of main modules were managed through Fragment stacks, in order to control the switch among different modules. (2)Considering cross-domain data interaction problem, reasons of it were pointed out and analysed. LocalStorage was overrided based on HTML5 storage technics, and local sqlite was used to maintain data in order to realize cross-domain data interaction. (3)Considering self-adaption of pages, the system combined the ideas of progressive enhancement and embracing flow layout, aiming at personalitites of mobile facilities viewports, and realized respective solution. (4)Considering the implementation of system functions, the system took the advanteges of native frameworks as well as HTML5 crossing platforms, and developed "Finding Me Detecting" online certification and detecting system. In summary, "Finding Me Detecting" online certification and detecting system filled up blanks of mobile market in certification and detecting field, provoding double side access pattern, that is to say web browser together with mobile side, offering users various ways to access the system, and really realized the goal of whenever and wherever ordering to detect for users and detecting companies. Keywords: HTML5; Quality Authentication; Android; Multi-window browser; Cross-domain data; Page self-adaption 专业名词清单 专业名词 名词解释 HTML5 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言HTML)的第五次重大修改 Android 一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导开发 IOS 由苹果公司开发的移动操作系统 Webkit 一个开源的浏览器引擎,在手机上的应用十分广泛 Webview WebView(网络视图)能加载显示网页,可以将其视为一个浏览器。它使用了WebKit渲染引擎加载显示网页 Activity Activity是一个应用程序组件,提供一个屏幕,用户可以用来交互为了完成某项任务,是一个负责与用户交互的组件 SSH 为 Struts+Spring+Hibernate的一个集成框架,是目前较流行的一种Web应用程序开源框架。其使用Struts作为系统的整体基础架构,负责MVC的分离,在Struts框架的模型部分,控制业务跳转,利用Hibernate框架对持久层提供支持,Spring做管理,管理Struts和Hibernate。 WebStorage HTML新增的本地存储解决方案之一 LocalStorage 本地永久性存储数据,除非显式将其删除或清空 SessionStorage 存储的数据只在会话期间有效,关闭浏览器则自动删除 Sqlite 一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库 W3C 万维网联盟,创建于1994年,是Web技术领域最具权威和影响力的国际立性技术标准机构。主要的工作是发展 Web 规范,这些规范描述了 Web 的通信协议(比如 HTML 和 XHTML)和其他的构建模块。 NativeApp 使用传统原生态Android SDK来实现的应用 WebApp 基于浏览器来实现的一种应用 HybridApp 一种可以下载的Native App,其用户界面的全部或者部分元素在嵌入式浏览器组件(WebView之类的)里面运行 优雅降级 一开始就构建站点的完整功能,然后针对浏览器测试和修复。认为应该针对那些最高级、最完善的浏览器来开发网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段 渐进增强 一开始只构建站点的最少特性,然后不断针对各浏览器追加功能。先让网站能够正常工作于尽可能旧的浏览器上,然后不断为它在新型浏览器上实现更多的增强和改进。 Viewport 移动设备上的Viewport就是设备的屏幕上能用来显示网页的一块区域,即浏览器上用来显示网页的那部分区域。Viewport不局限于浏览器可视区域的大小,可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。 媒体查询 CSS媒体查询允许开发者基于浏览网站的设备的特性来应用不同的样式申明,最常用的特性是视口宽度。 GCF 谷歌内嵌浏览器框架, 使用此插件,用户可以通过Internet Explorer的用户界面,以Chrome内核的渲染方式浏览网页。Chrome Frame 会把最新版的Chrome Webkit 内核和JavaScript 引擎注入到IE, IE浏览器将获得Chrome的性能和功能 目录 摘要 I ABSTRACT II 专业名词清单 III 第一章 绪论 1 1.1 研究背景与意义 1 1.2国内外相关研究现状 2 1.2.1 在线认证检测平台开发现状 2 1.2.2 HTML5 3 1.2.3 Android 3 1.2.4 Android移动Web项目开发的三种解决方案:Native, Web和Hybrid优缺陷分析 4 1.2.5国内外应用现状 6 1.2.6 研究现状总结 7 1.3研究目标与内容 7 1.3.1多窗口浏览器模式的实现机制 7 1.3.2跨域交互即缓存处理方法 7 1.3.3页面自适应机制,即设备自适应与浏览器自适应机制 8 1.3.4 “认我测”质检服务平台的设计和实现 8 1.4 本文的结构安排 8 第二章 多窗口类浏览器设计 11 2.1 多窗口类浏览器需求分析 11 2.1.1 Activity简介 11 2.1.2 Fragment简介 11 2.1.3 多窗口类浏览器需求 12 2.2 多窗口浏览器模式的实现机制 12 2.2.1安卓移动端多窗口浏览器框架 12 2.1.2多窗口浏览器模式实现机制 13 2.3 模块实现 13 2.3.1类浏览器模式 13 2.3.2多窗口类浏览器模式 14 2.4 本章小结 15 第三章 跨域交互缓存处理设计 17 3.1 跨域交互缓存处理需求 17 3.1.1 缓存技术WebStorage 17 3.1.2 跨域交互缓存处理需求 17 3.1.3 页面回退管理需求 17 3.2 缓存处理机制 18 3.2.1 跨域缓存处理 18 3.2.2页面回退管理 18 3.3 模块实现 19 3.3.1跨域缓存机制的主要实现 19 3.3.2.页面回退管理的实现 22 3.4本章小结 22 第四章 页面自适应机制设计 23 4.1页面兼容策略 23 4.2 页面自适应策略 24 4.2.1设备自适应 24 4.2.2.浏览器自适应 25 4.3 模块实现 25 4.3.1根据适口属性设计响应式布局: 26 4.3.2同分辨率范围内的流式布局设计 26 4.3.3移动端viewport属性设定 27 4.3.4组件样式的渐进增强设计 27 4.4 本章小结 27 第五章 认我测在线检测服务系统设计 29 5.1认我测在线检测服务系统需求分析 29 5.2 系统时序流程 29 5.3 系统功能模块图 30 5.4 本章小结 32 第六章 认我测在线检测服务系统实现与测试 33 6.1认我测在线检测服务框架设计 33 6.2 系统运行环境搭建及配置 34 6.2.1 AndroidManifest.xml主程序环境配置 34 6.2.2 移动端工程资源布局 35 6.3 认我测在线认证检测系统的主要功能实现 36 6.3.1用户查询 36 6.3.2订单操作 37 6.3.3个人信息维护 37 6.4.系统功能测试 38 6.4.1 首页功能模块 38 6.4.2 订单功能模块 38 6.4.3 个人信息模块 39 6.4.4页面自适应 40 6.5 本章小结 41 第七章 总结与展望 43 7.1 工作总结 43 7.2 研究展望 44 致谢 47 参考文献 49 第一章 绪论 1.1 研究背景与意义 目前市场业务在产品以及其他项目的认证和检测方面存在诸多不便,用户需要实地考察并频繁与检测单位沟通,填写繁琐的纸质检测报告、当面送递样品,对于检测环节存在的问题难以及时交互并处理。市场上相应的检测平台诸如检测通、凡特网等皆为pc端检测网站,并且操作繁琐不够人性化,用户在实地使用存在很多问题。昆山工业技术研究院着眼于为委托用户和质检机构搭建良好的沟通桥梁,免去目前市场业务企业用户需要实地地并频繁地与检测机构沟通,从而提出自己的委托乃至下委托单、等待检测报告等,设计并研发了市场上首款提供质检服务的移动端app,即“认我测”质检服务平台系统,用户只需在手机上安装轻盈小巧的系统app,即可方便快捷的进行委托服务,质检机构亦可便捷地处理请求订单,双方都可以实时追踪委托订单的状态变化。 考虑到目前市场上用户的手机型号、种类、屏幕分辨率等参差不齐,传统方式根据主流系统(如android、ios)分别开发相应的系统耗时又耗力,为了高效开发并节约开发项目成本、提高项目开发效率,并迎合近年来新兴的HTML5移动页面开发技术,公司采用Android+HTML5相结合的方式进行移动端系统的研发工作。系统的主体一次开发即可在不同设备,包括不同系统、不同型号、不同分辨率设备上运行,免去了大量冗余的开发工作,提高项目的开发效率,降低项目的开发维护成本,为用户提供便捷服务。项目的封装框架只需根据系统的不同稍微改动定制即可,传统的多套系统项目现在只需一次开发,即可适应于不同机型。此外系统还可以通过微信公众号推广链接进行访问,大大的增强了系统的可扩展性和用户操作的便捷性。 然而,由于HTML5的W3C标准规范还未制定,安卓系统类浏览器Webview自身存在一些局限性,使得结合安卓与HTML5开发移动web项目仍处在探索研发阶段,还不够成熟和完善,相应的技术支持也比较有限,因此仍存在着诸多问题亟需解决,包括: (1)多窗口浏览器模式问题。安卓用于加载的Webview视图窗口只是作为类浏览器而存在,并不等同于pc浏览器,在安卓上更是只能同时运行一个Webview,每次加载新的页面都只能覆盖掉原先的页面,无法达到网页浏览器的多窗口模式。通过常规的pc浏览器窗口的相应open、close进行新增窗口、关闭窗口等操作,在Webview类浏览器窗口都无法正常运作,甚至会导致Webview失去响应。为此,需要研究相应的解决方案,用于模拟用户适应的网页多窗口浏览器模式。(2)跨域交互问题,即缓存机制与浏览记录管理问题。不同于网页浏览器,用户的数据可以在不同的窗口之间共享,Webview由于其模块之间无法共享数据的机制为保存用户信息以及共享其他程序数据带来了巨大难题。为此需要区分数据是同模块内部共享还是跨域共享访问,并提供相应的解决方案。Webview通过模拟多窗口浏览器模式运作后,在不断的新开页面以及不同模块之间互相切换,会导致页面回退时历史浏览地址发生覆盖,使得不同模块无法回到相应的上级页面,为此需要有效的对页面的浏览历史进行管理,并提供切实可行的方案。(3)页面自适应问题,即设备自适应与浏览器自适应问题。针对移动设备繁杂的屏幕分辨率,如何让页面进行分辨率自适应,从而发挥相对于原生态安卓开发的优势,是一个需要探索和解决的问题。考虑到高效开发设计以及便于推广应用,HTML5的界面不仅仅需要适应基于Webkit内核的Webview,还要能够方便的应用于PC端的网页,如何让HTML5的网页能够适用不同的浏览器内核,也是一个亟待解决的问题。 为此,如何使得“认我测”质检服务平台安卓与HTML5的结合开发满足多浏览器模式,并解决跨域之间的数据交互问题,同时提高页面的设备自适应和浏览器自适应能力,成为跨平台移动web项目高效开发所亟待解决的问题。 1.2国内外相关研究现状 1.2.1 在线认证检测平台开发现状 互联网界目前在检测领域存在部分在线检测认证的平台,诸如华强认证、检测通等,可以为用户提供一些简单的检测申请,以及为检测机构提供平台发布相关信息。 图1.1 华强认证检测平台首页 如上图所示,在华强认证平台上用户可以选择认证或者检测服务,针对相应类型进行筛选。根据待检测的种类不同,选择相应的检测机构资质、证书、检测周期等查询结果,根据查询结果选择检测机构进行检测委托。检测机构与平台合作,提供负责的检测服务项目、价格等信息,在平台上开设个人站点,提供数据给平台,用于用户检索。 与时下常见的电商网站类似,此类检测平台都提供检测方设计自己的网站主页以出售检测服务,同时为用户提供检索结果、显示可购买的检测服务,用户可以选择质检服务并加入购物车、下单、查看检测方详情、与卖家(检测方)沟通检测细节等操作,但是这些平台都存在着共同的问题——流程不够清晰明了、检测服务不够个性化、用户操作繁琐等,这些问题给用户和检测机构的使用以及交流带来了很多不便。平台提供的检测项目有限,很多时候用户无法确定自己需要检测的项目所属,也不能有效地与检测方进行沟通。与此同时,认证检测领域对于移动端的涉及基础为零,目前主流移动端市场没有相应的认证检测服务产品,随着移动产品愈发便捷,在移动端研发设计相应的认证检测产品,使得用户可以随时随地进行下单咨询变得愈发重要。 1.2.2 HTML5 为了方便用户的使用,“认我测”认证检测平台的PC端基于B/S架构,其设计和研发离不开浏览器内核支持,同时移动端的Web开发也同样需要HTML5语言的支持。利用HTML5的崭新特性,能够更好地为用户提供服务。 HTML5是用于取代1999年所制定的HTML4.01和XHTML1.0标准的HTML(标准通用标记语言下的一个应用)标准版本;现在仍处于发展阶段,但大部分浏览器已经支持某些HTML5技术。HTML5有两大特点:首先,强化了Web网页的表现性能。其次,追加了本地数据库等Web应用的功能。 HTML5广义上为包括HTML、CSS和JavaScript在内的一套技术组合。减少浏览器对于需要插件的丰富性网络应用服务,如Adobe Flash、Microsoft Silverlight与Oracle JavaFX的需求,并且提供更多能有效增强网络应用的标准集。目前HTML5已向开发人员提供了很多新的标签,如section,nav,article,header和footer等。这些标签语义化程度高,被广泛使用HTML5逐渐为移动Web开发所采纳,主要原因在于其适用移动项目开发的八大特性,即离线缓存、音频视频自由嵌入、地理定位、Canvas绘图、丰富的交互方式、低开发维护成本、CSS支持以及调用手机硬件。其离线缓存可以看做是加强版的cookie,不受数据大小限制,有更好的弹性以及架构,可以将数据写入到本机的ROM,还可以在关闭浏览器后再次打开时恢复数据,以减少网络流量。音频视频方面HTML5无需拆分开混排的多媒体内容,可以将文字、图片、音频、视频等放在一起进行处理。HTML5提供地理定位的支持,无需专属导航软件,通过缓存即可加载地图数据,方便灵活。在系统开发和维护方面,打开即可使用最新版本,免去重新下载升级包的麻烦,使用过程就直接更新了离线缓存。除此之外,HTML5增强了对CSS样式的支持,极大的增强了界面的美化和友好性,提高了用户体验。 1.2.3 Android Android是一种基于Linux的自由及开放源代码的操作系统,主要使用于移动设备,如智能手机和平板电脑,由Google公司和开放手机联盟领导及开发。Android操作系统最初由Andy Rubin开发,主要支持手机。2005年8月由Google收购注资。2007年11月,Google与84家硬件制造商、软件开发商及电信营运商组建开放手机联盟共同研发改良Android系统。随后Google以Apache开源许可证的授权方式,发布了Android的源代码。2011年第一季度,Android在全球的市场份额首次超过塞班系统,跃居全球第一。 2013年的第四季度,Android平台手机的全球市场份额已经达到78.1%。 Android是一个真正意义上的开放性移动设备综合平台。它包括操作系统、用户界面和应用程序-移动电话工作所需的全部软件,而且不存在任何以往阻碍移动产业创新的专有权障碍。通过与运营商、设备制造商、开发商和其他有关各方结成深层次的合作伙伴关系,来建立标准化、开放式的移动电话软件平台,在移动产业内形成一个开放式的生态系统,这样应用之间的通用性和互联性将在最大程度上得到保持。 在开发之初,Android平台就被设计成一个由一系列应用所组成的平台。所有的应用都运行在一个核心的引擎上面,这个核心引擎其实就是一个虚拟机,它提供了一系列用于在应用和硬件资源间进行通讯的API。Android打破了应用之间的界限,开发人员可以把Web上的数据与本地的联系人、日历、位置信息结合起来,为用户创造全新的用户体验。此外应用程序不仅可以通过标准API 访问核心移动设备功能、互联网,应用程序还可以声明它们的功能供其他应用程序使用。 考虑到移动端市场主流操作系统的使用情况、移动领域的发展趋势以及Android操作系统的开源性,系统采用Android操作系统为研究对象,在其基础上进行设计和研发,使得认证检测产品能够为主流用户所使用,为用户带来便捷。 1.2.4 Android移动Web项目开发的三种解决方案:Native, Web和Hybrid优缺陷分析 Native app是用传统原生态Android SDK来实现的应用;Web app是基于浏览器来实现的一种应用。 Hybrid app是一种可以下载的Native App,其用户界面的全部或者部分元素在嵌入式浏览器组件(WebView之类的)里面运行。对用户来说,Hybrid App与Native App很难区别。二者都可以从应用程序商店或市场下载,存放在移动设备上,运行方式完全如同其他任何应用程序。但是对开发者来说,却存在巨大的差异,因为其无需为每一种移动操作系统从头开始重新编写应用程序,而是只要用HTML、CSS和JavaScript编写其一部分应用程序代码,即可在多个设备上重复使用。 以下是三种技术各自的优缺点。 Native app Web app Hybrid app 系统特性 可以完美发挥系统特性(调用系统服务、内存管理等); 操控设备硬件(如相机、蓝牙、振动器等) 无法充分发挥系统特性(调用系统服务、内存管理等); 无法操控设备硬件(如相机、蓝牙、振动器等) 可以发挥大部分系统特性(调用系统服务、内存管理等); 可以通过JavaScript API操控设备硬件(如相机、蓝牙、振动器等) 用户体验 可提供最佳的用户体验,最优质的用户界面,最华丽的交互; 支持消息推送 用户体验较差; 图片和动画支持性不高; 不支持消息推送 可提供较好的用户体验; 支持消息推送 本地资源 可访问本地资源 不支持访问本地资源 可访问本地资源 应用更新 获得新版本时需重新下载应用更新,不够方便 跨平台开发、用户不需要下载安装App,开发速度快 可以下载新应用更新,也可在线更新 适用场景 适合制作游戏等性能要求比较高的应用 对于对界面的灵活性有较高要求的app 适用于对画面表现特别高以外的主流需求 开发成本 各平台不兼容,多平台的开发、移植比较复杂,开发成本高,开发周期长,开发成本高; 维护多个版本的成本比较高; 针对多种设备(不同分辨率、不同硬件配置等)的调试和适配较麻烦,维护成本高; 纯HTML5快速开发,较低的开发成本; 支持设备广泛,基于浏览器,跨平台性,维护成本低; Native+HTML5 针对不同系统制定系统外壳,页面部分可重用,大大降低开发成本; 可直接在线更新,更新成本低; 跨平台性,无需针对不同平台开发多个版本应用。 网络要求 支持离线使用 非常依赖网络,网络不稳定等其他环境时,用户请求页面的效率大打折扣 大部分功能依赖网络 考虑到系统需要提供较好的用户体验、用户与检测机构能够利用消息推送进行实时沟通、用户的查询和下单操作默认已具备网络环境等因素,因此为了更好地利用移动端本地硬件支持以及实现跨平台、跨设备的开发,系统采取了Hybrid混合开发模式。通过在原生态框架嵌入Webview类浏览器,主体页面采用HTML5开发,由原生态定制系统框架,这样在更换移动端操作系统时,只需相应更换系统外壳,主体部分可以重复利用,极大地减少了研发成本,提高了系统的可复用性。系统主体部分更新时,无需在应用市场重新下载,应用HTML5的特性在线更新缓存即可方便地获取最新版本,为用户带来了便捷。 1.2.5国内外应用现状 图1.2 智能手机操作系统分布数据 市场调研公司Kantar Worldpanel ComTech发布的智能手机操作系统数据显示,截至2016年2月末的三个月内,Android国城市的销售份额从去年同期的73%增至76.4%。而在美国和欧洲五大市场(包括英国、德国、法国、意大利和西班牙),Android的市场占比继续保持增长态势。因此系统选取市场移动端主流操作系统Android作为基础,进行移动端认证检测产品的研发和设计。 随着移动浪潮的兴起,各种APP层出不穷,极速的业务扩展提升了团队对开发效率的要求,这时使用IOS&Andriod开发一个APP的成本相对过高,而HTML5的低成本、高效率、跨平台等特性马上被利用起来形成了一种新的开发模式:HybridAPP。 作为一种混合开发的模式,Hybrid APP底层依赖于Native提供的容器(UIWebview),上层使用Html&Css&JS做业务开发,底层透明化、上层多多样化,这种场景非常有利于前端介入,非常适合业务快速迭代。Hybdrid作为目前主流的移动端开发设计模式,能够极大的利用Native和HTML5的优势,将性能与用户体验相结合,缩短跨系统的产品研发周期,给用户和研发都带来极大的便利。混合型APP软件兼具“原生型APP软件良好用户交互体验的优势”和“网页型APP软件跨平台开发的优势”。市场上一些主流移动应用都是基于混合型APP软件的方式开发,比如工商银行、百度搜索、街旁、东方航空、微信、去哪儿等。 目前已有众多企业采用混合型APP软件技术开发APP应用,一方面是开发简单,另外一方面可以形成一种开发的标准。企业封装大量的原生型的原生插件如支付功能插件供Java调用,并且可以在今后的项目尽可能的复用,从而大幅降低开发时间和成本。混合型APP软件的标准化给企业移动应用开发、维护、更新都带来了极高的便捷性。 混合型APP软件通常是基于第三方跨平台移动应用引擎框架进行开发,在国内开发者比较知名的有PhoneGap、Titanium和AppCan。这些引擎框架一般使用HTML5和Java作为编程语言,调用引擎封装的底层功能如照相机、传感器、通讯录、二维码等。HTML5和Java只是作为一种解析语言,真正调用的都是原生型APP软件一样封装的底层功能,这是和网页型APP软件的最大区别和不同。因为使用了浏览器技术,所以混合型APP软件通常具有跨平台的特性,并且开发成本和网页型APP软件接近,开发效率也远高于原生型APP软件。根据国际科技媒体ReadWriteWeb 2015数据统计显示,截至2015,有80%的App全部或部分基于HTML5研发。大部分的App内容以网页的形式呈现,包括微信、Facebook、Twitter等。为此,Hybrid混合模式成为“认我测”在线检测服务平台移动端框架的开发和设计依赖。 尽管微信通过公众号的形式,使得Android+HTML5模式得以应用并推广,这项技术目前仍不够完善,利用web实现移动app存在一些瓶颈。(1)根据百度移动互联网发展趋势报告,iPhone下载一个1.407k的网页,建立连接耗时1.35s左右,传输耗时0.15s左右。这样,导致app在建立连接的时候,屏幕处于白屏状态。app在一秒多的时间内,完全处于白屏状态,加上3G、GPRS网络的不稳定,有时候等待app响应需要几秒甚至1几秒的时间,对于mobie app来说,这是个致命的缺陷。(2)难以实现本地存储。基于Android存在多版本系统,Android低版本的Webkit对HTML5和CSS3不能够很好地支持。常用HTML5向后兼容方案是通过Javascript+CSS+Html来模拟HTML5的一些特性,但过多的js存在于移动app会得不偿失。 Android+HTML5的混合开发模式对于移动端Web项目开发已经成为市场的主流和趋势,与此同时这项技术还存在着一些问题,需要不断的进行改进和完善。 1.2.6 研究现状总结 总而言之,Android操作系统在移动市场仍居主流,HTML5也为用户带来崭新的特性,Hybrid混合开发模式也逐渐成为移动Web开发的主流设计模式,大量的市场应用都成功的应用和推广了Android+HTML5。正是在这种背景下,“认我测”在线认证检测系统率先填补了移动端认证检测领域的产品空缺,采取了Hybrid混合开发模式。同时,利用Android+HTML5相结合开发移动端Web项目尚处于应用阶段,仍然存在很多问题,还不够成熟和完善。如何将这二者更有效的结合使用,并解决过程存在的问题,提高项目开发的效率以及节约开发成本,是一个需要研究探索的问题,这也是本课题的意旨。 1.3研究目标与内容 1.3.1多窗口浏览器模式的实现机制 深入挖掘Webview作为类浏览器视图窗口与传统PC端浏览器的区别,针对安卓端同一视图区域单一运行Webview的特性,通过在原生态安卓启用Fragment视图加载不同视图页面,在外部Activity对Fragment进行管理控制。同时调整窗口加载及操作模式,适应移动端相关操作从而实现程序加载多个Webview视图窗口并可以随意切换,实现类浏览器多窗口加载资源并交互的模式。 1.3.2跨域交互即缓存处理方法 针对Webview不支持多窗口间跨域访问的问题,重写缓存处理方式以替代网页端会话级缓存机制,模拟web端本地存储localStorage对本地缓存的处理方法,诸如setItem()、getItem()、removeItem()以及clear(),通过将持久化数据存储在移动端本地数据库来模拟网页端数据持久化存储,实现多Webview间跨域交互访问以及缓存数据保存和处理。 通过维护Webview的历史栈,根据需求进行过滤跳转或者重新加载页面。若当前为重定向后的链接,那么回退的时候就需要忽略上一级的链接,不使用Webview自带的回退方法goBack(),相对地移除重定向和重定向后的url,获取到初始页面链接后自行进行loadUrl()操作. 1.3.3页面自适应机制,即设备自适应与浏览器自适应机制 利用Viewport来控制页面的缩放比例、页面的初始大小,针对不同分辨率的移动设备实现网页页面自适应。通过渐进增强以及优雅降级机制来控制不同版本、不同浏览器之间的兼容问题,以及利用JavaScript库辅助修正相应的样式问题,从而实现浏览器适配的机制。 1.3.4 “认我测”质检服务平台的设计和实现 移动客户端通过安卓与HTML5结合开发设计委托方和质检方app,通过原生态安卓框架外壳嵌入Webview渲染加载页面,添加Java接口与消息会话模块,通过移动端Sqlite操作数据重写localStorage来实现缓存机制,利用Fragment视图层控制Webview的切换与运行来展现主要的功能模块—委托方App:首页模块、订单模块、消息模块和个人模块;质检方App—订单模块、消息模块和个人模块。 服务器端采用J2EE的SSH框架搭建项目,通过微信公共账号链接Html页面,为用户提供多种系统访问途径,增强了系统的可扩展性,为用户带来便利。 1.4 本文的结构安排 本文共分为七个章节。 第一章是绪论部分,介绍课题的研究背景,指出课题的研究意义。然后通过对HTML5研究、Android移动Web开发技术研究以及Hybrid开发问题研究来介绍该课题在国内外的研究现状。最后说明本文的研究目标与内容,以及论文的结构安排。 第二章介绍多窗口类浏览器模式策略的设计与实现。针对现有移动端单一窗口存在的不足,提出类浏览器多窗口解决方案,并对多窗口浏览器模式进行设计 第三章其次分析Webview的跨域数据交互问题,针对移动端类浏览器内核不支持跨域数据访问的不足,提出本地持久性存储替代web端缓存的解决方案,并对跨域访问模式进行设计。同时分析了页面重定向导致的页面无法正常访问问题,提出采用页面浏览历史栈的管理方案,针对回退时目标页面解析进行相应操作。 第四章是多分辨率多设备页面自适应策略设计。首先分析现有Web页面在移动端不同分辨率和设备显示存在的问题,针对页面难以在不同设备上保持兼容适应的不足,提出页面自适应解决方案,并通过渐进增强以及媒体查询等方式进行设计。 第五章是认我测系统的设计,包括系统的功能需求分析、业务流程展示以及功能模块设计。 第六章是系统的功能测试,介绍了相关的实现环境与工具,并对系统的主要功能模块以及主要解决方案进行了功能验证测试。 第七章是总结展望部分,总结本文的主要工作内容与创新点,并对本文写作与实验过程的不足及后续研究进行展望。 第二章 多窗口类浏览器设计 2.1 多窗口类浏览器需求分析 2.1.1 Activity简介 在Android一个Activity是一个应用程序组件,它提供一个屏幕,用户可以为了完成某项任务用来交互,例如拍照、拨号、看地图、发送邮件等。每一个Activity被系统给予一个窗口,在该窗口上面可以绘制用户接口。一个应用程序通常由多个Activities组成,他们通常是松耦合关系。通常首次启动应用程序的时候呈现给用户的Activity被指定为"Main Activity”。为了完成不同的动作,每一个Activity可以启动另一个其他的Activity。一个新的Activity启动,前一个Activity就被终止了,但是系统将Activity保存在一个栈上。当一个新Activity启动,它被推送到栈顶,取得用户焦点。栈的管理符合“后进先出”原则,所以,当用户完成当前Activity然后点击back按钮,它被弹出栈并且被摧毁,然后恢复之前的Activity。 若一个Activity因新的Activity启动而停止,系统通过Activity的生命周期回调函数,通知其这种状态转变。一个Activity根据它自己的状态变化可能会收到许多回调函数的通知信息,诸如系统创建、停止、恢复或者摧毁Activity,每个回调都使得开发者得以完成相应状态的指定工作。例如,当停止Activity的时候,应该释放所有大的对象,如网络数据库连接。当Activity恢复时,开发人员可以重新获得必要的资源和恢复被断的动作。这些状态转换都是Activity的生命周期的组成部分。 2.1.2 Fragment简介 Android 3.0开始引入Fragments 的概念,可以称为:碎片、片段。其目的是为了解决不同屏幕分辨率下动态和灵活的UI设计,大屏幕如平板、小屏幕如手机。平板电脑的设计使得其有更多的空间来摆放更多的UI组件,而多出来的空间存放UI使得这些组件会产生更多的交互,从而诞生了Fragments。 Fragments 的设计不需要开发者来亲自管理视图层的复杂变化,通过将Activity 的布局分散到Fragment ,可以在运行时修改Activity 的外观,并且由Activity 管理保存其变化。当一个片段指定了自身的布局时,它能和其他片段配置成不同的组合,在活动为不同的屏幕尺寸修改布局配置。小屏幕可能每次显示一个片段,而大屏幕则可以显示两个或更多。Fragment是Activity的界面的一部分或一种行为。可以把多个Fragments组合到一个Activity来创建一个多面界面并且可以在多个Activity重用一个Fragment。除此之外,可以把Fragment认为是模块化的一段Activity,它具有自己的生命周期,接收它自己的事件,并可以在Activity运行时被添加或删除。 Fragment不能独立存在,它必须被嵌入到Activity,而且Fragment的生命周期受到所在的Activity的影响。当Activity暂停时,它拥有的所有的Fragments都被暂停;当Activity销毁时,它拥有的所有Fragments都被销毁。然而,当activity运行时(在onResume()之后,onPause()之前),可以单独地操作每个Fragment,比如添加或删除它们。在执行上述针对Fragment的事务时,可以将事务添加到一个栈,这个栈被Activity管理,栈的每一条都是一个Fragment的一次事务。有了这个栈,就可以反向执行Fragment的事务,这样就可以在Fragment级支持“返回”键(向后导航)。 2.1.3 多窗口类浏览器需求 在Android展现在用户面前的Activity同时只能存在一个,而由于类浏览器内核Webkit的特性,一个Activity同时只能加载一个Webview用以渲染网页,如果用户想模仿Web浏览器新增一个浏览器标签窗口打开新页面,只能将原来的网页覆盖掉,无法在窗口间来回切换,用户也无法保持原有的浏览器使用习惯。为此,需要利用Activity栈的切换特点,将系统的主要模块分别设计在不同的Fragment上,通过各自的Webview进行加载渲染,在用户需要切换窗口时,通过管理切换Fragment达到目的的实现。 2.2 多窗口浏览器模式的实现机制 2.2.1安卓移动端多窗口浏览器框架 图2.1 多窗口浏览器模式系统框架图 如图4所示,系统安卓移动端由首页、订单、消息以及个人信息四个模块构成,每个模块对应一个视图层Fragment,在安卓Activity运行时一次加载一个视图Fragment,通过底部的原生态菜单栏BottomBar进行视图之间的切换。每个视图Fragment对应同一个位置的Webview类浏览器窗口,通过Webview加载所需要的页面,通过外部的Fragment对Webview的加载以及切换进行控制,从而实现类浏览器多窗口模式。 2.1.2多窗口浏览器模式实现机制 多窗口浏览器模式的实现原理为:安卓外部Activity控制视图层Fragment的加载和切换,Fragment内部加载和控制Webview对页面的渲染,同时调整Web端页面的窗口打开和关闭模式,通过页面重定向进行打开和关闭返回。 多窗口浏览器模式解决两个问题,一是安卓的类浏览器窗口模式,二是浏览器多标签模式。在移动端的页面加载过程,类浏览器内核Webview的运行机制为覆盖加载页面,一次运行期间只同时存在一个Webview,与PC端浏览器的运行模式不同,无法通过open打开一个新的浏览器标签页,也无法通过close关闭单个的标签页。为此需要通过loadUrl进行页面重定向,在关闭页面时通过loadUrl反重定向或者通过Webview本身的goBack方法进行回退。移动端的Webview在全局意义上等价于PC端的浏览器,但是通过close关闭的不是一个窗口,而是关闭了整个浏览器。安卓Activity运行时只能加载一个Webview,因此无法同时展现不同的页面,为此需要通过外部对Webview序列的控制,模拟多窗口显示页面的模式。 在安卓Activity的视图View初始化过程,实例化需要首次显示的视图层fragment (如首页),将其放入实例化的视图层管理容器HashMap,并通过changeFragmentFrom Menu方法控制用户对视图层Fragment的切换,将原有的视图层置为等待恢复状态,并激活新的视图层用以在Activity展现,通过changeFragmentBack控制用户通过回退操作唤醒的首页视图层,以此来控制不同视图层,即类浏览器窗口之间的切换。在相应的Fragment视图层,初始化视图InitView时渲染加载Webview,同时控制底部的菜单栏,通过Webview加载相应的本地网页或服务器端网页,设置Webview相应的属性进而控制页面由Webview加载,而非默认的系统浏览器加载。为Webview绑定页面与原生态安卓相交互的接口,从而可以在加载的页面内调用安卓的原生态功能。 2.3 模块实现 2.3.1类浏览器模式 该部分主要为安卓通过Webview渲染加载网页的过程。主要包含以下过程: Fragment布局文件声明控件Webview,绑定其资源ID,为Webview设置宽度和高度。 (1)在Fragment视图初始化initView部分,利用findViewById()通过资源ID获取到Webview控件,对其进行初始化,同时设置相关的webSettings属性,让Webview可以运行JavaScript脚本以及能与本机数据库进行交互。 (2)重写WebViewClient的shouldOverrideUrlLoading()函数,让应用程序的Webview直接加载网页内容,而不调用外部的浏览器。 (3)重写Webview网页对话框,构建一个Builder用以显示网页的对话框,在点击确定按钮之后,继续执行网页的操作,同时关闭Builder对话框。 (4)为JavaScript创建安卓接口。通过addJavaScriptInterface为Webview绑定底层Java接口,同时提供相应的接口方法名以及在页面可以调用的句柄名称,通过该句柄和方法名,即可在Html5页面的JavaScript访问该底层的Java方法,实现对页面上部和底部的系统外壳的展示管理。 (5)通过loadUrl进行对目标页面的渲染加载,可以加载访问服务器端的页面,也可访问放置在项目内部的页面文件,该模式需要将相应页面放置于系统的assets目录下。相对而言服务器端页面更加常用,也便于维护。 2.3.2多窗口类浏览器模式 图2.2 多窗口类浏览器模式原理图 (1)创建各个主功能模块的视图类Fragment,分别为主界面模块HomeFragment、订单模块OrderFragment、聊天咨询模块MessageFragment以及个人心模块PersonalFragment,继承自基类BaseFragment。 (2)每个Fragment视图类声明并初始化相应的Webview组件,对其进行属性设置,为其绑定JavaScript接口并覆盖渲染加载页面的方法,绑定相应的需要在页面调用的底层Java方法接口。重写默认的页面回退响应事件,对页面访问历史以及目标访问页面进行过滤判断,执行相应的处理方法。 (3)在MainActivity的初始化initView声明并初始化Fragment管理容器HashMap,初始化主页视图HomeFragment并将其加入容器,设置其为默认加载视图。获取FragmentManager用以维护管理Fragment队列,调用beginTransaction方法开启事务。 (4)重写回退按钮响应事件。当页面回到各自模块的初始页面然后按下回退键时,判断当前模块所在的Fragment,由主页模块后退时,执行确认退出系统操作,若从其他模块进行后退,则回到主页模块。通过底部菜单栏setRadioChecked方法设定当前模块的选标识。 (5)重写模块间切换的方法changeFragmentFromMenu,开启事务,对模块标识ftag进行判断操作,根据用户点击的模块图表将相应的模块视图Fragment通过onResume()进行恢复,同时通过show()将该模块进行展示,从Fragment管理容器将主页模块以外的Fragment移除。将带有oflag暂停标识的Fragment视图进行暂停处理,通过hide隐藏取消该视图的展示。 (6)在各自的Fragment模块视图类重写onResume方法,用以在模块恢复时进行用户是否登录判断。对Webview渲染加载的页面进行分析,判断是否包含index初始页面标识。根据flag标识进行是否需要登录操作,flag为1表示从其他Fragment跳转到该模块的Fragment视图并需要用户登录。 以上就是多窗口类浏览器模式的实现主要环节,通过Webview加载渲染服务器资源页面,控制碎片视图Fragment展现各自模块的Webview,在MainActivity对碎片容器以及碎片视图之间的切换进行管理控制,从而完成多窗口类浏览器模式的实现。 2.4 本章小结 本章分析并介绍了安卓Activity的基本性质,对碎片视图Fragment进行了相关阐述和引出,综合分析了多窗口类浏览器模式的设计需求。随后对多窗口类浏览器模式的框架进行了设计,通过Activity运行管理Fragment的加载和切换,各个模块的Fragment视图独自加载运行相应的Webview,补充和完善不同模块之间切换和回退的业务逻辑。在模块实现部分详细描述了两个关键部分的实现环节,即类浏览器模式和多窗口类浏览器模式,介绍了过程主要用到的方法以及实现思想。 第三章 跨域交互缓存处理设计 3.1 跨域交互缓存处理需求 3.1.1 缓存技术WebStorage 图3.1 WebStorage示意图 WebStorage 使得网站能够把信息存储到本地的计算机上,并在以后需要的时候进行获取。WebStorage和Cookie类似,区别在于WebStorage是为了更大容量存储而进行设计。Cookie的大小是受限的,并且每次当请求一个新的页面的时候,Cookie都会被发送过去。而WebStorage则存储在计算机上,网站在页面加载完毕后可以通过Javascript来获取这些数据。 WebStorage提供两种类型的API:localStorage和sessionStorage,区别在于localStorage是本地永久性存储的数据,除非显式将其删除或清空,否则将一直保存在本地。sessionStorage存储的数据只在会话期间有效,关闭浏览器则自动删除。两个对象都有共同的操作API。 3.1.2 跨域交互缓存处理需求 WebStorage存储技术针对的是同一个类浏览器Webview,系统在各模块之间由不同的Webview加载渲染,通过不同的Fragment进行管理,因此模块之间无法共享数据。然而通过多窗口浏览器模式构建的系统模块之间经常需要进行数据交互,如用户登录信息以及产品相关信息,Webview由于其特性仅支持自身内部的缓存数据交互。同Webview内不断的覆盖加载新页面以及发生页面回退时可以对缓存数据提供便捷高效的数据保存,使得在页面加载的过程可以便利的处理需要交互的数据;相对的不同的Webview之间无法共享数据,无论是会话级缓存还是持久化缓存。为此需要重写web端的持久化存储localStorage,将交互的数据保存到移动设备本地数据库。 3.1.3 页面回退管理需求 对于初始页面为A,点击某个链接跳转到B(http://xxx.com.cn/),B页面重定向到C页面(http://xxx.com.cn/website/index.Html),当调用webview.goBack()时,页面回退到B,然后接着会重定向回C页面。这样会导致两个问题:无法回退到Webview的初始页面A以及无法正常退出Activity或者Fragment(只有还未加载完C时进行回退才能退出页面)。为此需要引入历史记录栈,对页面访问历史进行管理,在回退事件判断该加载页面是否需要重定向并执行相应的操作。 3.2 缓存处理机制 3.2.1 跨域缓存处理 在移动端数据库Sqlite操作类LocalStorage定义相应的数据库连接属性、创建和更新的操作以及数据库操作单例Instance,在视图访问基类BaseFragment定义覆盖web端持久化存储localStorage的核心交互类LocalStorageJavascriptInterface。获得数据库操作单例,并覆盖localStorage对缓存的常用处理方法取值getItem(),修改值setItem(),删除值removeItem()以及清空缓存clear()。将页面上获得的数据键值对存入数据库,对其进行更新删除以及返回给页面使用。在Webview初始化时进行页面与后台交互绑定addJavaScriptInterface,并在页面初始化init过程将页面的默认localStorage操作更换成覆盖重写的方法,即可在页面进行跨域访问时交互相应的数据。 跨域交互的缓存处理机制如图5所示: 图3.2 缓存处理机制原理图 3.2.2页面回退管理 安卓的回退按钮一般用于返回上一级菜单,不过在浏览器页面加载过程却不能理想地返回上一级页面,默认的回退按钮是针对Activity的回退,对于Webview来说,回退按钮会致使浏览器调用finish()而结束自身的运行,因此需要覆盖Activity的onKeyDown()事件,在方法内部重新对浏览页面进行管理。 在页面的新建关闭以及重定向时,Webview的页面回退goBack()会受到干扰,不能正常回到前一个页面,甚至会发生前后两个页面间来回切换后退的死循环,并影响模块间的后退返回。为此需要对历史访问页面进行管理,采用如下实现方案。 在Fragment视图声明时定义一个用于管理保存历史浏览记录的历史栈ArrayList,将系统初始加载界面加入列表。在此后的页面加载过程,每次加载页面都将其加入历史栈,在系统回退响应事件,判断页面是否为重定向页面,如果为重定向页面,则移除历史栈最后两个链接,加载操作后历史栈的最后一项;否则移除历史栈最后一项,加载操作后历史栈的最后一项。 页面回退方案的流程图如图3.3所示: 图3.3页面回退管理机制图 3.3 模块实现 3.3.1跨域缓存机制的主要实现 图3.4 重写LocalStorage类示意图 (1)重写LocalStorage类。让LocalStorage继承自SQLiteOpenHelper类,声明LocalStorage对象实例以及其他数据库连接配置信息,如数据表名称、表存储的数据Id与值Value、数据库名称、创建数据库语句等。通过Singleton单例模式维护LocalStorage实例,重写创建数据库和更新的相关操作。 (2)添加LocalStorage的底层JavaScriptInterface,供服务器资源页面进行访问。通过LocalStorageDBHelper对象获取到单例localStorage,声明上下文对象和SQLiteDatabase对象。重写HTML5存储技术LocalStorage的关键缓存数据操作方法getItem()、setItem()、removeItem()以及clear()。 图3.5 重写WebStorage核心方法示意图 1.重写getItem(),根据传入参数key获取相应的value值 ①判断传入的key是否为空。 ②若key不为空,通过localStorageDBHelper的getReadableDatabase()方法实例化数据库对象database。执行sqlite的数据库查询操作,返回数据库结果操作游标。 ③根据游标的moveToFirst判断查询结果是否为空,返回相应的value结果。关闭数据库连接。 2.重写setItem(),根据传入的参数key和相应值value更新数据库 ①判断传入的key和value是否为空,通过getItem()获取更新前的值。 ②实例化数据库对象database。声明ContentValues对象并将key和value相应赋值。判断更新前和key对应的值是否存在,若存在执行数据库的更新操作;若不存在,执行数据库的插入操作。关闭数据库。 3.重写remove() ①判断传入的key是否为空 ②实例化数据库操作对象,执行相应的数据库删除操作,关闭数据库 4.重写clear() 实例化数据库操作对象,执行数据库删除操作,清空整张数据库表。 在Fragment视图初始化Webview时,通过addJavaScriptInterface为其绑定重写的底层LocalStorage操作接口,并将操作句柄设置为localStorage。设置webSettings属性,通过setDomStorageEnabled与setDatabaseEnabled启用本地存储功能。 在服务器资源页面JavaScript方法,尝试用句柄LocalStorage替换window默认的localStorage。若发生异常,说明LocalStorage没有被添加至webview。然后即可像通常HTML5的localStorage对缓存数据进行操作。 3.3.2.页面回退管理的实现 (1)在MainActivity覆盖模块间的回退响应事件。当模块页面回退至各自的初始页面时,点击回退按钮执行相应的模块切换策略,若该模块为主界面模块,则弹出退出系统确认框供用户选择是否退出;若为其他模块则将菜单栏切换到首页模块。 (2)在各自的Fragment覆盖模块内部的回退响应事件。在页面初始化时定义并维护一个存放历史访问页面的历史栈loadHistoryUrls (ArrayList),把初始页面url加入到历史栈,在覆盖加载方法shouldOverrideUrlLoading将待渲染加载的页面加入到历史栈。 (3)在Fragment内部的回退事件处理方法,判断是否可以执行返回操作。然后判断历史栈存存放页面的前一页是否包含初始重定向页面,若包含该页面则移除加载栈的最后两个链接,否则移除加载栈的最后一个链接。最后加载重定向之前的页面。 3.4本章小结 本章首先分析了HTML5标准下缓存处理策略WebStorage,其包含本地存储LocalStorage与会话存储SessionStorage,并提供了相应的介绍和说明。然后分析了跨域数据交互问题问题存在的原因以及页面回退管理存在的问题。由于Webview的数据封闭性,不同的模块Webview之间无法共享访问数据,使得不同的模块无法正常交互,为此采用重写LocalStorage的方式,通过本地Sqlite数据库操作模拟HTML5缓存的操作,重写LocalStorage关键的操作方法setItem()、getItem()、removeItem()以及clear(),并为Webview绑定相应的底层Java方法接口,在服务器页面资源用重写的LocalStorage替换默认的localStorage,从而完成跨域数据的调用访问操作。由于页面的重定向作用,页面回退时会反复加载到重定向后的页面,导致页面无法正常回退,因此通过维护历史栈的方式,在页面回退时对回退目标页面进行分析判断,并执行相应的回退管理方法,从而使得模块内部的页面以及模块之间可以正常地进行返回操作。 第四章 页面自适应机制设计 针对移动设备分辨率和屏幕大小、设备型号迥异的现状,本章将在分析现有页面跨浏览器兼容方案的基础上,同时结合移动端对不同分辨率设备的支持特性,分析与设计跨机型、跨分辨率、跨浏览器的页面自适应机制。 4.1页面兼容策略 为了使页面能够适应不同版本的浏览器内核,诸如IE、Chorme、Firefox等,CSS3引入了两种常用的设计策略,即优雅降级和渐进增强。 优雅降级指的是在页面设计开始即构建页面的完整功能,然后针对不同的浏览器进行测试和修复。该观点认为应该针对那些最高级、最完善的浏览器来开发网站,同时把那些被认为过时或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段。在这种设计思想下,旧版的浏览器通常被认为仅能提供简单却功能没有大碍的页面浏览体验。虽然可以做一些小的调整来适应某个特定的浏览器,但由于这些调整并非开发过程关注的焦点,因此浏览器间呈现的差异通常将被直接忽略。 渐进增强指的是在页面设计开始只构建页面的最少特性功能,然后不断针对各高级浏览器追加额外功能。渐进增强思想认为应该先让网站能够正常工作于尽可能旧的浏览器上,然后不断为它在新型浏览器上实现更多的增强和改进。随着时间的推移,当更多的用户逐渐开始升级浏览器,同时浏览器本身的支持度也不断提升时,就会有越来越多的用户体验到这些增强和改进,无需为了一个已经成型的网站在旧式浏览器下正常工作而做逆向开发。渐进增强观点认为网页的开发应关注于内容本身。这使得渐进增强成为目前一种更为合理的设计范例。 图4.1 优雅降级和渐进增强图例 对于优雅降级,功能衰减的设计从复杂的功能现状开始,不断减少用户体验的供给;而渐进增强则的设计是从一个非常基础的,能够发挥作用的版本开始,并不断地进行扩充,以适应未来环境的需要。功能衰减意味着往回看;而渐进增强则意味着朝前看,同时保证其根基安全牢固。 为了能够给用户提供更好的界面交互体验,同时适应不同版本的浏览器内核,系统采用了部分渐进增强的思想,利用媒体查询为不同的浏览器版本和内核提供相应的展现效果,同时保证基本的页面展现功能。 4.2 页面自适应策略 系统采用部分渐进增强的页面适配思想,以及拥抱流式布局策略,通过视口元素的媒体查询来控制不同分辨率阈值下页面的布局规划,调整页面元素的布局为百分比方式,包括组件宽度、字体以及高度、图片的动态大小来控制相同分辨率阈值范围下不同视口组件的平滑缩放。同时对HTML5页面的移动端适配属性进行设置控制,针对需要达到的效果设置其Viewport的属性,包括宽和高、页面最初大小、初始缩放比例、屏幕像素密度等。使得系统在Web浏览器端以及移动端都有良好的展示效果。 4.2.1设备自适应 Viewport是指用以展现手机页面的区域。尽管Viewport的可见区域和屏幕大小是匹配的,但是它有着自己的尺寸(dimensions),这一尺寸决定了页面上可见的像素点。一个web页面在扩张到整个屏幕之前占用的像素数据是由Viewport的尺寸来定义的,而不是设备屏幕的尺寸。如一个设备的屏幕宽480像素,但是Viewport宽800像素,那么这个web页面需要在800像素宽的屏幕上才能完全展现。 在HTML5可以使用 <meta> 标签来为页面定义Viewport 的属性。可以在 <meta> 标签的content 属性,定义多个Viewport属性。例如,Viewport的高和宽,页面的最初大小,以及目标屏幕分辨率。Content 属性的每个Viewport性质必须以逗号相隔。通过初始缩放initial-scale和用户调整缩放来控制页面的伸张以适当地填充移动端设备的显示区域。通过target density定义屏幕像素密度来控制安卓浏览器和Webview根据不同屏幕的像素密度对页面进行的缩放。 图4.2 视口属性设置示意图 4.2.2.浏览器自适应 通过拥抱流式布局的来使得页面在不同尺寸屏幕上良好的运行。从手机到电脑,设备的屏幕尺寸层出不穷,很难用传统意义上的统一布局来适应这些变动。拥抱流式布局倡导响应式界面设计,通过媒体查询(@media screen and...)来获得设备特性信息,从而灵活的控制不同尺寸屏幕的浏览器动态的调整页面元素的布局,以适应视口特性的变化。 同时根据“目标元素宽度/上下文元素宽度=百分比宽度”的模式将传统的固定像素式布局改为百分比布局,元素的固定像素宽度转换成百分比宽度。假定整个页面布局的宽度是960px,按照1024px屏幕分辨率做参照,百分比应是960/1024 = 93.75%。其他的组件宽度也可以按照960px为参照计算。若除下来的结果是很长的小数,如340/960 = 0.3541666666666667 ,无须对结果进行四舍五入,这样可以保持最高的精确度,这些小数应尽可能完整保留。 根据“目标元素尺寸/上下文元素尺寸=百分比尺寸”将文字的固定像素大小转换为等量的相对尺寸,现代浏览器默认的字体大小是16px,字体的相对大小用em为单位来表示。若某个div的字体大小为48px,则转化后为48/16=3em。结果为小数时的处理方式同上。 给图片设置阈值以使图片随着视口平滑缩放,为不同屏幕尺寸提供不同的图片,然后针对不同视口宽度修正设计,保证在响应式设计内容始终优先。图片不是布局元素,它里面不包含子元素。另外,图片还有失真的问题,缩放不当都会造成失真。为此,需要给图片添加样式max-width:100% 以实现弹性图片,因为图片所处的容器可以自动缩放,只需让图片限制在父级的宽度之内,就可以随父级一起缩放。弹性图片仅用max-width无法实现,除此之外还需使用百分比宽度。处理方式同计算布局元素的宽度。在此过程需要注意图片的失真问题,当用户使用的一个超宽屏幕时,图片被放大到原大小的两倍甚至更多,图片的质量会大幅下降。所以还需为图片设置绝对阈值,即宽度上限,因此一个弹性图片的样式组合应该为:width:30%; max-width:400px。 对于一个使用超宽屏幕的用户,按照正常的页面设计比例,这张图片被放大到了500px,但是现在只能显示最大宽度400px,依然是个问题。为此可以采用另一个组合,把max-width加到图片的父级元素上,从源头上就限制放大的最大值,这样图片与它的相邻元素的比例就不会失调了。这样的设计也是个权衡的结果,因为页面结构千变万化,具体的解决办法,还得分析具体页面。 为了防止放大的过宽,可以通过媒体查询来设置不同分辨率下的阈值。在处理各种浏览器兼容问题时,可以借助Modernizr,一个用于检测浏览器功能的开源JavaScript库,通过Modernizr追加的额外类名来辅助修正样式问题,以及通过检测浏览器是否支持媒体查询来按需加载资源,让老版本IE支持HTML5等。 4.3 模块实现 页面自适应主要的实现方式包含: 4.3.1根据适口属性设计响应式布局: ①加入兼容配置代码 <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">,通过chrome插件GCF(谷歌内嵌浏览器框架)控制IE以Webkit引擎及V8引擎进行样式排版,若用户未安装该插件则以IE最高文档模式进行展
HTML(Hypertext Markup Language)是一种用于创建网页结构和内容标记语言。它由一系列的标签组成,这些标签通过包围内容来定义网页不同部分的功能和样式。HTML是网页开发的基础,提供了丰富的元素和属性,使得开发人员可以灵活地创建各种网页。 HTML常用的展示模块包括文本、图像、链接和表格等。文本模块用于显示网页的文字内容,可以使用不同的标签设置字体、颜色、排列方式等样式。图像模块用于在网页展示图片,通过使用<img>标签,可以插入图片并设置大小、边框等属性。链接模块用于实现不同页面之间的导航,通过<a>标签,可以创建链接并设置跳转目标、标题等属性。表格模块用于以表格的形式展示数据,使用<table>、<tr>和<td>等标签可以创建表格并设置行列、样式等属性。 除了以上提到的模块,HTML还提供了很多其他的展示模块,如表单、音频、视频、列表等。表单模块用于收集用户输入的数据,通过<input>、<textarea>和<button>等标签可以创建输入框、文本域和按钮等表单元素。音频和视频模块用于在网页播放音频和视频文件,通过<audio>和<video>标签可以嵌入音视频资源并设置播放控制。列表模块用于展示有序或无序的项目列表,通过<ol>和<ul>标签可以创建有序和无序列表,使用<li>标签定义每个项目。 总之,HTML提供了丰富多样的展示模块,使得开发人员可以根据需求灵活地创建不同样式和功能的网页。通过合理运用这些标签和属性,可以实现各种精美的网页设计和交互效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值