HTML入门5

article/2025/10/1 13:39:45

1.插入图像

图像标签

在 HTML 中,图像由 <img> 标签定义。语法为:

<img src="url" alt="" />

<img> 是空标签,它只包含属性,没有闭合标签。要在页面上显示图像,你需要使用源属性(src)。src 的值是图像文件的 URL,也就是引用该图像的文件的的绝对路径或相对路径。alt 规定图像的替代文本即当图片未成功显示的时候显示的文本信息。title 设置鼠标悬停时显示的内容(一般不用设置)。此外还可以通过设置 width 和 height 的值来设置图片的宽和高。

例子:

<imgsrc="https://labfile.oss.aliyuncs.com/courses/1236/coder.jpg"alt="程序员"title="你好啊"width="700px"height="600px"
/>

相对路径

这种路径是以引用文件的网页所在位置为参考基础,而建立出的目录路径。因此,当保存于不同目录的网页引用同一个文件时,所使用的路径将不相同,故称之为相对路径。

  • 图像文件和 HTML 文件位于同一文件夹:只需输入图像文件的名称即可,比如:<img src="syl.png" />
  • 图像文件位于 HTML 文件的下一级文件夹:输入文件夹名和文件名,之间用/隔开,比如:<img src="img/img1/syl.png" />
  • 图像文件位于 HTML 文件的上一级文件夹:在文件名之前加入../ ,如果是上两级,则需要使用 ../ ../,以此类推,比如:<img src="../syl.png" />

绝对路径

指当所有网页引用同一个文件时,所使用的路径都是一样的。比如D:\webStudy\img\syl.png或者 https://labfile.oss.aliyuncs.com/courses/1236/syl.png

2.框架的使用

使用框架,你可以在同一个浏览器窗口中显示不止一个页面。

语法:

<iframe src="URL"><!-- URL指向不同的页面 -->
</iframe>

iframe - 设置高度与宽度

属性默认以像素为单位,但是你可以指定其按比例显示 (如:"60%")。

<iframe src="https://www.lanqiao.cn/" width="400" height="400"></iframe>

正在上传…重新上传取消

iframe - 移除边框

frameborder 属性用于定义 iframe 表示是否显示边框。设置属性值为 "0" 移除 iframe 的边框:

<iframesrc="https://www.lanqiao.cn/"width="400"height="400"frameborder="0"
></iframe>

使用 iframe 来显示目标链接页面

iframe 可以显示一个目标链接的页面,目标链接的属性必须使用 iframe 的属性。

<p><a href="https://www.lanqiao.cn/" target="shiyanlou">实验楼</a></p>
<iframe width="400" height="400" name="shiyanlou"></iframe>

注: 因为 a 标签的 target 属性是名为 shiyanlou 的 iframe 框架,所以在点击链接时页面会显示在 iframe 框架中。需要保证 iframe 框架的 name 属性的名称与 a 标签的 target 属性名一致。

 


http://chatgpt.dhexx.cn/article/uYIfxrEf.shtml

相关文章

HTML5的入门教程

文章目录 1. 什么是HTML 5&#xff1f;2. HTML 5的组成3.HTML 5可以实现的事情4. HTML 5的开发工具5.editplus的安装简单介绍6.EditPlus 5的一些简单操作 在学习HTML 5之前&#xff0c;我们首先要知道这是什么&#xff1f;能实现什么作用&#xff1f;下面我们开始了解什么是HTM…

HTML5 入门( 一)

HTML5 入门&#xff08; 一&#xff09; html5简介新特征HTML5 的一些改进HTML5 的多媒体 注释&#xff1a;基础标题HTML 段落HTML 链接 一个简单的代码例子 html5简介 HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的下一代标准&#xff0c;是构建以及呈现互联网内容…

H5开发入门

一、开发工具&#xff1a;WebStorm 二、创建项目&#xff1a; 1.选择文件保存路径。 2.创建项目文件夹。 三、子目录创建 1.创建imgs文件夹&#xff0c;用于存放图片资源。 2.创建css文件夹&#xff0c;用于存放css文件。 3.创建js文件夹&#xff0c;用于存放js文件。 …

HTML5基础(五)零基础入门 (上)

上一篇笔记记录了元素分组&#xff0c;文章链接&#xff1a;http://blog.csdn.net/flytosky_l/article/details/70313500 这里&#xff0c;接着做HTML5的基础知识-表格元素&#xff0c;(新建一个文件名为index.html&#xff0c;在文件目录 code下) 表格元素&#xff0c;HTML5元…

10分钟HTML5入门基础知识(一)

毫无疑问&#xff0c;对于开发人员而言&#xff0c; HTML5 已是一个热点话题。如果你需要快速了解HTML5的功能的基本原理&#xff0c;阅读本文是你最好的选择。 本文来自The Code Project的付费搜索位置&#xff0c;由Solution Center提供。这里的文章致力于向大家提供我们认…

前端入门【HTML5】

学习目标 能够使用idea创建html文档 能够使用h1~h6,hr,p,br等与文本有关的标签 能够使用有序列表ul-li和无序列表ol-li显示列表内容 能够使用块级标签div与内联标签span 能够使用图片img标签把图片显示在页面中 能够使用超链接a标签实现页面跳转 能够使用table&#xff0c;tr&…

HTML5--入门介绍

网站的建站流程 页面图例 http://weixin.qq.com/r/p0yguLDEUu0trfTb9xm1 (二维码自动识别) 网页的结构 WEB标准 WEB标准是网页制作的标准&#xff0c;它不是一个标准&#xff0c;它是根据网页的不同组成部分生成的一系列标准。这些标准大部分由W3C起草发布&#xff0c;也有部…

HTML5入门

文章目录 新增元素与属性新增元素optimum &#xff0c;high&#xff0c;low值&#xff1a;总结&#xff1a;value和optimum在同一区间&#xff1a;显示绿色&#xff1b;value和optimum相差一区间&#xff1a;显示黄色&#xff1b;value和optimum相差两区间&#xff1a;显示红色…

html5基础入门知识(干货)

一.什么是html 用来描述网页的语言、超文本标记语言、不是编程&#xff0c;而是一种标记语言、使用标记标签来描述网页等等... 我们只需记住html就是用标记标签来描述网页&#xff0c;&#xff08;网页是前端哦&#xff0c;平时你们听过的c、c、java之类的你们是看不着的&#…

HTML5基础之代码入门

之前一直在修改现成的项目&#xff0c;学习的内容也是现学现用&#xff0c;没有很系统的学习&#xff0c;这次决定发一些时间&#xff0c;系统的学习&#xff0c;以便充实自己的前端知识&#xff0c;也想提升自己的前端技术。 今天总结的是HTML5基础的第一部分代码入门&#xf…

h5(html5)入门

h5(html5)基础入门 学习目标 目标&#x1f396;️&#xff1a; 学习PC端网站布局&#xff0c;最终网站&#xff1a;品优购静态网站精通网页布局&#xff0c;也是我们前端人员必备的技能&#xff0c;为后面学习 Javascript 打下坚实基础 资源网站&#x1f310;&#xff1a; …

HTML5(入门)

目录 一、HTML5概念和基本的结构 二、基本标签学习 三、图像标签 四、连接标签 五、列表标签 ​ 六、表格标签 table 七、媒体标签 ​ 八、网页结构 ​ 九、内联框架 iframe 十、表单标签 form ​ 十一、初级验证: 一、HTML5概念和基本的结构 1.概念&#xff1…

Javascript知识【jQuery:数组遍历和事件】

&#x1f482; 个人主页: 爱吃豆的土豆&#x1f91f; 版权: 本文由【爱吃豆的土豆】原创、在CSDN首发、需要转载请联系博主&#x1f4ac; 如果文章对你有帮助、欢迎关注、点赞、收藏(一键三连)和订阅专栏哦 &#x1f3c6;人必有所执&#xff0c;方能有所成&#xff01; &#x…

jq数组赋值 java,jquery 遍历数组赋值的问题?

慕容708150 /** * 好好看下jQuery文档吧 * see https://api.jquery.com/each/#each-function */var tdVals trs.parents(tr).children(td);var inputVals $(.con-detail input[typetext]);$(tdVals).each(function(index, td){ // td是DOM, index是索引 if(!(index < 1…

linux jq 遍历数组,jquery怎么遍历数组?

jquery怎么遍历数组&#xff1f;下面本篇文章就来给大家介绍一下使用jquery遍历数组的几种方法。有一定的参考价值&#xff0c;有需要的朋友可以参考一下&#xff0c;希望对大家有所帮助。 1、for循环&#xff1a;var arr new Array(13.5,3,4,5,6); for(var i0;i arr[i] arr[…

jQuery遍历数组

jQuery遍历数组 数组遍历&#xff1a; 在JS中&#xff0c;我们使用普通for循环即可遍历数组。 在jQuery中&#xff0c;我们可以使数组的遍历变得更为简单&#xff08;使用for遍历&#xff0c;取出的元素为js对象而非jQuery对象&#xff09; 属性名 属性说明 JQ数组.each(fn…

window系统 任务计划程序

如何让系统定时启动某个任务&#xff0c;执行某个脚本&#xff0c;window系统的任务计划程序功能就可以实现&#xff0c;操作步骤如下&#xff1a; 1.打开程序“任务计划程序”&#xff0c;在window系统搜索程序中搜索该程序即可&#xff0c;或者在控制面板中寻找。程序页面截…

windows设置定时任务(win10任务计划程序)

熟悉Linux的朋友应该都知道有自带的crontab定时器,其实在windows中也有定时器这一说。可以设置定时启动某个程序,运行某个软件。老系叫触发器,win10系统以后叫【任务计划程序】,这里博主以每天9点定时启动notepad++软件为例给大家细细道来。 1.搜索框搜索【任务计划程序】…

Windows 任务计划程序操作之起始于

起始于这个操作在windows 计划任务的设置里是个可选项&#xff0c;所以我们在操作的时候一般都忽略了他&#xff0c;但就因为咱们的忽略就会导致错误的发生。 比如我的定时任务程序中需要用到一个文件&#xff0c;在读的时候就会报未能找到文件“C:\Windows\system32\xxx,又或者…

windows中的定时任务--任务计划程序

一定要理解进程的概念 开机自启有多种方式来实现 注册表开启启动项. 计算机\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Run 菜单里面快捷方式 写入服务 加入任务计划程序