mg不朽情缘五滴血2700倍

書名： Angular開發入門與實戰
作者名：蘭澤軍
本章字數： 4233字
更新時間： 2021-05-18 16:40:43

2.1 了解Web開發基礎

在深入學習Angular之前，讀者需要了解Web開發的基本概念。

2.1.1 客戶端和服務器通信

Web應用程序運行在兩臺相互通信的計算機上，它們分別被稱為客戶端和服務器。

●客戶端（用戶的計算機）可能是各種各樣的設備：從智能手表到手機，從平板電腦到計算機。用戶在客戶端上使用瀏覽器與服務器（Web應用程序部署在其上）進行通信。客戶端與服務器進行通信時，會發送超文本傳輸協議（Hypertext Transfer Protocol，HTTP）請求和接收結果。

●服務器位于云端或數據中心，它會監聽客戶端發送的HTTP請求，并返回結果。服務器還可以訪問Web應用程序使用的其他數據庫，如后端數據庫。

目前有兩種類型的Web應用程序：在服務器上運行的Web應用程序和在客戶端上運行的Web應用程序（SPA）。

1.在服務器上運行的Web應用程序

在服務器上運行的Web應用程序是指Web應用程序的計算邏輯在服務器上完成，客戶端基本不參與運算，僅接收服務器返回的全部數據。當用戶通過客戶端向服務器發送一個請求時，服務器執行一些操作并返回一個全新的HTML頁面，作為響應顯示在客戶端上。服務器針對客戶端的每次請求重新生成該HTML頁面的全部數據并將其發送回客戶端的瀏覽器中。在服務器上運行的Web應用程序如圖2-1所示。

圖2-1 在服務器上運行的Web應用程序

2.在客戶端上運行的Web應用程序

客戶端的Web應用程序也稱為單頁面應用程序。許多Web應用程序在服務器上運行，但是一些代碼也同時在客戶端上執行，以避免頻繁地重新生成HTML頁面。

當用戶在客戶端中執行一個操作時，客戶端會向服務器發送一個請求，服務器執行一些操作并返回結果通常是JS對象簡譜（JavaScript Object Notation，JSON）格式的數據，而不是一個全新的HTML頁面。客戶端偵聽來自服務器的結果，并自行決定在不生成新HTML頁面的情況下如何將結果呈現給用戶。

客戶端的Web應用程序往往更具交互性和靈活性，因為它們可以更快地響應用戶交互，不必等待全部數據發回。它們只需要服務器返回一個局部的結果，而不是整個HTML頁面。在客戶端上運行的Web應用程序如圖2-2所示。

圖2-2 在客戶端上運行的Web應用程序

服務器應該承擔主要工作，業務邏輯和數據應該保存在服務器上，并在需要時供客戶端調用或檢索。客戶端可以使用更先進的異步技術來避免整個頁面被刷新，它僅承擔與用戶的交互工作。

2.1.2 什么是HTML

HTML即超文本標記語言，它是構建Web的基石，是一種標準的標記語言。HTML常與層疊樣式表（Cascading Style Sheets，CSS）、JavaScript一起被用于設計Web、Web應用程序以及移動應用程序的用戶界面。瀏覽器可以讀取HTML文件，并將其渲染成可視化網頁。HTML不是一門編程語言，而是一種用于定義內容結構的標記語言。HTML由一系列標簽組成，這些標簽可以用來“包裹”不同部分的內容，使其以某種方式工作或者呈現。

HTML允許嵌入圖像和對象，并且可以用于創建交互式表單，它被用來結構化信息，如標題、段落和列表等，也可用來在一定程度上描述文檔的外觀和語義。HTML的語言形式為尖括號包圍的HTML標簽（如<html>），瀏覽器使用HTML標簽和腳本來詮釋頁面內容。

Angular使用模板顯示頁面內容，而模板使用的就是HTML。掌握有關HTML的基礎知識，有助于我們快速掌握Angular。

2.1.3 什么是DOM

DOM即文檔對象模型，它是HTML頁面和XML文件的編程接口。DOM定義了訪問和操作HTML頁面的標準方法。

DOM提供了對HTML頁面的結構化表述，并定義了一種方式，可以通過程序對該結構進行訪問，從而改變HTML頁面的結構、樣式和內容。DOM將HTML頁面解析為一個由節點和對象（包含屬性和方法的對象）組成的結構集合。簡言之，它能將HTML頁面和腳本或程序連接起來。

一個HTML頁面對應一個DOM。DOM可以在瀏覽器窗口或作為HTML源碼顯示出來。DOM提供了對同一個HTML頁面的另一種表現、存儲和操作的方式。

2.1.4 HTML特性與DOM屬性

當瀏覽器解析完HTML后，生成的DOM對象是一個繼承自Object的常規JavaScript對象，因此我們可以像操作任何JavaScript對象那樣來操作DOM對象。

特性（Attribute）屬于HTML，可以任意命名，賦值和取值分別使用setAttribute()方法和getAttribute()方法。

屬性（Property）屬于DOM，賦值和取值都使用“。”操作符。

提示 HTML中的特性和DOM中的屬性一般情況下都被稱為“屬性”。本書為了區分，分別稱它們為HTML特性與DOM屬性。

1.HTML特性與DOM屬性的關系

我們為HTML元素設置特性，具體如下。

<input id="name" value="Murphy"/>

上述代碼有一個<input>標簽，定義了兩個特性（id和value）。當瀏覽器解析這段代碼的時候，會把HTML代碼解析為DOM對象，確切地說是解析為HTMLInputElement對象。在DOM對象中，用戶可以通過該對象找到對應的id屬性和value屬性。簡單地說，就是當瀏覽器解析HTML頁面時，會將HTML特性映射為DOM屬性。

2.HTML特性與DOM屬性的區別

HTML特性與DOM屬性的主要區別如下。

并非所有的HTML特性都可以映射為DOM屬性，如HTML中的colspan特性，在DOM中沒有對應的屬性。HTML也可以添加非標準特性，例如：

<input id="name" value="Murphy" local="wuhan" />

當HTML特性被映射為DOM屬性時，只映射標準特性，訪問非標準特性將得到“undefined”的結果。

const el = document.getElementById('local') // 試圖通過getElementById()方法獲得DOM對象
el.local === unde?ned // 由于local特性是非標準特性，因此無法映射為DOM屬性

非標準特性并不會自動映射為DOM屬性。使用data-開頭的HTML特性時，該特性會映射到DOM的dataset屬性里。

el.setAttribute('data-myName', 'Murphy'); // 將myName屬性的值設置為Murphy
el.dataset.myName === 'Murphy' // 比較dataset屬性的myName屬性的值是否等于Murphy

HTML特性是不區分大小寫的，而DOM屬性是區分大小寫的，因此以下代碼的效果是一樣的。

el.getAttribute('id') // 小寫id
el.getAttribute('ID') // 大寫ID
el.getAttribute('iD') // 小寫i大寫D

當修改HTML特性的值時，DOM屬性的值也會更新；但是修改DOM屬性的值后，HTML特性的值還是原值。

el.setAttribute('value', 'Jack');       // HTML特性的值
el.value === 'Jack'                     // DOM屬性的值也更新了

el.value = 'newValue';                  // 修改DOM屬性的值
el.getAttribute('value')) === 'Murphy'  // HTML特性的值沒有更新

2.1.5 CSS基礎知識

CSS即層疊樣式表，是一種用來表現HTML文件樣式的計算機語言。CSS不僅可以靜態地修飾網頁，還可以配合各種腳本語言動態地對網頁中的各元素進行格式化。CSS能夠對網頁中元素位置的設定進行像素級的精確控制，支持幾乎所有的字體、字號樣式，擁有對網頁對象和模型樣式編輯的能力。

在CSS中，HTML中的標簽元素大體被分為3種不同的類型：塊狀元素、行內元素和行內塊狀元素。理解它們之間的區別有助于讀者對CSS的學習。

1.塊狀元素

所謂塊狀元素，就是能夠設置元素尺寸、隔離其他元素功能的元素。在HTML中主要有如下塊狀元素。

<div>、<p>、<h1>、……、<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>

塊狀元素的特點如下。

●每個元素都從新的一行開始，并且其后的元素也另起一行。

●元素的高度、寬度、行高以及頂部和底部邊距都可設置。

●在不設置元素寬度的情況下，元素寬度是它本身父元素寬度的100%（即和父元素的寬度一致）。

●行內元素可轉換成塊狀元素。

/* 使a行內元素具有塊狀元素的特點 */
a {
    display:block;
}

2.行內元素

所謂行內元素，就是不能夠設置元素尺寸的元素，它只能自適應內容，無法隔離其他元素，其他元素會緊跟其后。在HTML中主要有如下行內元素。

<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

行內元素的特點如下。

●和其他元素都在一行上。

●元素的高度、寬度及頂部和底部邊距不可設置。

●元素的寬度就是它包含的文字或圖片的寬度，不可改變。

●塊狀元素可轉換為行內元素。

/* 塊狀元素div轉換為行內元素 */
div {
    display:inline;
}

3.行內塊狀元素

所謂行內塊狀元素，就是可以設置元素尺寸，但無法隔離其他元素的元素。在HTML中主要有如下行內塊狀元素。

<img>、<input>

行內塊狀元素的特點如下。

●同時具備行內元素、塊狀元素的特點。

●和其他元素都在一行上。

●元素的高度、寬度、行高以及頂部和底部邊距都可設置。

4.CSS的屬性

CSS有很多屬性，每個屬性都有自己的含義。如color是文本的顏色屬性，text-indent規定了段落的縮進。學習CSS屬性時，請注意下面幾個方面。

●屬性的合法屬性值。如段落縮進屬性text-indent只接受一個表示長度的值；而背景圖案background中的image屬性可以接受的值有兩個，一個是表示圖案位置的鏈接值，另一個用none表示不用背景圖案。

●屬性的默認值。

●屬性所適用的HTML元素。正如HTML元素有多種，CSS屬性只適用于特定類別的元素，如white-space屬性就只適用于塊狀元素。

●屬性的值是否被下一級繼承。

●如果該屬性能取百分比值，那么該百分比值所相對的標準是什么，如margin屬性可以取百分比值。

5.CSS的度量單位

CSS的度量單位主要分為兩種：絕對單位和相對單位。

●絕對單位：不會因為其他元素尺寸的變化而變化。

●相對單位：沒有一個固定的度量值，而是由其他元素的尺寸來確定的相對值。

常見的度量單位如下。

●px：像素，指的是屏幕上顯示的最小單元。

●em：是相對度量單位，它的計算方式是用當前元素的font-size的px值乘以em前面的數字。

●rem：和em很類似，區別是它是相對HTML根元素的font-size值計算的。

●vw和vh：分別指視窗的寬度和高度，1vw=視窗寬度的1%，1vh=視窗高度的1%。

●%：百分比單位。

6.CSS選擇器

CSS選擇器用于選擇需要添加樣式的HTML元素。使用CSS選擇器的原則如下。

●準確地選擇要控制的標簽。

●使用最合理優先級的CSS選擇器。

●HTML和CSS代碼盡量簡潔美觀。

CSS選擇器的種類有很多，按照效率從高到低排序如下。

●id選擇器（#id）。

●類選擇器（.classname）。

●標簽選擇器（div、h1、p）。

●相鄰同胞選擇器（h1+p）。

●子選擇器（ul>li）。

●后代選擇器（li a）。

●通配符選擇器（*）。

●屬性選擇器（a[rel="external"]）。

●偽類選擇器（a:hover、li:nth-child）。

2.1.6 CSS布局實戰

在實際工作中，Web頁面元素的布局非常重要，大到頁面的整體風格，小到一個文本框的對齊，這些都離不開CSS布局。下面介紹兩種實際工作中常見的CSS布局。

1.[示例css-ex100]元素居中對齊

（1）新建index.html文件，并將其更改為以下內容。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <style>
       .center {
           margin: auto; /* div外的左右空間對稱，也就是居中對齊 */
           width: 50%; /* div寬度占屏幕框的50% */
           border: 3px solid green; /* div邊框為3px的綠色實線條 */
           padding: 10px; /* div內空間左右分別留10px空白 */
       }
       .china {
           text-align: center; /* div內文本居中對齊 */
           background-color: yellowgreen; /* 定義div的背景色 */
       }
    </style>
</head>
<body>
   <div class="center">
       <div class="china">學習Angular</div>
   </div>
</body>
</html>

（2）用瀏覽器打開index.html文件，可看到元素居中對齊的效果，如圖2-3所示。

圖2-3 元素居中對齊顯示效果

上面的示例css-ex100完成了以下內容。

（1）在HTML中的body標簽里定義了兩個嵌套的div元素，分別引用了兩個不同的樣式：center和china。

（2）center樣式里最重要的就是margin，margin的4個值分別對應上、右、下、左；也就是說“margin:auto;”其實相當于“margin:auto auto auto auto;”，“margin:0 auto;”相當于“margin:0 auto 0 auto;”。

2.[示例css-ex200]元素自適應屏幕和自動換行

（1）新建index.html文件，并將其更改為以下內容。

<!DOCTYPE html>
<html>
<head>
    <style>
       .?ex-container {
           display: ?ex; /* 生成一個塊狀元素 */
           justify-content: center; /* 水平居中對齊 */
           background-color: DodgerBlue;
       }
       .?ex-container>div {
           background-color: #f1f1f1;
           width: 100px;
           margin: 10px;
           text-align: center;
           line-height: 75px;
           font-size: 30px;
       }
       .?ex-container-wrap {
           display: inline-?ex; /* 生成一個彈性的行內容器 */
           ?ex-?ow: row wrap; /* 按行排列，超過屏幕寬后自動換行 */
           justify-content: center; /* 水平居中對齊 */
           align-items: center; /* 垂直居中對齊 */
       }
       .?ex-container-wrap>div {
           background-color: #f1f1f1;
           width: 100px;
           margin: 10px;
           text-align: center;
           line-height: 75px;
           font-size: 30px;
       }
    </style>
</head>
<body>
    <div class="?ex-container">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>14Angular開發入門與實戰     第2章  Angular開發基礎　
       <div>6</div>
       <div>7</div>
       <div>8</div>
       <div>9</div>
       <div>10</div>
    </div>
    <div class="?ex-container-wrap">
       <div>1</div>
       <div>2</div>
       <div>3</div>
       <div>4</div>
       <div>5</div>
       <div>6</div>
       <div>7</div>
       <div>8</div>
       <div>9</div>
       <div>10</div>
    </div>
</body>
</html>

（2）用瀏覽器打開index.html文件，可看到元素自適應屏幕和自動換行的效果，如圖2-4所示。

圖2-4 元素自適應屏幕和自動換行顯示效果

上面的示例css-ex200完成了以下內容。

（1）flex-container樣式里選擇“display:flex;”，表示把整行生成一個塊狀元素，該元素隨著屏幕的拉伸自動適應縮放比例，不換行。

（2）flex-container-wrap樣式里選擇“display:inline-flex;”，表示把整行生成一個具有彈性的行內容器，該容器內的元素隨著屏幕的拉伸自動換行顯示。

官术网_书友最值得收藏!

Angular開發入門與實戰