HTML新增影象和超連結
阿新 • • 發佈：2019-01-03
新增影象
<img src="影象的檔案地址" alt="載入失敗" height="350" width="350" border="1" title="示意圖" align="top">
- src：圖片地址
- alt：載入失敗需要展示的資訊
- height：圖片的高度
- width：圖片的寬度
- border：邊框(如果需要)
- title：滑鼠懸停至圖片需要顯示的提示
- align：圖片的對其方式
| align取值 | 含義 |
|---|---|
| top | 把影象的頂部和同行的最高部分對齊(可能是文字的頂部，也可能是影象的頂部) |
| middle | 把影象的中部和行的中部對齊(通常是文字行的基線，並不是實際行的中部) |
| bottom | 把影象的底部和同行文字的底部對齊 |
| texttop | 由快到慢，也就是逐漸減速 |
| absmiddle | 把影象的中部和同行中最大項的中部對齊 |
| baseline | 把影象的底部和文字的基線對齊 |
| absbottom | 把影象的底部和同行中的最低項對齊 |
| left | 使影象和左邊界對齊(文字環繞影象) |
| right | 使影象和右邊界對齊(文字環繞影象) |
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Demo</title> </head> <body> <!--插入五子棋遊戲的文字簡介--> <h2 align="center">五子棋遊戲簡介</h2> <p> 《五子棋》是由明日科技研發的一款老少皆宜的休閒類棋牌遊戲。其起源於中國古代傳統的黑白棋中之一，玩起來妙趣橫生，引人入勝，不僅能增強思維能力，而且可以富含哲理，有助於修身養性。</p> 遊戲規則： <p> 玩遊戲時，既可以隨機匹配玩家，也可以與朋友對弈，或者無聊時選擇人機對弈。畫面簡單大方。遊戲中，最先在棋盤的橫向、縱向或斜向形成連續的相同的五個棋子的一方為勝。</p> <!--插入五子棋的遊戲圖片，並且設定水平間距為180畫素--> <img src="img/wuzi.png" alt="" hspace="180" title="五子棋示意圖"> </body> </html>
執行結果：
超連結
<a href="https://www.baidu.com/" target="_blank"> 百度 </a>
- href：點選後需要跳轉到的連結
- target：開啟新視窗的方式
- _blank：新視窗開啟
- _parent：在上一級視窗開啟，常在分幀的框架頁面中使用
- _self：在同一個視窗開啟，預設值
- _top：在瀏覽器的整個視窗開啟，將會忽略所有的框架結構
示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>商城導航</title>
</head>
<body>
<div class="mar-cont">
<!-- img/jd2.png是京東圖示 -->
<img src="img/jd2.png" alt="京東圖示" title="京東logo"><a href="https://www.jd.com/" target="_self">京東首頁</a>
<a href="https://search.jd.com/Search?keyword=%E6%89%8B%E6%9C%BA%E9%85%8D%E4%BB%B6&enc=utf-8&wq=%E6%89%8B%E6%9C%BA%E9%85%8D%E4%BB%B6&pvid=2f422585de90483ca78f3d2bf775aa55" target="_self">手機配件</a>
<a href="https://blog.csdn.net/zha6476003" target="_blank"> 部落格首頁 </a>
<img src="img/jd.png" alt="購機首頁" border="1" title="購機首頁"> <!-- img/jd.png是首頁圖片 -->
</div>
</body>
</html>
執行結果：
跳轉至頂部
<a href="#top">點選跳轉至頂部</a>
執行結果：
點選跳轉至頂部
圖片超連結
<a href="連結地址" target="開啟視窗的方式"><img src="影象地址"> </a>