HTML5混编学习笔记：HTML5入门

最新推荐文章于 2024-06-01 17:55:41 发布

原创最新推荐文章于 2024-06-01 17:55:41 发布 · 625 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

这篇博客介绍了HTML5混编技术，包括原生应用、web应用和混合应用的特点。重点讲解了混合应用的实现，如使用HTML/CSS/JavaScript与原生代码交互，以及框架如Bootstrap和jQuery。还提到了如何使用Sublime Text安装插件，学习资源如w3school，以及本地Web服务器的设置。文章进一步探讨了HTML5的新标签及其语义性，强调了CSS在页面布局和样式设定中的作用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

目前App Store上的App分类

原生应用（native application）
特点: 利用原生控件的优势, 响应速度快
缺点: 开发成本高
web应用
特点: 跨平台(浏览器/UIWebView/WKWebView); 开发速度快
缺点: 依赖网络; 响应速度相对慢
混合应用（hybrid application）
- 描述：在原生应用上嵌入一个浏览器组件，使用某种方式，让原生代码和网页能够实现双向的通信
- 特点：利用原生速度优势，web应用的跨平台
- 广义跨平台应用（混合应用）：只利用前端开发技术
混合应用
a.原生控件+html/css/javaScript混合
b.OC语言和JavaScript混合

混编内容（入门）：

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

工具

Sublime Text/eMac/Eclipse
Chrome/Firefox/Safari

如何使用Sublime Text

下载package control install插件
http://packagecontrol.io
将下载好的插件手动放入Sumlime Text的“Installed Packages”文件夹中。
方法：
- 第一步：找到“Installed Packages”文件夹
- 第二步：将下载的插件拖入“Installed Packages”文件夹，并重启
- 第三步：启动“Package Control”
- 第四步：选择功能“Install Package”（导入插件）
- 第五步：选择自己需要的插件，这里以“emmet”为例
web前端学习网站的链接
- 中文：www.w3school.com.cn
- MDN: https://developer.mozilla.org/zh-CN/docs
- 英文：www.w3schools.com
本地web服务器
- 1.安装Apache软件 ->Done：apachectl -v
- 2.启动Apache服务，使用命令行：sudo apachectl start，验证：浏览器中输入localhost 出现 It Works！
- 3.文件指定的根目录下
- 4.浏览器中输入对应的URL

HTML5 (h5)

为什么会提出HTML5？

->为业界提供了一个统一的标准
* a.提出很多有语义性的标签
* b.删除不常用的标签
特性：趋势（Safari支持绝大多数的h5标签）
HTML5新增标签（元素），目的是什么
样例：简单的页面，查看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.样例(待续…)