HTML5混编学习笔记：HTML5入门

目前App Store上的App分类

1. 原生应用（native application）
   特点: 利用原生控件的优势, 响应速度快
   缺点: 开发成本高
2. web应用
   特点: 跨平台(浏览器/UIWebView/WKWebView); 开发速度快
   缺点: 依赖网络; 响应速度相对慢

3. 混合应用（hybrid application）

   • 描述：在原生应用上嵌入一个浏览器组件，使用某种方式，让原生代码和网页能够实现双向的通信
   • 特点：利用原生速度优势，web应用的跨平台
   • 广义跨平台应用（混合应用）：只利用前端开发技术
4. 混合应用
   a.原生控件+html/css/javaScript混合
   b.OC语言和JavaScript混合

混编内容（入门）：

1. web前端技术：HTML/CSS/JavaScript（角度：如何和html页面交互）
2. 框架：Bootstrap（UI框架）、jQuery Mobile（UI框架）、jQuery（JS框架）…
3. OC语言和JS进行交互
4. 使用框架搭建登录页面技术（profile页面）
5. Ajax异步请求技术

工具

1. Sublime Text/eMac/Eclipse
2. Chrome/Firefox/Safari

如何使用Sublime Text

1. 下载package control install插件
   http://packagecontrol.io
   将下载好的插件手动放入Sumlime Text的“Installed Packages”文件夹中。
   方法：
   
   • 第一步：找到“Installed Packages”文件夹
     
   • 第二步：将下载的插件拖入“Installed Packages”文件夹，并重启
     
   • 第三步：启动“Package Control”
     
   • 第四步：选择功能“Install Package”（导入插件）
     
   • 第五步：选择自己需要的插件，这里以“emmet”为例
     

2. web前端学习网站的链接

   • 中文：www.w3school.com.cn
   • MDN: https://developer.mozilla.org/zh-CN/docs
   • 英文：www.w3schools.com

3. 本地web服务器

   • 1.安装Apache软件 ->Done：apachectl -v
   • 2.启动Apache服务，使用命令行：sudo apachectl start，验证：浏览器中输入localhost 出现 It Works！
   • 3.文件指定的根目录下
   • 4.浏览器中输入对应的URL

HTML5 (h5)

1. 为什么会提出HTML5？

   ->为业界提供了一个统一的标准
   * a.提出很多有语义性的标签
   * b.删除不常用的标签

2. 特性：趋势（Safari支持绝大多数的h5标签）

3. HTML5新增标签（元素），目的是什么
4. 样例：简单的页面，查看html和html5生成大纲outline的区别
   h1 ~ h6
   ->使用在线： http://gsnedders.html5.org/outliner/

总结一：
->html的元素分为两类

• 块级元素（Block Element）：占据页面的整个一行
  -> div/p/h1 ~ h6

• 行内元素：只占据内容的一小块
  -> img/a

样例（递进）：使用HTML5的新标签，实现常用的页面布局
->页眉+页脚+内容+侧边栏
->分析

• a.浏览器的解析器的解析的顺序从上到下，只有body元素的内部的标签的内容才会显示
• b.footer/aside这些标签的样式需要使用css
• c.HTML的标签组成了一个文档树结构（节点/子节点/叶子节点）

CSS:

• 1.什么是CSS？
  Cascading Style Sheets：层叠样式表
  ->样式：显示样式（字体/背景/2D+/动画…）
  ->层叠：设定样式的优先级（高者优先），相同优先级下，后者覆盖前者
• 2.CSS作用
  ->为HTML页面上的标签/元素设定样式
• 3.CSS语法

    selector{        declaration1；        declaration2；        declaration3；        ...        declarationn；    }

* declaration(声明)如下：* 属性名字：属性值* 例：color:red* 选择器的构造selector（***）：目的是选择html页面上的一个或者多个元素条件

需求：把html页面上的所有的h1的元素的字体颜色改成红色    h1{color:red}

• 4.样例(待续…)