移动前端的开发须知

  • 什么是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> 平面设计师  作图、切图、HTMLCSS

2> 前端工程师  HTMLCSSJavascript、模板技术

 3> 后台工程师  服务器(Java.NetPHP)、数据库

4> 移动工程师(iOS/android手机UI界面(OCHTML5)、跟服务器交互  

 

  • 开发工具

1> Android 

   eclipseMyEclipseandroid studio 

2> iOS

  Xcode

 3> HTML5

   eclipseMyEclipse

    后端喜爱

    Dreamwaver

  ⺴⻚三剑客  DreamwaverFlashFireworks -> 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

计算机生成了可选文字:HTML · 什 么 是 HTML p HTML 的 全 称 是 HyperText Markup Language, 超 文 本 标 记 语 言 p 其 实 它 就 是 文 本 , 由 浏 览 器 负 责 将 它 解 析 成 具 体 的 网 页 内 容 了 比 如 , 浏 览 器 会 将 左 边 的 HTML 代 码 转 换 为 右 边 的 网 页 内 容 •zub < li > 广 州 小 码 哥 < / u > < ti > 大 神 班 < 八 < li > S 教 育 < / li 、 «/ub · HTML 的 组 成 · 广 州 小 码 哥 · 大 神 班 · iOS 教 育 p 跟 XML 类 似 , HTML 由 N 个 标 签 ( 节 点 、 元 素 、 标 记 ) 组 成 · HTML 语 法 非 常 松 散 , 目 前 的 最 新 版 是 5 ℃ , 也 就 是 HTML5

 

常见的HTML标签

  • 标题:h1h2h3h4h5....
  • 段落:p
  • 换行:br
  • 容器:divspan(用来容纳其他标签)
  • 表格:tabletrtd
  • 列表:ulolli
  • 图片:img
  • 表单:input
  • 链接:a

 

HTML5新增标签

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

1.结构性标签

负责Web上下文结构的定义,确保HTML文档,包括:

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

 

2.块级性标签

完成Web页面区域的划分,确保内容的有效分隔,包括:

  • aside   注记,贴士,侧栏,摘要,插入的引用作为补充主体的内容
  • figure  对多个元素组合并展示的元素,常与figcaption联合使用
  • code    表示一段代码块
  • dialog  人与人之间对话,包含dtdd两个组合元素(dt用于表示说话者、dd用于表示说话者的内容)

 

3.行内语义性标签

完成Web页面具体内容的引用和表述,丰富展示内容,包括:

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

 

4.交互性标签

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

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

 

CSS

  • 什么是CSS
  • CSS的全称是Cascading Style Sheets,层叠样式表
  • 它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
  • CSS的编写格式是键值对形式的,比如

color: red;

background-color: blue;

font-size: 20px;

  • 冒号:左边的是属性名,冒号:右边的属性值

 

CSS3种书写形式

  • CSS3种书写形式
  • 行内样式:(内联样式)直接在标签的style属性中书写

<body style="color: red;">

  • 页内样式:在本网页的style标签中书写

<style>

    body {

        color:red;

    }

</style>

  • 外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用

<link rel="stylesheet"href="index.css">

 

CSS的两大重点

  • 属性

   通过属性的复杂叠加才能做出漂亮的网页

  • 选择器

   通过选择器找到对应的标签设置样式

 

计算机生成了可选文字:CSS 选 择 器 一 标 签 选 择 器 · 选 择 器 的 作 用 选 择 对 应 的 桁 签 , 为 之 添 加 样 式 · 桁 签 选 择 器 根 据 桁 签 名 找 到 标 签 iv2«/di'D div2 div { color : red ,

 

计算机生成了可选文字:cdiv ediv»div2e/diiD . high color: red; divl div2

 

计算机生成了可选文字:CSS 选 择 器 一 id 选 择 器 #first { «p ids"first'b 第 一 段 文 件 «/p color : < p > 第 二 段 文 字 < / p > 第 一 段 文 件 第 二 段 文 字 · id 选 择 器 的 格 式 p #id red;

 

计算机生成了可选文字:div div , . high color: red; divl div2

 

计算机生成了可选文字:CSS 选 择 器 一 复 合 选 择 器 class:"high'S 第 一 段 文 件 > 第 二 段 文 字 < / p > div ediv»div2«/div» 第 一 段 文 件 第 二 段 文 字 divl div2 div. high { color : red;

 

计算机生成了可选文字:CSS 选 择 器 一 后 代 选 择 器 cdiv» epdiv 里 面 的 pc/p div p { esparP epdiv 里 面 的 span 里 面 的 pe/p c010 r : red ; < 外 面 的 p < / p > div 里 面 的 p div 里 面 的 span 里 面 的 p 外 面 的 p

 

计算机生成了可选文字:CSS 选 择 器 一 直 接 后 代 选 择 器 cdiv» epdiv 里 面 的 pc/p div > p { esparP t010r : red• epdiv 里 面 的 span 里 面 的 pe/p < 外 面 的 p < / p > div 里 面 的 p div 里 面 的 span 里 面 的 p 外 面 的 p

 

计算机生成了可选文字:CSS 选 择 器 一 相 邻 兄 弟 选 择 器 «dis» «pdiv 里 面 的 p«/p div + p { «spar» 矶 or : red• epdiv 里 面 的 span 里 面 的 p«/p «/sparV 与 div 相 邻 的 pe/p 与 p 相 邻 的 pc-/l» div 里 面 的 p div 里 面 的 span 里 面 的 p 与 div 相 邻 的 p 与 p 相 邻 的 p

 

计算机生成了可选文字:Kdiv name:" rose'S2222«/div» 2222 3333 div Enamel color: red;

 

计算机生成了可选文字:«div name:" rose" cdiv div (name) (agel color: red; 2222 3333

 

计算机生成了可选文字:Kdiv name:" rose'S2222«/div» 2222 3333 div (name:" jack" I color: red;

 

计算机生成了可选文字:CSS 选 择 器 一 伪 类 属 性 :focus :link :visited •first-child :lang 描 述 向 被 激 活 的 元 素 添 加 样 式 。 向 拥 有 键 盘 输 入 焦 点 的 元 素 添 加 样 式 。 当 鼠 标 悬 浮 在 元 素 上 方 时 , 向 元 素 添 加 样 式 · 向 未 被 访 问 的 链 接 添 加 样 式 · 向 已 被 访 问 的 链 接 添 加 样 式 “ 向 元 素 的 第 一 个 子 元 素 添 加 样 式 , 向 带 有 指 定 lang 属 性 的 元 素 添 加 样 式 “

 

计算机生成了可选文字:CSS 选 择 器 一 伪 元 素 属 性 :first-letter :first-line :before : after 描 述 向 文 本 的 第 一 个 字 母 添 加 特 殊 样 式 。 向 文 本 的 首 行 添 加 特 殊 样 式 , 在 元 素 之 前 添 加 内 容 。 在 元 素 之 后 添 加 内 容 ·

 

CSS选择器选择器优先级

  • 选择器的针对性越强,它的优先级就越高
  • 选择器的权值
  • 通配选择符*):0
  • 标签 1
  • 10
  • 属性 10
  • 伪类 10
  • 伪元素 1
  • id 100
  • important 1000
  • 原则:选择器的权值加到一起,大的优先;如果权值相同,后定义的优先

 

CSS选择器选择器优先级

  • 优先级排序
  • important > 内联 > id > > 标签 | 伪类 | 属性选择 > 伪元素 > 通配符 > 继承

 

HTML标签类型

  • HTMLN多标签,根据显示的类型,主要可以分为3大类
  • 块级标签
  • 独占一行的标签
  • 能随时设置宽度和高度(比如divph1h2ulli
  • 行内标签(内联标签)
  • 多个行内标签能同时显示在一行
  • 宽度和高度取决于内容的尺寸(比如spanalabel
  • 行内-块级标签(内联-块级标签)
  • 多个行内-块级标签可以显示在同一行
  • 能随时设置宽度和高度(比如inputbutton

 

修改标签的显示类型

  • CSS中有个display属性,能修改标签的显示类型
  • none隐藏标签
  • block:让标签变为块级标签
  • inline:让标签变为行内标签
  • inline-block:让标签变为行内-块级标签(内联-块级标签)

 

CSS属性

  • CSSN多属性,根据继承性,主要可以分为2大类
  • 可继承属性
  • 父标签的属性值会传递给子标签
  • 一般是文字控制属性
  • 不可继承属性
  • 父标签的属性值不能传递给子标签
  • 一般是区块控制属性

 

CSS属性可继承属性(红色表示常用)

  • 所有标签可继承
  • visibilitycursor
  • 内联标签可继承
  • letter-spacingword-spacingwhite-spaceline-heightcolorfontfont-familyfont-sizefont-stylefont-variantfont-weighttext-decorationtext-transformdirection
  • 块级标签可继承
  • text-indenttext-align
  • 列表标签可继承
  • list-stylelist-style-typelist-style-positionlist-style-image

 

CSS属性不可继承属性(红色表示常用)

  • displaymarginborderpaddingbackground
  • heightmin-heightmax-heightwidthmin-widthmax-width
  • overflowpositionleftrighttopbottomz-index
  • floatclear
  • table-layoutvertical-align
  • page-break-afterpage-bread-before
  • unicode-bidi

 

计算机生成了可选文字:盒 子 、 ' 怕 盒 子 里 裝 的 { 贵 重 的 ) 东 西 损 坏 , 而 添 加 的 泡 沫 或 者 其 它 抗 震 的 辅 料 盒 子 模 型 · 网 页 上 的 每 一 个 标 签 都 是 一 · 每 个 盒 子 都 有 四 个 属 性 内 容 (content) 、 ' 盒 子 里 裝 的 东 西 mar 丨 border padd ing content 、 ' 网 页 中 通 是 指 文 字 和 图 片 p 填 充 (padding, 内 边 距 p 边 眶 (border) 盒 子 本 身 p 边 界 (margin , 外 边 距 、 ' 盒 子 摆 放 的 时 緱 的 不 能 全 部 堆 在 一 起 , 盒 子 之 间 要 留 一 定 空 隙 保 持 通 风 , 同 时 也 为 了 方 便 取 出

 

计算机生成了可选文字:margin-top border-top padding-top content padding-bottom border-bottom margin-bottom width

 

计算机生成了可选文字:margin-top border-top padding-top content padding-bottom border-bottom margin-bottom width

 

计算机生成了可选文字:内 容 属 性 height (content) 一 属 性 描 述 设 置 元 素 高 度 · 设 置 元 素 的 最 大 高 度 · 设 置 元 素 的 最 大 宽 度 . 设 置 元 素 的 最 小 高 度 · 设 置 元 素 的 最 小 宽 度 。 设 置 元 素 的 宽 度 · max-height max-width min-height min-width width

 

计算机生成了可选文字:填 充 (padding, 属 性 padding 厂 padding-bottom padding-left padding-right padding-top 内 边 距 ) 描 述 一 属 性 在 一 个 声 明 中 设 置 所 有 内 边 距 属 性 。 设 置 元 素 的 下 内 边 距 。 设 置 元 素 的 左 内 边 距 。 设 置 元 素 的 右 内 边 距 。 设 置 元 素 的 上 内 边 距 。

 

计算机生成了可选文字:填 充 (padding, 内 边 距 ) 例 子 1 子 3 padding : IOpx 5p 黧 15px 20px ; · 上 内 边 距 是 10p × · 右 内 边 距 是 5px · 下 内 边 距 是 15px · 左 内 边 距 是 20px 例 子 2 padding : 10px 5px 15px; · 上 内 边 距 是 10p 又 · 右 内 边 距 和 左 内 边 距 是 5px · 下 内 边 距 是 15p × 一 属 性 padding : IOpx 5px; · 上 内 边 距 和 下 内 边 距 是 10px · 右 内 边 距 和 左 内 边 距 是 5px 倪 子 padding : 10p 区 冫 · 所 有 4 个 内 边 距 都 是 IOpx

 

计算机生成了可选文字:(border) p border: 5px solid red; P border-radius border • border-width • border-style • border-color

 

计算机生成了可选文字:边 界 (margin, 属 性 margin margin-bottom margin-left margin-right margln-top 外 边 距 ) 描 述 一 属 性 在 一 个 声 明 中 设 置 所 有 外 边 距 属 性 · 设 置 元 素 的 下 外 边 距 。 设 置 元 素 的 左 外 边 距 。 设 置 元 素 的 右 外 边 距 。 设 置 元 素 的 上 外 边 距 。

 

计算机生成了可选文字:边 界 (margin, 外 边 距 ) 一 属 性 例 子 3 倪 子 , margin : 10px 5px 15px 20px; margin : 1 Opx 5px; · 上 外 边 距 是 IOpx . 上 外 边 距 和 下 外 边 距 是 10p × · 右 外 边 距 是 5px · 下 外 边 距 是 15p × · 右 外 边 距 和 左 外 边 距 是 5px · 左 外 边 距 是 20px 例 子 4 子 2 margin : 10px 5px 15px ; margin:10px; · 上 外 边 距 是 10p × · 所 有 4 个 外 边 距 都 是 10p × · 右 外 边 距 和 左 外 边 距 是 5px · 下 外 边 距 是 15p ×

 

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属性 和 leftrighttopbottom属性

 

CSS布局– float属性

  • float属性的常用取值有
  • left:脱离标准流,浮动在父标签的最左边
  • right:脱离标准流,浮动在父标签的最右边

 

计算机生成了可选文字:CSS 布 局 一 position 属 性 absolute fixed relative inherit 生 成 绝 对 定 位 的 元 素 , 相 对 于 static 定 位 以 外 的 第 一 个 父 元 素 进 行 定 位 。 元 素 的 位 置 通 过 "le , “ to 旷 , "right" 以 及 "bottom" 属 性 进 行 规 定 · 生 成 绝 对 定 位 的 元 素 , 相 对 于 浏 览 器 窗 口 进 行 定 位 · 元 素 的 位 置 通 过 "le 俨 , "top","right" 以 及 "bottom" 属 性 进 行 规 定 · 生 成 相 对 定 位 的 元 素 , 相 对 于 其 正 常 位 置 进 行 定 位 。 因 此 , , e 心 2 酽 会 向 元 素 的 LEFT 位 置 添 加 20 像 素 · 默 认 值 . 没 有 定 位 , 元 素 出 现 在 正 常 的 淡 中 ( 忽 酪 top, bottom,left, right 或 者 z-index 声 明 ) 定 应 该 从 父 元 素 继 承 position 属 性 的 值 ·

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/OV8虚拟机、事件驱动

 

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逆时针

  

计算机生成了可选文字:1 pi 0 pi 0.5 pi

***********************笔记**********************

*************************************************

<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>状态标签(实时状态显示:气压、气温)CO

<progress>状态标签 (任务过程:安装、加载) CFO

<datalist> input标记定义一个下拉列表,配合option FO

<details> 标记定义一个元素的详细内容,配合dtdd C

 

注释标签

<ruby> 标记定义注释或音标

<rp> 告诉那些不支持 Ruby元素的浏览器如何去显示

<rt> 标记定义对ruby的注释内容文本

 

其他标签

<keygen> 标记定义表单里一个生成的键值(加密信息传送)OF

<mark> 标记定义有标记的文本 (黄色选中状态)

<output> 标记定义一些输出类型,计算表单结果配合oninput

 

删除的HTML标签

 

纯表现的元素:

basefontbigcenterfont, sstrikettu

 

对可用性产生负面影响的元素:

frameframesetnoframes

 

产生混淆的元素:

acronym appletisindexdir

 

重新定义的HTML标签

 

<b> 代表内联文本,通常是粗体,没有传递表示重要的意思

<i> 代表内联文本,通常是斜体,没有传递表示重要的意思

<dd> 可以同detailsfigure一同使用,定义包含文本,dialog也可用

<dt> 可以同detailsfigure一同使用,汇总细节,dialog也可用

<hr> 表示主题结束,而不是水平线,虽然显示相同

<menu> 重新定义用户界面的菜单,配合commond或者menuitem使用

<small> 表示小字体,例如打印注释或者法律条款

<strong> 表示重要性而不是强调符号

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值