写给IOS开发工程师的网页前端入门笔记

时间  2019-11-17
标签 写给 ios 开发 工程师 网页 前端 入门 笔记 栏目 iOS 繁體版
原文   原文链接

前言：做为IOS开发工程师，终会接触到网页前端开发，甚至可能会有 用HTML5开发IOS的app客户端的需求。好比如今上架的app就有好比理财类型的app有的就用HTML开发的，从理财类型的app需求上思考，用 HTML5确实是个不错的选择，利用了跨平台的同时，也考虑到了理财类型的app仅仅须要处理的是数据的业务逻辑，不存在较多的本地存储数据，并且涉及到 的财务信息从安全性考虑数据基本都会存储在服务器端，是不可能用于存储在本地的，再加上HTML5对各类手机屏幕的尺寸适配性很是灵活，因此这一类app 用HTML5开发是很是正确的选择。不过本文涉及的内容是针对IOS工程师所需的知识内容，因此并无涉及网页前端全部的开发细节。css

 

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的编写格式是键值对形式的，好比：html

1
2
3
 
color : red;
background-color : blue
font-size : 20px; 冒号左边的是属性名，冒号右边的是属性值

CSS的三种书写形式:

  • 一、行内样式：(内联样式),就是直接在标签内部添加样式，直接做用到当前样式
1
2
 
<p style="color: red; font-size:20px; background: #00f"></p>
弊端：只能做用于当前标签，对于多个重复的多个的，大量的重复的就很差了。
  • 二、页内样式:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<head>
 <style>
 p{
 color: red;
 font: 40px;
 background: orange;
 }这个就是指定p标签的样式CSS
 </style>
</head>
<body>
 <p>loaojhaljeoijfaojfaojf;al</p>
 <p>loaojhaljeoijfaojfaojf;al</p>
 <p>loaojhaljeoijfaojfaojf;al</p>
 这样这里全部的p标签的样式都会被上面的CSS样式所设定
 <p style="color: yellow">loaojhaljeoijfaojfaojf;al</p>
 若是标签本身又设置了和样式标签有冲突的属性，代码会自动就近原则。 
</body>
弊端：只能用在当前网页
  • 三、外部样式：在单独的CSS文件中书写，而后在网页中用link标签引用

为了可以做用到项目里的全部HTML文件，就有必要新建一个xxx.css文件：前端

1
2
3
4
5
 
div{
 color:red;
 font-size: 50px;
 border: 1px 
}

而后在须要设置CSS样式的网页上添加链接这个自定义CSS文件bootstrap

1
2
3
4
5
6
7
8
 
<head>
 <link rel="stylesheet" href="xxx.css" > 
 rel是relation关系的意思
 href就是Hypertext Reference(超文本引用)的缩写
</head>
<body>
 <div>second</div>
</body> 三种方式没有优先级，若是要考虑优先，原则就是就近原则。

CSS选择器

CSS有两大核心：选择器、属性(学好CSS，只要学好这两个就行了)

代码格式就是：
1
2
3
4
5
 
选择器{
 属性1；
 属性2；
 。。。。。。
}
选择器使用实例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
2
 
<div>div1</div>
<div>div2</div>

下面是选择器：浏览器

1
2
3
4
5
 
div{
 color:red;
 font-size: 20px;
 border:5px;
}

由于两个标签的标签名都是div，因此选择器里的属性都会做用于div1和div2安全

下面讲讲不一样类型的类选择器：服务器

类选择器：

1
2
3
4
5
 
<p class ="high">第一段文件</p>
<p>第二段文字</p>

<div class ="high">div1</div>
<div>div2</div>
而后在CSS文件中：
1
2
3
 
.high{
 color: red;
}
 
这个标签是做用于class类标签属性是high的标签，因此会做用于"第一段文字"和"div"
总结：class标签就是能够把不一样类的标签能够归为一个类class
注意
    类选择器开头要有"."符号哦
    类选择器的名字能够是标签中class属性字符串的一部分
        好比：.he类选择器名能够访问class = "woe he llo"的标签(注意要空格隔开的，不隔开(好比woehello)无用)
    "."是用来找class属性的，而"#"是用来找id属性的。

id选择器：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 
<!DOCTYPE html>
<html>
<head lang = "en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 #rose { 
 font-size: 50px;
 }
 </style>
</head>
<body>
 <div class="tom jerry" id="jack">11111</div>
 <p class="tom">2222</p>
 <a class="jerry" id="rose">222</a>
</body>
</html>
 
若是id="rose"的标签有两个，IDE会报错，浏览器运行无效。
和类标签选择器同样，Class经过.符号去选择，id选择器经过#符号去选择
#rose选择器表示查找并将这里面的属性设置到标签中id是rose的标签

群组选择器

  • 普通形式，神马标签都写上：
1
2
3
 
div , p , a {
 font-size:50px;
} 其实质意义上div,p,a三者是并列的。

再举一个并列选择器(或者)：app

1
2
3
 
div , .high{
 color: red; 
};

做用：只要标签中有div或者有class=”high”或者是div和class=”high都有的都能设置框架

另外，若是要设置全部标签的设置，那么选择器名能够是符号 *

1
2
3
 
* {
 font-size: 50px;
}

复合(而且):

1
2
3
 
div.high{
 color: red;
}

还有就是须要同时符合三个条件，并且顺序不能乱：

1
2
3
 
div.high#jack{
 color: blue;
}

意思就是，必须既是div，并且是class属性有high，最后还要id为jack都知足的标签

后代选择器(之间空格)：

1
2
3
 
div .tom {
 color: red;
}

就是找到div里面class=”tom”的全部子标签

若是是：

1
2
 
div p div span p{
}

就要找到div包含的p，这个p包含的div，这个div包含的span，这个span包含的p

而后根据后代又分为两种： 一、直接后代选择器，二、相邻兄弟选择器

1
2
 
div > p {
}

这里就是针对直接后代的，就是div包含的直接p标签，不是间接包含的标签

1
2
 
div + p {
}

相邻兄弟选择器，找到相邻的选择器

属性选择器：

1
2
3
4
 
div[name]{
}
div[name][id]{
}

CSS的优先级(从1~4优先级别愈来愈低)：

1
2
3
4
5
6
7
8
 
带有 !important 的属性
在style属性中的样式
先比较选择器的优先级，优先级高的会覆盖优先级低的。
 针对性越强(范围越小)的选择器，优先级越高
 针对性越弱(范围越大)的选择器，优先级越低
 例子：<div class="hello" id="jack">hewelf</div>
 这里明显，id属性可以限定的标签最小，甚至对应的是一个标签。
若是优先级都相同，再比较选择器的前后顺序，后面的会覆盖前面的。
 
还有一种别人总结的经验：算权值
标签 1 类 10 id 100 而后求和计算css的选择器的权值    
CSS的注释是这样的 /* 内容 */
可是在CSS中//这样的注释是无用的。
1
2
 
HTML注释：
 <!-- 内容 -->
 
1
2
3
4
 
CSS标签用的冒号叫"伪类"
div:hover {
 color: blue;
}hover表示鼠标悬浮在div标签上面的时候，会设置相关的属性，这里会让div标签内容变成蓝色

CSS选择器–伪类(了解):

CSS选择器--伪类.png

HTML的输入框初识

...
<input placeholder="请输入用户名">这个就是在输入框内添加浅色的提示
...

Term和Alfred2的使用

iTerm和Alfred2的使用
iTerm和Alfred2的安装和使用笔记网址:http://www.cnblogs.com/goodboy-heyang/p/4909296.html

标签类型

根据显示的类型，主要分为3大类

块级标签

绝对独占一行的标签
随时设置本身的宽度和高度
(好比div、p、h一、h二、ul、li)

行内标签(内联标签)

多个行内标签能同时显示在一行
宽度和高度取决于内容的尺寸(好比span、a、label)

行内-块级标签(内联-块级标签)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 
多个行内-块级标签能够显示在同一行
能随时设置宽度和高度(好比input、button)

display:显示
好比：
 display:inline-block 行内-区块
 display:inline 行区
 display:block 块
使用示例，这里将默认是块级的div设置为行内：
<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 div{
 display: inline;
 }
 </style>
</head>
<body>
<div >hello</div>
<div >world</div>
</body>
</html>
这里实例本来div标签的hello和world是分别显示在两行的，各自独占一行，
而后由于div选择器设置display: inline;意思就是将div标签设置为行内标签，
那么会发现效果hello和world就都显示在一行里了。
 
1
2
 
display:inline-block
能够将内容设置为既是行内标签又是块级标签，这样你能够仅仅把div当作简单的容器就是了。
 
1
2
 
display：none就会让内容不显示，这个display至关于IOS里的show方法
visiblity:hidden 仅仅是看不到

百度首页

源码下载百度云备份连接: 百度首页实例 密码: yzyv

网页开发须知：
    工程项目文件目录
    css文件夹
        index.css
    script文件夹
    index.html
美工开发通常步骤：
    先在html.index内定好结构，相似IOS开发中的规划好UI布局，每一块放好一块内容。
    而后在index.css文件中根据html.index分好的块分别设置样式。
    而后就是慢慢调整，很耗费时间的。

bootstrap

1
2
3
4
5
 
这是网页前端最受欢迎的第三方框架
另外，若是要学习能够到网站 v3.bootcss.com
在下载的bootstrap框架中css/下的咱们能用到的就是bootstrap.css和bootstrap.min.css，其余的能够删除。
bootstrap.css和bootstrap.min.css的区别就是min将内部的空格都去了，这样文件小了，就能够节省流量。
因此bootstrap.css叫开发版本，而后bootstrap.min.css叫上线版本

官方开发文档展现了不少模板代码使用样式

说白了，这个框架就是帮你封装了一堆漂亮的样式，而后你只要会用便可。
有一些图标被设计成字体，而后存储在fonts文件夹下的字体文件内，因此须要把整个fonts文件夹拷贝进工程根目录。
在使用图片文字的时候，若是要调整大小，要注意，由于是文字，因此直接用font-size属性设置值就对了。

JS核心语法

浏览器就是JS的运行平台，就比如IOS就是OC的运行平台。

JS的常见用途

HTML DOM操做(节点操做，好比添加、修改、删除节点)
给HTML网页增长动态功能，好比动画
事件处理，好比监听鼠标点击、鼠标滚动、键盘输入

JS的书写方式

1
2
3
4
5
6
7
 
一、JS代码写在双引号里面。
 <button onclice="alert(10);alert(99);">拍照</button>
 这段JS代码能够写在html的<body>标签里，效果
二、脚本中执行
 <scipt>
 console.log(100);
 </scipt>

另外，JS全部的变量都是用var，实例：var 变量名 = 变量值

数据类型

1
2
3
4
5
 
number 全部数字，好比小数/整数
object 全部类型 好比{}.[]
string 字符串类型，用双引号""或者单引号''，建议JS都用单引号
 缘由示例：<body onclick ="alert('hello')"></body>若是hello用双引号，确定会冲突的。
function 函数类型

定义函数

1
2
3
4
5
6
7
8
9
10
 
function 函数名(形参){
 //函数体
}
 函数定义注意，若是两个或者两个以上的函数函数名同样，后面的会直接覆盖前面的，
 没有重载的意义，就是直接的覆盖。最后使得只有最后一个函数有用或者会被调用。
 function sum(num1,num2,num3,num4){
 return num1 = num2 + num3 + num4;
 }
 //会返回NaN = Not a Number
 console.log(sum(10,20));

函数实例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
1.简单的示例：
var dog = {
age : 30;
run : function(){
 //this 至关于 OC里的self
 console.log(this.age + '岁的狗跑起来。');
 }
 }
 2.关于多个参数的示例：
 function sum(){
 console.log(arguments);
 }
 //JS会把多个参数存储在一个默认的数组arguments里面
 sum(2+2+12);//而后会打印出[2,2,12]
 3.求和多个参数
 function sum(){
 for (var i = 0,){
 }
 }
 //JS会把多个参数存储在一个默认的数组arguments里面
 sum(2+2+12);//而后会打印出[2,2,12]
 3.多个参数返回求和(能够把字符串数值和数值类型数值都能相加)
 <script>
 function sum(){
 var num = 0;
 for(var i = 0;i<arguments.length;i++){
 var temp = arguments[i];
 if (typeof temp == 'number'){
 num += temp;
 }else if(typeof temp == 'string' && !isNaN(temp *= 1)){
 num += temp;
 }
 }
 console.log(num);
 }
 sum('1',2,3,4,'hello');
 </script>
 4.看看函数的类型
 console.log(sum)//不要用sum()这个是调用函数了

对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
最简单的对象
var dog = {};
而后添加属性：
var dog = {
 age : 20;
 name: 'rose';
};
console.log(dog.name);
而后要访问这个dog的属性的两种方法：
console.log(dog.age);//点访问属性
console.log(dog['age']);//字典访问属性
这里提一个易错点：dog[age]这样会获得age的变量值，而后再访问字典字，因此会出bug的。
下面讲讲对象的方法：
function temp(){
 console.log('跑起来');
}
var dog = {
 age : 20;
 run : temp;
};
固然把函数写成匿名函数，把函数直接封装在对象里面
var dog = {
 age : 20;
 run : function(){
 console.log(this.age + '岁的狗跑起来')
 }
}//若是this.age没有this的话，就会报错，JS明确必需要用this
dog.age = 40;
dog.run();
//函数也能够从新赋值或者叫覆盖
dog.run = function(){
 console.log(this.age + '岁汪汪叫');
}

数组、字典都是对象类型

数组实例：

var array = [12,'dog',24,'jack',{
    name : 'wangcai'
},[],function(){
    console.log(10);
}];
array[array.length-1]();
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程