写给IOS开发工程师的网页前端入门笔记
前言:作为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]();
写给IOS开发工程师的网页前端入门笔记的更多相关文章
- 来自IOS开发工程师的零基础自学HTML5经验分享
移动互联网的火爆,而Html具有跨平台.开发快的优势,越来越受到开发者的青睐.感谢IOS开发工程师“小木___Boy”’带来的HTML5学习经验分享. 一.学习途径 1.很多视频网站 比如慕课.和极客 ...
- iOS开发工程师笔试题
iOS开发工程师笔试题 1. Object-c的类可以多重继承么?可以实现多个接口么?Category是什么?重写一个类的方式用继承好还是分类好?为什么? Object-c的类不可以多重继承:可以 ...
- 如何成为一名优秀的 iOS 开发工程师
如果你是一位专业的iOS开发工程师,你应该为自己感到自豪.因为你能在强大的iOS系统下,一展身手实现自己和他人的想法,这是一件令人无比激动的事情. 作为一名iOS开发工程师,你一定想成为行业的佼佼者. ...
- iOS 开发工程师
iOS 开发工程师 工作职责: 负责下厨房 iPhone 客户端的产品开发.维护.优化以及扩展. 任职要求: 对技术有热情,热爱新的挑战 熟悉 CocoaTouch, ASIHttpRequest, ...
- (转)TDD的iOS开发初步以及Kiwi使用入门
本文转自“瞄神”博客 TDD的iOS开发初步以及Kiwi使用入门 测试驱动开发(Test Driven Development,以下简称TDD)是保证代码质量的不二法则,也是先进程序开发的共识.App ...
- 记录我的点点滴滴从此刻做起——iOS开发工程师
作为一个iOS工程师,想写博客也是有原因的:首先有这个想法(写博客的想法)也是因为想到自己都从事iOS开发快两年了,怎么也只会堆代码,写view,技术真的很一般,感觉都要被淘汰了:基于以上原因,自己也 ...
- 前端开发工程师 - 05.产品前端架构 - 协作流程 & 接口设计 & 版本管理 & 技术选型 &开发实践
05.产品前端架构 第1章--协作流程 WEB系统 角色定义 协作流程 职责说明 第2章--接口设计 概述 接口规范 规范应用 本地开发 第3章--版本管理 见 Java开发工程师(Web方向) - ...
- 做一个高效的IOS开发工程师
最近觉得自己的开发效率太慢了,总结了一下:熟练度不够是一方面,经常用到东西查看一下,积累问题?一方面,这个无法分享的.现在主要分享的是:如何高效的用好自己的时间. 1.善用xcode. xcode实在 ...
- TDD的iOS开发初步以及Kiwi使用入门
测试驱动开发(Test Driven Development,以下简称TDD)是保证代码质量的不二法则,也是先进程序开发的共识.Apple一直致力于在iOS开发中集成更加方便和可用的测试,在Xcode ...
随机推荐
- Parallax.js – 自适应智能设备方向的视差效果插件
Parallax.js 是一个简单的,轻量级的的视差引擎,能够对智能设备的方向作出反应.在没有没有陀螺仪或运动检测硬件可用的时候,使用光标的位置来代替.有很多的行为,你就可以设置为任何给定的视差实例. ...
- linux根目录下文件夹概览
/ 根目录 /bin 存放必要的命令 /boot 存放内核以及启动所需的文件等 /dev 存放设备文件 /etc 存放系统的配置文件 /home 用户文件的主目录,用户数据存放在其主目录中 /lib ...
- JS魔法堂:属性、特性,傻傻分不清楚
一.前言 或许你和我一样都曾经被下面的代码所困扰 var el = document.getElementById('dummy'); el.hello = "test"; con ...
- QTableView表格视图的列宽设置
Qt中的表格控件可以通过从QTableView或QTableWidget派生子类实现.其中,QTableWidget只是对QTableView的一种简单封装.因为使用QTableView常常需要用户指 ...
- JAVA - package与import解析(一)
一.为什么要引入package和import?这个问题和c++中引入命名空间是一样的,也是为了解决重名问题.java通过包机制来解决重名问题,也就相当于给重名的代码加一系列前缀,从而达到唯一标识的作用 ...
- C#简单文件下载-3行代码
使用WebClient string url = "http://www.mozilla.org/images/feature-back-cnet.png"; WebClient ...
- 百度地图js根据经纬度定位和拖动定位点
<!DOCTYPE html><html><head> <meta http-equiv="Content-Type" content=& ...
- ACM训练场
http://acm.nyist.net/JudgeOnline/problemset.php http://blog.csdn.net/SJF0115/article/category/910592 ...
- javascript: detect mobile devices or browser
http://detectmobilebrowsers.com/ http://hgoebl.github.io/mobile-detect.js/ http://www.hand-interacti ...
- 【洛谷 p3382】模板-三分法(算法效率)
题目:给出一个N次函数,保证在范围[l,r]内存在一点x,使得[l,x]上单调增,[x,r]上单调减.试求出x的值. 解法:与二分法枚举中点使区间分成2份不一样,三分法是枚举三分点,再根据题目的情况修 ...