Web入门(3)

简介: Web入门(3)

一、插入图片

(1)简单的试下

一个网站中最引人注目的一定是那些图片,而不是文字,那么如何在我们自己的网站中插入图片呢?

很简单,使用img标签便可以实现,要注意的是这是一个单标签,插入图片我们可以写作

<img src="图片名(图片地址)">

<img src="3.webp" alt="山" title="3" width="300" height="300">

譬如这串代码它就可以展现出一个名叫3.webp的图片在我们的网站上

注意:这个3.webp(或者别的你想在网站上输出的图片)文件要通过如上图方式输出首先得满足的条件就是这个文件得是跟你的网站放置在一个文件夹中你才可以通过这种方式(相对路径)去访问它,

后面会详述三种图片路径。

其中alt的作用是在图片打不开的时候显示的内容,如图所示:

title的作用则是让我们在用光标触摸图片的时候显示的提示内容

截图时光标消失了,但这里是有光标的)

 

widthheight分别代表了图片的宽度和高度,单位依然是像素(px)

将图片输出在我们自己的网站中

(2)图片路径详述

图片路径一共分为三种,绝对路径,相对路径,和网络路径

我们先讲简单的绝对路径,绝对路径是电脑盘符存储的具体路径,什么意思呢?举个例子

如图所示,我在这个文件夹中有一个图片是吧

那么我被我选择的那个D:\新建文件夹就是我们电脑盘符存储的具体路径,即绝对路径,我们可以通过这种方式访问它

<img src="D:\新建文件夹\1.jpg" alt="风景">

网络路径顾名思义就是通过网站来输出图片和绝对路径差不多

<img src="http://iwenwiki.com/api/newworld/images/n1.png" alt="111">

http://iwenwiki.com/api/newworld/images/n1.png这串网址可以打开一个图片,可以自己去试下

最后一种相对路径,这个就比较复杂一点,我先把访问方式给摆出来

子级访问:/       同级访问:./(可省略)     父级访问:../

什么是子级访问呢?很简单,比方说,一个文件夹中装着你设计的网站,和一张图片,图片又放入了另一个文件夹中,而网站没再放入别的文件夹中,这个时候图片相对于网站那就是子级关系


同级访问显而易见那便是并列的时候


父级访问便是网站位于文件夹中,而图片在文件夹外时


这么说有点抽象,如图所示,4.webp相对于Welconme.html就是一个子级关系,如果要访问它应该写作

    <img src="./test_6_23/4.webp" alt="4">
//这个alt="4"并不影响图片的输出,你也可以改成alt="10086",并不影响图片的正常输出

3.webp和Welcome.html则是同级关系,3.webp和World.html则是父级关系

二、超链接文本

我们在很多网站上都能够点击上面的有些内容实现跳转到其他网站,这便是超链接文本

标签为<a></a>这是个双标签<a href"完整的网站地址">(你想让读者看到的内容)</a>


注意:必须是完整的网站;你给读者看到的内容无论是文本还是图片,还是别的什么都是可以的


举个例子

    <a href="https://www.baidu.com">百度</a>

这串代码会呈现出这样的效果,我这里已经点击过了,因此程序的是紫色的,在没点击之前呈现的是蓝色的,当你把光标放置上去并长按,呈现红色。

 

好了,今天的分享到这儿就结束了,感谢你的阅读,祝各位友友前程似锦O(∩_∩)O

相关文章
|
17天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
238 91
|
17天前
|
前端开发
【前端web入门第四天】01 复合选择器与伪类选择器
本文档详细介绍了CSS中的复合选择器与伪类选择器。复合选择器包括后代选择器、子代选择器、并集选择器和交集选择器,能够更精确地定位和样式化元素。后代选择器用于选中某元素的所有后代,子代选择器仅选中直接子元素。并集选择器可为多个标签设置相同样式,而交集选择器则选中同时满足多个条件的元素。此外,还介绍了伪类选择器,如鼠标悬停效果和超链接的不同状态。
50 32
【前端web入门第四天】01 复合选择器与伪类选择器
|
17天前
|
前端开发 数据安全/隐私保护
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
本文档详细介绍了HTML表单的多种元素及其用法,包括下拉菜单(`&lt;select&gt;` 和 `&lt;option&gt;`)、文本域(`&lt;textarea&gt;`)、标签解释(`&lt;label&gt;`)、各类按钮(`&lt;button&gt;`)及表单重置功能、无语义布局标签(`&lt;div&gt;` 和 `&lt;span&gt;`)以及字符实体的应用。此外,还提供了一个完整的注册信息表单案例,涵盖个人信息、教育经历和工作经历等部分,展示了如何综合运用上述元素构建实用的表单。
【前端web入门第二天】03 表单-下拉菜单 文本域 label标签 按钮 【附注册信息综合案例】
|
17天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
49 28
|
2天前
|
前端开发 开发者 Python
从零到一:Python Web框架中的模板引擎入门与进阶
在Web开发的广阔世界里,模板引擎是连接后端逻辑与前端展示的重要桥梁。对于Python Web开发者而言,掌握模板引擎的使用是从零到一构建动态网站或应用不可或缺的一步。本文将带你从基础入门到进阶应用,深入了解Python Web框架中的模板引擎。
11 3
|
19天前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
42 19
|
17天前
|
前端开发 JavaScript
【前端web入门第三天】01 css定义和引入方式 四种标签选择器
本文档详细介绍了CSS的基础知识及其应用。内容涵盖了CSS的定义、CSS在HTML中的引入方式,包括内部样式表、外部样式表及行内样式表的使用场景与方法。此外,还深入解析了不同种类的选择器:标签选择器、类选择器、ID选择器以及通配符选择器的功能与应用场景,并提供了实例帮助理解。最后,通过具体的新属性示例,指导如何使用这些选择器来实现基本的盒子绘制。适合初学者系统学习CSS。
34 15
|
19天前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
32 13
|
16天前
|
前端开发
【前端web入门第五天】03 清除默认样式与外边距问题【附综合案例产品卡片与新闻列表】
本文档详细介绍了CSS中清除默认样式的方法,包括清除内外边距、列表项目符号等;探讨了外边距的合并与塌陷问题及其解决策略;讲解了行内元素垂直边距的处理技巧;并介绍了圆角与盒子阴影效果的实现方法。最后通过产品卡片和新闻列表两个综合案例,展示了所学知识的实际应用。
28 11
|
16天前
|
前端开发