前言:作为IOS开发工程师,终会接触到网页前端开发,甚至可能会有 用HTML5开发IOS的app客户端的需求。比如现在上架的app就有比如理财类型的app有的就用HTML开发的,从理财类型的app需求上思考,用 HTML5确实是个不错的选择,利用了跨平台的同时,也考虑到了理财类型的app仅仅需要处理的是数据的业务逻辑,不存在较多的本地存储数据,而且涉及到 的财务信息从安全性考虑数据基本都会存储在服务器端,是不可能用于存储在本地的,再加上HTML5对各种手机屏幕的尺寸适配性非常灵活,所以这一类app 用HTML5开发是非常正确的选择。不过本文涉及的内容是针对IOS工程师所需的知识内容,所以并没有涉及网页前端所有的开发细节。
HTML5简介
HTML5 - 简单
8年发展 - 标准
UI界面跨平台 - 写一份HTML5代码,这个界面就可以运行到任何手机平台
运行平台 - 浏览器
移动先行 - 以前的HTML(5以上的版本)都是运行在非手持设备运行的
原生 - 比如手机自带的手机相册\打电话\拍照
>手机app的常见的开发模式 :原生+HTML5
网页的基本组成
一个有具体功能的完整的网页,一般由3部分组成
HTML
决定网页的具体内容和结构
CSS
代表网页的样式(美化网页最重要的一块内容)
JavaScript
网页的交互效果,比如对用户鼠标事件作出响应
<HTML和CSS需要了解就好,因为需要掌握大量东西才好做CSS美工方面的东西>
HTML编写
什么是HTML?
HyperText Markup Language 超文本标记语言
其实就是文本,由浏览器负责将它解析成具体的网页内容
前端开发工具:
>sublime text : 拓展性非常强(安装各种插件)\颜色经典
>Dreamwaver : 美工(Adobe公司开发)
>WebStorm : 自带了各种插件 比如Nodejs grunt less
>Eclipse : 主要开发Java程序
head一般放CSS和JS的,body一般放内容。
title一般放置描述性内容。
常见的HTML的标签: 百度就能了解。
CSS编写
什么是CSS?CSS的全称是Cascading Style Sheets,层叠样式表
它用来控制HTML标签的样式,在美化网页中起到非常重要的作用
CSS的编写格式是键值对形式的,比如:
1 |
color : red; |
CSS的三种书写形式:
- 1、行内样式:(内联样式),就是直接在标签内部添加样式,直接作用到当前样式
1 |
<p style="color: red; font-size:20px; background: #00f"></p> |
- 2、页内样式:
1 |
<head> |
- 3、外部样式:在单独的CSS文件中书写,然后在网页中用link标签引用
为了能够作用到项目里的所有HTML文件,就有必要新建一个xxx.css文件:
1 |
div{ |
然后在需要设置CSS样式的网页上添加连接这个自定义CSS文件
1 |
<head> |
CSS选择器
CSS有两大核心:选择器、属性(学好CSS,只要学好这两个就好了)
代码格式就是:
1 |
选择器{ |
选择器使用实例1
选择器的作用:选择对应的标签,为之添加样式
div{
color:red;
font-size: 20px;
border:5px;
}
html中的某个标签:
...
<body>
<div>second</div>
</body>
...
这个div标签选择器,会根据标签名找到对应标签<div>,
然后把选择器里的属性设置到对应标签的内容上。
这里就是把color:red;font-size:20px;border:5px;设置在second这个内容上
选择器使用实例2
标签选择器:根据标签名找到标签
1 |
<div>div1</div> |
下面是选择器:
1 |
div{ |
因为两个标签的标签名都是div,所以选择器里的属性都会作用于div1和div2
下面讲讲不同类型的类选择器:
类选择器:
1 |
<p class ="high">第一段文件</p> |
然后在CSS文件中:
1 |
.high{ |
这个标签是作用于class类标签属性是high的标签,所以会作用于"第一段文字"和"div"
总结:class标签就是可以把不同类的标签可以归为一个类class
注意
类选择器开头要有"."符号哦
类选择器的名字可以是标签中class属性字符串的一部分
比如:.he类选择器名可以访问class = "woe he llo"的标签(注意要空格隔开的,不隔开(比如woehello)无用)
"."是用来找class属性的,而"#"是用来找id属性的。
id选择器:
1 |
<!DOCTYPE html> |
如果id="rose"的标签有两个,IDE会报错,浏览器运行无效。
和类标签选择器一样,Class通过.符号去选择,id选择器通过#符号去选择
#rose选择器表示查找并将这里面的属性设置到标签中id是rose的标签
群组选择器
- 普通形式,神马标签都写上:
1 |
div , p , a { |
再举一个并列选择器(或者):
1 |
div , .high{ |
作用:只要标签中有div或者有class=”high”或者是div和class=”high都有的都能设置
另外,如果要设置所有标签的设置,那么选择器名可以是符号 *
1 |
* { |
复合(并且):
1 |
div.high{ |
还有就是需要同时符合三个条件,而且顺序不能乱:
1 |
div.high#jack{ |
意思就是,必须既是div,而且是class属性有high,最后还要id为jack都满足的标签
后代选择器(之间空格):
1 |
div .tom { |
就是找到div里面class=”tom”的所有子标签
如果是:
1 |
div p div span p{ |
就要找到div包含的p,这个p包含的div,这个div包含的span,这个span包含的p
然后根据后代又分为两种: 1、直接后代选择器,2、相邻兄弟选择器
1 |
div > p { |
这里就是针对直接后代的,就是div包含的直接p标签,不是间接包含的标签
1 |
div + p { |
相邻兄弟选择器,找到相邻的选择器
属性选择器:
1 |
div[name]{ |
CSS的优先级(从1~4优先级别越来越低):
1 |
带有 !important 的属性 |
还有一种别人总结的经验:算权值
标签 1 类 10 id 100 然后求和计算css的选择器的权值
CSS的注释是这样的 /* 内容 */
但是在CSS中//这样的注释是无用的。
1 |
HTML注释: |
1 |
CSS标签用的冒号叫"伪类" |
CSS选择器–伪类(了解):
HTML的输入框初识
...
<input placeholder="请输入用户名">这个就是在输入框内添加浅色的提示
...
Term和Alfred2的使用
iTerm和Alfred2的安装和使用笔记网址:http://www.cnblogs.com/goodboy-heyang/p/4909296.html
标签类型
根据显示的类型,主要分为3大类
块级标签
绝对独占一行的标签
随时设置自己的宽度和高度
(比如div、p、h1、h2、ul、li)
行内标签(内联标签)
多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸(比如span、a、label)
行内-块级标签(内联-块级标签)
1 |
多个行内-块级标签可以显示在同一行 |
1 |
display:inline-block |
1 |
display:none就会让内容不显示,这个display相当于IOS里的show方法 |
百度首页
源码下载百度云备份链接: 百度首页实例 密码: yzyv
网页开发须知:
工程项目文件目录
css文件夹
index.css
script文件夹
index.html
美工开发一般步骤:
先在html.index内定好结构,类似IOS开发中的规划好UI布局,每一块放好一块内容。
然后在index.css文件中根据html.index分好的块分别设置样式。
然后就是慢慢调整,很耗费时间的。
bootstrap
1 |
这是网页前端最受欢迎的第三方框架 |
官方开发文档展示了很多模板代码使用样式
说白了,这个框架就是帮你封装了一堆漂亮的样式,然后你只要会用即可。
有一些图标被设计成字体,然后存储在fonts文件夹下的字体文件内,所以需要把整个fonts文件夹拷贝进工程根目录。
在使用图片文字的时候,如果要调整大小,要注意,因为是文字,所以直接用font-size属性设置值就对了。
JS核心语法
浏览器就是JS的运行平台,就好比IOS就是OC的运行平台。
JS的常见用途
HTML DOM操作(节点操作,比如添加、修改、删除节点)
给HTML网页增加动态功能,比如动画
事件处理,比如监听鼠标点击、鼠标滚动、键盘输入
JS的书写方式
1 |
1、JS代码写在双引号里面。 |
另外,JS所有的变量都是用var,实例:var 变量名 = 变量值
数据类型
1 |
number 所有数字,比如小数/整数 |
定义函数
1 |
function 函数名(形参){ |
函数实例:
1 |
1.简单的示例: |
对象
1 |
最简单的对象 |
数组、字典都是对象类型
数组实例:
var array = [12,'dog',24,'jack',{
name : 'wangcai'
},[],function(){
console.log(10);
}];
array[array.length-1]();
HTML5的简介的更多相关文章
-
【HTML5】HTML5 WebSocket简介以及简单示例
互联网发展到现在,早已超越了原始的初衷,人类从来没有像现在这样依赖过他:也正是这种依赖,促进了互联网技术的飞速发展.而终端设备的创新与发展,更加速了互联网的进化: HTTP/1.1规范发布于1999年 ...
-
HTML5标准简介
最近前端的群都蛮热闹的,但我发现多数讨论的是javascript和css相关的问题,仿佛大家在努力创建各种交互.样式的时候,忘却了这一切的基础 – HTML. 其实我很喜欢HTML,觉得这个语言远比X ...
-
HTML5 WebAudioAPI简介(一)
一.常用对象 1.AudioContext对象 AudioContext是一个专门用于音频处理的接口,并且原理是讲AudioContext创建出来的各种节点(AudioNode)相互连接,音频数据流经 ...
-
简介 jCanvas:当 jQuery遇上HTML5 Canvas
https://github.com/caleb531/jcanvas HTML5 可以直接在你的网页中使用 <canvas> 元素及其相关的 JavaScript API绘制的图形. 在 ...
-
HTML5图形图像处理技术研究
摘要:图形图像处理平台大部分是传统的C/S架构的桌面应用程序,维护困难,共享性差,而B/S架构的Web程序具有易维护.易共享的优点.本文研究了基于HTML5的Web图形图像处理技术,用HTML5实现了 ...
-
HTML5 Web Storage -- 让Cookies看起来如此古老
转载 原文 在此两部分组成的系列中,我们将来看看HTML5 规范中最棒而且最有趣的特性之一的Web Storage.我们将看看Web Storage 和 Cookies的历史,并从考虑以下几点: *C ...
-
HTML5 WebAudioAPI(四)--绘制频谱图2
绘制分析器数组所有数据.本文内容,承接上文 1.800宽度绘制 var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { ale ...
-
HTML5 WebAudioAPI(三)--绘制频谱图
HTML <style> #canvas { background: black; } </style> <div class="container" ...
-
HTML5 WebAudioAPI-实例(二)
简单播放实例1: var url='../content/audio/海阔天空.mp3'; if (!window.AudioContext) { alert('您的浏览器不支持AudioContex ...
随机推荐
-
学习了quartz.net2.0的心得
由于项目中要运用到此调度方法,所以抽空学习了下,简单的用法可以掌握了 首先作为没有用过的人来说,怎么用呢? 于是百度了下原来先要下载 quartz.net2.0, 然后我就去下了个quartz.net ...
-
C语言-两个库函数
两个库函数 --1-- printf函数 1.1 printf 函数的介绍 1.2 格式控制字符串 1.3 %f输出精度的问题 1.4 printf 函数使用注意事项 --2-- scanf函数 2. ...
-
java10-2 toString()方法
public String toString():返回该对象的字符串表示. Integer类下的一个静态方法: public static String toHexString(int i):把一个整 ...
-
dev中如何对combox下拉框设置可消除属性以及ASPxGridView中金额,数量的显示,以及总计、grid中某行值
下拉框属性关键:IncrementalFilteringMode="StartsWith" DropDownStyle="DropDown" ASPxGridV ...
-
java集合--java.util.ConcurrentModificationException异常
ConcurrentModificationException 异常:并发修改异常,当方法检测到对象的并发修改,但不允许这种修改时,抛出此异常.一个线程对collection集合迭代,另一个线程对Co ...
-
简单拨号器(Android)
感受: 1.了解了intent中的action和Uri. 2.了解了向下一个活动传递数据. 3.了解了内容提供器. 4.了解自定义适配器. 4.其实T9拨号器和简单计算器原理一样.
-
python_ 函数
函数是啥? 函数能提高应用的模块性,和代码的重复利用率 函数特点? 1 代码块以 def 关键词开头,后接函数名和圆括号() 2 任何传入参数和自变量必须放在圆括号中间 3 函数以冒号开始,并且缩进 ...
-
Jquery 选择器 特殊字符 转义字符
1.Jquery 选择器 id包含特殊字符,加双斜线 \\ 例 <input type="text" id="dbo_HouseInfo.HouseResour ...
-
wmsys.wm_concat结果长度限制的问题
转:http://bbs.csdn.net/topics/360059765 使用wmsys.wm_concat多列合成一列遇到问题ORA-22813: 操作数值超出系统的限制 官方文档解释是总长度超 ...
-
delegate() 事件绑定 事件委托
定义和用法 delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数. 使用 delegate() 方法的事件处理程序适用于当前或未来 ...