美文网首页设计师学前端
设计师学习HTML/CSS之路-04

设计师学习HTML/CSS之路-04

作者: HU_Wei | 来源:发表于2018-08-19 14:44 被阅读0次

不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start!

第4章 认识标签(第三部分)

4-1 使用a标签,链接到另一个页面

语法:

<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>

title的目的不仅仅是划过显示的文本,他还有的作用是语义化

<a href="http://www.dribbble.com/p2g" title="P2G作品集">点我试试</a>

<a href="http://www.dribbble.com/p2g" title="P2G作品集">
点我试试
</a>

4-2 在新建浏览器窗口中打开链接

a标签默认是上去浏览器窗口打开

新开页面语法:

<a href="目标地址" target="_blank">

<a href="http://www.dribbble.com/p2g" target="_blank" title="P2G作品集">点我试试</a>

<a href="http://www.dribbble.com/p2g" target="_blank" title="P2G作品集">
点我试试
</a>

4-3 使用mailto在网页中链接Email地址

<a>标签还有一个作用是可以链接Email地址,使用mailto能让访问者便捷向网站管理者发送电子邮件。

image

语法:<a href="mailto:邮箱地址">CTA</a>

如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

<a href="mailto:235496139@qq.com?subject="标题"&body="内容">发送邮件给我</a>

4-4 认识img标签,为网页插入图片

语法:

<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">

  1. src:source 标识图像的位置;

  2. alt:指定图像的描述性文本,当图像不可见时(下载不成功时),可看到该属性指定的文本;

  3. title:提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本);

  4. 图像可以是GIF,PNG,JPEG格式的图像文件。

相关文章

  • 设计师学习HTML/CSS之路-04

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第4章 认识标签(...

  • 设计师学习HTML/CSS之路-02

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第2章 认识标签(...

  • 设计师学习HTML/CSS之路-03

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第3章 认识标签(...

  • 设计师学习HTML/CSS之路-05

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第5章 与浏览者交...

  • 设计师学习HTML/CSS之路-09

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第9章 CSS的继...

  • 设计师学习HTML/CSS之路-15

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第15章 css样...

  • 设计师学习HTML/CSS之路-06

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第6章 开始学习C...

  • 设计师学习HTML/CSS之路-07

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第7章 CSS样式...

  • 设计师学习HTML/CSS之路-08

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第8章 CSS选择...

  • 设计师学习HTML/CSS之路-10

    不了解前端的UI不是好美工,以下是慕课网HTML+CSS基础教程学习笔记,不废话,Start! 第10章 CSS格...

网友评论

    本文标题:设计师学习HTML/CSS之路-04

    本文链接:https://www.haomeiwen.com/subject/psuciftx.html