寫給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教程