整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
HTML文檔中使用的圖像的目的有：第一，使頁面具有視覺效果；第二個(gè)：顯示有用信息。此外，圖像也可以用作鏈接。
雖然使用圖像有很多好處，但是包含太多圖像的頁面通常看起來過于雜亂，并且可能需要花費(fèi)太長的時(shí)間來加載。
要顯示圖像，需要使用src屬性來指定圖像的路徑，如下所示有幾個(gè)方法來實(shí)現(xiàn)：
img標(biāo)記的alt屬性定義當(dāng)圖像無法加載時(shí)顯示的文本來代替該圖像。對一個(gè)考慮周到的html來說這是一個(gè)必需屬性，簡要地描述圖像是什么。
圖像通常顯示為它實(shí)際的大小，但通過使用width和height屬性，可以更改它顯示的大小。以像素或百分比形式指定圖像的大小。技巧提示：使用圖像的實(shí)際大小（以像素為單位）來指定其顯示大小，以強(qiáng)制瀏覽器在圖像加載之前為其分配空間，以確保無論圖像是否顯示，頁面布局都保持不變。
img標(biāo)記的border屬性通過指定以像素為單位的厚度來添加邊框。您還可以設(shè)置border=“0”以刪除將圖像用作鏈接時(shí)添加的邊框。
默認(rèn)情況下，圖像顯示在html代碼中指定的位置（與任何其他標(biāo)記一樣）。但是，可以通過設(shè)置align=“l(fā)eft | right | top | bottom | middle”中的任意一個(gè)值來將圖像與周圍的文本或段落對齊。
調(diào)整圖像周圍的空白，以像素為單位。使用vspace調(diào)整上下垂直間距，或左右兩側(cè)使用hspace。
下面是以上標(biāo)記的示例：
瀏覽器顯示內(nèi)容如下所示：
1、HTML：Hyper Text Markup Language ：超文本標(biāo)記語言
超文本：
功能比普通文本更加強(qiáng)大
標(biāo)記語言：
一套標(biāo)記標(biāo)簽對內(nèi)容進(jìn)行描述的語言，它不是編程語言
2、HTML 使用標(biāo)記標(biāo)簽來描述網(wǎng)頁
1、XHTML (The Extensible Markup Language)可擴(kuò)展標(biāo)識語言
2、XHTML所有標(biāo)簽都必須小寫
3、XHTML標(biāo)簽必須成雙成對
4、XHTML標(biāo)簽順序必須正確
1、HTML 文件都是以.html 或者.htm 結(jié)尾的，建議使用.html 結(jié)尾！
2、Html 文件分為頭部分<head></head>和體部分<body></body>
3、標(biāo)簽對中的第一個(gè)標(biāo)簽是開始標(biāo)簽，第二個(gè)標(biāo)簽是結(jié)束標(biāo)簽
4、開始和結(jié)束標(biāo)簽也被稱為開放標(biāo)簽和閉合標(biāo)簽
5、Html 標(biāo)簽都是由開始標(biāo)簽和結(jié)束標(biāo)簽組成(<hr />)
6、Html 標(biāo)簽忽略大小寫，建議使用小寫
1、標(biāo)題標(biāo)簽
2、水平線標(biāo)簽
3、段落標(biāo)簽
4、字體標(biāo)簽
5、文本標(biāo)簽
6、定義文檔類型
1、<!DOCTYPE> 聲明位于文檔中的最前面的位置，處于 <html> 標(biāo)簽之前。此標(biāo)簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規(guī)范
2、注釋：<!DOCTYPE> 標(biāo)簽沒有結(jié)束標(biāo)簽！
7、meta標(biāo)簽
①：元素可提供有關(guān)頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關(guān)鍵詞
②： 標(biāo)簽位于文檔的頭部，不包含任何內(nèi)容
8、title標(biāo)簽
1、元素可定義文檔的標(biāo)題
2、瀏覽器會以特殊的方式來使用標(biāo)題，并且通常把它放置在瀏覽器窗口的標(biāo)題欄或狀態(tài)欄上
中級
半小時(shí)
有一定編程經(jīng)驗(yàn)。
Typescript
什么是“index.html”？
官方是這樣描述的：
這是別人訪問你的網(wǎng)站是看到的主頁面的 HTML 文件。 大多數(shù)情況下你都不用編輯它。 在構(gòu)建應(yīng)用時(shí)，CLI 會自動(dòng)把所有 js 和 css 文件添加進(jìn)去，所以你不必在這里手動(dòng)添加任何 <script> 或 <link> 標(biāo)簽。
從中我們可以得出以下三點(diǎn)：
“index.html”位置及內(nèi)容如下：
具體內(nèi)容：
這就是一個(gè)普通的html。
里面只說兩點(diǎn)，第一點(diǎn)是我們之前講解過的網(wǎng)站頭像“favicon.ico”，還有一點(diǎn)是沒有講解過的“app-root”組件選擇器。后者是重點(diǎn)。
首先，我們來看看網(wǎng)站頭像，這個(gè)之前講解過，但是在“index.html”里面還沒有講解。
涉及到的代碼如下：
這是一個(gè)icon的引用，將“favicon.ico”設(shè)置為網(wǎng)站頭像。
注意看，href屬性值直接寫的是“favicon.ico”，也就是說“favicon.ico”所在的目錄是和“index.html”是同一個(gè)目錄。
接著往下看，我們會看到一個(gè)比較奇怪的標(biāo)簽：
Q：這個(gè)標(biāo)簽叫什么？
這個(gè)叫組件選擇器也叫CSS選擇器。
Q：什么叫組件選擇器？
從它的名字中可以得知兩點(diǎn)：組件和選擇器。其中選擇器是組件在HTML中的名字。
Q：什么是組件？
官方描述：
組件控制屏幕上被稱為視圖的一小片區(qū)域。
不知道對官方描述有沒有理解，沒理解也沒關(guān)系，下一章就會詳細(xì)講解到什么組件。
Q：app-root這個(gè)組件選擇器實(shí)際對應(yīng)的組件是什么？
app-root組件選擇器對應(yīng)的是應(yīng)用中AppComponent組件。
Q：AppComponent組件在哪？
如圖所示，中app目錄下的“app.component.ts”文件中，用Typescript寫成。
它的具體內(nèi)容如下：
Q：我在圖片中看到了“app-root”，想問包括它自身所在的這一行是什么意思？
官方描述：
selector：是一個(gè) CSS 選擇器，它會告訴 Angular，一旦在模板 HTML 中找到了這個(gè)選擇器對應(yīng)的標(biāo)簽，就創(chuàng)建并插入該組件的一個(gè)實(shí)例。 比如，如果應(yīng)用的 HTML 中包含 <app-root></app-root>，Angular 就會在這些標(biāo)簽中插入一個(gè) AppComponent 實(shí)例的視圖。
這個(gè)描述應(yīng)該很清楚了，將組件的視圖插入到選擇器所在的位置。
至此，“index.html”相關(guān)的講解就先告一段落了，里面還有其它沒有講解的內(nèi)容暫時(shí)不作重點(diǎn)。
后續(xù)還會再接觸的，用到時(shí)再作分析。
如果大家有問題或想了解更多前沿技術(shù)，請?jiān)谙路搅粞曰蛟u論，我會為大家解答。
Angular第十八章：應(yīng)用入口“main.ts”
Angular第二十章：app開發(fā)目錄
加入同步學(xué)習(xí)小組，共同交流與進(jìn)步。
如果你也熱愛前沿技術(shù)，歡迎關(guān)注我們。
原創(chuàng)不易，未經(jīng)允許不得轉(zhuǎn)載！
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
