HTML学习笔记4:如何给网页添加图片和超链接
今天,我学习了如何给网页添加图片和超链接,学习html越多,我就可以给网页增添越多的元素,就像我精心培育的一篇花圃,今天迎进紫罗兰,明天种下红玫瑰,学到越多的技能,我就越开心,越期待春风拂过惺忪的大地,它们争先恐后伸展腰肢、绽放缤纷色彩的时刻。只是,这正值寒冬腊月,我暂且将这期待深藏内心,夜以继日收集种子,待春日烂漫,迎一片色彩绚烂。
1.如何给网页插入图片
有了图片,整个网页也变得多彩起来。我们知道图片有很多格式,但是并不是所有格式的图片都能插入到网页中去。只有jpg(jpeg)、png、gif、bmp等格式能插入网页,而psd、ai格式的图片却不能插入。
HTML页面不是直接插入图片,而是插入图片的引用地址,所以要把图片上传到服务器上。我们使用<img/>标签插入图片。
其基本语法如下:
<img src="11ha.jpg" alt="小女孩" />
img是英语image“图片”的简写。
src 是英语source“资源”的简写。
src是img标签的属性,hahaha.jpg是这个属性的值。
前面我们也说过,<img/>标签是一个自闭合标签,这是因为图片就是一个图片,不需要给什么文字增加语义,所以只用单标签就行。
alt也是img标签的属性,是英语alternate“替代”的意思,当这个图片无法显示的时候,出现的替代文字。
* 相对路径和绝对路径
HTML中插入图片,所以现在有两个文件,一个html文件,一个是jpg文件。绝对路径就是文件的真正存在的路径,是指从硬盘的根目录(盘符)开始,进行一级级目录指向文件,以http开头的链接都是绝对路径。
我们关心的就是这两个文件的相对位置,即相对路径,即使这个网站项目,被用u盘拷给了别人,只要相对路径不变,图片一定能够正常显示。
当图片的位置和html文件在同一个文件夹里时:
<img src="11ha.jpg" alt="小女孩" />
当图片在image文件夹里时:
src="data:image/11ha.jpg" alt="小女孩" />
如果在image里很深的文件夹,也可以一直罗列下去:
<img src="data:image/renwu/11ha.jpg" alt="小女孩" />
如果html文件在比图片深一层的文件夹里:
<img src="../11ha.jpg" alt="小女孩" />
如果html文件在比图片深两层的文件夹里,就在前面再罗列两个点“..”,深几层罗列几次。
<img src="../../11ha.jpg" alt="小女孩" />
更复杂的:
<img src="../../image/renwu/11ha.jpg" alt="小女孩" />
指的是图片在html文件上两级image文件夹中的renwu文件夹里。
2.如何给网页插入超链接
前面我们也说过,HTML之所以叫做“超文本标记语言”主要是因为它可以通过超链接的形式与web网络互连互通,可以实现在不同空间的所有文档都通过超链接的方式保存进一个文本文档。这么看来,超链接是网页的灵魂。给网页插入插连接的基本语法如下:
<a href="1.html" title="悬停文本" target="_blank" name="girl">小女孩简介</a>
a是英语anchor“锚”的意思,就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href是英语hypertext reference超文本地址的缩写。
title是悬停文本,当鼠标点在超链接上时,出现的提示文字。
target实际上是“目标”,属性意思是是否在新窗口打开。blank就是“空白”的意思,就表示新建一个空白窗口。如果不写target=”_blank”那么就是默认在相同的标签页打开。
name属性来用来设置锚点,一个a标签如果name属性(或者id属性),那么就是页面的一个锚点。
如果有一个超级链接,指向页面中的锚点,那么就是:
<a href="#锚点名称">小女孩</a>
这样我们就可以制作有图片的简单网页啦,代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head><meta http-equiv="Content-Type" content="text/html;charset=UTF-8"><title>小女孩的故事</title>
</head>
<body><h1>小女孩的故事</h1><p>这是一个可爱的小女孩,她看起来美丽大方,自信从容,温暖随和,睿智进取。当我看到她第一眼的时候,我就觉得她就是我想成为的样子,于是我就用她来做我自己的头像了。</p><a href="http://blog.csdn.net/sinat_34647836/article/details/54237582">小女孩简介</a><img src="11ha.jpg" alt="小女孩" />
</body>
</html>
下面,我们用浏览器打开,看一下效果如何吧:
哎呦~不错哦~点击黄色高亮的标签可以再次进入本片文章主页,瞬间有点像个网页了有木有,实际上这个网页离真正的网页还差很多,我们不急不躁,脚踏实地地学吧。下篇博客,我将学习如何制作列表和表单,敬请关注哦~感谢大家的支持~~
HTML学习笔记4:如何给网页添加图片和超链接相关推荐
- Flask学习笔记(四):基于Flask网页显示图片
原图如下 代码如下 from flask import Flask, request, make_response from datetime import datetime import osapp ...
- 分享:Django学习笔记(4)---ManyToMany 添加、删除关联、查询
Django学习笔记(4)---ManyToMany 添加.删除关联.查询 http://my.oschina.net/u/572994/blog/105280
- Python学习笔记:爬取网页图片
Python学习笔记:爬取网页图片 上次我们利用requests与BeautifulSoup爬取了豆瓣<下町火箭>短评,这次我们来学习爬取网页图片. 比如想爬取下面这张网页的所有图片.网址 ...
- 学习笔记:VB.net动态添加控件数组并传递事件
学习笔记:VB.net动态添加控件数组并传递事件 控件数组和事件 "中间人" 动态添加控件 控件数组和事件 新建一个用户窗体,在定义控件数组时,不能用Withevnets来定义数组 ...
- SpringMVC:学习笔记(10)——整合Ckeditor且实现图片上传
SpringMVC:学习笔记(10)--整合Ckeditor且实现图片上传 配置CKEDITOR 精简文件 解压之后可以看到ckeditor/lang下面有很多语言的js,如果不需要那么多种语言的,可 ...
- opencv学习笔记(六)直方图比较图片相似度
opencv学习笔记(六)直方图比较图片相似度 opencv提供了API来比较图片的相似程度,使我们很简单的就能对2个图片进行比较,这就是直方图的比较,直方图英文是histogram, 原理就是就是将 ...
- 为网页添加列表和超链接——精美电商悬浮窗
为网页添加列表和超链接--精美电商悬浮窗 无序列表: <ul> <li>-</li> <li>-</li> -- </ul> 有 ...
- 为网页添加列表和超链接—二维码名片
为网页添加列表和超链接-二维码名片 定义列表 <dl> <dt>名词</dt>(图片) <dd>名词解释1</dd>(h2,h3,p) &l ...
- Unity3D学习笔记之九为场景添加细节(二)
上节为场景中添加了第一块带有碰撞器的石头,本节我们来利用Prefab,将场景细节都添加进去,并且做的更完善. 这一系列教程以及素材均参考自人人素材翻译组出品的翻 ...
最新文章
- gitee项目能用SVN拉取吗_用好 Git 和 SVN,轻松驾驭版本管理
- gis影像格式img转为ecw_微图影像地图导出拼接大图的参数说明
- 从源代码角度分析ViewStub 疑问与原理
- Mxnet的.lst文件介绍
- Confluence与Jira整合之统一用户管理
- gsettings命令使用简介
- [php] 高级教程
- Swift学习笔记 闭包表达式
- 给刚博士毕业的年轻学者9点建议,最后一条:抓紧结婚,生娃!
- sigaction介绍
- 编译源码时出现 Checking API: checkapi-last (unknown): error 17解决方法
- HoudahSpot 6.2 for Mac文件搜索软件
- Python web实时消息服务器后台推送技术方案---GoEasy
- CAD工具——导出JPG
- 计算机病毒与木马的区别,计算机病毒和木马的区别
- 浏览器工作原理和实践
- WDF队列分析(3)
- MySQL服务器的超级管理员名称是_mysql服务器忘记了超级管理员root密码
- 技术问答-26 线程的状态 新建 准备 运行 休眠 停止
- vue 之手机号验证、正则验证手机号是否正确、手机号验证码信息弹窗