网页开发基础-----图片与超链接

简介: 网页开发基础-----图片与超链接

以下是今天的总结:

1.

img 元素可以为网页插入一张图片,它是一个由单标签组成的行内元素。

也就是说,它只包含开始标签,且多个元素可以在同一行显示。

img全称:image - 图像。

2.

src 属性用于记录图片所在的文件位置,浏览器可以通过该地址找到要使用的图片,

src全称:source - 来源。

3.

alt 属性用来记录一段文字。

当浏览器未能找到图片时,alt中的内容会代替图片显示在网页中。

alt全称:alternate - 代替的.

4.

网页中的图片默认以原始大小显示。当图片过大时,屏幕无法完整显示图片内容。

此时,你可以通过width属性和height属性,设置图片的宽度和高度。

属性的值为数字+像素单位(px),如100px

5.

相同的文件夹

当图片与HTML文档在同一个文件夹时,图片地址的格式如下:./文件名称.文件类型

可简写为文件名称.文件类型

其中.代表文档所在的文件夹,/用来分割文件夹与文件的名称。

6.

图片数量较多时,我们可以将所有图片放在同一个文件夹中,并将该文件夹与html文档放在一起。

此时,文件夹中的图片地址格式如下:

文件夹名称/文件名称.文件类型

7.

超链接(或简称链接),是指从一个网页指向另一个目标的连接关系。

超链接就像网页中的传送门,只需轻轻一点,就能带你进入另一个网站。

8.

<a>标签表示一个超链接,它是一个双标签,内容以</a>结束。

与<img>相同,它是一个行内元素。

全称:anchor - 锚.

9.

href属性用来设定链接的目标地址。

与src属性不同的是,src 只可以设置图片文件的地址;

而href属性中的地址可以包含:

1、另一个网页;


2、网页中的某个元素;

3、一张图片;

4、一个JS程序;

...例如右边的代码,将href设置为“aboutme.html”的地址。

全称:Hypertext Reference - 引用超文本.

当 href属性中的地址无效时,浏览器通常会显示404页面,表示文件不存在.

10.

当超链接被点击时,浏览器默认直接从当前页面进入目标页面。

利用target属性可以修改这项规则。

该属性常用的值有两种:

_blank,浏览器会在新的页面中打开文档;

_self,浏览器会在当前页面打开文档(默认)。注意单词前的下划线_

相关文章
|
3天前
|
前端开发
web前端开发-----CSS样式设置
web前端开发-----CSS样式设置
35 0
|
8月前
|
JavaScript
jQuery 动态输入文字展示效果
jQuery 动态输入文字展示效果
55 0
|
前端开发 JavaScript
炫酷动态特效HTML实现源码【完整源码分享】
炫酷动态特效HTML实现源码【完整源码分享】
炫酷动态特效HTML实现源码【完整源码分享】
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式
152 0
|
前端开发
【前端三件套-HTML】图片,音频,视频,表格案例
【前端三件套-HTML】图片,音频,视频,表格案例
85 0
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
116 0
那些酷炫的网页你也可以做到——第四篇(HTML图片标签和超链接标签)
那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)
那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)
128 0
那些酷炫的网页你也可以做到——第三篇(HTML字体列表标签)
|
前端开发 JavaScript Web App开发
如何用纯 CSS 创作一个打开内容弹窗的交互动画
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/GYXvez 可交互视频 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1291 0
|
前端开发 JavaScript Web App开发
如何用纯 CSS 创作一种有削铁如泥感觉的菜单导航特效
效果预览 在线演示 按下右侧的“点击预览”按钮可以在当前页面预览,点击链接可以全屏预览。 https://codepen.io/comehope/pen/XqYroe 可交互视频教程 此视频是可以交互的,你可以随时暂停视频,编辑视频中的代码。
1058 0