Html中a标签用法总结:创建email,电话,描点链接等。以及防止链接被搜索引擎收录

时间: 2017-11-09阅读: 2065标签: 标签

<a>标签可以用来创建一个到其他网页、文件、同一页面内的位置、电子邮件地址或任何其他URL的超链接。  是我们常用的一个标签之一,今天就讲讲如何使用a来创建email,电话,描点链接等。以及防止链接被搜索引擎收录。


a锚点链接

锚点可以在同一页面的不同位置间跳转,其实就是在元素间跳转, 常用的场景就是,页面很长,让用户方便在页面不同部分间跳转 建立锚点目标,只需要给目标元素增加id或者name即可。当我们点击a标签的时候,页面就能自动定位到含有name="test"的位置,例如:

<div id="test" name="test"></div>
<!--
  其它代码
-->
<a href="#test"></a>



创建email链接

这样可以将用户的电子邮件程序打开,让他们发送新邮件,它是通过使用一个mailto链接完成的。例如:  

<a href="mailto:522607023@qq.com">Send email</a>


创建Tel链接

当页面在手机浏览器器中运行的时候,可以调用手机的拨号tel,来实现网页中点击就能拨打电话的能,例如:

<a href="tel:+12345678">联系电话:12345678</a>


a链接实现文件下载

在我们写项目的时候经常会遇到上传下载什么的,如果想不通过后台直接在html中下载文件的话,可以把文件路径给a标签的href属性即可。注意一点的是,如果文件是txt,png,jpg等格式,浏览器会直接打开,而不触发下载功能,这时需要我们给a标签添加一个“download”属性,例如:

<a href="文件地址" download="文件名.txt">点击下载</a>


防止a链接被搜索引擎收录

当我们做网站的时候,经常会遇到部分连接里的内容不想让Google或百度等搜索引擎抓取,这时候就需要使用a标签下rel属性nofollow和external的结合,来防止连接被收录。 对于外链或某些无意义链接我们就这样使用到,例如  :

<a href=”http://www.****.com” rel=”external nofollow” target=”_blank”>连接</a>




在<a></a>标签中如何调用javaScript脚本

在日常工作总会遇到在<a>标签中执行js代码的情况 现在做一个总结,希望对大家有一个帮助。javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件,在IE里面更会使gif动画图片停止播放。

html5新媒体播放器标签embed、object

是为了兼容不同浏览器,IE只支持对Object的解析;火狐,谷歌,Safari只支持对Embed的解析。注意:使用<object>+<embed>是为了更好的兼容性,如果场景允许,推荐使用<object>。

html5语义化标签

在html5没出来之前,一直用html的div+css进行布局,通篇div+span,确实不优雅。html5新增了很多语义化的标签,帮助我们写出更优雅的html结构。<article>可以是页面任何独立的内容区域

HTML5新增和废弃的标签

以下的 HTML 4.01 元素在HTML5中已经被删除,虽然浏览器为了兼容性考虑都还支持这些标签,但建议使用新的替代标签,矛盾的是老浏览器对新标签的支持度又不够,视项目的受众对象而定了。

10 个不常用但你有必要知道的 html 标签

HTML 也被称为超文本记语言( hyper text markup language )是为网页创建和其他可在网页浏览器中看到的信息设计的一种标记语言。HTML 被用来结构化信息,如标题、段落和列表等,也可用来在一定程度上描述文档的外观和语义。

<script>标签的属性

src定义引用外部脚本的URI,这可以用来代替直接在文档中嵌入脚本。指定了 src 属性的script元素标签内不应该再有嵌入的脚本。type该属性定义script元素包含或src引用的脚本语言。

html中link标签

link元素规定了外部资源与当前文档的关系。常用于链接样式表,创建网站图标,预加载资源等。预加载用于前端界面性能优化,rel 的属性值可以为preload、prefetch、dns-prefetch。

html的title和alt的区别

alt标签是html标签的属性,而title即使标签,又是标签的属性。 当title作为属性时,用来为元素提供额外的说明信息。当鼠标移入变迁内会显示title的内容,以达到补充说明或提示的效果。

JSTL学习总结

在mvnrepository中,直接搜索jstl,,找到下载量最高的,下载1.2版本。下载完导入到项目里面就好了。jstl是apache对EL表达式的扩展,使用需导jar包

head里两个重要标签base和meta

<base>我们并不常用的一个标签,但是一旦用得不当会带来灾难性的影响。meta标签日常开发中我们用得更多的是meta标签,分为3类:具有charset属性的meta 、带有http-equiv 属性的 meta

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全