HTML标签全解（正在编写）

目录(html标签)

兼容性太差的标签和w3c不推荐使用的标签
以及部分无实际意义的属性本文未罗列

a abbr address area bdo br cite code

a标签

1. 下载图片功能

添加download属性可以指定下载的文件名，以及告知浏览器下载此文件

<a href="./timg.jpeg" download="图片名.jpeg">下载图片</a>

2. href跳转

将href属性设置成“#top”或者“#”可以跳转到页面顶部

                            <a href="#top">回到顶部</a>
                            <a href="#">回到顶部</a>

href属性除了可以设置成http协议，同样也可以设置成其他协议

                            <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> 此功能主要用于追踪

当然如果你想利用此特性发送DOS攻击也是可以的

直接运行下面代码，可以无限发送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>