HTML標簽全解（正在編寫）
阿新 • • 發佈：2019-05-05
html標簽 doc right 換行 下載 pan new down spa
目錄(html標簽)
兼容性太差的標簽和w3c不推薦使用的標簽
以及部分無實際意義的屬性本文未羅列
a標簽
1. 下載圖片功能
添加download屬性可以指定下載的文件名，以及告知瀏覽器下載此文件<a href="./timg.jpeg" download="圖片名.jpeg">下載圖片</a>
2. href跳轉
將href屬性設置成“#top”或者“#”可以跳轉到頁面頂部 <a href="#top">回到頂部</a>
<a href="#">回到頂部</a> <a href="mailto:264019**[email protected]">給我發郵件</a>
<a href="tel:1752169****">給我打電話</a>
3. ping追蹤
a標簽如果已經設置href屬性，此時再設置ping屬性，當點擊事件觸發會自動在後臺發送post請求<a href="" ping="http://localhost:8000/test1 http://localhost:8000/test2">測試</a> 此功能主要用於追蹤
直接運行下面代碼，可以無限發送post請求
const a = document.createElement(‘a‘);
a.href="";
a.ping = ‘http://localhost:8000/test1‘;
document.body.appendChild(a);
a.click();
4. target指定跳轉方式
target常用的屬性_self、_blank，使用細節點如下 _self表示跳轉至當前頁，默認行為。
_blank表示跳轉至新標簽頁，此時新的標簽頁和當前標簽頁公用一個瀏覽器進程，為了性能最好如下使用
<a href="https://www.baidu.com" target="_blank" rel="noopener">跳轉</a>
abbr標簽
1. 提供縮略功能
abbr標簽對於文本有幫助<abbr title="長文本的顯示">文本</abbr>
2. 配合dfn標簽提供語義化
術語 <dfn id="text"><abbr title="強調這是專業術語">術語</abbr></dfn>
dfn標簽中id的作用主要是實現a標簽的錨點
address標簽
1. 語義化標簽，展示聯系人的聯系信息
示例：[email protected] <address>
<a href="mailto:[email protected]">[email protected]</a>
</address>
area標簽
1. 創建熱點圖像
area標簽只能在map標簽中使用，可以將一個圖片的不同部分關聯不同的超鏈接，示例：
<map name="front">
<area
shape="poly"
coords="10,29,66,30,60,78,38,83,14,77"
href="https://baike.baidu.com/item/HTML/97049?fr=aladdin"
target="_blank"
alt="html"
/>
<area
shape="poly"
coords="70,29,128,30,122,78,100,83,75,77"
href="https://baike.baidu.com/item/CSS/5457?fr=aladdin"
target="_blank" alt="css"
/>
<area
shape="poly"
coords="132,29,190,30,184,77,161,83,137,77"
href="https://baike.baidu.com/item/javascript/321142?fr=aladdin"
target="_blank"
alt="js"
/>
</map>
<img usemap="#front" style="width: 200px;height: 100px;" src="./1.png" alt="front-end" />
2. coords屬性說明
- rect、rectangle：值是兩個x，y對：left，top，right，bottom
- circ、circle：值是指定圓的中心的對x,y,r，其中x,y是r半徑的值
- poly、polygon：該值是多邊形中每個點的一組x，y對：x1,y1,x2,y2,x3,y3,依此類推
3. 其他屬性說明
- alt：圖像不顯示時展示的文本
- download：和a標簽的屬性作用一樣
- ping：和a標簽的屬性作用一樣
- target：和a標簽的屬性作用一樣
- shape：對應coords的可用值
bdo標簽
1. 控制文本渲染方向
bdo標簽只用dir一個屬性，效果：test<bdo dir="rtl">test</bdo>
br標簽
1. 控制文本換行，w3c建議不要用這個屬性作為間距
cite標簽
1. cite的作用是表示引用別人的作品，例如：
本文參考了w3c規範
<blockquote>本文參考了<cite><a href="https://www.w3.org/">w3c規範</a></cite></blockquote>
code標簽
1. code的作用是使用等寬字體展示代碼，例如：new Date()
<code>new Date()</code>
HTML標簽全解（正在編寫）