HTML5混编学习笔记：HTML5入门

时间：2021-07-17 14:58:41

目前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”文件夹
      HTML5混编学习笔记：HTML5入门
    • 第二步：将下载的插件拖入“Installed Packages”文件夹，并重启
      HTML5混编学习笔记：HTML5入门
    • 第三步：启动“Package Control”
      HTML5混编学习笔记：HTML5入门
    • 第四步：选择功能“Install Package”（导入插件）
      HTML5混编学习笔记：HTML5入门
    • 第五步：选择自己需要的插件，这里以“emmet”为例
      HTML5混编学习笔记：HTML5入门

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

  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.样例(待续…)
标签：

相关文章