HTML5移动开发--聚文网

55 3.1.3

或

56 3.1.4

57 3.1.5

57 3.1.6

58 3.1.7

58 3.1.8 CubeeDoo的页头和页尾 59 3.1.9 不陌生也不常用： 59 3.1.10 内容分组：其他新的HTML5元素 60 3.1.11

60 3.1.12

和

60 3.1.13

61 3.1.14

和

62 3.2.2 63 3.2.3 、和 64 3.2.4 64 3.2.5 64 3.3 改变了的文本级别语义元素 65 3.3.1 65 3.3.2 HTML 4中文本级元素的改变 67 3.3.3 未改变的元素 67 3.4 嵌入式元素 68 3.5 交互式元素 71 3.5.1

和

71 3.5.2 和 72 3.5.3 所有的XHTML都在HTML5里面了，除了…… 73 3.6 总结 74 第4章 HTML5 Web表单 75 4.1 的属性（以及其他表单元素） 76 4.1.1 type属性 77 4.1.2 required属性 77 4.1.3 最小和优选值：min和max属性 78 4.1.4 step属性 78 4.1.5 placeholder属性 79 4.1.6 pattern属性 80 4.1.7 readonly属性 82 4.1.8 disabled属性 82 4.1.9 maxlength属性 83 4.1.10 size属性 83 4.1.11 form属性 83 4.1.12 autocomplete属性 84 4.1.13 autofocus属性 85 4.2 类型和属性 85 4.2.1 重新介绍你认为已经了解的input类型 86 4.2.2 文本框： 86 4.2.3 密码栏： 87 4.2.4 复选框： 88 4.2.5 单选按钮： 88 4.2.6 提交按钮： 89 4.2.7 重置按钮： 90 4.2.8 选择文件按钮： 91 4.2.9 隐藏： 92 4.2.10 图片： 92 4.2.11 按钮： 92 4.2.12 设计输入类型的样式 93 4.3 类型新增的值 93 4.3.1 电子邮件： 94 4.3.2 URL： 95 4.3.3 电话： 96 4.3.4 数字： 98 4.3.5 滑动条： 100 4.3.6 搜索栏： 100 4.3.7 拾色器： 101 4.4 日期和时间输入类型 102 4.4.1 日期选择器： 102 4.4.2 UTC日期和时间： 104 4.4.3 本地日期和时间： 104 4.4.4 月份： 104 4.4.5 时间： 104 4.4.6 周历： 105 4.5 表单验证 106 4.6 新的表单元素 111 4.6.1 元素及list属性 111 4.6.2 元素 114 4.6.3 115 4.6.4 116 4.6.5 117 4.7 其他表单元素 117 4.7.1

元素 117 4.7.2

和 117 4.7.3

118
4.7.5  <button>  118
4.7.6  <label>元素  118
4.8  小结  119
第5章  SVG、Canvas、Audio和Video  120
5.1  HTML5媒体API  120
5.1.1  SVG  120
5.1.2  在文档中引入SVG  123
5.1.3  “小丑汽车”技术：用于响应式前景图像的SVG  123
5.1.4  学习SVG  125
5.1.5  CubeeDoo SVG  125
5.1.6  Canvas  128
5.1.7  Canvas与SVG  132
5.2  Audio/Video  133
5.2.1  媒体类型  133
5.2.2  把<video>添加到网站  135
5.2.3  <video>和<audio>的属性  135
5.2.4  视频、音频和JavaScript  140
5.2.5  为视频设计样式  142
第6章  其他HTML5 API  144
6.1  离线Web应用  144
6.1.1  我是否已经连接上网  144
6.1.2  应用缓存  145
6.1.3  本地（Local）和会话（Session）存储  149
6.1.4  SQL/Database存储  159
6.2  增强的用户体验  164
6.2.1  地理位置服务  164
6.2.2  Web Worker  167
6.2.3  微数据  169
6.2.4  跨文档消息  172
6.3  无障碍富Internet应用（ARIA）  173
6.4  小结  175
第7章  升级到CSS3  176
7.1  CSS：定义和语法  177
7.1.1  CSS语法  178
7.1.2  使用外部样式表：重温<link>  179
7.1.3  媒体查询  181
7.1.4  CSS很好实践  184
7.2  CSS选择器  189
7.3  更多的CSS3选择器  192
7.3.1  常规选择器  193
7.3.2  使用选择器  194
7.3.3  关系选择器：基于代码顺序的规则  195
7.3.4  属性选择器  198
7.3.5  伪类  204
7.3.6  状态伪类  207
7.3.7  结构上的伪类  208
7.3.8  nth类型的公式  208
7.3.9  更多的伪类  212
7.3.10  伪元素  215
7.4  其他选择器：Shadow DOM  217
7.5  小结  219
第8章  CSS3值的扩展选项  220
8.1  CSS颜色值  220
8.1.1  十六进制值  221
8.1.2  rgb()句法  222
8.1.3  使用RGBA添加透明度功能  223
8.1.4  色调、饱和度和亮度：HSL()  224
8.1.5  CMYK  225
8.1.6  颜色名  225
8.1.7  当前色  226
8.1.8  浏览器颜色的值  226
8.2  CSS的度量单位  230
8.2.1  CSS的长度值  230
8.2.2  角度、时间和频率  233
8.2.3  CSS的角度度量  234
8.2.4  时间（Times）  235
8.2.5  频率（Frequencies）  235
8.3  避免TRouBLe：属性的简写和值的声明  236
8.4  小结  238
第9章  CSS3：模块、模型和图像  239
9.1  CSS盒模型属性  240
9.1.1  border  241
9.1.2  border-style  242
9.1.3  border-color  242
9.1.4  border-width  243
9.1.5  CSS盒模型  244
9.1.6  box-sizing  245
9.2  学习CSS3  246
9.3  CSS渐变  250
9.3.1  渐变类型：线性渐变或径向渐变  251
9.3.2  径向渐变  251
9.3.3  线性渐变  251
9.3.4  ackground-size  260
9.3.5  条纹渐变  263
9.3.6  重复线性渐变  265
9.3.7  用于渐变的工具  268
9.4  阴影  268
9.4.1  文本阴影  270
9.4.2  用宽度、溢出和文本溢出来设置文本  272
9.4.3  盒子阴影  273
9.4.4  整合后的结果：CubeeDoo  276
0章  CSS3：变换、渐变和动画  280
10.1  CSS渐变  281
10.1.1  transition-property属性  282
10.1.2  transition-duration属性  285
10.1.3  transition-timing-function属性  285
10.1.4  transition-delay属性  287
10.1.5  简写的transition属性  287
10.1.6  多种渐变  288
10.2  CSS3变换  290
10.2.1  transform-origin属性  290
10.2.2  transform属性  291
10.2.3  多种变换  295
10.2.4  渐变变换  296
10.2.5  3D变换函数  297
10.2.6  其他3D变换属性  299
10.2.7  综合应用  300
10.3  CSS3动画  303
10.3.1  关键帧  305
10.3.2  渐变、动画和性能  311
1章  响应性Web设计中的CSS特性  313
11.1  媒体查询、断点和流式布局  313
11.2  多栏  314
11.3  边框图像  316
11.4  flexbox  322
11.4.1  flex属性  325
11.4.2  利用@supports进行特性检测  327
11.5  响应性媒体  328
11.5.1  提供图像  329
11.5.2  CSS遮罩：创建透明的JPEG  334
11.5.3  客户提示  335
2章  设计移动应用程序  336
12.1  开始前的考虑事项  337
12.2  设计考虑事项  338
12.2.1  工具：生产率应用程序  339
12.2.2  娱乐：沉浸式应用程序  340
12.2.3  实用程序  341
12.2.4  什么适合你  341
12.3  移动平台：丰富的可能性  342
12.3.1  小型屏幕  342
12.3.2  较少的内存  343
12.3.3  一次一个窗口、一个应用程序  344
12.3.4  最小的文档  345
12.3.5  开发考虑事项  345
12.4  针对移动WebKit  346
12.4.1  状态栏  346
12.4.2  导航栏  347
12.4.3  开机图像  349
12.4.4  主屏幕图标  350
12.5  最少化键盘输入  351
12.6  保持简明  351
12.6.1  使之明显  351
12.6.2  最少化必需的输入  351
12.6.3  最少化文本  351
12.7  其他用户体验考虑事项  352
3章  把移动设备和触摸作为目标  353
13.1  缩小尺寸  353
13.2  触摸我  354
13.2.1  触摸区域  355
13.2.2  鼠标事件、触摸事件  355
13.2.3  伪单击事件  358
13.3  硬件访问  361
13.3.1  手机移动和方向  361
13.3.2  设备状态  362
13.3.3  本机Web应用程序、打包的应用程序和混合应用程序  363
13.4  测试  365
4章  移动性能  367
14.1  电池寿命  367
14.1.1  使用暗色调  368
14.1.2  使用JPEG  368
14.1.3  减少JavaScript  369
14.1.4  消除网络请求  370
14.1.5  硬件加速  371
14.2  延时  373
14.2.1  减少HTTP请求的数量  374
14.2.2  减小请求的尺寸  377
14.2.3  内存  380
14.2.4  优化图像  381
14.3  UI响应性  386
14.3.1  触摸事件  386
14.3.2  动画  387
14.4  小结  387
附录A  CSS选择器和特征值  388</div></div>
                    </div>

</div>
            </div>
        </div>

</div>
    <script src="/static/js/lib/jquery/blowup.min.js" type="text/javascript"></script>
    <script type="application/javascript">
        $(document).ready(function () {

/**
             * 图片放大器
             */
            $("#img_zoom").blowup({
                background : "#FCEBB6"
            });

});
    </script>

<div class="modal fade bs-example-modal-lg" id="modal_add_to_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="myModalLabel">添加到书单</h4>
                </div>
                <div class="modal-body">

<script id="tpl_my_list" type="text/template">
                        {@each records as i}
                        <li class="list-group-item">
                            <label style="width:100%;cursor: pointer;">
                                <input type="radio" name="listId" value="@{i.id}" id="list@{i.id}">
                                @{i.name}
                            </label>
                        </li>
                        {@/each}
                    </script>

<ul class="list-group" id="tbl_my_list">
                        <li class="list-group-item">
                            <label for="list2" >加载中...</label>
                        </li>
                    </ul>
                    <div class="pager"></div>
                    <a href="javascript:void(0);" id="a_add_list">点此新建书单</a>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" id="btn_add_to_list_save">确定</button>
                </div>
            </div>
        </div>
    </div>

<div class="modal fade bs-example-modal-lg" id="modal_add_list" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <form id="form_create_list">
                    <button type="reset" style="display:none;"></button>
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                        <h4 class="modal-title" id="myModalLabel">新建书单</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">标题：</label>
                            <input type="text" class="form-control" name="name">
                        </div>
                        <div class="form-group">
                            <label for="recipient-name" class="control-label">简介：</label>
                            <textarea style="height:200px" class="form-control" name="memo" placeholder="书单描述...">

HTML5移动开发

库存： {{selectedSku?.stock}} 库存充足