圖像
img 元素向網頁中嵌入一幅圖像。
文法
<img src="" alt="" /> img标簽常用屬性
src 跳轉的url
alt 圖檔不顯示時顯示的文字
height 圖像的高，可以為像素和百分比
width 圖像的寬，可以為像素和百分比 
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<img src="http://img3.cache.netease.com/photo/0001/2016-04-26/BLJL1S1I00AO0001.jpg" alt="我是圖檔" width="20%" height="30%">
</body>
</html> View Code
超連結标簽
文法
<a href="">内容</a>
href:連結位址，可以是内部連結或外部連結 <html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="https://cn.bing.com/">點我</a>
</body>
</html> View Code
上面的代碼我們發現是在目前頁面打開了超連結，如果想在新頁面打開，隻需要加上target="_blank"
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="https://cn.bing.com/" target="_blank">點我</a>
</body>
</html> View Code
常用屬性
href 連結位址
target 連結的目标視窗，_self在目前頁面打開，_blank在新視窗打開
title 連結提示文字
name 連結命名 連結提示文字
作用：滑鼠放到超連結上，會有提示
<html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="https://cn.bing.com/" target="_blank" title="這是必應網站">點我</a>
</body>
</html> View Code
錨
作用：跳轉到想要到達的位置
文法
<a href="#錨名1">目錄1</a>
<a href="#錨名2">目錄2</a>
<a href="..." name="錨名1">内容1</a>
<a href="..." name="錨名2">内容2</a> <html >
<head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="#menu1">點我到達目錄一</a>
<a href="#menu2">點我到達目錄二</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="menu1"><p>目錄一</p></a>
<a >目錄一的内容</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<a name="menu2"><p>目錄二</p></a>
<a >目錄二的内容</a>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html> View Code
不同頁面定義錨
文法
<a href="網頁名稱#錨名1">目錄1</a>
<a href="..." name="錨名1">内容1</a> 我們在相同的檔案夾下在寫一個HTML頁面，上面的起名為01.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="01.html#menu2">點我達到另一個頁面</a>
</body>
</html> 電子郵件連結
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
</head>
<body>
<a href="mailto:[email protected]">郵件連結</a>
</body>
</html> 檔案下載下傳
通常在咱們寫項目的時候會遇到上傳下載下傳什麼的，在上傳完檔案後會把檔案的路徑儲存到資料庫裡以便下載下傳，如果想不通過背景直接下載下傳的話，可以把檔案路徑給a标簽的屬性href；
<a href="/user/test/xxxx.txt">點選下載下傳</a> 這樣當使用者打開浏覽器點選連結的時候就會直接下載下傳檔案。
但是有個情況，比如txt,png,jpg等這些浏覽器支援直接打開的檔案是不會執行下載下傳任務的，而是會直接打開檔案，這個時候就需要給a标簽添加一個屬性“download”；
<a href="/user/test/xxxx.txt" download="檔案名.txt">點選下載下傳</a> 這裡download也可以不寫任何資訊，會自動使用預設檔案名