移动前端的开发须知
2016-09-27 19:13
246 查看
什么是HTML5
1> 2014年才定制完HTML5的标准，历时8年
2> 移动先行
为什么要用HTML5
1> 跨平台
利用HTML5编写的UI界面能运行在所有拥有浏览器的平台
2> HTML5的运行平台：浏览器
3>
但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、访问相册....
如何使用HTML5
1> 自己编写大量的HTML5代码
2> 使用现成的HTML5框架
sencha-touch
phoneGap
jQuery mobile
手机APP的开发模式
1> 原生（纯OC）
2> 纯HTML5
3>
原生+HTML5
为什么要学习HTML5
1> 未来的一种趋势
2> 增加面试、开发竞争力
Android程序员 Java、服务器、HTML5
公司职位的划分
1> 平面设计师
作图、切图、HTML、CSS
2> 前端工程师
HTML、CSS、Javascript、模板技术
3> 后台工程师
服务器（Java、.Net、PHP）、数据库
4>
移动工程师（iOS/android）手机UI界面（OC、HTML5）、跟服务器交互
开发工具
1> Android
eclipse、MyEclipse、android
studio
2> iOS
Xcode
3> HTML5
eclipse、MyEclipse
后端喜爱
Dreamwaver
⺴⻚三剑客 Dreamwaver、Flash、Fireworks
-> Adobe
WebStrom
前端喜爱,⼤神编辑器,默认集成各种各样的插件,配⾊完美
Web开发新时代
Web1.0
主流技术:HTML+CSS
Web2.0
主流技术:Ajax(JavaScript/DOM/异步数据请求)
Web3.0
主流技术:HTML5+CSS3
HTML5亮点:
Canvas HTML5音视频 Web存储
Geolocation Workers多线程处理
CSS3亮点:
设计动画 2D变形
N多新特性
http://html5test.com/
网页的组成
一个有具体功能的完整的网页，一般由3部分组成
HTML
网页的具体内容和结构
CSS
网页的样式（美化网页最重要的一块）
JavaScript(掌握)
网页的交互效果，比如对用户鼠标事件做出响应
HTML\CSS\JavaScript学习资料：http://www.w3school.com.cn/
HTML
常见的HTML标签
标题：h1、h2、h3、h4、h5....
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a
HTML5新增标签
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
1.结构性标签
负责Web上下文结构的定义，确保HTML文档，包括：
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
header 标记头部区域内容
footer 标记脚部区域内容
section 区域章节表述
nav
菜单导航,链接导航
2.块级性标签
完成Web页面区域的划分，确保内容的有效分隔，包括：
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog
人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
3.行内语义性标签
完成Web页面具体内容的引用和表述，丰富展示内容，包括：
meter 特定范围内的数值，如工资、数量、百分比
time 时间值
progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio
音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
4.交互性标签
功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：
details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
datagrid 控制客户端数据与显示，可用于动态脚本及时更新
menu 用于交互菜单
command
用来处理命令按钮
CSS
什么是CSS
CSS的全称是Cascading Style Sheets，层叠样式表
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的，比如
color: red;
background-color:
blue;
font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值
CSS的3种书写形式
CSS有3种书写形式
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
页内样式：在本网页的style标签中书写
<style>
body {
color:red;
}
</style>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link
rel="stylesheet"href="index.css">
CSS的两大重点
属性
通过属性的复杂叠加才能做出漂亮的网页
选择器
通过选择器找到对应的标签设置样式
CSS选择器–
选择器优先级
选择器的针对性越强，它的优先级就越高
选择器的权值
通配选择符（*）：0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 1
id： 100
important： 1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
CSS选择器–
选择器优先级
优先级排序
important >
内联 > id >
类 >
标签 |
伪类 |
属性选择 >
伪元素 >
通配符 >
继承
HTML标签类型
HTML有N多标签，根据显示的类型，主要可以分为3大类
块级标签
独占一行的标签
能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
行内标签（内联标签）
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）
行内-块级标签（内联-块级标签）
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度（比如input、button）
修改标签的显示类型
CSS中有个display属性，能修改标签的显示类型
none：隐藏标签
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）
CSS属性
CSS有N多属性，根据继承性，主要可以分为2大类
可继承属性
父标签的属性值会传递给子标签
一般是文字控制属性
不可继承属性
父标签的属性值不能传递给子标签
一般是区块控制属性
CSS属性–
可继承属性（红色表示常用）
所有标签可继承
visibility、cursor
内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
CSS属性–
不可继承属性（红色表示常用）
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
CSS3新增特性
RGBA透明度
RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值
块阴影与圆角阴影
box-shadow text-shadow
圆角
border-radius
边框图片
border-image
形变
transform: none |<transform-function>[<transform-fuction>]
CSS布局
默认情况下，所有的网页标签都在标准流布局中
从上到下，从左到右
脱离标准流的方法有
float属性
position属性 和
left、right、top、bottom属性
CSS布局– float属性
float属性的常用取值有
left：脱离标准流，浮动在父标签的最左边
right：脱离标准流，浮动在父标签的最右边
absolute:默认情况下是对浏览器进行定位
JavaScript
什么是JavaScript
JavaScript是一门广泛用于浏览器客户端的脚本语言
由Netspace公司设计，当时跟Sun公司合作，所以名字起得像Java
业内一般简称JS
JS的常见用途
HTML DOM操作（节点操作，比如添加、修改、删除节点）
给HTML网页增加动态功能，比如动画
事件处理：比如监听鼠标点击、鼠标滑动、键盘输入
Node.js
什么是Node.js
Node是一个JavaScript运行环境(runtime)，是对Google
V8引擎进行了封装
V8引擎执行JavaScript的速度非常快，性能非常好
Node.js的优势
可以作为后台语言
单线程
不新增额外线程的情况下，依然可以对任务进行并行处理（采用事件轮询）
非阻塞I/O、V8虚拟机、事件驱动
JavaScript的书写方式
JS常见的书写方式有2种
页内JS：在当前网页的script标签中编写
<script type="text/javascript">
</script>
外部JS
<script
src="index.js"></script>
Canvas
HTML
<canvasid="canvas"></canvas>
JS
var canvas =document.getElementById('canvas');
var context =canvas.getContext('2d');
context是一个绘图的上下文环境
2d是二维图形
Canvas绘制直线
起点
context.moveTo(100,100);
终点
context.lineTo(400, 400);
绘制
context.stroke();
设置线条颜色和宽度
context.strokeStyle = 'red';
context.lineWidth = 5;
设置填充色
context.fillStyle = 'blue';
Canvas绘制弧线
context.arc(
centerX,centerY, radius,
startingAngle, endingAngle,
anticlockwise=false
)
centerX, centerY: 圆心的坐标
radius: 半径
startingAngle, endingAngle:
开始角度,结束角度
anticlockwise: false顺时针
true逆时针
***********************笔记**********************
*************************************************
<article>
标记定义一篇文章
<header>
标记定义一个页面或一个区域的头部
<nav>
标记定义导航链接
<section>
标记定义一个区域
<aside>
标记定义页面内容部分的侧边栏
<hgroup>
标记定义文件中一个区块的相关信息
<figure>
标记定义一组媒体内容以及它们的标题
<figcaption>
标签定义 figure
元素的标题。
<footer>
标记定义一个页面或一个区域的底部
<dialog>
标记定义一个对话框(会话框)类似微信
多媒体交互标签
<video>
标记定义一个视频
<audio>
标记定义音频内容
<source>
标记定义媒体资源
<canvas>
标记定义图片
<embed>
标记定义外部的可交互的内容或插件比如flash
Web应用标签
<menu>命令列表
<menuitem>menu命令列表标签 FF（嵌入系统）
<command> menu标记定义一个命令按钮
<meter>状态标签(实时状态显示:气压、气温)C、O
<progress>状态标签 (任务过程:安装、加载)
C、F、O
<datalist>
为input标记定义一个下拉列表,配合option
F、O
<details>
标记定义一个元素的详细内容，配合dt、dd C
注释标签
<ruby>
标记定义注释或音标
<rp>
告诉那些不支持 Ruby元素的浏览器如何去显示
<rt>
标记定义对ruby的注释内容文本
其他标签
<keygen>
标记定义表单里一个生成的键值(加密信息传送)O、F
<mark>
标记定义有标记的文本 (黄色选中状态)
<output>
标记定义一些输出类型,计算表单结果配合oninput事
删除的HTML标签
纯表现的元素：
basefont，big，center，font,
s，strike，tt，u；
对可用性产生负面影响的元素：
frame，frameset，noframes；
产生混淆的元素：
acronym
，applet，isindex，dir
重新定义的HTML标签
<b>
代表内联文本，通常是粗体，没有传递表示重要的意思
<i>
代表内联文本，通常是斜体，没有传递表示重要的意思
<dd>
可以同details与figure一同使用，定义包含文本，dialog也可用
<dt>
可以同details与figure一同使用，汇总细节，dialog也可用
<hr>
表示主题结束，而不是水平线，虽然显示相同
<menu>
重新定义用户界面的菜单，配合commond或者menuitem使用
<small>
表示小字体，例如打印注释或者法律条款
<strong>
表示重要性而不是强调符号
1> 2014年才定制完HTML5的标准，历时8年
2> 移动先行
为什么要用HTML5
1> 跨平台
利用HTML5编写的UI界面能运行在所有拥有浏览器的平台
2> HTML5的运行平台：浏览器
3>
但是HTML5不能完成一些特定的功能，比如：拍照(ImagePickerController)、访问相册....
如何使用HTML5
1> 自己编写大量的HTML5代码
2> 使用现成的HTML5框架
sencha-touch
phoneGap
jQuery mobile
手机APP的开发模式
1> 原生（纯OC）
2> 纯HTML5
3>
原生+HTML5
为什么要学习HTML5
1> 未来的一种趋势
2> 增加面试、开发竞争力
Android程序员 Java、服务器、HTML5
公司职位的划分
1> 平面设计师
作图、切图、HTML、CSS
2> 前端工程师
HTML、CSS、Javascript、模板技术
3> 后台工程师
服务器（Java、.Net、PHP）、数据库
4>
移动工程师（iOS/android）手机UI界面（OC、HTML5）、跟服务器交互
开发工具
1> Android
eclipse、MyEclipse、android
studio
2> iOS
Xcode
3> HTML5
eclipse、MyEclipse
后端喜爱
Dreamwaver
⺴⻚三剑客 Dreamwaver、Flash、Fireworks
-> Adobe
WebStrom
前端喜爱,⼤神编辑器,默认集成各种各样的插件,配⾊完美
Web开发新时代
Web1.0
主流技术:HTML+CSS
Web2.0
主流技术:Ajax(JavaScript/DOM/异步数据请求)
Web3.0
主流技术:HTML5+CSS3
HTML5亮点:
Canvas HTML5音视频 Web存储
Geolocation Workers多线程处理
CSS3亮点:
设计动画 2D变形
N多新特性
http://html5test.com/
网页的组成
一个有具体功能的完整的网页，一般由3部分组成
HTML
网页的具体内容和结构
CSS
网页的样式（美化网页最重要的一块）
JavaScript(掌握)
网页的交互效果，比如对用户鼠标事件做出响应
HTML\CSS\JavaScript学习资料：http://www.w3school.com.cn/
HTML
常见的HTML标签
标题：h1、h2、h3、h4、h5....
段落：p
换行：br
容器：div、span（用来容纳其他标签）
表格：table、tr、td
列表：ul、ol、li
图片：img
表单：input
链接：a
HTML5新增标签
HTML5新增了27个标签元素,废弃了16个标签元素,主要包括结构性标签、级块性标签、行内语义性标签、交互性标签
1.结构性标签
负责Web上下文结构的定义，确保HTML文档，包括：
article 文章主体内容(一篇博客、一篇论坛帖子、一段用户评论、插件)
header 标记头部区域内容
footer 标记脚部区域内容
section 区域章节表述
nav
菜单导航,链接导航
2.块级性标签
完成Web页面区域的划分，确保内容的有效分隔，包括：
aside 注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
figure 对多个元素组合并展示的元素,常与figcaption联合使用
code 表示一段代码块
dialog
人与人之间对话,包含dt和dd两个组合元素（dt用于表示说话者、dd用于表示说话者的内容）
3.行内语义性标签
完成Web页面具体内容的引用和表述，丰富展示内容，包括：
meter 特定范围内的数值，如工资、数量、百分比
time 时间值
progress 进度条，可用max、min、step进行控制，完成对进度的表示和监听
video 视频元素，用于视频播放，支持缓冲预载和多种视频媒体格式
audio
音频元素，用于音频播放，支持缓冲预载和多种音频媒体格式
4.交互性标签
功能性内容的表达，有一定的内容和数据的关联，是各种事件的基础，包括：
details 表示一段具体的内容，默认不显示，通过某种方式（单击）与legend交互才会显示
datagrid 控制客户端数据与显示，可用于动态脚本及时更新
menu 用于交互菜单
command
用来处理命令按钮
CSS
什么是CSS
CSS的全称是Cascading Style Sheets，层叠样式表
它用来控制HTML标签的样式，在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的，比如
color: red;
background-color:
blue;
font-size: 20px;
冒号:左边的是属性名，冒号:右边的属性值
CSS的3种书写形式
CSS有3种书写形式
行内样式：（内联样式）直接在标签的style属性中书写
<body style="color: red;">
页内样式：在本网页的style标签中书写
<style>
body {
color:red;
}
</style>
外部样式：在单独的CSS文件中书写，然后在网页中用link标签引用
<link
rel="stylesheet"href="index.css">
CSS的两大重点
属性
通过属性的复杂叠加才能做出漂亮的网页
选择器
通过选择器找到对应的标签设置样式
CSS选择器–
选择器优先级
选择器的针对性越强，它的优先级就越高
选择器的权值
通配选择符（*）：0
标签： 1
类： 10
属性： 10
伪类： 10
伪元素： 1
id： 100
important： 1000
原则：选择器的权值加到一起，大的优先；如果权值相同，后定义的优先
CSS选择器–
选择器优先级
优先级排序
important >
内联 > id >
类 >
标签 |
伪类 |
属性选择 >
伪元素 >
通配符 >
继承
HTML标签类型
HTML有N多标签，根据显示的类型，主要可以分为3大类
块级标签
独占一行的标签
能随时设置宽度和高度（比如div、p、h1、h2、ul、li）
行内标签（内联标签）
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸（比如span、a、label）
行内-块级标签（内联-块级标签）
多个行内-块级标签可以显示在同一行
能随时设置宽度和高度（比如input、button）
修改标签的显示类型
CSS中有个display属性，能修改标签的显示类型
none：隐藏标签
block：让标签变为块级标签
inline：让标签变为行内标签
inline-block：让标签变为行内-块级标签（内联-块级标签）
CSS属性
CSS有N多属性，根据继承性，主要可以分为2大类
可继承属性
父标签的属性值会传递给子标签
一般是文字控制属性
不可继承属性
父标签的属性值不能传递给子标签
一般是区块控制属性
CSS属性–
可继承属性（红色表示常用）
所有标签可继承
visibility、cursor
内联标签可继承
letter-spacing、word-spacing、white-space、line-height、color、font、font-family、font-size、font-style、font-variant、font-weight、text-decoration、text-transform、direction
块级标签可继承
text-indent、text-align
列表标签可继承
list-style、list-style-type、list-style-position、list-style-image
CSS属性–
不可继承属性（红色表示常用）
display、margin、border、padding、background
height、min-height、max-height、width、min-width、max-width
overflow、position、left、right、top、bottom、z-index
float、clear
table-layout、vertical-align
page-break-after、page-bread-before
unicode-bidi
CSS3新增特性
RGBA透明度
RGB(红色R+绿色G+蓝色B),RGBA则在其基础上增加了Alpha通道，可用于设置透明值
块阴影与圆角阴影
box-shadow text-shadow
圆角
border-radius
边框图片
border-image
形变
transform: none |<transform-function>[<transform-fuction>]
CSS布局
默认情况下，所有的网页标签都在标准流布局中
从上到下，从左到右
脱离标准流的方法有
float属性
position属性 和
left、right、top、bottom属性
CSS布局– float属性
float属性的常用取值有
left：脱离标准流，浮动在父标签的最左边
right：脱离标准流，浮动在父标签的最右边
absolute:默认情况下是对浏览器进行定位
JavaScript
什么是JavaScript
JavaScript是一门广泛用于浏览器客户端的脚本语言
由Netspace公司设计，当时跟Sun公司合作，所以名字起得像Java
业内一般简称JS
JS的常见用途
HTML DOM操作（节点操作，比如添加、修改、删除节点）
给HTML网页增加动态功能，比如动画
事件处理：比如监听鼠标点击、鼠标滑动、键盘输入
Node.js
什么是Node.js
Node是一个JavaScript运行环境(runtime)，是对Google
V8引擎进行了封装
V8引擎执行JavaScript的速度非常快，性能非常好
Node.js的优势
可以作为后台语言
单线程
不新增额外线程的情况下，依然可以对任务进行并行处理（采用事件轮询）
非阻塞I/O、V8虚拟机、事件驱动
JavaScript的书写方式
JS常见的书写方式有2种
页内JS：在当前网页的script标签中编写
<script type="text/javascript">
</script>
外部JS
<script
src="index.js"></script>
Canvas
HTML
<canvasid="canvas"></canvas>
JS
var canvas =document.getElementById('canvas');
var context =canvas.getContext('2d');
context是一个绘图的上下文环境
2d是二维图形
Canvas绘制直线
起点
context.moveTo(100,100);
终点
context.lineTo(400, 400);
绘制
context.stroke();
设置线条颜色和宽度
context.strokeStyle = 'red';
context.lineWidth = 5;
设置填充色
context.fillStyle = 'blue';
Canvas绘制弧线
context.arc(
centerX,centerY, radius,
startingAngle, endingAngle,
anticlockwise=false
)
centerX, centerY: 圆心的坐标
radius: 半径
startingAngle, endingAngle:
开始角度,结束角度
anticlockwise: false顺时针
true逆时针
***********************笔记**********************
*************************************************
<article>
标记定义一篇文章
<header>
标记定义一个页面或一个区域的头部
<nav>
标记定义导航链接
<section>
标记定义一个区域
<aside>
标记定义页面内容部分的侧边栏
<hgroup>
标记定义文件中一个区块的相关信息
<figure>
标记定义一组媒体内容以及它们的标题
<figcaption>
标签定义 figure
元素的标题。
<footer>
标记定义一个页面或一个区域的底部
<dialog>
标记定义一个对话框(会话框)类似微信
多媒体交互标签
<video>
标记定义一个视频
<audio>
标记定义音频内容
<source>
标记定义媒体资源
<canvas>
标记定义图片
<embed>
标记定义外部的可交互的内容或插件比如flash
Web应用标签
<menu>命令列表
<menuitem>menu命令列表标签 FF（嵌入系统）
<command> menu标记定义一个命令按钮
<meter>状态标签(实时状态显示:气压、气温)C、O
<progress>状态标签 (任务过程:安装、加载)
C、F、O
<datalist>
为input标记定义一个下拉列表,配合option
F、O
<details>
标记定义一个元素的详细内容，配合dt、dd C
注释标签
<ruby>
标记定义注释或音标
<rp>
告诉那些不支持 Ruby元素的浏览器如何去显示
<rt>
标记定义对ruby的注释内容文本
其他标签
<keygen>
标记定义表单里一个生成的键值(加密信息传送)O、F
<mark>
标记定义有标记的文本 (黄色选中状态)
<output>
标记定义一些输出类型,计算表单结果配合oninput事
删除的HTML标签
纯表现的元素：
basefont，big，center，font,
s，strike，tt，u；
对可用性产生负面影响的元素：
frame，frameset，noframes；
产生混淆的元素：
acronym
，applet，isindex，dir
重新定义的HTML标签
<b>
代表内联文本，通常是粗体，没有传递表示重要的意思
<i>
代表内联文本，通常是斜体，没有传递表示重要的意思
<dd>
可以同details与figure一同使用，定义包含文本，dialog也可用
<dt>
可以同details与figure一同使用，汇总细节，dialog也可用
<hr>
表示主题结束，而不是水平线，虽然显示相同
<menu>
重新定义用户界面的菜单，配合commond或者menuitem使用
<small>
表示小字体，例如打印注释或者法律条款
<strong>
表示重要性而不是强调符号
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知
- 【移动前端开发实践】从无到有（统计、请求、MVC、模块化）H5开发须知
- 【转】前端开发在移动终端上的一些经验
- 移动平台前端开发总结（针对iphone，Android等手机）
- 移动平台3G手机网站前端开发布局技巧汇总
- 貌似是腾讯的web前端开发的题目：要求实现表格数据点击后循环移动
- 移动前端开发WebApp小记
- wap2.0 前端开发须知
- 移动平台触屏手机网站前端开发技巧---转载
- 移动平台前端开发技巧(四)
- 移动平台3G手机网站前端开发布局技巧汇总(转)
- 移动平台前端开发总结（针对iphone，Android等手机）
- 移动平台3G手机网站前端开发布局技巧汇总(转)
- 移动平台3G手机网站前端开发布局技巧汇总
- 移动平台前端开发的webkit内核中的一些私有的meta标签
- 移动平台前端开发技巧(三)
- 移动平台前端开发总结（针对iphone，Android等手机）
- 移动平台WEB前端开发技巧汇总
- 移动开发前端框架Julia完全开源
- 前端开发者的跨平台移动应用开发策略及工具