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