HTML_2——插入圖片、超連結和註釋、提供頁面元資訊
阿新 • • 發佈：2021-08-09
img標籤（插入影象）
定義
標籤用於向網頁中嵌入一幅影象。
從技術上講，<img src=""> 標籤並不會在網頁中插入影象，而是從網頁上鍊接影象。<img src=""> 標籤建立的是被引用影象的佔位空間。
注意
標籤有兩個必需的屬性：src 屬性 和 alt 屬性。
屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| alt | text | 指定影象的替代文字。 |
| src | URL | 指定顯示影象的 URL。 |
| width | px(pixels)、% | 設定影象的寬度（畫素或百分比）。 |
| height | px(pixels)、% | 定義影象的高度（畫素或百分比）。 |
| ismap | URL | 將影象定義為伺服器端影象對映。 |
| longdesc | URL | 指定包含長的影象描述文件的 URL。 |
| usemap | URL | 將影象定義為客戶器端影象對映。 |
例項
<title>第二個程式</title>
<h1>使用img標籤顯示logo</h1>
<p>picture</p>
<img src="https://img95.699pic.com/photo/50046/5562.jpg_wh300.jpg" alt="愛您">
a標籤（超連結）
定義
標籤用於定義超連結，超連結可以讓使用者從一個網頁跳轉到另一個網頁。
標籤最重要的屬性是 href 屬性，它指定了連結目標的 URL。
在瀏覽器中，通常超連結的預設外觀是：
屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| download | filename | 指定被下載的超連結目標。 |
| href | URL | 指定連結指向頁面的 URL。 |
| hreflang | language_code | 指定被連結文件的語言。 |
| media | media_query | 指定被連結文件是為何種媒介/裝置優化的。 |
| rel | text | 規定當前文件與被連結文件之間的關係。 |
| target | _blank、_parent、_self、_top、framename | 指定在何處開啟超連結。 _blank：在新視窗中開啟 _parent：在當前的父視窗中開啟，如果不存在父視窗，此選項的行為方式與 _self 等同 _self：當前視窗開啟（預設） _top：在整個視窗中開啟 framename：在指定的框架中開啟 |
| type | MIME type | 指定被連結文件的的 MIME 型別。 |
例項
<title>第二個程式</title>
<h1>使用a標籤顯示超連結跳轉</h1>
</a><p><a></a><a href="https://www.cnblogs.com/Nadir-Echo/">Mr_61的部落格園</a></p>
meta標籤
定義
標籤用於描述頁面內容，關鍵詞，作者，最新修訂時間以及其它元資訊。 標籤的內容不會顯示在網頁中，但經常被機器（比如網頁爬蟲）解析。元資訊可以被瀏覽器（指導它如何載入和顯示頁面）所使用，也可以有利於搜尋引擎收錄頁面（指定關鍵詞）。
HTML5 通過 標籤引入一個新的方法，讓網頁尺寸實現自適應。
比如同一個頁面用瀏覽器和手機載入可以自適應螢幕的大小展示合適的網頁螢幕
注意
標籤永遠位於標籤內部。content 屬性必須和 name 或 http-equiv 屬性共存亡。
為了讓網頁尺寸實現自適應，你應該在 HTML 文件中加入下面程式碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| charset | character_set | 指定 HTML 文件的編碼。 |
| content | text | 指定與 http-equiv 或 name 屬性相關的值。 |
| http-equiv | content-type、default-style、refresh | content-type：另一種宣告 HTML 文件作用字元編碼的方法（<meta http-equiv="content-type" content="text/html charset=UTF-8">）。 default-style：指定頁面優先使用的樣式表。 refresh：以秒為單位指定一個時間間隔，在此時間過去之後將從伺服器重新載入當前頁面。也可以另行指定一個 URL 讓瀏覽器載入。 |
| name | application-name、author、description、generator、keywords、viewport | application-name：當前頁所屬 Web 應用系統的名稱。 author：當前頁的作者名。 description：當前頁的內容描述。 generator：用來生成 HTML 的軟體名稱。 keywords：當前頁的關鍵詞。 viewport：網頁尺寸自適應。 |
例項
例項一：指定網頁編碼
<meta charset="UTF-8">
例項二：為搜尋引擎提供關鍵詞
<meta name="keywords" content="小甲魚,Web開發,HTML5,CSS3,Web程式設計教學">
例項三：描述網頁內容
<meta name="description" content="《零基礎入門學習Web開發》案例演示">
例項四：定義網頁的作者
<meta name="author" content="小甲魚">
例項五：設定網頁尺寸自適應
<meta name="viewport" content="width=device-width, initial-scale=1.0">
例項六：每 5 秒重新整理一下瀏覽器並跳轉到指定頁面
<meta http-equiv="refresh" content="5;http://bbs.fishc.com">
註釋
定義
<!--...-->用來在源文件中插入註釋。註釋不會在瀏覽器中顯示。
例項
HTML 中註釋:
添加註釋文字:
<!-- 在此處寫註釋 -->
也可以將一句或者一段程式碼註釋:
<!-- 此刻不顯示此段落：
<p>這是一個被註釋了的段落。</p>
-->
<title>第二個程式</title>
<h1>使用img和a標籤顯示logo和超連結跳轉</h1>
<p>八月正午的陽光都沒你耀眼</p>
<!--暗號：super idol的笑容都沒你的甜-->
疑問
1、img標籤中alt屬性的作用：
表格中說alt屬性是 指定影象的替代文字，最開始不是很懂是什麼意思
看了相關的資料：
如果無法顯示影象，瀏覽器將顯示替代文字，就像這樣：
顯然這是不符合我們的需求的，不能完整顯示也要有所提示。那麼alt就是來解決這樣的事情的。
標籤的 alt 屬性指定了替代文字，用於在影象無法顯示或者使用者禁用影象顯示時，代替影象顯示在瀏覽器中的內容。