首页 > 其他分享> 文章详细

HTML标签全解（正在编写）

2019-05-04 21:54:26 阅读：261 来源： 互联网

标签：w3c HTML 标签 ping href 跳转全解属性

目录(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**37@qq.com">给我发邮件</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. 语义化标签，展示联系人的联系信息

示例：

2640199637@qq.com

                            <address>
                                <a href="mailto:2640199637@qq.com">2640199637@qq.com</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>

标签：w3c,HTML,标签,ping,href,跳转,全解,属性
来源： https://www.cnblogs.com/ye-hcj/p/10809974.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9