美文网首页我爱编程
html+css初识(第四节)

html+css初识(第四节)

作者: freeflys | 来源:发表于2018-05-23 14:52 被阅读0次

本小节主要介绍超链接标签,以及图片标签,以及通过超链接标签连接到Email地址。依旧通过代码来介绍各种标签:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
</head>
<body>
    <ul>
       <li><a href="#" title="前端开发面试心法">前端开发面试心法</a> </li>
       <li><a href="#" title="零基础学习html">零基础学习html</a></li>
       <li><a href="#" title="JavaScript全攻略">JavaScript全攻略</a></li>
    </ul>
    <p>1922年的春天,一个想要成名名叫尼克•卡拉威(<a href="http://www.m1905.com/mdb/star/3316/" target="_blank">托比•马奎尔Tobey Maguire</a> 饰)的作家,离开了美国中西部,来到了纽约。那是一个道德感渐失,爵士乐流行,走私为王,股票飞涨的时代。为了追寻他的美国梦,他搬入纽约附近一海湾居住。</p>
    <p>菲茨杰拉德,二十世纪美国文学巨擘之一,兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌,其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
    <a href="mailto:yy@imooc.com?subject=观了不起的盖茨比有感&body=你好对此评论有些想法">对此影评有何感想,发送邮件给我</a>
  <img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" title="电影介绍"> 
</body>
</html>
运行结果: example1.png

①<a>标签:用来实现超链接,语法结构:<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a> 加入 title标签为了当鼠标悬停在连接上会显示连接的文字,方便我们理解其连接的内容,也方便搜索引擎理解连接内容的主题。

②target属性:<a href="#" target="_blank"> <a> 标签的 target 属性规定在何处打开链接文档。target属性有5个值。
_blank:浏览器总在一个新打开、未命名的窗口中载入目标文档。
_self:默认。在相同的框架中打开被链接文档。
_parent:在父框架集中打开被链接文档。
_top:在整个窗口中打开被链接文档。
framename:在指定的框架中打开被链接文档。
在本文中我们用到了"_blank"属性。

③使用mailto在网页中链接Email地址,在<a>标签中我们可以使用mailto能让访问者便捷向网站管理者发送电子邮件。
语法结构:<a href="mailto:目标邮箱地址?subject=""&body=""></a>
注意:如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。

还有一些属性值,通过图片展示给大家: pic.png

④<img>图片标签
语法结构:<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
图片标签运用很简单,只要注意src属性连接地址的正确性,图片文件的格式,就可以基本保证图片的有效显示效果。

相关文章

  • html+css初识(第四节)

    本小节主要介绍超链接标签,以及图片标签,以及通过超链接标签连接到Email地址。依旧通过代码来介绍各种标签: ① ...

  • 初识HTML+CSS

    1-1代码初体验,制作我的第一个网页 1-2Html和CSS的关系 1-3认识html标签 1-4 标签的语法 1...

  • 【6Day】Joshua—初识html+css学习笔记(3)

    标签,短文本引用,初识HTML+CSS教程-慕课网 目录 标签,短文本引用 标签,长文本引用(大段文本)使用 标签...

  • HTML学习

    1 HTML介绍 注:本文参考慕课网的(初识HTML+CSS)网络课程,仅学习,无商业用途 1.1 web前端基础...

  • 慕课 初识html+css

    第一章 html介绍 1-4 标签的语法 标签由英文尖括号<和>括起来,如 就是一个标签。 html中的标签一般都...

  • 【2Day】Joshua—初识html+css学习笔记(2)

    语义化,让你的网页更好的被搜索引擎理解,初识HTML+CSS教程-慕课网 目录 认识head标签了解HTML的代码...

  • html+css+javascript

    2019/09/01 学习内容(半年前的记录QAQ)复习了慕课网<初识HTML+CSS>的第一章和第二章基本的标签...

  • 大前端完整学习路线(上篇)

    【HTML+CSS】: HTML进阶、CSS进阶、div+css布局、HTML+css整站开发、 JavaScri...

  • html+css初识(第二节)

    本小节主要用来了解各种HTML标签,知道各种标签的含义。下面通过一小段代码来了解各种标签的含义: 运用效果: ① ...

  • js初识第四节

    原生js删除dom节点 原生js动态创建一个表格的,并对其进行封装便于以后复用 创建文本节点和节点的克隆 一个cl...

网友评论

    本文标题:html+css初识(第四节)

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