4-鏈接/列表/圖像元素 · 前端教學筆記[更新中...]

# 鏈接/列表/圖像 ## 1. 鏈接元素 - `<a>`: 鏈接元素,常用屬性如下 | 屬性 | 描述 | 舉例 | | ---------- | ------------------------ | ----------------------------------- | | `href` | 指向鏈接頁面的 URL | `href="https://php.cn"` | | `target` | 打開 URL 的頁面來源 | `target=_self|_blank|_top|_parent"` | | `download` | 自定義下載文件名 | `download="banner1.jpg"` | | `type` | 設置鏈接文檔的 MIME 類型 | `type="image/jpeg"` | - `href`屬性值 | 屬性 | 描述 | | ------------------------------ | -------------------------------- | | `href="url"` | 跳轉的目標地址 | | `href="mailto: 123456@qq.com"` | 打開郵箱,發送郵件 | | `href="tel:13388**2345"` | 點擊后,會詢問用戶是否要撥打電話 | | `href="outline.md"` | 瀏覽器不能解析的文檔, 會直接下載 | - `taget`屬性值 | 屬性 | 描述 | | ------------------ | ------------------------------------ | | `target="__self"` | 當前窗口打開鏈接 | | `target="_blank"` | 新窗口打開鏈接 | | `target="_parent"` | 父窗口打開鏈接 | | `target="_top"` | 頂層窗口打開鏈接 | | `target="name"` | 指定名稱的窗口, 與`<iframe>`元素配合 | | `target="#anchor"` | 跳轉到設置了錨點的元素所在位置 | - 示例: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>鏈接元素</title> </head> <body>  <a href="https://php.cn" target="_blank">php中文網</a>  <a href="2-html基礎知識.md" download="HTML教案.md">html教程</a>  <a href="tel:1579988***33">咨詢熱線</a>  <a href="mailto: 123456789@qq.com">聯系我們</a> <a href="#anchor">跳轉到當前面中的錨點</a> <h1 id="anchor" style="margin-top:1000px;">我是錨點</h1> </body> </html> ``` --- ## 2. 列表元素 ### 2.1 列表的基本概念 - 將一組關聯的數據集中展示,使用列表最合適 - 如果列表中的每個項目順序無關緊要, 例如:購物車, 可以使用**無序列表**來描述 - 如果列表中的每個項目順序非常重要, 例如:工作計劃,可以使用**有序列表**來描述 - 如果想給每一個列表項添加一個小標題, 例如聯系方式,可以使用**自定義列表**來描述 - 可見, HTML 中的列表由列表與內部的列表項二部分組成,而這二部分是包含關系 - 所以, HTML 使用一組復合標簽來描述列表, | 列表元素 | 描述 | | -------------------- | ---------- | | `<ul> + <li>` | 無序列表 | | `<ol> + <li>` | 有序列表 | | `<dl> + <dt> + <dd>` | 自定義列表 | ### 2.2 示例 -運行效果圖: - 示例代碼 ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>列表元素</title> </head> <body>  <h3>購物車</h3> <ul> <li>蘋果5斤</li> <li>電水壺1個</li> <li>牛奶2箱</li> </ul> <hr />  <h3>工作計劃</h3>  <ol start="5"> <li>給客戶打回訪電話</li> <li>整理新客戶資料</li> <li>準備晚上的約會</li> </ol> <hr />  <h3>前端三兄弟</h3> <dl> <dt>html</dt> <dd>超文本標記語言</dd> <dt>css</dt> <dd>層疊樣式表</dd> <dt>JavaScript</dt> <dd>前端通用腳本語言</dd> </dl> </body> </html> ``` --- ## 3. 圖像元素 - 當前文檔的圖像元素,僅僅是外部圖片資源的占位符,只有解析時才會加載進來 - 所以, 在確保用戶可以看清的情況下, 圖片體積越小越好, 以提升加載速度 - 推薦使用可壓縮的`jpg`格式, 小圖片,或需要背景透明的,推薦使用`png`格式 - 對于簡單的動圖,或者顏色要求較少的,可使用`gif`格式 - 對于圖標, 建議使用 css 字體圖標,而不是使用圖像圖標 | 元素 | 描述 | | -------------- | ----------------------- | | `<img>` | 圖片元素,空元素(單標簽) | | `<figure>` | 圖片/插圖區域 | | `<figcaption>` | 圖片/插圖區域的標題 | - `<img>`常用屬性 | 屬性 | 描述 | | -------------- | ---------------------------------------------------------------------- | | `src` | 圖片來源地址, 可以是本地, 也可以是來自網絡 | | `alt` | 圖片描述信息, 當圖片無法顯示時, 顯示該信息, 也可以為無障礙閱讀器所識別 | | `width/height` | 圖片大小, 寬高只需設置一個,另一個會等比縮放, 推薦使用 css 設置 | - 示例 ![](https://img.kancloud.cn/c6/8e/c68e165b22389f2feb612c7ba635b037_1290x600.jpg) ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>圖像元素</title> </head> <body> <figure> <figcaption>前端經典教程</figcaption> <img src="images/js1.jpg" alt="javascript高級程序設計" style="width: 200px;" /> <img src="images/js2.jpg" alt="javascript權威指南" style="width: 200px;" /> <img src="images/css.jpg" alt="css權威指南" style="width: 200px;" /> </figure> </body> </html> ```